feat: add beforeTagInsert hook

.cspell.json

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

README.md

@@ -1194,6 +1194,27 @@ If you'd like to extract the media queries from the extracted CSS (so mobile use
 - [Media Query Plugin](https://github.com/SassNinja/media-query-plugin)
 - [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin)
 
+## Hooks
+
+The mini-css-extract-plugin provides hooks to extend it to your needs.
+
+### beforeTagInsert
+
+`SyncWaterfallHook`
+
+Called before inject the insert code for link tag. Should return a string
+
+```javascript
+MiniCssExtractPlugin.getHooks(compiler).beforeTagInsert.tap(
+  "changeHref",
+  (source, varNames) =>
+    compiler.webpack.Template.asString([
+      source,
+      `${varNames.tag}.setAttribute("href", "https://github.com/webpack-contrib/mini-css-extract-plugin");`,
+    ])
+);
+```
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.

package.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",

src/hooks.js

@@ -0,0 +1,46 @@
+/** @typedef {import("webpack").Compiler} WebpackCompiler */
+/**
+ * @typedef {Object} VarNames
+ * @property {string} tag
+ * @property {string} chunkId
+ * @property {string} href
+ * @property {string} resolve
+ * @property {string} reject
+ */
+/**
+ * @typedef {Object} MiniCssExtractHooks
+ * @property {import("tapable").SyncWaterfallHook<[string, VarNames]>} beforeTagInsert
+ */
+
+const { SyncWaterfallHook } = 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 SyncWaterfallHook(["source", "varNames"]),
+  };
+}
+
+module.exports = {
+  getHooks,
+};

src/index.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 */
@@ -513,6 +514,14 @@ class MiniCssExtractPlugin {
     return CssDependency;
   }
 
+  /**
+   * Returns all hooks for the given compiler
+   * @param {Compiler} compiler
+   */
+  static getHooks(compiler) {
+    return getHooks(compiler);
+  }
+
   /**
    * @param {PluginOptions} [options]
    */
@@ -843,7 +852,6 @@ class MiniCssExtractPlugin {
           if (!withLoading && !withHmr) {
             return "";
           }
-
           return Template.asString([
             'if (typeof document === "undefined") return;',
             `var createStylesheet = ${runtimeTemplate.basicFunction(
@@ -902,6 +910,16 @@ class MiniCssExtractPlugin {
                       "}",
                     ])
                   : "",
+                MiniCssExtractPlugin.getHooks(compiler).beforeTagInsert.call(
+                  "",
+                  {
+                    tag: "linkTag",
+                    chunkId: "chunkId",
+                    href: "fullhref",
+                    resolve: "resolve",
+                    reject: "reject",
+                  }
+                ) || "",
                 typeof this.runtimeOptions.insert !== "undefined"
                   ? typeof this.runtimeOptions.insert === "function"
                     ? `(${this.runtimeOptions.insert.toString()})(linkTag)`

test/api.test.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/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js

@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("7f0e5fa686a9bb728e64")
+/******/ 		__webpack_require__.h = () => ("04f5273a6b9819ed9e63")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
@@ -201,6 +201,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
 /******/ 			linkTag.href = fullhref;
 /******/ 		
+/******/ 		
 /******/ 			if (oldTag) {
 /******/ 				oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);
 /******/ 			} else {

test/cases/chunkFilename-fullhash/expected/webpack-5/main.js

@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("100253bb7576627988e6")
+/******/ 		__webpack_require__.h = () => ("04f5273a6b9819ed9e63")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
@@ -201,6 +201,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
 /******/ 			linkTag.href = fullhref;
 /******/ 		
+/******/ 		
 /******/ 			if (oldTag) {
 /******/ 				oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);
 /******/ 			} else {

test/cases/hmr/expected/main.js

@@ -964,6 +964,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
 /******/ 			linkTag.href = fullhref;
 /******/ 		
+/******/ 		
 /******/ 			if (oldTag) {
 /******/ 				oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);
 /******/ 			} else {

test/cases/insert-function/expected/main.js

@@ -185,6 +185,7 @@
 /******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
 /******/ 			linkTag.href = fullhref;
 /******/ 		
+/******/ 		
 /******/ 			(function (linkTag) {
 /******/ 			      const reference = document.querySelector(".hot-reload");
 /******/ 			      if (reference) {

test/cases/insert-string/expected/main.js

@@ -185,6 +185,7 @@
 /******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
 /******/ 			linkTag.href = fullhref;
 /******/ 		
+/******/ 		
 /******/ 			var target = document.querySelector("script[src='1.js']");
 /******/ 			target.parentNode.insertBefore(linkTag, target.nextSibling);
 /******/ 			return linkTag;

test/cases/insert-undefined/expected/main.js

@@ -185,6 +185,7 @@
 /******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
 /******/ 			linkTag.href = fullhref;
 /******/ 		
+/******/ 		
 /******/ 			if (oldTag) {
 /******/ 				oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);
 /******/ 			} else {

test/hooks.test.js

@@ -0,0 +1,60 @@
+/* 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(
+                "sri",
+                (source, varNames) =>
+                  compiler.webpack.Template.asString([
+                    source,
+                    `${varNames.tag}.setAttribute("integrity", "sriHashes[${varNames.chunkId}]");`,
+                  ])
+              );
+            },
+          },
+          {
+            apply: (compiler) => {
+              MiniCssExtractPlugin.getHooks(compiler).beforeTagInsert.tap(
+                "changeHref",
+                (source, varNames) =>
+                  compiler.webpack.Template.asString([
+                    source,
+                    `${varNames.tag}.setAttribute("href", "https://github.com/webpack-contrib/mini-css-extract-plugin");`,
+                  ])
+              );
+            },
+          },
+        ],
+      }
+    );
+    const stats = await compile(webpackCompiler);
+    runInJsDom("main.bundle.js", webpackCompiler, stats, (dom) => {
+      const [tag] = dom.window.document.head.getElementsByTagName("link");
+      expect(tag.getAttribute("integrity")).toBe("sriHashes[chunkId]");
+      expect(tag.getAttribute("href")).toBe(
+        "https://github.com/webpack-contrib/mini-css-extract-plugin"
+      );
+    });
+  });
+});

types/hooks.d.ts

@@ -0,0 +1,15 @@
+export type WebpackCompiler = import("webpack").Compiler;
+export type VarNames = {
+  tag: string;
+  chunkId: string;
+  href: string;
+  resolve: string;
+  reject: string;
+};
+export type MiniCssExtractHooks = {
+  beforeTagInsert: import("tapable").SyncWaterfallHook<[string, VarNames]>;
+};
+/**
+ * @param {WebpackCompiler} complier
+ */
+export function getHooks(complier: WebpackCompiler): MiniCssExtractHooks;

types/index.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]
    */