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

… free modules

test/ConfigTestCases.template.js

@@ -63,6 +63,9 @@ const describeCases = config => {
 		for (const category of categories) {
 			describe(category.name, () => {
 				for (const testName of category.tests) {
+					if (testName !== "order-of-side-effect-modules") {
+						continue;
+					}
 					describe(testName, function () {
 						const testDirectory = path.join(casesPath, category.name, testName);
 						const filterPath = path.join(testDirectory, "test.filter.js");

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,33 @@
+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 order we'd get if we don't use `"sideEffects": ["*.css"]` in package.json
+    // 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 actualOrder = [
+        { 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"]
+			}
+		]
+	}
+};