Fix: postcss loader warning

config/webpack.config.js

@@ -10,8 +10,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-const safePostCssParser = require('postcss-safe-parser');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
@@ -117,24 +116,24 @@ module.exports = function (webpackEnv) {
         loader: require.resolve('postcss-loader'),
         options: {
           postcssOptions: {
-            // Necessary for external CSS imports to work
+            plugins: [
-            // https://github.com/facebook/create-react-app/issues/2677
-            ident: 'postcss',
-            plugins: () => [
               require('postcss-flexbugs-fixes'),
-              require('postcss-preset-env')({
+              [
+                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,
+          sourceMap: isEnvProduction && shouldUseSourceMap,
         },
       },
     ].filter(Boolean);
@@ -274,10 +273,8 @@ module.exports = function (webpackEnv) {
           sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
+        new CssMinimizerPlugin({
-          cssProcessorOptions: {
+          sourceMap: shouldUseSourceMap
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
             ? {
                 // `inline: false` forces the sourcemap to be output into a
                 // separate file
@@ -287,8 +284,7 @@ module.exports = function (webpackEnv) {
                 annotation: true,
               }
             : false,
-          },
+          minimizerOptions: {
-          cssProcessorPluginOptions: {
             preset: ['default', { minifyFontValues: { removeQuotes: false } }],
           },
         }),
@@ -708,6 +704,11 @@ module.exports = function (webpackEnv) {
         formatter: require.resolve('react-dev-utils/eslintFormatter'),
         eslintPath: require.resolve('eslint'),
         context: paths.appSrc,
+        cache: true,
+        cacheLocation: path.resolve(
+          paths.appNodeModules,
+          '.cache/.eslintcache'
+        ),
         // ESLint class options
         cwd: paths.appPath,
         resolvePluginsRelativeTo: __dirname,

package-lock.json

@@ -48,6 +48,7 @@
                 "camelcase": "^6.2.0",
                 "case-sensitive-paths-webpack-plugin": "2.3.0",
                 "css-loader": "^5.0.1",
+                "css-minimizer-webpack-plugin": "1.1.5",
                 "dotenv": "8.2.0",
                 "dotenv-expand": "5.1.0",
                 "eslint": "^7.17.0",
@@ -63,13 +64,11 @@
                 "html-webpack-plugin": "^4.5.0",
                 "identity-obj-proxy": "3.0.0",
                 "mini-css-extract-plugin": "^1.3.3",
-                "optimize-css-assets-webpack-plugin": "^5.0.4",
                 "pnp-webpack-plugin": "1.6.4",
                 "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",
                 "react-app-polyfill": "^2.0.0",
                 "react-dev-utils": "^11.0.1",
                 "react-refresh": "^0.9.0",
@@ -5099,6 +5098,75 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
+        "node_modules/css-minimizer-webpack-plugin": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-1.1.5.tgz",
+            "integrity": "sha512-mXgaoFjNpIudZfxD49N1aPtLxfXGJt+BVPVjQ+H66I48b5n4wJtFpYfffVr7izK8W6fD01J7K0kUcP6HGjw90w==",
+            "dev": true,
+            "dependencies": {
+                "cacache": "^15.0.5",
+                "cssnano": "^4.1.10",
+                "find-cache-dir": "^3.3.1",
+                "jest-worker": "^26.3.0",
+                "p-limit": "^3.0.2",
+                "schema-utils": "^3.0.0",
+                "serialize-javascript": "^5.0.1",
+                "source-map": "^0.6.1",
+                "webpack-sources": "^1.4.3"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "webpack": "^4.0.0 || ^5.0.0"
+            }
+        },
+        "node_modules/css-minimizer-webpack-plugin/node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+            "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+            "dev": true,
+            "dependencies": {
+                "@types/json-schema": "^7.0.6",
+                "ajv": "^6.12.5",
+                "ajv-keywords": "^3.5.2"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
+        "node_modules/css-minimizer-webpack-plugin/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/css-prefers-color-scheme": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
@@ -9647,16 +9715,6 @@
                 "language-subtag-registry": "~0.3.2"
             }
         },
-        "node_modules/last-call-webpack-plugin": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
-            "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==",
-            "dev": true,
-            "dependencies": {
-                "lodash": "^4.17.5",
-                "webpack-sources": "^1.1.0"
-            }
-        },
         "node_modules/levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -10902,19 +10960,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/optimize-css-assets-webpack-plugin": {
-            "version": "5.0.4",
-            "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz",
-            "integrity": "sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==",
-            "dev": true,
-            "dependencies": {
-                "cssnano": "^4.1.10",
-                "last-call-webpack-plugin": "^3.0.0"
-            },
-            "peerDependencies": {
-                "webpack": "^4.0.0"
-            }
-        },
         "node_modules/optionator": {
             "version": "0.9.1",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -14636,22 +14681,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/postcss-safe-parser": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz",
-            "integrity": "sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==",
-            "dev": true,
-            "dependencies": {
-                "postcss": "^8.1.0"
-            },
-            "engines": {
-                "node": ">=10.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
-            }
-        },
         "node_modules/postcss-selector-matches": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
@@ -24731,6 +24760,51 @@
                 }
             }
         },
+        "css-minimizer-webpack-plugin": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-1.1.5.tgz",
+            "integrity": "sha512-mXgaoFjNpIudZfxD49N1aPtLxfXGJt+BVPVjQ+H66I48b5n4wJtFpYfffVr7izK8W6fD01J7K0kUcP6HGjw90w==",
+            "dev": true,
+            "requires": {
+                "cacache": "^15.0.5",
+                "cssnano": "^4.1.10",
+                "find-cache-dir": "^3.3.1",
+                "jest-worker": "^26.3.0",
+                "p-limit": "^3.0.2",
+                "schema-utils": "^3.0.0",
+                "serialize-javascript": "^5.0.1",
+                "source-map": "^0.6.1",
+                "webpack-sources": "^1.4.3"
+            },
+            "dependencies": {
+                "p-limit": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+                    "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+                    "dev": true,
+                    "requires": {
+                        "yocto-queue": "^0.1.0"
+                    }
+                },
+                "schema-utils": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "dev": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.6",
+                        "ajv": "^6.12.5",
+                        "ajv-keywords": "^3.5.2"
+                    }
+                },
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+                    "dev": true
+                }
+            }
+        },
         "css-prefers-color-scheme": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
