fix(bundler): allow CSS nesting by default, restore postcss-preset-env (

#10680)
facebook · Nov 15, 2024 · 33a35a4 · 33a35a4
1 parent 2b8ddb9
commit 33a35a4
Show file tree

Hide file tree

Showing 4 changed files with 650 additions and 20 deletions.
diff --git a/packages/docusaurus-bundler/package.json b/packages/docusaurus-bundler/package.json
@@ -24,7 +24,6 @@
     "@docusaurus/logger": "3.6.1",
     "@docusaurus/types": "3.6.1",
     "@docusaurus/utils": "3.6.1",
-    "autoprefixer": "^10.4.14",
     "babel-loader": "^9.2.1",
     "clean-css": "^5.3.2",
     "copy-webpack-plugin": "^11.0.0",
@@ -37,6 +36,7 @@
     "null-loader": "^4.0.1",
     "postcss": "^8.4.26",
     "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^10.1.0",
     "react-dev-utils": "^12.0.1",
     "terser-webpack-plugin": "^5.3.9",
     "tslib": "^2.6.0",

diff --git a/packages/docusaurus-bundler/src/loaders/styleLoader.ts b/packages/docusaurus-bundler/src/loaders/styleLoader.ts
@@ -69,8 +69,13 @@ export async function createStyleLoadersFactory({
             // https://github.com/facebook/create-react-app/issues/2677
             ident: 'postcss',
             plugins: [
-              // eslint-disable-next-line global-require
-              require('autoprefixer'),
+              [
+                require.resolve('postcss-preset-env'),
+                {
+                  // Keeping this empty options object on purpose
+                  // It could be more convenient for configurePostCss() usage
+                },
+              ],
             ],
           },
         },

diff --git a/website/_dogfooding/dogfooding.css b/website/_dogfooding/dogfooding.css
@@ -5,26 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-html.plugin-docs.plugin-id-docs-tests .red > a {
-  color: red;
-}
+html {
+  @media screen and (min-width: 1px) {
+    &.plugin-docs.plugin-id-docs-tests {
+      .red > a {
+        color: red;
+      }
 
-html.plugin-docs.plugin-id-docs-tests .navbar {
-  border-bottom: solid thin cyan;
-}
+      .navbar {
+        border-bottom: solid thin cyan;
+      }
+    }
 
-html.plugin-blog.plugin-id-blog-tests .navbar {
-  border-bottom: solid thin lime;
-}
+    &.plugin-blog.plugin-id-blog-tests {
+      .navbar {
+        border-bottom: solid thin lime;
+      }
+    }
 
-html.plugin-pages.plugin-id-pages-tests .navbar {
-  border-bottom: solid thin yellow;
+    &.plugin-pages.plugin-id-pages-tests {
+      .navbar {
+        border-bottom: solid thin yellow;
+      }
+    }
+
+    &:has(#navbar-dropdown-tests) .navbar__item.dropdown ~ a {
+      display: none;
+    }
+  }
 }
 
 #z-index-test {
   z-index: 100;
 }
-
-html:has(#navbar-dropdown-tests) .navbar__item.dropdown ~ a {
-  display: none;
-}