fix: bad module order and missing modules when optimizing side effect free modules

lib/optimize/SideEffectsFlagPlugin.js

@@ -281,6 +281,7 @@ class SideEffectsFlagPlugin {
 							if (optimizedModules.has(module)) return;
 							optimizedModules.add(module);
 							if (module.getSideEffectsConnectionState(moduleGraph) === false) {
+								// eslint-disable-next-line no-unused-vars
 								const exportsInfo = moduleGraph.getExportsInfo(module);
 								for (const connection of moduleGraph.getIncomingConnections(
 									module
@@ -327,29 +328,29 @@ class SideEffectsFlagPlugin {
 											continue;
 										}
 										// TODO improve for nested imports
-										const ids = dep.getIds(moduleGraph);
-										if (ids.length > 0) {
-											const exportInfo = exportsInfo.getExportInfo(ids[0]);
-											const target = exportInfo.getTarget(
-												moduleGraph,
-												({ module }) =>
-													module.getSideEffectsConnectionState(moduleGraph) ===
-													false
-											);
-											if (!target) continue;
+										// const ids = dep.getIds(moduleGraph);
+										// if (ids.length > 0) {
+										// 	const exportInfo = exportsInfo.getExportInfo(ids[0]);
+										// 	const target = exportInfo.getTarget(
+										// 		moduleGraph,
+										// 		({ module }) =>
+										// 			module.getSideEffectsConnectionState(moduleGraph) ===
+										// 			false
+										// 	);
+										// 	if (!target) continue;
 
-											moduleGraph.updateModule(dep, target.module);
-											moduleGraph.addExplanation(
-												dep,
-												"(skipped side-effect-free modules)"
-											);
-											dep.setIds(
-												moduleGraph,
-												target.export
-													? [...target.export, ...ids.slice(1)]
-													: ids.slice(1)
-											);
-										}
+										// 	moduleGraph.updateModule(dep, target.module);
+										// 	moduleGraph.addExplanation(
+										// 		dep,
+										// 		"(skipped side-effect-free modules)"
+										// 	);
+										// 	dep.setIds(
+										// 		moduleGraph,
+										// 		target.export
+										// 			? [...target.export, ...ids.slice(1)]
+										// 			: ids.slice(1)
+										// 	);
+										// }
 									}
 								}
 							}

test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.css

@@ -0,0 +1,3 @@
+.index-dependency-dependency {
+  background-color: red;
+}

test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.js

@@ -0,0 +1,3 @@
+import "./index-dependency-dependency.css";
+
+export const indexDependencyDependency = () => {};

test/configCases/optimization/order-of-side-effect-modules/index-dependency.css

@@ -0,0 +1,3 @@
+.index-dependency {
+  background-color: aqua;
+}

test/configCases/optimization/order-of-side-effect-modules/index-dependency.js

@@ -0,0 +1,9 @@
+// this would work
+// import { indexDependencyDependency as A } from "./index-dependency-dependency";
+// export const indexDependencyDependency = A
+
+export { indexDependencyDependency } from "./index-dependency-dependency";
+
+import "./index-dependency.css";
+
+export const indexDependency = () => {};

test/configCases/optimization/order-of-side-effect-modules/index.css

@@ -0,0 +1,3 @@
+.index {
+  background-color: black;
+}

test/configCases/optimization/order-of-side-effect-modules/index.js

@@ -0,0 +1,35 @@
+import { indexDependencyDependency } from "./index-dependency";
+import "./index.css";
+
+indexDependencyDependency();
+
+it("correct module order with \"sideEffects\": [\"*.css\"]", function (done) {
+	const postOrder = __STATS__.modules
+		.filter(mod => mod.name.endsWith(".css"))
+		.map(mod => ({ module: mod.name, postOrderIndex: mod.postOrderIndex }));
+
+	console.log(postOrder);
+
+    // this is the PROPER order.
+    // we get it if we don't use use `"sideEffects": ["*.css"]` in package.json
+    // it should be the same with the setting on, but it's not, which is a bug
+    // since mini-css-extract-plugin loads .css modules in postOrder order
+    // our css classes would be index-dependency-dependency.css (least important) -> index-dependency.css -> index.css
+	expect(postOrder).toStrictEqual([
+		{ module: "./index.css", postOrderIndex: 5 },
+		{ module: "./index-dependency.css", postOrderIndex: 3 },
+		{ module: "./index-dependency-dependency.css", postOrderIndex: 1 }
+	]);
+
+
+    // this is the actual order with `"sideEffects": ["*.css"]`
+    const actualBuggyOrder = [
+        { module: './index.css', postOrderIndex: 1 },
+        // bug: index-dependency-depednency.css will override index.css, even though in reality it was imported first
+        { module: './index-dependency-dependency.css', postOrderIndex: 2 },
+        // another bug: index-dependency.css is missing from the bundle entirely, even though it should be loaded
+        { module: './index-dependency.css', postOrderIndex: null }
+      ]
+
+	done();
+});

test/configCases/optimization/order-of-side-effect-modules/package.json

@@ -0,0 +1,3 @@
+{
+  "sideEffects": ["*.css"]
+}

test/configCases/optimization/order-of-side-effect-modules/webpack.config.js

@@ -0,0 +1,11 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ["css-loader"]
+			}
+		]
+	}
+};