fix: CSS @import HMR for non-link exportType

xiaoxiaojx · xiaoxiaojx · commit 86fac45403af · 2026-02-23T22:28:55.000+08:00
diff --git a/.changeset/fix-css-import-hmr-export-type.md b/.changeset/fix-css-import-hmr-export-type.md
@@ -0,0 +1,5 @@
+---
+"webpack": patch
+---
+
+Fixed HMR failure for CSS modules with @import when exportType !== "link". When exportType is not "link", CSS modules now behave like JavaScript modules and don't require special HMR handling, allowing @import CSS to work correctly during hot module replacement.
diff --git a/lib/css/CssModulesPlugin.js b/lib/css/CssModulesPlugin.js
@@ -386,6 +386,13 @@ class CssModulesPlugin {
 					compilation
 				).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
 					if (module instanceof CssModule && module.hot) {
+						const exportType = /** @type {BuildMeta} */ (module.buildMeta)
+							.exportType;
+						// When exportType !== "link", modules behave like JavaScript modules
+						if (exportType && exportType !== "link") {
+							return source;
+						}
+						// For exportType === "link", we can optimize with self-acceptance
 						const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
 						if (!cssData) {
 							return source;
diff --git a/test/hotCases/css/export-type-imported/bar.css b/test/hotCases/css/export-type-imported/bar.css
@@ -0,0 +1,7 @@
+.bar-v1 {
+	color: bar;
+}
+---
+.bar-v2 {
+	color: bar-updated;
+}
diff --git a/test/hotCases/css/export-type-imported/foo.css b/test/hotCases/css/export-type-imported/foo.css
@@ -0,0 +1,5 @@
+@import "./bar.css";
+
+.foo {
+	color: foo;
+}
diff --git a/test/hotCases/css/export-type-imported/index.js b/test/hotCases/css/export-type-imported/index.js
@@ -0,0 +1,10 @@
+import fooStyle from "./foo.css";
+
+it("should handle HMR for exportType", function (done) {
+	expect(fooStyle).toContain("bar-v1");
+	module.hot.accept(["./foo.css"], () => {
+		expect(fooStyle).toContain("bar-v2");
+		done();
+	});
+	NEXT(require("../../update")(done))
+});
diff --git a/test/hotCases/css/export-type-imported/test.config.js b/test/hotCases/css/export-type-imported/test.config.js
@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = {
+	env: "jsdom"
+};
diff --git a/test/hotCases/css/export-type-imported/webpack.config.js b/test/hotCases/css/export-type-imported/webpack.config.js
@@ -0,0 +1,22 @@
+"use strict";
+
+/** @type {import("../../../../types").Configuration} */
+module.exports = {
+	target: "web",
+	mode: "development",
+	devtool: false,
+	module: {
+		rules: [
+			{
+				test: /.css$/,
+				type: "css/module",
+				parser: {
+					exportType: "text"
+				}
+			}
+		]
+	},
+	experiments: {
+		css: true
+	}
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"webpack": patch
 +---
++
 +Fixed HMR failure for CSS modules with @import when exportType !== "link". When exportType is not "link", CSS modules now behave like JavaScript modules and don't require special HMR handling, allowing @import CSS to work correctly during hot module replacement.