From 2ad1cc241994bd6a9a192fcb154f3b57fd6a4601 Mon Sep 17 00:00:00 2001
From: "jiangshihai@sisyphe.com.cn" <jiangshihai@sisyphe.com.cn>
Date: Fri, 5 Aug 2022 16:22:22 +0800
Subject: [PATCH] fix(customizers/webpack) error in loading postcss loader when
 using less in webpack 5

---
 src/customizers/webpack.js | 54 +++++++++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/customizers/webpack.js b/src/customizers/webpack.js
index 1002df4..5d278e9 100644
--- a/src/customizers/webpack.js
+++ b/src/customizers/webpack.js
@@ -143,6 +143,43 @@ export const addLessLoader = (loaderOptions = {}, customCssModules = {}) => conf
   const publicPath = config.output.publicPath;
   const shouldUseRelativeAssetPaths = publicPath === "./";
 
+  const { version } = require('webpack');
+  const webpackVersion = version.split(".")[0] * 1
+
+  const lessOptions = webpackVersion < 5 ? {
+    ident: "postcss",
+    plugins: () => [
+      require("postcss-flexbugs-fixes"),
+      require("postcss-preset-env")({
+        autoprefixer: {
+          flexbox: "no-2009"
+        },
+        stage: 3
+      }),
+      postcssNormalize()
+    ],
+    sourceMap: isEnvProduction && shouldUseSourceMap
+  } : {
+    postcssOptions: {
+      ident: 'postcss',
+      config: false,
+      plugins: [
+        'postcss-flexbugs-fixes',
+        [
+          'postcss-preset-env',
+          {
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+            stage: 3,
+          },
+        ],
+        'postcss-normalize',
+      ]
+    },
+    sourceMap: isEnvProduction && shouldUseSourceMap
+  }
+
   // copy from react-scripts
   // https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L93
   const getStyleLoaders = (cssOptions, preProcessor) => {
@@ -158,21 +195,8 @@ export const addLessLoader = (loaderOptions = {}, customCssModules = {}) => conf
       },
       {
         loader: require.resolve("postcss-loader"),
-        options: {
-          ident: "postcss",
-          plugins: () => [
-            require("postcss-flexbugs-fixes"),
-            require("postcss-preset-env")({
-              autoprefixer: {
-                flexbox: "no-2009"
-              },
-              stage: 3
-            }),
-            postcssNormalize()
-          ],
-          sourceMap: isEnvProduction && shouldUseSourceMap
-        }
-      }
+        options: lessOptions
+      },
     ].filter(Boolean);
     if (preProcessor) {
       loaders.push(