From 8cc59ac2941d83c44586da6161bdecb6ca636955 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Tue, 26 Jan 2021 12:53:04 -0700
Subject: [PATCH 1/2] Upgrade postcss-loader, but stay on postcss 7

---
 .../react-scripts/config/webpack.config.js    | 31 +++++++++----------
 packages/react-scripts/package.json           |  3 +-
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 502736ead11..26d623bc9c9 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -125,22 +125,21 @@ 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(),
-          ],
+          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 : isEnvDevelopment,
         },
       },
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index c7fe2920ed9..1c6b593360c 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -66,7 +66,8 @@
     "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": "7.0.35",
+    "postcss-loader": "4.2.0",
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "5.0.2",

From aa4a52a044c8aa80eb2958d577e16897693fceb5 Mon Sep 17 00:00:00 2001
From: Blaine Bublitz <blaine.bublitz@gmail.com>
Date: Wed, 27 Jan 2021 12:05:58 -0700
Subject: [PATCH 2/2] fix: make postcssOptions the function

---
 packages/react-scripts/config/webpack.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 26d623bc9c9..58cc25e4310 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -125,8 +125,8 @@ module.exports = function (webpackEnv) {
         // package.json
         loader: require.resolve('postcss-loader'),
         options: {
-          postcssOptions: {
-            plugins: () => [
+          postcssOptions: () => ({
+            plugins: [
               require('postcss-flexbugs-fixes'),
               require('postcss-preset-env')({
                 autoprefixer: {
@@ -139,7 +139,7 @@ module.exports = function (webpackEnv) {
               // which in turn let's users customize the target behavior as per their needs.
               postcssNormalize(),
             ],
-          },
+          }),
           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
         },
       },