Fix bug with multiple entry point CSS ordering

webpack-contrib · May 5, 2018 · e48f1f9 · e48f1f9
1 parent 842195a
commit e48f1f9
Showing 1 changed file with 38 additions and 4 deletions.
diff --git a/src/index.js b/src/index.js
@@ -138,7 +138,7 @@ class MiniCssExtractPlugin {
         const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === NS);
         if (renderedModules.length > 0) {
           result.push({
-            render: () => this.renderContentAsset(renderedModules, compilation.runtimeTemplate.requestShortener),
+            render: () => this.renderContentAsset(chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
             filenameTemplate: this.options.filename,
             pathOptions: {
               chunk,
@@ -153,7 +153,7 @@ class MiniCssExtractPlugin {
         const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === NS);
         if (renderedModules.length > 0) {
           result.push({
-            render: () => this.renderContentAsset(renderedModules, compilation.runtimeTemplate.requestShortener),
+            render: () => this.renderContentAsset(chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
             filenameTemplate: this.options.chunkFilename,
             pathOptions: {
               chunk,
@@ -339,8 +339,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) {