fix: CSS ordering for config with multiple entry points (#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
webpack-contrib · Jun 29, 2018 · 79373eb · 79373eb
1 parent 1023d22
commit 79373eb
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 2 deletions.
diff --git a/src/index.js b/src/index.js
@@ -167,6  167,7 @@ class MiniCssExtractPlugin {
             result.push({
               render: () =>
                 this.renderContentAsset(
                   chunk,
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
@@ -191,6  192,7 @@ class MiniCssExtractPlugin {
             result.push({
               render: () =>
                 this.renderContentAsset(
                   chunk,
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
@@ -379,8  381,24 @@ class MiniCssExtractPlugin {
     return obj;
   }
 
-  renderContentAsset(modules, requestShortener) {
-    modules.sort((a, b) => a.index2 - b.index2);
   renderContentAsset(chunk, modules, requestShortener) {
     // get first chunk group and take ordr from this one
     // When a chunk is shared between multiple chunk groups
     // with different order this can lead to wrong order
     // but it's not possible to create a correct order in
     // this case. Don't share chunks if you don't like it.
     const [chunkGroup] = chunk.groupsIterable;
     if (typeof chunkGroup.getModuleIndex2 === 'function') {
       modules.sort(
         (a, b) => chunkGroup.getModuleIndex2(a) - chunkGroup.getModuleIndex2(b)
       );
     } 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);
     }
     const source = new ConcatSource();
     const externalsSource = new ConcatSource();
     for (const m of modules) {

diff --git a/test/cases/multiple-entry/a.css b/test/cases/multiple-entry/a.css
@@ -0,0  1 @@
 body { background: red; }
diff --git a/test/cases/multiple-entry/async-one.js b/test/cases/multiple-entry/async-one.js
@@ -0,0  1,2 @@
 import './c.css';
 import './d.css';
diff --git a/test/cases/multiple-entry/async-two.js b/test/cases/multiple-entry/async-two.js
@@ -0,0  1,2 @@
 import './d.css';
 import './c.css';
diff --git a/test/cases/multiple-entry/b.css b/test/cases/multiple-entry/b.css
@@ -0,0  1 @@
 body { background: green; }
diff --git a/test/cases/multiple-entry/c.css b/test/cases/multiple-entry/c.css
@@ -0,0  1 @@
 body { background: blue; }
diff --git a/test/cases/multiple-entry/d.css b/test/cases/multiple-entry/d.css
@@ -0,0  1 @@
 body { background: yellow; }
diff --git a/test/cases/multiple-entry/expected/async-one.css b/test/cases/multiple-entry/expected/async-one.css
@@ -0,0  1,4 @@
 body { background: blue; }
 
 body { background: yellow; }
 
diff --git a/test/cases/multiple-entry/expected/async-two.css b/test/cases/multiple-entry/expected/async-two.css
@@ -0,0  1,4 @@
 body { background: yellow; }
 
 body { background: blue; }
 
diff --git a/test/cases/multiple-entry/expected/main-one.css b/test/cases/multiple-entry/expected/main-one.css
@@ -0,0  1,4 @@
 body { background: red; }
 
 body { background: green; }
 
diff --git a/test/cases/multiple-entry/expected/main-two.css b/test/cases/multiple-entry/expected/main-two.css
@@ -0,0  1,4 @@
 body { background: green; }
 
 body { background: red; }
 
diff --git a/test/cases/multiple-entry/index-one.js b/test/cases/multiple-entry/index-one.js
@@ -0,0  1,3 @@
 import './a.css';
 import './b.css';
 import(/* webpackChunkName: 'async-one' */'./async-one');
diff --git a/test/cases/multiple-entry/index-two.js b/test/cases/multiple-entry/index-two.js
@@ -0,0  1,3 @@
 import(/* webpackChunkName: 'async-two' */'./async-two');
 import './b.css';
 import './a.css';
diff --git a/test/cases/multiple-entry/webpack.config.js b/test/cases/multiple-entry/webpack.config.js
@@ -0,0  1,24 @@
 const Self = require('../../../');
 
 module.exports = {
   entry: {
     'main-one': './index-one.js',
     'main-two': './index-two.js',
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           Self.loader,
           'css-loader',
         ],
       },
     ],
   },
   plugins: [
     new Self({
       filename: '[name].css',
     }),
   ],
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 1,4 @@
		body { background: blue; }

		body { background: yellow; }
Original file line number	Diff line number	Diff line change
		@@ -0,0 1,4 @@
		body { background: red; }

		body { background: green; }