fix: the same chunkId is overwritten after using mini-css-extract-plugin

Author: msidolphin

examples/mini-css-extract-plugin/webpack.config.js

@@ -13,6 +13,11 @@ module.exports = {
       // both options are optional
       filename: "[name].css",
       chunkFilename: "[id].css",
+      insert: (link) => {
+        link.integrity =
+          __webpack_require__.sriHashes[chunkId + "_css/mini-extract"];
+        document.head.appendChild(link);
+      },
     }),
     new SubresourceIntegrityPlugin({
       hashFuncNames: ["sha256", "sha384"],

webpack-subresource-integrity/src/plugin.ts

@@ -32,6 +32,7 @@ import {
   tryGetSource,
   replaceInSource,
   usesAnyHash,
+  normalizeChunkId,
 } from "./util";
 import { getChunkToManifestMap } from "./manifest";
 import { AssetIntegrity } from "./integrity";
@@ -176,7 +177,10 @@ export class Plugin {
 
         if (childChunk.id !== null) {
           this.hashByPlaceholder.set(
-            makePlaceholder(this.options.hashFuncNames, childChunk.id),
+            makePlaceholder(
+              this.options.hashFuncNames,
+              normalizeChunkId(sourcePath, childChunk)
+            ),
             integrity
           );
         }

webpack-subresource-integrity/src/util.ts

@@ -14,6 +14,8 @@ export type ChunkGroup = ReturnType<Compilation["addChunkInGroup"]>;
 
 export const sriHashVariableReference = "__webpack_require__.sriHashes";
 
+export const miniCssExtractType = "css/mini-extract";
+
 export function assert(value: unknown, message: string): asserts value {
   if (!value) {
     throw new Error(message);
@@ -118,6 +120,13 @@ export function generateSriHashPlaceholders(
 ): Record<string, string> {
   return Array.from(chunks).reduce((sriHashes, depChunk: Chunk) => {
     if (depChunk.id) {
+      const hasMiniCssExtractFile = !!depChunk.contentHash[miniCssExtractType];
+      if (hasMiniCssExtractFile) {
+        sriHashes[`${depChunk.id}_${miniCssExtractType}`] = makePlaceholder(
+          hashFuncNames,
+          `${depChunk.id}_${miniCssExtractType}`
+        );
+      }
       sriHashes[depChunk.id] = makePlaceholder(hashFuncNames, depChunk.id);
     }
     return sriHashes;
@@ -291,3 +300,10 @@ export function hasOwnProperty<X extends object, Y extends PropertyKey>(
 ): obj is X & Record<Y, unknown> {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
+
+export const normalizeChunkId = (sourcePath: string, chunk: Chunk) => {
+  if (sourcePath.endsWith(".css") && chunk.contentHash[miniCssExtractType]) {
+    return `${chunk.id}_${miniCssExtractType}`;
+  }
+  return chunk.id as string | number;
+};