From cdb7ec0606a880687dc4db20a9e8982f4b9a1fe7 Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Wed, 27 Jan 2021 19:36:02 +0100
Subject: [PATCH 1/2] Revert "Revert "Update postcss packages" (#10216)"

This reverts commit 39689239c18a1d77fb303e285b26beb1a4b650c0.
---
 .../react-scripts/config/webpack.config.js    | 36 ++++++++++---------
 packages/react-scripts/package.json           |  7 ++--
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 502736ead11..bc95e661c4a 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -125,23 +125,25 @@ module.exports = function (webpackEnv) {
         // 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,
-            }),
-            // Adds PostCSS Normalize as the reset css with default options,
-            // so that it honors browserslist config in package.json
-            // which in turn let's users customize the target behavior as per their needs.
-            postcssNormalize(),
-          ],
-          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+          postcssOptions: {
+            plugins: [
+              require('postcss-flexbugs-fixes'),
+              [
+                require('postcss-preset-env'),
+                {
+                  autoprefixer: {
+                    flexbox: 'no-2009',
+                  },
+                  stage: 3,
+                },
+              ],
+              // Adds PostCSS Normalize as the reset css with default options,
+              // so that it honors browserslist config in package.json
+              // which in turn let's users customize the target behavior as per their needs.
+              postcssNormalize(),
+            ],
+          },
+          sourceMap: isEnvProduction && shouldUseSourceMap,
         },
       },
     ].filter(Boolean);
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index c7fe2920ed9..abed557c4e6 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -65,9 +65,10 @@
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
-    "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
+    "postcss": "8.1.14",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-loader": "4.1.0",
+    "postcss-normalize": "9.0.0",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "5.0.2",
     "prompts": "2.4.0",

From a5e4a167668bedd98335b686dd082f99375ae48c Mon Sep 17 00:00:00 2001
From: "Morten N.O. Henriksen" <mh@gi2.dk>
Date: Wed, 27 Jan 2021 20:03:04 +0100
Subject: [PATCH 2/2] Update postcss and loader

---
 packages/react-scripts/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index abed557c4e6..94c3bbed27e 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -65,9 +65,9 @@
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
-    "postcss": "8.1.14",
+    "postcss": "8.2.4",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "4.1.0",
+    "postcss-loader": "4.2.0",
     "postcss-normalize": "9.0.0",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "5.0.2",