feat(v2): autoprefix css

packages/docusaurus/package.json

@@ -56,6 +56,8 @@
     "null-loader": "^3.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "portfinder": "^1.0.21",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.6.0",
     "react-dev-utils": "^9.0.1",
     "react-helmet": "^6.0.0-beta",
     "react-loadable": "^5.5.0",

packages/docusaurus/src/webpack/base.ts

@@ -140,7 +140,7 @@ export function createBaseConfig(
           test: CSS_REGEX,
           exclude: CSS_MODULE_REGEX,
           use: getStyleLoaders(isServer, {
-            importLoaders: 0,
+            importLoaders: 1,
             sourceMap: !isProd,
           }),
         },
@@ -150,7 +150,7 @@ export function createBaseConfig(
           test: CSS_MODULE_REGEX,
           use: getStyleLoaders(isServer, {
             modules: true,
-            importLoaders: 0,
+            importLoaders: 1,
             localIdentName: `[local]_[hash:base64:8]`,
             sourceMap: !isProd,
             exportOnlyLocals: isServer,

packages/docusaurus/src/webpack/utils.ts

@@ -40,6 +40,24 @@ export function getStyleLoaders(
       loader: require.resolve('css-loader'),
       options: cssOptions,
     },
+    {
+      // Options for PostCSS as we reference these options twice
+      // Adds vendor prefixing based on your specified browser support in
+      // package.json
+      loader: require.resolve('postcss-loader'),
+      options: {
+        // Necessary for external CSS imports to work
+        // https://github.com/facebook/create-react-app/issues/2677
+        ident: 'postcss',
+        plugins: () => [
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+          }),
+        ],
+      },
+    },
   ].filter(Boolean) as Loader[];
   return loaders;
 }