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/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", 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 + } +}; 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"