feat: add beforeTagInsert hook

Author: msidolphin

.cspell.json

@@ -30,7 +30,8 @@
     "vspace",
     "commitlint",
     "unreload",
-    "cnfg"
+    "cnfg",
+    "tapable"
   ],
 
   "ignorePaths": [

package-lock.json

@@ -52,7 +52,8 @@
     "webpack": "^5.0.0"
   },
   "dependencies": {
-    "schema-utils": "^4.0.0"
+    "schema-utils": "^4.0.0",
+    "tapable": "^2.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",

package.json

@@ -0,0 +1,38 @@
+/** @typedef {import("webpack").Compiler} WebpackCompiler */
+/**
+ * @typedef {Object} MiniCssExtractHooks
+ * @property {import("tapable").SyncBailHook<{ varNames: { tag: string, chunkId: string } }, string>} [beforeTagInsert]
+ */
+
+const { SyncBailHook } = require("tapable");
+
+/**
+ * @type {WeakMap<WebpackCompiler, MiniCssExtractHooks>}}
+ */
+const miniCssExtractHooksMap = new WeakMap();
+
+/**
+ * @param {WebpackCompiler} complier
+ */
+function getHooks(complier) {
+  let hooks = miniCssExtractHooksMap.get(complier);
+  // Setup the hooks only once
+  if (!hooks) {
+    hooks = createHooks();
+    miniCssExtractHooksMap.set(complier, hooks);
+  }
+  return hooks;
+}
+
+/**
+ * @returns {MiniCssExtractHooks}
+ */
+function createHooks() {
+  return {
+    beforeTagInsert: new SyncBailHook(["vars"]),
+  };
+}
+
+module.exports = {
+  getHooks,
+};

src/hooks.js

@@ -15,6 +15,7 @@ const {
   getUndoPath,
   BASE_URI,
 } = require("./utils");
+const { getHooks } = require("./hooks");
 
 /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
 /** @typedef {import("webpack").Compiler} Compiler */
@@ -511,6 +512,14 @@ class MiniCssExtractPlugin {
     return CssDependency;
   }
 
+  /**
+   * Returns all hooks for the given compiler
+   * @param {Compiler} compiler
+   */
+  static getHooks(compiler) {
+    return getHooks(compiler);
+  }
+
   /**
    * @param {PluginOptions} [options]
    */
@@ -838,7 +847,6 @@ class MiniCssExtractPlugin {
           if (!withLoading && !withHmr) {
             return "";
           }
-
           return Template.asString([
             'if (typeof document === "undefined") return;',
             `var createStylesheet = ${runtimeTemplate.basicFunction(
@@ -895,6 +903,12 @@ class MiniCssExtractPlugin {
                       "}",
                     ])
                   : "",
+                MiniCssExtractPlugin.getHooks(compiler).beforeTagInsert?.call({
+                  varNames: {
+                    chunkId: "chunkId",
+                    tag: "linkTag",
+                  },
+                }),
                 typeof this.runtimeOptions.insert !== "undefined"
                   ? typeof this.runtimeOptions.insert === "function"
                     ? `(${this.runtimeOptions.insert.toString()})(linkTag)`
@@ -912,7 +926,7 @@ class MiniCssExtractPlugin {
                       "}",
                     ]),
                 "return linkTag;",
-              ]
+              ].filter((statement) => statement !== undefined)
             )};`,
             `var findStylesheet = ${runtimeTemplate.basicFunction(
               "href, fullhref",

src/index.js

@@ -1,7 +1,11 @@
+import path from "path";
+
 import webpack from "webpack";
 
 import MiniCssExtractPlugin from "../src";
 
+import { getCompiler } from "./helpers/index";
+
 describe("API", () => {
   it("should return the same CssModule when same webpack instance provided", () => {
     expect(MiniCssExtractPlugin.getCssModule(webpack)).toEqual(
@@ -14,4 +18,27 @@ describe("API", () => {
       MiniCssExtractPlugin.getCssDependency(webpack)
     );
   });
+
+  it("should return the same Hooks when same webpack instance provided", () => {
+    const compiler = getCompiler(
+      "insert.js",
+      {},
+      {
+        mode: "none",
+        output: {
+          publicPath: "",
+          path: path.resolve(__dirname, "../outputs"),
+          filename: "[name].bundle.js",
+        },
+        plugins: [
+          new MiniCssExtractPlugin({
+            filename: "[name].css",
+          }),
+        ],
+      }
+    );
+    expect(MiniCssExtractPlugin.getHooks(compiler)).toEqual(
+      MiniCssExtractPlugin.getHooks(compiler)
+    );
+  });
 });

test/api.test.js

@@ -0,0 +1,44 @@
+/* eslint-env browser */
+import path from "path";
+
+import MiniCssExtractPlugin from "../src";
+
+import { runInJsDom, compile, getCompiler } from "./helpers/index";
+
+describe("hooks", () => {
+  it(`beforeTagInsert`, async () => {
+    const webpackCompiler = getCompiler(
+      "insert.js",
+      {},
+      {
+        mode: "none",
+        output: {
+          publicPath: "",
+          path: path.resolve(__dirname, "../outputs"),
+          filename: "[name].bundle.js",
+        },
+        plugins: [
+          new MiniCssExtractPlugin({
+            filename: "[name].css",
+          }),
+          {
+            apply: (compiler) => {
+              MiniCssExtractPlugin.getHooks(compiler).beforeTagInsert.tap(
+                "beforeTagInsertHook",
+                (options) =>
+                  `${options.varNames.tag}.setAttribute("integrity", "sriHashes")`
+              );
+            },
+          },
+        ],
+      }
+    );
+    const stats = await compile(webpackCompiler);
+    runInJsDom("main.bundle.js", webpackCompiler, stats, (dom) => {
+      const integrity = dom.window.document.head
+        .getElementsByTagName("link")[0]
+        .getAttribute("integrity");
+      expect(integrity).toBe("sriHashes");
+    });
+  });
+});

test/hooks.test.js

@@ -0,0 +1,20 @@
+export type WebpackCompiler = import("webpack").Compiler;
+export type MiniCssExtractHooks = {
+  beforeTagInsert?:
+    | SyncBailHook<
+        {
+          varNames: {
+            tag: string;
+            chunkId: string;
+          };
+        },
+        string,
+        import("tapable").UnsetAdditionalOptions
+      >
+    | undefined;
+};
+/**
+ * @param {WebpackCompiler} complier
+ */
+export function getHooks(complier: WebpackCompiler): MiniCssExtractHooks;
+import { SyncBailHook } from "tapable";

types/hooks.d.ts

@@ -12,6 +12,11 @@ declare class MiniCssExtractPlugin {
   static getCssDependency(
     webpack: Compiler["webpack"]
   ): CssDependencyConstructor;
+  /**
+   * Returns all hooks for the given compiler
+   * @param {Compiler} compiler
+   */
+  static getHooks(compiler: Compiler): import("./hooks").MiniCssExtractHooks;
   /**
    * @param {PluginOptions} [options]
    */