feature #966 Upgrade to css-minimize-webpack-plugin 2.0 (stof, weaver…

…ryan)

This PR was merged into the main branch.

Discussion
----------

Upgrade to css-minimize-webpack-plugin 2.0

This upgrades cssnano to version 5, which fixes a bunch of bugs and uses postcss 8 (avoiding to install multiple versions of postcss).
The BC breaks in the plugin are dropping support for webpack 4 (not impacted Encore as we already dropped it), removing some options which were only for webpack 4 and the fact that cssnano 5 requires node 10.13+ (not impacting Encore as we already require 10.19+)

Closes #965

Commits
-------

6afb5a3 cleaning up
dfe0262 bumping out-of-date lock file
ed39adf making a test more resistant to chunk id changes
3d31646 Bump min versions of dependencies
325bf18 Fix tests
4a533ee Upgrade to css-minimize-webpack-plugin 2.0
58bc358 Update locked dependencies

lib/plugins/optimize-css-assets.js

@@ -18,9 +18,7 @@ const applyOptionsCallback = require('../utils/apply-options-callback');
  * @return {object}
  */
 module.exports = function(webpackConfig) {
-    const minimizerPluginOptions = {
-        sourceMap: webpackConfig.useSourceMaps
-    };
+    const minimizerPluginOptions = {};
 
     return new CssMinimizerPlugin(
         applyOptionsCallback(webpackConfig.cssMinimizerPluginOptionsCallback, minimizerPluginOptions)

package.json

@@ -29,23 +29,23 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.10.0",
     "assets-webpack-plugin": "^7.0.0",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^8.2.2",
     "chalk": "^4.0.0",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.1.5",
+    "css-loader": "^5.2.4",
+    "css-minimizer-webpack-plugin": "^2.0.0",
     "fast-levenshtein": "^3.0.0",
-    "friendly-errors-webpack-plugin": "^2.0.0-beta.1",
+    "friendly-errors-webpack-plugin": "^2.0.0-beta.2",
     "loader-utils": "^2.0.0",
-    "mini-css-extract-plugin": "^1.0.0",
+    "mini-css-extract-plugin": "^1.5.0",
     "pkg-up": "^3.1.0",
     "pretty-error": "^3.0.3",
     "resolve-url-loader": "^3.1.2",
     "semver": "^7.3.2",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.1",
     "tmp": "^0.2.1",
-    "webpack": "^5.12",
+    "webpack": "^5.35",
     "webpack-cli": "^4",
     "webpack-dev-server": "^4.0.0-beta.0",
     "yargs-parser": "^20.2.4"

test/bin/encore.js

@@ -101,11 +101,12 @@ module.exports = Encore.getWebpackConfig();
             expect(parsedOutput).to.be.an('object');
             expect(parsedOutput.modules).to.be.an('array');
 
-            // We expect 3 modules there:
+            // We expect 4 modules there:
+            // - webpack/runtime/chunk loaded
             // - webpack/runtime/jsonp chunk loading
             // - webpack/runtime/hasOwnProperty shorthand
             // - ./js/no_require.js
-            expect(parsedOutput.modules.length).to.equal(3);
+            expect(parsedOutput.modules.length).to.equal(4);
 
 
             done();

test/functional.js

@@ -2661,23 +2661,23 @@ module.exports = {
                     splitChunks.minSize = 0;
                 });
 
-                testSetup.runWebpack(config, (webpackAssert) => {
+                testSetup.runWebpack(config, () => {
                     // in production, we hash the chunk names to avoid exposing any extra details
-                    webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
-                        entrypoints: {
-                            main: {
-                                js: ['/build/runtime.js', '/build/961.js', '/build/38.js', '/build/main.js'],
-                                css: ['/build/38.css']
-                            },
-                            other: {
-                                js: ['/build/runtime.js', '/build/961.js', '/build/38.js', '/build/other.js'],
-                                css: ['/build/38.css']
-                            }
-                        }
-                    });
+                    const entrypointsData = JSON.parse(readOutputFileContents('entrypoints.json', config));
+                    const mainJsFiles = entrypointsData.entrypoints.main.js;
+                    expect(mainJsFiles).to.have.length(4);
+                    expect(mainJsFiles[0]).equals('/build/runtime.js');
+                    // keys 1 and 2 are "split files" with an integer name that sometimes changes
+                    expect(mainJsFiles[3]).equals('/build/main.js');
+
+                    expect(entrypointsData.entrypoints.main.css[0]).matches(/\/build\/(\d)+\.css/);
 
                     // make split chunks are correct in manifest
-                    webpackAssert.assertManifestKeyExists('build/961.js');
+                    const manifestData = JSON.parse(readOutputFileContents('manifest.json', config));
+                    mainJsFiles.forEach((file) => {
+                        // file.substring(1) => /build/main.js -> build/main.js
+                        expect(Object.keys(manifestData)).includes(file.substring(1));
+                    });
 
                     done();
                 });