10000 fix: CSS ordering for config with multiple entry points (#130) · cshomo11/mini-css-extract-plugin@79373eb · GitHub
Skip to content

Commit 79373eb

Browse files
bawjensenevilebottnawi
bawjensen
authored and
evilebottnawi
committed
fix: CSS ordering for config with multiple entry points (webpack-contrib#130)
* Create failing unit test * Fix bug with multiple entry point CSS ordering * fix: missed linting errors * fix: update webpack version * revert: fix bug with multiple entry point CSS ordering * fix: use per chunk group indices in newer webpack versions
1 parent 1023d22 commit 79373eb

14 files changed

+74
-2
lines changed

‎src/index.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ class MiniCssExtractPlugin {
167167
result.push({
168168
render: () =>
169169
this.renderContentAsset(
170+
chunk,
170171
renderedModules,
171172
compilation.runtimeTemplate.requestShortener
172173
),
@@ -191,6 +192,7 @@ class MiniCssExtractPlugin {
191192
result.push({
192193
render: () =>
193194
this.renderContentAsset(
195+
chunk,
194196
renderedModules,
195197
compilation.runtimeTemplate.requestShortener
196198
),
@@ -379,8 +381,24 @@ class MiniCssExtractPlugin {
379381
return obj;
380382
}
381383

382-
renderContentAsset(modules, requestShortener) {
383-
modules.sort((a, b) => a.index2 - b.index2);
384+
renderContentAsset(chunk, modules, requestShortener) {
385+
// get first chunk group and take ordr from this one
386+
// When a chunk is shared between multiple chunk groups
387+
// with different order this can lead to wrong order
388+
// but it's not possible to create a correct order in
389+
// this case. Don't share chunks if you don't like it.
390+
const [chunkGroup] = chunk.groupsIterable;
391+
if (typeof chunkGroup.getModuleIndex2 === 'function') {
392+
modules.sort(
393+
(a, b) => chunkGroup.getModuleIndex2(a) - chunkGroup.getModuleIndex2(b)
394+
);
395+
} else {
396+
// fallback for older webpack versions
397+
// (to avoid a breaking change)
398+
// TODO remove this in next mayor version
399+
// and increase minimum webpack version to 4.12.0
400+
modules.sort((a, b) => a.index2 - b.index2);
401+
}
384402
const source = new ConcatSource();
385403
const externalsSource = new ConcatSource();
386404
for (const m of modules) {

‎test/cases/multiple-entry/a.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body { background: red; }

‎test/cases/multiple-entry/async-one.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './c.css';
2+
import './d.css';

‎test/cases/multiple-entry/async-two.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './d.css';
2+
import './c.css';

‎test/cases/multiple-entry/b.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body { background: green; }

‎test/cases/multiple-entry/c.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body { background: blue; }

‎test/cases/multiple-entry/d.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body { background: yellow; }

‎test/cases/multiple-entry/expected/async-one.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body { background: blue; }
2+
3+
body { background: yellow; }
4+

‎test/cases/multiple-entry/expected/async-two.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body { background: yellow; }
2+
3+
body { background: blue; }
4+

‎test/cases/multiple-entry/expected/main-one.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body { background: red; }
2+
3+
body { background: green; }
4+

‎test/cases/multiple-entry/expected/main-two.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body { background: green; }
2+
3+
body { background: red; }
4+

‎test/cases/multiple-entry/index-one.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import './a.css';
2+
import './b.css';
3+
import(/* webpackChunkName: 'async-one' */'./async-one');

‎test/cases/multiple-entry/index-two.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import(/* webpackChunkName: 'async-two' */'./async-two');
2+
import './b.css';
3+
import './a.css';

‎test/cases/multiple-entry/webpack.config.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const Self = require('../../../');
2+
3+
module.exports = {
4+
entry: {
5+
'main-one': './index-one.js',
6+
'main-two': './index-two.js',
7+
},
8+
module: {
9+
rules: [
10+
{
11+
test: /\.css$/,
12+
use: [
13+
Self.loader,
14+
'css-loader',
15+
],
16+
},
17+
],
18+
},
19+
plugins: [
20+
new Self({
21+
filename: '[name].css',
22+
}),
23+
],
24+
};

0 commit comments

Comments
 (0)