@@ -28357,16 +28431,6 @@
                 "language-subtag-registry": "~0.3.2"
             }
         },
-        "last-call-webpack-plugin": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
-            "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==",
-            "dev": true,
-            "requires": {
-                "lodash": "^4.17.5",
-                "webpack-sources": "^1.1.0"
-            }
-        },
         "levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -29381,16 +29445,6 @@
                 }
             }
         },
-        "optimize-css-assets-webpack-plugin": {
-            "version": "5.0.4",
-            "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz",
-            "integrity": "sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==",
-            "dev": true,
-            "requires": {
-                "cssnano": "^4.1.10",
-                "last-call-webpack-plugin": "^3.0.0"
-            }
-        },
         "optionator": {
             "version": "0.9.1",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -32186,15 +32240,6 @@
                 }
             }
         },
-        "postcss-safe-parser": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz",
-            "integrity": "sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==",
-            "dev": true,
-            "requires": {
-                "postcss": "^8.1.0"
-            }
-        },
         "postcss-selector-matches": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",

package.json

@@ -47,6 +47,7 @@
         "camelcase": "^6.2.0",
         "case-sensitive-paths-webpack-plugin": "2.3.0",
         "css-loader": "^5.0.1",
+        "css-minimizer-webpack-plugin": "1.1.5",
         "dotenv": "8.2.0",
         "dotenv-expand": "5.1.0",
         "eslint": "^7.17.0",
@@ -62,13 +63,11 @@
         "html-webpack-plugin": "^4.5.0",
         "identity-obj-proxy": "3.0.0",
         "mini-css-extract-plugin": "^1.3.3",
-        "optimize-css-assets-webpack-plugin": "^5.0.4",
         "pnp-webpack-plugin": "1.6.4",
         "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",
         "react-app-polyfill": "^2.0.0",
         "react-dev-utils": "^11.0.1",
         "react-refresh": "^0.9.0",