fix(css): skip JS module generation for unused CSS exports (#20337)

xiaoxiaojx · web-flow · commit 13c679ad0d38 · 2026-01-21T18:29:45.000+03:00
diff --git a/.changeset/unused-css-export.md b/.changeset/unused-css-export.md
@@ -0,0 +1,5 @@
+---
+"webpack": patch
+---
+
+Avoid generating JavaScript modules for CSS exports that are not used, reducing unnecessary output and bundle size.
diff --git a/lib/css/CssGenerator.js b/lib/css/CssGenerator.js
@@ -19,6 +19,7 @@ const {
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
 const CssImportDependency = require("../dependencies/CssImportDependency");
+const EntryDependency = require("../dependencies/EntryDependency");
 const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
 
@@ -467,22 +468,45 @@ class CssGenerator extends Generator {
 	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
-		if (this._generatesJsOnly(module)) {
-			return JAVASCRIPT_TYPES;
-		}
-		/** @type {Set<string>} */
+		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
 		const sourceTypes = new Set();
 		const connections = this._moduleGraph.getIncomingConnections(module);
+
+		let isEntryModule = false;
 		for (const connection of connections) {
-			if (connection.dependency instanceof CssImportDependency) {
+			if (connection.dependency instanceof EntryDependency) {
+				isEntryModule = true;
+			}
+			if (
+				exportType === "link" &&
+				connection.dependency instanceof CssImportDependency
+			) {
 				continue;
 			}
 			if (!connection.originModule) {
 				continue;
 			}
 			if (connection.originModule.type.split("/")[0] !== CSS_TYPE) {
 				sourceTypes.add(JAVASCRIPT_TYPE);
+			} else {
+				const originModule = /** @type {CssModule} */ connection.originModule;
+				const originExportType = /** @type {BuildMeta} */ (
+					originModule.buildMeta
+				).exportType;
+				if (
+					/** @type {boolean} */ (
+						originExportType && originExportType !== "link"
+					)
+				) {
+					sourceTypes.add(JAVASCRIPT_TYPE);
+				}
+			}
+		}
+		if (this._generatesJsOnly(module)) {
+			if (sourceTypes.has(JAVASCRIPT_TYPE) || isEntryModule) {
+				return JAVASCRIPT_TYPES;
 			}
+			return new Set();
 		}
 		if (sourceTypes.has(JAVASCRIPT_TYPE)) {
 			return JAVASCRIPT_AND_CSS_TYPES;
diff --git a/test/__snapshots__/ConfigCacheTestCases.basictest.js.snap b/test/__snapshots__/ConfigCacheTestCases.basictest.js.snap
@@ -2882,7 +2882,7 @@ exports[`ConfigCacheTestCases css css-modules exported tests should allow to cre
 Object {
   "UsedClassName": "my-app-identifiers_module_css-UsedClassName",
   "VARS": "--my-app-style_module_css-LOCAL-COLOR my-app-style_module_css-VARS undefined my-app-style_module_css-globalVarsUpperCase",
-  "__webpack_modules__": 12,
+  "__webpack_modules__": 6,
   "animation": "my-app-style_module_css-animation",
   "animationName": "my-app-style_module_css-animationName",
   "class": "my-app-style_module_css-class",
@@ -11015,7 +11015,7 @@ exports[`ConfigCacheTestCases css css-modules exported tests should allow to cre
 Object {
   "UsedClassName": "FPwoX1",
   "VARS": "---YmVq7 gAOQgg undefined g45L8B",
-  "__webpack_modules__": 9,
+  "__webpack_modules__": 3,
   "animation": "_1CLYv0",
   "animationName": "AndP3O",
   "class": "Q0FGvN",
diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap
@@ -2882,7 +2882,7 @@ exports[`ConfigTestCases css css-modules exported tests should allow to create c
 Object {
   "UsedClassName": "my-app-identifiers_module_css-UsedClassName",
   "VARS": "--my-app-style_module_css-LOCAL-COLOR my-app-style_module_css-VARS undefined my-app-style_module_css-globalVarsUpperCase",
-  "__webpack_modules__": 12,
+  "__webpack_modules__": 6,
   "animation": "my-app-style_module_css-animation",
   "animationName": "my-app-style_module_css-animationName",
   "class": "my-app-style_module_css-class",
@@ -11015,7 +11015,7 @@ exports[`ConfigTestCases css css-modules exported tests should allow to create c
 Object {
   "UsedClassName": "FPwoX1",
   "VARS": "---YmVq7 gAOQgg undefined g45L8B",
-  "__webpack_modules__": 9,
+  "__webpack_modules__": 3,
   "animation": "_1CLYv0",
   "animationName": "AndP3O",
   "class": "Q0FGvN",
diff --git a/test/configCases/css/node/e.modules.css b/test/configCases/css/node/e.modules.css
@@ -0,0 +1,3 @@
+.e {
+    background-color: red;
+}
diff --git a/test/configCases/css/node/i.modules.css b/test/configCases/css/node/i.modules.css
@@ -0,0 +1,3 @@
+.i {
+    composes: e from "./e.modules.css";
+}
diff --git a/test/configCases/css/node/index.js b/test/configCases/css/node/index.js
@@ -0,0 +1,7 @@
+import { i } from "./i.modules.css"
+
+it("should work", () => {
+    expect(typeof i).toBe("string")
+    expect(__webpack_modules__["./i.modules.css"]).toBeDefined();
+    expect(__webpack_modules__["./e.modules.css"]).toBeUndefined();
+})
diff --git a/test/configCases/css/node/webpack.config.js b/test/configCases/css/node/webpack.config.js
@@ -0,0 +1,11 @@
+"use strict";
+
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	target: "node",
+	mode: "development",
+	devtool: false,
+	experiments: {
+		css: true
+	}
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"webpack": patch
 +---
++
 +Avoid generating JavaScript modules for CSS exports that are not used, reducing unnecessary output and bundle size.
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.e {`
	`2`	`+ background-color: red;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.i {`
	`2`	`+ composes: e from "./e.modules.css";`
	`3`	`+}`