fix: keep module traversal consistent across reexport scenarios (#19702)

lib/optimize/SideEffectsFlagPlugin.js

@@ -320,8 +320,17 @@ class SideEffectsFlagPlugin {
 												({ module }) =>
 													module.getSideEffectsConnectionState(moduleGraph) ===
 													false,
-												({ module: newModule, export: exportName }) => {
+												({
+													module: newModule,
+													export: exportName,
+													connection: targetConnection
+												}) => {
 													moduleGraph.updateModule(dep, newModule);
+													moduleGraph.updateParent(
+														dep,
+														targetConnection,
+														/** @type {Module} */ (connection.originModule)
+													);
 													moduleGraph.addExplanation(
 														dep,
 														"(skipped side-effect-free modules)"

lib/util/comparators.js

@@ -556,7 +556,7 @@ const sortWithSourceOrder = (dependencies, dependencySourceOrderMap) => {
 		}
 	}
 
-	if (withSourceOrder.length === 0) {
+	if (withSourceOrder.length <= 1) {
 		return;
 	}
 

test/__snapshots__/ConfigCacheTestCases.longtest.js.snap

@@ -3498,6 +3498,8 @@ exports[`ConfigCacheTestCases css css-modules-no-space exported tests should all
 
 exports[`ConfigCacheTestCases css css-order exported tests keep consistent css order 1`] = `".button-module {  padding: 8px 16px;  background-color: #007bff;  color: white;  border: none;  border-radius: 4px;}.teaser-module {  padding: 20px;  border: 1px solid #ddd;  border-radius: 8px;  margin: 16px;}.teaser-module {  background-color: orange;}"`;
 
+exports[`ConfigCacheTestCases css css-order-reexport exported tests keep consistent css order 1`] = `".dependency2::before {	content: \\"dependency2\\";}.dependency::before {	content: \\"dependency\\";}"`;
+
 exports[`ConfigCacheTestCases css css-order2 exported tests keep consistent css order 1`] = `".dependency2::before {	content: \\"dependency2\\";}.dependency::before {	content: \\"dependency\\";}"`;
 
 exports[`ConfigCacheTestCases css css-order3 exported tests keep consistent css order 1`] = `".dependency3::before {	content: \\"dependency3\\";}.dependency2::before {	content: \\"dependency2\\";}.dependency::before {	content: \\"dependency\\";}"`;

test/__snapshots__/ConfigTestCases.basictest.js.snap

@@ -3498,6 +3498,8 @@ exports[`ConfigTestCases css css-modules-no-space exported tests should allow to
 
 exports[`ConfigTestCases css css-order exported tests keep consistent css order 1`] = `".button-module {  padding: 8px 16px;  background-color: #007bff;  color: white;  border: none;  border-radius: 4px;}.teaser-module {  padding: 20px;  border: 1px solid #ddd;  border-radius: 8px;  margin: 16px;}.teaser-module {  background-color: orange;}"`;
 
+exports[`ConfigTestCases css css-order-reexport exported tests keep consistent css order 1`] = `".dependency2::before {	content: \\"dependency2\\";}.dependency::before {	content: \\"dependency\\";}"`;
+
 exports[`ConfigTestCases css css-order2 exported tests keep consistent css order 1`] = `".dependency2::before {	content: \\"dependency2\\";}.dependency::before {	content: \\"dependency\\";}"`;
 
 exports[`ConfigTestCases css css-order3 exported tests keep consistent css order 1`] = `".dependency3::before {	content: \\"dependency3\\";}.dependency2::before {	content: \\"dependency2\\";}.dependency::before {	content: \\"dependency\\";}"`;

test/configCases/css/css-order-reexport/component.js

@@ -0,0 +1,5 @@
+export { dependency, dependency2 } from "./dependency";
+
+export function component(...args) {
+	console.log(args);
+}

test/configCases/css/css-order-reexport/dependency/dependency.css

@@ -0,0 +1,3 @@
+.dependency::before {
+	content: "dependency";
+}

test/configCases/css/css-order-reexport/dependency/dependency.js

@@ -0,0 +1,5 @@
+import styles from "./dependency.css";
+
+export function dependency() {
+	return styles !== undefined;
+}

test/configCases/css/css-order-reexport/dependency/dependency2.css

@@ -0,0 +1,3 @@
+.dependency2::before {
+	content: "dependency2";
+}

test/configCases/css/css-order-reexport/dependency/dependency2.js

@@ -0,0 +1,5 @@
+import styles from "./dependency2.css";
+
+export function dependency2() {
+	return styles !== undefined;
+}

test/configCases/css/css-order-reexport/dependency/index.js

@@ -0,0 +1,2 @@
+export * from "./dependency2";
+export * from "./dependency";

test/configCases/css/css-order-reexport/dependency/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "dependency",
+  "version": "1.0.0",
+  "private": true,
+  "sideEffects": false,
+  "main": "index.js"
+}

test/configCases/css/css-order-reexport/index.js

@@ -0,0 +1,14 @@
+import { component, dependency, dependency2 } from "./component";
+component(dependency, dependency2);
+
+// https://github.com/webpack/webpack/issues/18961
+// https://github.com/jantimon/reproduction-webpack-css-order
+it("keep consistent css order", function() {
+	const fs = __non_webpack_require__("fs");
+	let source = fs.readFileSync(__dirname + "/main.css", "utf-8");
+	expect(removeComments(source)).toMatchSnapshot()
+});
+
+function removeComments(source) {
+	return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n/g, "");
+}

test/configCases/css/css-order-reexport/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "css-order2",
+    "version": "1.0.0",
+    "sideEffects": false,
+    "devDependencies": {
+      "mini-css-extract-plugin": "^2.9.0"
+    }
+  }

test/configCases/css/css-order-reexport/webpack.config.js

@@ -0,0 +1,43 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+/** @type {import("../../../../types").Configuration} */
+module.exports = {
+	devtool: false,
+	target: "web",
+	entry: "./index.js",
+	mode: "development",
+	optimization: {
+		concatenateModules: false
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: [
+					{
+						loader: MiniCssExtractPlugin.loader
+					},
+					{
+						loader: "css-loader",
+						options: {
+							esModule: true,
+							modules: {
+								namedExport: false,
+								localIdentName: "[name]"
+							}
+						}
+					}
+				]
+			}
+		]
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: "[name].css"
+		})
+	],
+	node: {
+		__dirname: false,
+		__filename: false
+	}
+};