From 89eb6a3c8109563050c5da42ed99de51782e6501 Mon Sep 17 00:00:00 2001 From: Natsu Xiao <784487301@qq.com> Date: Tue, 15 Jul 2025 17:53:58 +0800 Subject: [PATCH 1/3] fix: keep module traversal consistent across reexport scenarios (#19702) --- lib/optimize/SideEffectsFlagPlugin.js | 11 ++++- lib/util/comparators.js | 2 +- .../ConfigCacheTestCases.longtest.js.snap | 2 + .../ConfigTestCases.basictest.js.snap | 2 + .../css/css-order-reexport/component.js | 5 +++ .../dependency/dependency.css | 3 ++ .../dependency/dependency.js | 5 +++ .../dependency/dependency2.css | 3 ++ .../dependency/dependency2.js | 5 +++ .../css-order-reexport/dependency/index.js | 2 + .../dependency/package.json | 7 +++ .../css/css-order-reexport/index.js | 14 ++++++ .../css/css-order-reexport/package.json | 8 ++++ .../css/css-order-reexport/webpack.config.js | 43 +++++++++++++++++++ 14 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 test/configCases/css/css-order-reexport/component.js create mode 100644 test/configCases/css/css-order-reexport/dependency/dependency.css create mode 100644 test/configCases/css/css-order-reexport/dependency/dependency.js create mode 100644 test/configCases/css/css-order-reexport/dependency/dependency2.css create mode 100644 test/configCases/css/css-order-reexport/dependency/dependency2.js create mode 100644 test/configCases/css/css-order-reexport/dependency/index.js create mode 100644 test/configCases/css/css-order-reexport/dependency/package.json create mode 100644 test/configCases/css/css-order-reexport/index.js create mode 100644 test/configCases/css/css-order-reexport/package.json create mode 100644 test/configCases/css/css-order-reexport/webpack.config.js diff --git a/lib/optimize/SideEffectsFlagPlugin.js b/lib/optimize/SideEffectsFlagPlugin.js index e07788c7bff..1c882ef79e3 100644 --- a/lib/optimize/SideEffectsFlagPlugin.js +++ b/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)" diff --git a/lib/util/comparators.js b/lib/util/comparators.js index ce8cd40e5bf..034a1740460 100644 --- a/lib/util/comparators.js +++ b/lib/util/comparators.js @@ -556,7 +556,7 @@ const sortWithSourceOrder = (dependencies, dependencySourceOrderMap) => { } } - if (withSourceOrder.length === 0) { + if (withSourceOrder.length <= 1) { return; } diff --git a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap index c574aba6957..3d5a1526b01 100644 --- a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap +++ b/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\\";}"`; diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap index 4589d2ef1f6..fc6de606181 100644 --- a/test/__snapshots__/ConfigTestCases.basictest.js.snap +++ b/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\\";}"`; diff --git a/test/configCases/css/css-order-reexport/component.js b/test/configCases/css/css-order-reexport/component.js new file mode 100644 index 00000000000..bf962afd1ca --- /dev/null +++ b/test/configCases/css/css-order-reexport/component.js @@ -0,0 +1,5 @@ +export { dependency, dependency2 } from "./dependency"; + +export function component(...args) { + console.log(args); +} \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/dependency/dependency.css b/test/configCases/css/css-order-reexport/dependency/dependency.css new file mode 100644 index 00000000000..776c3714d84 --- /dev/null +++ b/test/configCases/css/css-order-reexport/dependency/dependency.css @@ -0,0 +1,3 @@ +.dependency::before { + content: "dependency"; +} \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/dependency/dependency.js b/test/configCases/css/css-order-reexport/dependency/dependency.js new file mode 100644 index 00000000000..66dbef95df9 --- /dev/null +++ b/test/configCases/css/css-order-reexport/dependency/dependency.js @@ -0,0 +1,5 @@ +import styles from "./dependency.css"; + +export function dependency() { + return styles !== undefined; +} \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/dependency/dependency2.css b/test/configCases/css/css-order-reexport/dependency/dependency2.css new file mode 100644 index 00000000000..f882c894fdd --- /dev/null +++ b/test/configCases/css/css-order-reexport/dependency/dependency2.css @@ -0,0 +1,3 @@ +.dependency2::before { + content: "dependency2"; +} \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/dependency/dependency2.js b/test/configCases/css/css-order-reexport/dependency/dependency2.js new file mode 100644 index 00000000000..f59b231020f --- /dev/null +++ b/test/configCases/css/css-order-reexport/dependency/dependency2.js @@ -0,0 +1,5 @@ +import styles from "./dependency2.css"; + +export function dependency2() { + return styles !== undefined; +} \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/dependency/index.js b/test/configCases/css/css-order-reexport/dependency/index.js new file mode 100644 index 00000000000..035ddd4d727 --- /dev/null +++ b/test/configCases/css/css-order-reexport/dependency/index.js @@ -0,0 +1,2 @@ +export * from "./dependency2"; +export * from "./dependency"; diff --git a/test/configCases/css/css-order-reexport/dependency/package.json b/test/configCases/css/css-order-reexport/dependency/package.json new file mode 100644 index 00000000000..ea2fc66bebe --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/index.js b/test/configCases/css/css-order-reexport/index.js new file mode 100644 index 00000000000..6901b689ea5 --- /dev/null +++ b/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, ""); +} \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/package.json b/test/configCases/css/css-order-reexport/package.json new file mode 100644 index 00000000000..0afb3f14972 --- /dev/null +++ b/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" + } + } \ No newline at end of file diff --git a/test/configCases/css/css-order-reexport/webpack.config.js b/test/configCases/css/css-order-reexport/webpack.config.js new file mode 100644 index 00000000000..4d2ad0fd32a --- /dev/null +++ b/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 + } +}; From 2c8d1f14e5fe63703b2ed3d6bc092c2f982ee215 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 15 Jul 2025 12:54:31 +0300 Subject: [PATCH 2/3] chore(deps): bump the dependencies group with 2 updates (#19701) Bumps the dependencies group with 2 updates: [acorn-import-phases](https://github.com/nicolo-ribaudo/acorn-import-phases) and [eslint-config-webpack](https://github.com/webpack/eslint-config-webpack). Updates `acorn-import-phases` from 1.0.3 to 1.0.4 - [Commits](https://github.com/nicolo-ribaudo/acorn-import-phases/compare/v1.0.3...v1.0.4) Updates `eslint-config-webpack` from 4.3.0 to 4.3.4 - [Release notes](https://github.com/webpack/eslint-config-webpack/releases) - [Changelog](https://github.com/webpack/eslint-config-webpack/blob/main/CHANGELOG.md) - [Commits](https://github.com/webpack/eslint-config-webpack/compare/v4.3.0...v4.3.4) --- updated-dependencies: - dependency-name: acorn-import-phases dependency-version: 1.0.4 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: dependencies - dependency-name: eslint-config-webpack dependency-version: 4.3.4 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dependencies ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index de8ed6cbd2b..e57c3c2e6ea 100644 --- a/yarn.lock +++ b/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" From 21fcdbb8f2bb3820d3309df8e399c6deced12b42 Mon Sep 17 00:00:00 2001 From: alexander-akait Date: Tue, 15 Jul 2025 16:35:32 +0300 Subject: [PATCH 3/3] chore(release): 5.100.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5b97d84d9f6..56b9a1a452f 100644 --- a/package.json +++ b/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",