Fix bug with multiple entry point CSS ordering

webpack-contrib · May 7, 2018 · a2900c4 · a2900c4
1 parent 3a144ab
commit a2900c4
Showing 1 changed file with 38 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,42 @@ class MiniCssExtractPlugin {
     return obj;
   }
 
-  renderContentAsset(modules, requestShortener) {
-    modules.sort((a, b) => a.index2 - b.index2);
+  getCssModulesRecursiveHelper(module) {
+    return module.dependencies
+      .filter(dependency => dependency.module)
+      .map((dependency) => {
+        if (dependency.module instanceof CssModule) {
+          return dependency.module;
+        } else if (dependency.module.dependencies) {
+          return this.getCssModulesRecursiveHelper(dependency.module);
+        }
+        return [];
+      })
+      .reduce((flattenedModules, dependency) => {
+        if (Array.isArray(dependency)) {
+          dependency.forEach((dep) => { if (dep) flattenedModules.push(dep); });
+        } else if (dependency) {
+          flattenedModules.push(dependency);
+        }
+        return flattenedModules;
+      }, []);
+  }
+
+  getCssModulesOrderMap(chunk) {
+    const [shallowestModule] = Array.from(chunk.modulesIterable).sort((a, b) => a.depth - b.depth);
+
+    return this.getCssModulesRecursiveHelper(shallowestModule)
+      .reduce((indexMap, module, i) => {
+        // Only keep the first occurrence
+        if (module.id in indexMap) return indexMap;
+        return Object.assign(indexMap, { [module.id]: i });
+      }, {});
+  }
+
+  renderContentAsset(chunk, modules, requestShortener) {
+    const idToIndexMap = this.getCssModulesOrderMap(chunk);
+    modules.sort((a, b) => idToIndexMap[a.id] - idToIndexMap[b.id]);
+
     const source = new ConcatSource();
     const externalsSource = new ConcatSource();
     for (const m of modules) {