Fix: postcss loader warning

2025-07-18 14:01:56 +08:00 · 2021-01-02 15:23:53 +08:00 · 2021-01-02 15:23:53 +08:00 · 724ca8afca
commit 724ca8afca
parent d569667736
3 changed files with 137 additions and 92 deletions
--- a/config/webpack.config.js
+++ b/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 safePostCssParser = require('postcss-safe-parser');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 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
-            // https://github.com/facebook/create-react-app/issues/2677
-            ident: 'postcss',
-            plugins: () => [
+            plugins: [
              require('postcss-flexbugs-fixes'),
-              require('postcss-preset-env')({
-                autoprefixer: {
-                  flexbox: 'no-2009',
+              [
+                require('postcss-preset-env'),
+                {
+                  autoprefixer: {
+                    flexbox: 'no-2009',
+                  },
+                  stage: 3,
                },
-                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,11 +273,9 @@ module.exports = function (webpackEnv) {
          sourceMap: shouldUseSourceMap,
        }),
        // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
+        new CssMinimizerPlugin({
+          sourceMap: shouldUseSourceMap
+            ? {
                // `inline: false` forces the sourcemap to be output into a
                // separate file
                inline: false,
@ -286,9 +283,8 @@ module.exports = function (webpackEnv) {
                // the css file, helping the browser find the sourcemap
                annotation: true,
              }
-              : false,
-          },
-          cssProcessorPluginOptions: {
+            : false,
+          minimizerOptions: {
            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,
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",