fix: use compiler context for CSS modules hash to avoid collisions (#20799)

xiaoxiaojx · web-flow · commit ecb436b21289 · 2026-04-10T13:10:25.000+03:00
* test: add test case reproducing CSS modules hash collision across directories Files with the same name in different directories (e.g. f1/style.module.css and f2/style.module.css) generate identical hashed class names, causing style collisions. Ref: #20795 * fix: use compiler context for CSS modules hash to avoid collisions Use compiler.context instead of module.context as the base path when computing relativeResourcePath for CSS module local ident hashing. Previously, files with the same name in different directories would produce identical relative paths (both "./style.module.css"), leading to hash collisions. Fixes #20795 * chore: add changeset for CSS modules hash collision fix
diff --git a/.changeset/fix-css-module-hash-collision.md b/.changeset/fix-css-module-hash-collision.md
@@ -0,0 +1,5 @@
+---
+"webpack": patch
+---
+
+Use compiler context instead of module context for CSS modules local ident hashing to avoid hash collisions when files with the same name exist in different directories.
diff --git a/lib/dependencies/CssIcssExportDependency.js b/lib/dependencies/CssIcssExportDependency.js
@@ -55,7 +55,7 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 		(generator.options.localIdentName);
 	const relativeResourcePath = makePathsRelative(
 		/** @type {string} */
-		(module.context),
+		(runtimeTemplate.compilation.compiler.context),
 		/** @type {string} */
 		(module.getResource()),
 		runtimeTemplate.compilation.compiler.root
diff --git a/test/configCases/css/css-modules-hash-collision/f1/style.module.css b/test/configCases/css/css-modules-hash-collision/f1/style.module.css
@@ -0,0 +1,3 @@
+.xxx {
+	background: green;
+}
diff --git a/test/configCases/css/css-modules-hash-collision/f2/style.module.css b/test/configCases/css/css-modules-hash-collision/f2/style.module.css
@@ -0,0 +1,3 @@
+.xxx {
+	background: red;
+}
diff --git a/test/configCases/css/css-modules-hash-collision/index.js b/test/configCases/css/css-modules-hash-collision/index.js
@@ -0,0 +1,8 @@
+import * as f1 from "./f1/style.module.css";
+import * as f2 from "./f2/style.module.css";
+
+it("should generate unique hashed class names for same-named classes in different directories", () => {
+	expect(f1.xxx).toBeDefined();
+	expect(f2.xxx).toBeDefined();
+	expect(f1.xxx).not.toBe(f2.xxx);
+});
diff --git a/test/configCases/css/css-modules-hash-collision/webpack.config.js b/test/configCases/css/css-modules-hash-collision/webpack.config.js
@@ -0,0 +1,16 @@
+"use strict";
+
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	experiments: {
+		css: true
+	},
+	module: {
+		rules: [
+			{
+				test: /\.module\.css$/i,
+				type: "css/module"
+			}
+		]
+	}
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"webpack": patch
 +---
++
 +Use compiler context instead of module context for CSS modules local ident hashing to avoid hash collisions when files with the same name exist in different directories.
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.xxx {`
	`2`	`+ background: green;`
	`3`	`+}`