feat: minimize css when css experiment is enabled

lib/config/defaults.js

@@ -1351,6 +1351,12 @@ const applyOptimizationDefaults = (
 						}
 					}
 				}).apply(compiler);
+
+				// if css experiment is enabled, use css-minimizer-webpack-plugin
+				if (css) {
+					const CSSMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
+					new CSSMinimizerWebpackPlugin().apply(compiler);
+				}
 			}
 		}
 	]);

package.json

@@ -14,6 +14,7 @@
     "acorn-import-assertions": "^1.9.0",
     "browserslist": "^4.14.5",
     "chrome-trace-event": "^1.0.2",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "enhanced-resolve": "^5.14.1",
     "es-module-lexer": "^1.2.1",
     "eslint-scope": "5.1.1",

test/ConfigTestCases.template.js

@@ -96,7 +96,10 @@ const describeCases = config => {
 									options.optimization.minimizer = [
 										new (require("terser-webpack-plugin"))({
 											parallel: false
-										})
+										}),
+										...(options.experiments && options.experiments.css
+											? [new (require("css-minimizer-webpack-plugin"))()]
+											: [])
 									];
 								}
 								if (!options.entry) options.entry = "./index.js";

test/configCases/optimization/css-minimize/index.js

@@ -0,0 +1,10 @@
+import "./style.css";
+
+it("should compile", done => {
+	import("./style.css").then(x => {
+		expect(x).toEqual(nsObj({}));
+		const style = getComputedStyle(document.body);
+		expect(style.getPropertyValue("background")).toBe("red");
+		done();
+	}, done);
+});

test/configCases/optimization/css-minimize/style.css

@@ -0,0 +1,3 @@
+body {
+	background: red;
+}

test/configCases/optimization/css-minimize/test.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	moduleScope(scope) {
+		const link = scope.window.document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = "bundle0.css";
+		scope.window.document.head.appendChild(link);
+	}
+};

test/configCases/optimization/css-minimize/webpack.config.js

@@ -0,0 +1,35 @@
+const Compilation = require("../../../../").Compilation;
+const Source = require("webpack-sources").Source;
+
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	target: "web",
+	experiments: {
+		css: true
+	},
+	optimization: {
+		minimize: true
+	},
+	plugins: [
+		compiler => {
+			const files = {};
+			compiler.hooks.assetEmitted.tap(
+				"Test",
+				(file, { content, source, outputPath, compilation, targetPath }) => {
+					expect(Buffer.isBuffer(content)).toBe(true);
+					expect(source).toBeInstanceOf(Source);
+					expect(typeof outputPath).toBe("string");
+					expect(typeof targetPath).toBe("string");
+					expect(compilation).toBeInstanceOf(Compilation);
+					files[file] = content.toString("utf-8");
+				}
+			);
+			compiler.hooks.afterEmit.tap("Test", () => {
+				// css should be minimized
+				expect(files["bundle0.css"]).toMatchInlineSnapshot(
+					`"body{background:red}head{--webpack-179:_258}"`
+				);
+			});
+		}
+	]
+};