diff --git a/config/webpack.config.js b/config/webpack.config.js index 4a882a6..a0f17df 100644 --- 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, diff --git a/package-lock.json b/package-lock.json index 1c9a786..f4224b2 100644 --- 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", diff --git a/package.json b/package.json index 9eaf5a2..1d8f25d 100644 --- 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",