[pull] main from webpack:main

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;
 	}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack",
-  "version": "5.100.1",
+  "version": "5.100.2",
   "description": "Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.",
   "homepage": "https://github.com/webpack/webpack",
   "bugs": "https://github.com/webpack/webpack/issues",

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
+	}
+};

yarn.lock

@@ -1868,9 +1868,9 @@ abort-controller@^3.0.0:
     event-target-shim "^5.0.0"
 
 acorn-import-phases@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/acorn-import-phases/-/acorn-import-phases-1.0.3.tgz#30394a1dccee5f380aecb8205b8c69b4f7ae688e"
-  integrity sha512-jtKLnfoOzm28PazuQ4dVBcE9Jeo6ha1GAJvq3N0LlNOszmTfx+wSycBehn+FN0RnyeR77IBxN/qVYMw0Rlj0Xw==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz#16eb850ba99a056cb7cbfe872ffb8972e18c8bd7"
+  integrity sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==
 
 acorn-jsx@^5.3.2:
   version "5.3.2"
@@ -3315,9 +3315,9 @@ eslint-config-prettier@^10.1.1:
   integrity sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==
 
 eslint-config-webpack@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-webpack/-/eslint-config-webpack-4.3.0.tgz#2ffb28164b827c15977e0dedb85b7b863ec5aea5"
-  integrity sha512-G2mePdT5zOOPS+lYtNKAdLqIgSSRCswirgrWh1+Lk1R2UY2r7q5XTtJbTguOR3ukfFySpYx0vHPTdN8TxpFQtw==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-webpack/-/eslint-config-webpack-4.3.4.tgz#995c7036898f015078b5d59716c4ec8fc8cfd0e6"
+  integrity sha512-u0wlSpmIaxEvPGzMi3hKtSxOmj933oMVM+pTabghQTrqLP27ZzYr1l/cs/WrnT2ZKP9VyccV16IVp9V2YZrh+w==
   dependencies:
     detect-indent "^7.0.1"
     jsonc-eslint-parser "^2.4.0"