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

Author: bawjensen

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) {

test/cases/multiple-entry/a.css

@@ -0,0 +1 @@
+body { background: red; }

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

@@ -0,0 +1,2 @@
+import './c.css';
+import './d.css';

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

@@ -0,0 +1,2 @@
+import './d.css';
+import './c.css';

test/cases/multiple-entry/b.css

@@ -0,0 +1 @@
+body { background: green; }

test/cases/multiple-entry/c.css

@@ -0,0 +1 @@
+body { background: blue; }

test/cases/multiple-entry/d.css

@@ -0,0 +1 @@
+body { background: yellow; }

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

@@ -0,0 +1,4 @@
+body { background: blue; }
+
+body { background: yellow; }
+

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

@@ -0,0 +1,4 @@
+body { background: yellow; }
+
+body { background: blue; }
+

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

@@ -0,0 +1,4 @@
+body { background: red; }
+
+body { background: green; }
+

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

@@ -0,0 +1,4 @@
+body { background: green; }
+
+body { background: red; }
+

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

@@ -0,0 +1,3 @@
+import './a.css';
+import './b.css';
+import(/* webpackChunkName: 'async-one' */'./async-one');

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

@@ -0,0 +1,3 @@
+import(/* webpackChunkName: 'async-two' */'./async-two');
+import './b.css';
+import './a.css';

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',
+    }),
+  ],
+};