From 856da5ee138576b8022494087851ff7c7558d666 Mon Sep 17 00:00:00 2001 From: ShanaMaid Date: Wed, 8 Aug 2018 18:04:30 +0800 Subject: [PATCH 1/5] fix css files load order mismatch #188 --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index b266b331..c65c420e 100644 --- a/src/index.js +++ b/src/index.js @@ -390,14 +390,14 @@ class MiniCssExtractPlugin { const [chunkGroup] = chunk.groupsIterable; if (typeof chunkGroup.getModuleIndex2 === 'function') { modules.sort( - (a, b) => chunkGroup.getModuleIndex2(a) - chunkGroup.getModuleIndex2(b) + (a, b) => chunkGroup.getModuleIndex2(b) - chunkGroup.getModuleIndex2(a) ); } else { // fallback for older webpack versions // (to avoid a breaking change) // TODO remove this in next mayor version // and increase minimum webpack version to 4.12.0 - modules.sort((a, b) => a.index2 - b.index2); + modules.sort((a, b) => b.index2 - a.index2); } const source = new ConcatSource(); const externalsSource = new ConcatSource(); From a4eb222029974274acb912cbb9bd77fc626a2cbc Mon Sep 17 00:00:00 2001 From: ShanaMaid Date: Thu, 9 Aug 2018 10:42:57 +0800 Subject: [PATCH 2/5] fix(src): fix sort bug --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index c65c420e..6be4230b 100644 --- a/src/index.js +++ b/src/index.js @@ -390,7 +390,7 @@ class MiniCssExtractPlugin { const [chunkGroup] = chunk.groupsIterable; if (typeof chunkGroup.getModuleIndex2 === 'function') { modules.sort( - (a, b) => chunkGroup.getModuleIndex2(b) - chunkGroup.getModuleIndex2(a) + (a, b) => chunkGroup.getModuleIndex2(a) - chunkGroup.getModuleIndex2(b) ); } else { // fallback for older webpack versions From b990ee0f77144694fe254cff91bfb744e72b250c Mon Sep 17 00:00:00 2001 From: ShanaMaid Date: Thu, 9 Aug 2018 10:43:10 +0800 Subject: [PATCH 3/5] feat(test): add test --- test/cases/simple-async-load-css/a.css | 1 + test/cases/simple-async-load-css/async-one.js | 2 ++ test/cases/simple-async-load-css/async-two.js | 2 ++ test/cases/simple-async-load-css/b.css | 1 + test/cases/simple-async-load-css/c.css | 1 + test/cases/simple-async-load-css/d.css | 1 + test/cases/simple-async-load-css/e.css | 1 + .../expected/async-one.css | 4 ++++ .../expected/async-two.css | 4 ++++ .../simple-async-load-css/expected/main.css | 4 ++++ test/cases/simple-async-load-css/f.css | 1 + test/cases/simple-async-load-css/index.js | 5 ++++ .../simple-async-load-css/webpack.config.js | 23 +++++++++++++++++++ 13 files changed, 50 insertions(+) create mode 100644 test/cases/simple-async-load-css/a.css create mode 100644 test/cases/simple-async-load-css/async-one.js create mode 100644 test/cases/simple-async-load-css/async-two.js create mode 100644 test/cases/simple-async-load-css/b.css create mode 100644 test/cases/simple-async-load-css/c.css create mode 100644 test/cases/simple-async-load-css/d.css create mode 100644 test/cases/simple-async-load-css/e.css create mode 100644 test/cases/simple-async-load-css/expected/async-one.css create mode 100644 test/cases/simple-async-load-css/expected/async-two.css create mode 100644 test/cases/simple-async-load-css/expected/main.css create mode 100644 test/cases/simple-async-load-css/f.css create mode 100644 test/cases/simple-async-load-css/index.js create mode 100644 test/cases/simple-async-load-css/webpack.config.js diff --git a/test/cases/simple-async-load-css/a.css b/test/cases/simple-async-load-css/a.css new file mode 100644 index 00000000..31fc5b8a --- /dev/null +++ b/test/cases/simple-async-load-css/a.css @@ -0,0 +1 @@ +body { background: red; } diff --git a/test/cases/simple-async-load-css/async-one.js b/test/cases/simple-async-load-css/async-one.js new file mode 100644 index 00000000..882b0824 --- /dev/null +++ b/test/cases/simple-async-load-css/async-one.js @@ -0,0 +1,2 @@ +import './c.css'; +import './d.css'; diff --git a/test/cases/simple-async-load-css/async-two.js b/test/cases/simple-async-load-css/async-two.js new file mode 100644 index 00000000..e83f933c --- /dev/null +++ b/test/cases/simple-async-load-css/async-two.js @@ -0,0 +1,2 @@ +import './e.css'; +import './f.css'; diff --git a/test/cases/simple-async-load-css/b.css b/test/cases/simple-async-load-css/b.css new file mode 100644 index 00000000..56af6df5 --- /dev/null +++ b/test/cases/simple-async-load-css/b.css @@ -0,0 +1 @@ +body { background: green; } diff --git a/test/cases/simple-async-load-css/c.css b/test/cases/simple-async-load-css/c.css new file mode 100644 index 00000000..4e2dfe9a --- /dev/null +++ b/test/cases/simple-async-load-css/c.css @@ -0,0 +1 @@ +body { background: blue; } diff --git a/test/cases/simple-async-load-css/d.css b/test/cases/simple-async-load-css/d.css new file mode 100644 index 00000000..75945584 --- /dev/null +++ b/test/cases/simple-async-load-css/d.css @@ -0,0 +1 @@ +body { background: yellow; } diff --git a/test/cases/simple-async-load-css/e.css b/test/cases/simple-async-load-css/e.css new file mode 100644 index 00000000..484aaf18 --- /dev/null +++ b/test/cases/simple-async-load-css/e.css @@ -0,0 +1 @@ +body { background: purple; } diff --git a/test/cases/simple-async-load-css/expected/async-one.css b/test/cases/simple-async-load-css/expected/async-one.css new file mode 100644 index 00000000..e28fd9a4 --- /dev/null +++ b/test/cases/simple-async-load-css/expected/async-one.css @@ -0,0 +1,4 @@ +body { background: blue; } + +body { background: yellow; } + diff --git a/test/cases/simple-async-load-css/expected/async-two.css b/test/cases/simple-async-load-css/expected/async-two.css new file mode 100644 index 00000000..83c2b1a9 --- /dev/null +++ b/test/cases/simple-async-load-css/expected/async-two.css @@ -0,0 +1,4 @@ +body { background: purple; } + +body { background: indigo; } + diff --git a/test/cases/simple-async-load-css/expected/main.css b/test/cases/simple-async-load-css/expected/main.css new file mode 100644 index 00000000..f17305d1 --- /dev/null +++ b/test/cases/simple-async-load-css/expected/main.css @@ -0,0 +1,4 @@ +body { background: red; } + +body { background: green; } + diff --git a/test/cases/simple-async-load-css/f.css b/test/cases/simple-async-load-css/f.css new file mode 100644 index 00000000..a0f22c15 --- /dev/null +++ b/test/cases/simple-async-load-css/f.css @@ -0,0 +1 @@ +body { background: indigo; } diff --git a/test/cases/simple-async-load-css/index.js b/test/cases/simple-async-load-css/index.js new file mode 100644 index 00000000..4a384fd0 --- /dev/null +++ b/test/cases/simple-async-load-css/index.js @@ -0,0 +1,5 @@ +import './a.css'; +import './b.css'; +import(/* webpackChunkName: 'async-one' */'./async-one'); +import(/* webpackChunkName: 'async-two' */'./async-two'); + diff --git a/test/cases/simple-async-load-css/webpack.config.js b/test/cases/simple-async-load-css/webpack.config.js new file mode 100644 index 00000000..2a846242 --- /dev/null +++ b/test/cases/simple-async-load-css/webpack.config.js @@ -0,0 +1,23 @@ +const Self = require('../../../'); + +module.exports = { + entry: { + 'main': './index.js', + }, + module: { + rules: [ + { + test: /\.css$/, + use: [ + Self.loader, + 'css-loader', + ], + }, + ], + }, + plugins: [ + new Self({ + filename: '[name].css', + }), + ], +}; From 7f190653c05aaf53e673bf764d23530db1f32915 Mon Sep 17 00:00:00 2001 From: Tobias Koppers Date: Mon, 13 Aug 2018 17:39:56 +0200 Subject: [PATCH 4/5] test(sorting): add test case which uses the fallback behavior --- .../simple-async-load-css-fallback/a.css | 1 + .../async-one.js | 2 ++ .../async-two.js | 2 ++ .../simple-async-load-css-fallback/b.css | 1 + .../simple-async-load-css-fallback/c.css | 1 + .../simple-async-load-css-fallback/d.css | 1 + .../simple-async-load-css-fallback/e.css | 1 + .../expected/async-one.css | 4 +++ .../expected/async-two.css | 4 +++ .../expected/main.css | 4 +++ .../simple-async-load-css-fallback/f.css | 1 + .../simple-async-load-css-fallback/index.js | 5 +++ .../webpack.config.js | 33 +++++++++++++++++++ 13 files changed, 60 insertions(+) create mode 100644 test/cases/simple-async-load-css-fallback/a.css create mode 100644 test/cases/simple-async-load-css-fallback/async-one.js create mode 100644 test/cases/simple-async-load-css-fallback/async-two.js create mode 100644 test/cases/simple-async-load-css-fallback/b.css create mode 100644 test/cases/simple-async-load-css-fallback/c.css create mode 100644 test/cases/simple-async-load-css-fallback/d.css create mode 100644 test/cases/simple-async-load-css-fallback/e.css create mode 100644 test/cases/simple-async-load-css-fallback/expected/async-one.css create mode 100644 test/cases/simple-async-load-css-fallback/expected/async-two.css create mode 100644 test/cases/simple-async-load-css-fallback/expected/main.css create mode 100644 test/cases/simple-async-load-css-fallback/f.css create mode 100644 test/cases/simple-async-load-css-fallback/index.js create mode 100644 test/cases/simple-async-load-css-fallback/webpack.config.js diff --git a/test/cases/simple-async-load-css-fallback/a.css b/test/cases/simple-async-load-css-fallback/a.css new file mode 100644 index 00000000..31fc5b8a --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/a.css @@ -0,0 +1 @@ +body { background: red; } diff --git a/test/cases/simple-async-load-css-fallback/async-one.js b/test/cases/simple-async-load-css-fallback/async-one.js new file mode 100644 index 00000000..882b0824 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/async-one.js @@ -0,0 +1,2 @@ +import './c.css'; +import './d.css'; diff --git a/test/cases/simple-async-load-css-fallback/async-two.js b/test/cases/simple-async-load-css-fallback/async-two.js new file mode 100644 index 00000000..e83f933c --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/async-two.js @@ -0,0 +1,2 @@ +import './e.css'; +import './f.css'; diff --git a/test/cases/simple-async-load-css-fallback/b.css b/test/cases/simple-async-load-css-fallback/b.css new file mode 100644 index 00000000..56af6df5 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/b.css @@ -0,0 +1 @@ +body { background: green; } diff --git a/test/cases/simple-async-load-css-fallback/c.css b/test/cases/simple-async-load-css-fallback/c.css new file mode 100644 index 00000000..4e2dfe9a --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/c.css @@ -0,0 +1 @@ +body { background: blue; } diff --git a/test/cases/simple-async-load-css-fallback/d.css b/test/cases/simple-async-load-css-fallback/d.css new file mode 100644 index 00000000..75945584 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/d.css @@ -0,0 +1 @@ +body { background: yellow; } diff --git a/test/cases/simple-async-load-css-fallback/e.css b/test/cases/simple-async-load-css-fallback/e.css new file mode 100644 index 00000000..484aaf18 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/e.css @@ -0,0 +1 @@ +body { background: purple; } diff --git a/test/cases/simple-async-load-css-fallback/expected/async-one.css b/test/cases/simple-async-load-css-fallback/expected/async-one.css new file mode 100644 index 00000000..e28fd9a4 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/expected/async-one.css @@ -0,0 +1,4 @@ +body { background: blue; } + +body { background: yellow; } + diff --git a/test/cases/simple-async-load-css-fallback/expected/async-two.css b/test/cases/simple-async-load-css-fallback/expected/async-two.css new file mode 100644 index 00000000..83c2b1a9 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/expected/async-two.css @@ -0,0 +1,4 @@ +body { background: purple; } + +body { background: indigo; } + diff --git a/test/cases/simple-async-load-css-fallback/expected/main.css b/test/cases/simple-async-load-css-fallback/expected/main.css new file mode 100644 index 00000000..f17305d1 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/expected/main.css @@ -0,0 +1,4 @@ +body { background: red; } + +body { background: green; } + diff --git a/test/cases/simple-async-load-css-fallback/f.css b/test/cases/simple-async-load-css-fallback/f.css new file mode 100644 index 00000000..a0f22c15 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/f.css @@ -0,0 +1 @@ +body { background: indigo; } diff --git a/test/cases/simple-async-load-css-fallback/index.js b/test/cases/simple-async-load-css-fallback/index.js new file mode 100644 index 00000000..4a384fd0 --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/index.js @@ -0,0 +1,5 @@ +import './a.css'; +import './b.css'; +import(/* webpackChunkName: 'async-one' */'./async-one'); +import(/* webpackChunkName: 'async-two' */'./async-two'); + diff --git a/test/cases/simple-async-load-css-fallback/webpack.config.js b/test/cases/simple-async-load-css-fallback/webpack.config.js new file mode 100644 index 00000000..17dc8ead --- /dev/null +++ b/test/cases/simple-async-load-css-fallback/webpack.config.js @@ -0,0 +1,33 @@ +const Self = require('../../../'); + +module.exports = { + entry: { + 'main': './index.js', + }, + module: { + rules: [ + { + test: /\.css$/, + use: [ + Self.loader, + 'css-loader', + ], + }, + ], + }, + plugins: [ + function() { + this.hooks.compilation.tap("Test", compilation => { + compilation.hooks.beforeChunkAssets.tap("Test", () => { + for (const chunkGroup of compilation.chunkGroups) { + // remove getModuleIndex2 to enforce using fallback + chunkGroup.getModuleIndex2 = undefined; + } + }); + }) + }, + new Self({ + filename: '[name].css', + }), + ], +}; From a16d24087543923a6aa9e4bdddd9e32a0785e363 Mon Sep 17 00:00:00 2001 From: Tobias Koppers Date: Mon, 13 Aug 2018 17:41:07 +0200 Subject: [PATCH 5/5] fix(sorting): revert change to restore original behavior This fixes the testcase --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 6be4230b..b266b331 100644 --- a/src/index.js +++ b/src/index.js @@ -397,7 +397,7 @@ class MiniCssExtractPlugin { // (to avoid a breaking change) // TODO remove this in next mayor version // and increase minimum webpack version to 4.12.0 - modules.sort((a, b) => b.index2 - a.index2); + modules.sort((a, b) => a.index2 - b.index2); } const source = new ConcatSource(); const externalsSource = new ConcatSource();