Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist (#11402)

* exclude `Features.LogicalProperties` lightningcss feature

We don't want this to automatically apply since we have dedicated
logical property based utilities already.

We also have a feature flag to toggle some utilities to make use of
logical property based ones.

This feature should be opt-in to prevent backwards compatibility (e.g.:
RTL sites that _did_ use a mr-4 explicitly).

* update default browserslist

* explicitly include/exclude Lightning CSS features

* update tests based on new browserslist and include/exclude features from Lightning CSS

* update integration tests

* prefer user browserslist, fallback to built-in browserslist

* always include Nesting

If a custom browserslist config is used, then we don't explicitly set
the include/exclude features from Lightning CSS (except for nesting, we
always want to process nesting)

* ensure to fallback to the current working directory

* update changelog

integrations/postcss-cli/tests/integration.test.js

@@ -137,7 +137,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -148,23 +148,23 @@ describe('watcher', () => {
     await writeInputFile(
       '../tailwind.config.js',
       javascript`
-          module.exports = {
-            content: ['./src/index.html'],
-            theme: {
-              extend: {
-                screens: {
-                  md: '800px'
-                },
-                fontWeight: {
-                  bold: 'bold'
-                }
+        module.exports = {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              screens: {
+                md: '800px'
               },
+              fontWeight: {
+                bold: 'bold'
+              }
             },
-            corePlugins: {
-              preflight: false,
-            },
-            plugins: [],
-          }
+          },
+          corePlugins: {
+            preflight: false,
+          },
+          plugins: [],
+        }
       `
     )
     await runningProcess.onStderr(ready)
@@ -174,7 +174,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (width >= 800px) {
+        @media (min-width: 800px) {
           .md\:font-medium {
             font-weight: 500;
           }