fix: error with contenthash and css experiment

alexander-akait · web-flow · commit 0d07d65b0197 · 2024-06-19T19:17:27.000+03:00
diff --git a/lib/css/CssModulesPlugin.js b/lib/css/CssModulesPlugin.js
@@ -368,24 +368,24 @@ class CssModulesPlugin {
 
 					/** @type {CssModule[] | undefined} */
 					const modules = orderedCssModulesPerChunk.get(chunk);
-					const { path: filename, info } = compilation.getPathWithInfo(
-						CssModulesPlugin.getChunkFilenameTemplate(
-							chunk,
-							compilation.outputOptions
-						),
-						{
-							hash,
-							runtime: chunk.runtime,
-							chunk,
-							contentHashType: "css"
-						}
-					);
-					const undoPath = getUndoPath(
-						filename,
-						compilation.outputOptions.path,
-						false
-					);
 					if (modules !== undefined) {
+						const { path: filename, info } = compilation.getPathWithInfo(
+							CssModulesPlugin.getChunkFilenameTemplate(
+								chunk,
+								compilation.outputOptions
+							),
+							{
+								hash,
+								runtime: chunk.runtime,
+								chunk,
+								contentHashType: "css"
+							}
+						);
+						const undoPath = getUndoPath(
+							filename,
+							compilation.outputOptions.path,
+							false
+						);
 						result.push({
 							render: () =>
 								this.renderChunk({
diff --git a/test/configCases/css/contenthash/async.css b/test/configCases/css/contenthash/async.css
@@ -0,0 +1,4 @@
+body {
+	background: yellow;
+	color: green;
+}
diff --git a/test/configCases/css/contenthash/async.js b/test/configCases/css/contenthash/async.js
@@ -0,0 +1 @@
+export const name = 'async';
diff --git a/test/configCases/css/contenthash/index.js b/test/configCases/css/contenthash/index.js
@@ -0,0 +1,28 @@
+import * as style from "./style.css";
+
+it("should work with js", done => {
+	import('./async.js').then(x => {
+		expect(x.name).toBe("async")
+		done();
+	}, done);
+});
+
+it("should work with css", done => {
+	expect(style).toEqual(nsObj({}));
+
+	const computedStyle = getComputedStyle(document.body);
+
+	expect(computedStyle.getPropertyValue("background")).toBe(" green");
+	expect(computedStyle.getPropertyValue("color")).toBe(" yellow");
+
+	import("./async.css").then(x => {
+		expect(x).toEqual(nsObj({}));
+
+		const style = getComputedStyle(document.body);
+
+		expect(style.getPropertyValue("background")).toBe(" yellow");
+		expect(style.getPropertyValue("color")).toBe(" green");
+
+		done();
+	}, done);
+});
diff --git a/test/configCases/css/contenthash/style.css b/test/configCases/css/contenthash/style.css
@@ -0,0 +1,4 @@
+body {
+	background: green;
+	color: yellow;
+}
diff --git a/test/configCases/css/contenthash/test.config.js b/test/configCases/css/contenthash/test.config.js
@@ -0,0 +1,49 @@
+const fs = require("fs");
+
+let cssBundle;
+
+module.exports = {
+	findBundle: function (_, options) {
+		const jsBundleRegex = new RegExp(/^bundle\..+\.js$/, "i");
+		const cssBundleRegex = new RegExp(/^bundle\..+\.css$/, "i");
+		const asyncRegex = new RegExp(/^async\..+\.js$/, "i");
+		const files = fs.readdirSync(options.output.path);
+		const jsBundle = files.find(file => jsBundleRegex.test(file));
+
+		if (!jsBundle) {
+			throw new Error(
+				`No file found with correct name (regex: ${
+					jsBundleRegex.source
+				}, files: ${files.join(", ")})`
+			);
+		}
+
+		const async = files.find(file => asyncRegex.test(file));
+
+		if (!async) {
+			throw new Error(
+				`No file found with correct name (regex: ${
+					asyncRegex.source
+				}, files: ${files.join(", ")})`
+			);
+		}
+
+		cssBundle = files.find(file => cssBundleRegex.test(file));
+
+		if (!cssBundle) {
+			throw new Error(
+				`No file found with correct name (regex: ${
+					cssBundleRegex.source
+				}, files: ${files.join(", ")})`
+			);
+		}
+
+		return [jsBundle, async];
+	},
+	moduleScope(scope) {
+		const link = scope.window.document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = cssBundle;
+		scope.window.document.head.appendChild(link);
+	}
+};
diff --git a/test/configCases/css/contenthash/webpack.config.js b/test/configCases/css/contenthash/webpack.config.js
@@ -0,0 +1,14 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	target: "web",
+	mode: "development",
+	output: {
+		filename: "bundle.[name].[contenthash].js",
+		cssFilename: "bundle.[name].[contenthash].css",
+		chunkFilename: "async.[name].[contenthash].js",
+		cssChunkFilename: "async.[name].[contenthash].css"
+	},
+	experiments: {
+		css: true
+	}
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +body {
 +	background: yellow;
 +	color: green;
 +}