added autoprefixer code with postcss loader

packages/docusaurus/package.json

@@ -58,6 +58,9 @@
     "null-loader": "^3.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "portfinder": "^1.0.20",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "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/utils.ts

@@ -39,6 +39,26 @@ 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-flexbugs-fixes'),
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+            stage: 3,
+          }),
+        ],
+      },
+    },
   ].filter(Boolean) as Loader[];
   return loaders;
 }

website/package.json

@@ -22,7 +22,7 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
+      "last 30 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]