feat: add hook for customizing injected runtime tags

Enable other plugins to tap into the tag injection mechanism in order to customize the functionality of lazy loaded chunks. Closes #40.
webpack-contrib · Apr 14, 2021 · a0ab666 · a0ab666
1 parent a33f22f
commit a0ab666
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
   "dependencies": {
     "loader-utils": "^2.0.0",
     "schema-utils": "^3.0.0",
+    "tapable": "^2.2.0",
     "webpack-sources": "^1.1.0"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
 
 import { validate } from 'schema-utils';
+import { SyncWaterfallHook } from 'tapable';
 
 import schema from './plugin-options.json';
 import { MODULE_TYPE, compareModulesByIdentifier } from './utils';
@@ -28,6 +29,8 @@ const cssModuleCache = new WeakMap();
  */
 const cssDependencyCache = new WeakMap();
 
+const compilerHookMap = new WeakMap();
+
 class MiniCssExtractPlugin {
   static getCssModule(webpack) {
     /**
@@ -300,6 +303,20 @@ class MiniCssExtractPlugin {
     return CssDependency;
   }
 
+  static getCompilerHooks(compiler) {
+    /**
+     * Prevent creation of multiple compiler hook maps to allow other integrations to get the current mapping.
+     */
+    let hooks = compilerHookMap.get(compiler);
+    if (!hooks) {
+      hooks = {
+        customize: new SyncWaterfallHook(['attributes']),
+      };
+      compilerHookMap.set(compiler, hooks);
+    }
+    return hooks;
+  }
+
   constructor(options = {}) {
     validate(schema, options, {
       name: 'Mini CSS Extract Plugin',
@@ -847,30 +864,46 @@ class MiniCssExtractPlugin {
               return null;
             }
 
+            const attributes = {
+              href: `${RuntimeGlobals.publicPath} + ${RuntimeGlobals.require}.miniCssF(chunkId)`,
+              rel: JSON.stringify('stylesheet'),
+              onload: 'onLinkComplete',
+              onerror: 'onLinkComplete',
+            };
+
+            // Some attributes cannot be assigned through setAttribute, so we maintain
+            // a list of attributes that can safely be assigned through dot notation
+            const safeAttrs = ['href', 'rel', 'type', 'onload', 'onerror'];
+
+            if (this.runtimeOptions.linkType) {
+              attributes.type = JSON.stringify(this.runtimeOptions.linkType);
+            }
+
+            if (crossOriginLoading) {
+              attributes.crossOrigin = `(linkTag.href.indexOf(window.location.origin + '/') !== 0)
+                  ? ${JSON.stringify(crossOriginLoading)}
+                  : undefined`;
+            }
+
+            // Append static attributes
+            if (this.runtimeOptions.attributes) {
+              Object.entries(this.runtimeOptions.attributes).forEach(
+                ([key, value]) => {
+                  attributes[key] = JSON.stringify(value);
+                }
+              );
+            }
+
+            // Append dynamic attributes
+            MiniCssExtractPlugin.getCompilerHooks(compiler).customize.call(
+              attributes
+            );
+
             return Template.asString([
               `var createStylesheet = ${runtimeTemplate.basicFunction(
                 'chunkId, fullhref, resolve, reject',
                 [
                   'var linkTag = document.createElement("link");',
-                  this.runtimeOptions.attributes
-                    ? Template.asString(
-                        Object.entries(this.runtimeOptions.attributes).map(
-                          (entry) => {
-                            const [key, value] = entry;
-
-                            return `linkTag.setAttribute(${JSON.stringify(
-                              key
-                            )}, ${JSON.stringify(value)});`;
-                          }
-                        )
-                      )
-                    : '',
-                  'linkTag.rel = "stylesheet";',
-                  this.runtimeOptions.linkType
-                    ? `linkTag.type = ${JSON.stringify(
-                        this.runtimeOptions.linkType
-                      )};`
-                    : '',
                   `var onLinkComplete = ${runtimeTemplate.basicFunction(
                     'event',
                     [
@@ -892,19 +925,17 @@ class MiniCssExtractPlugin {
                       '}',
                     ]
                   )}`,
-                  'linkTag.onerror = linkTag.onload = onLinkComplete;',
-                  'linkTag.href = fullhref;',
-                  crossOriginLoading
-                    ? Template.asString([
-                        `if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`,
-                        Template.indent(
-                          `linkTag.crossOrigin = ${JSON.stringify(
-                            crossOriginLoading
-                          )};`
-                        ),
-                        '}',
-                      ])
-                    : '',
+                  Template.asString(
+                    Object.entries(attributes).map(([key, value]) => {
+                      if (safeAttrs.includes(key)) {
+                        return `linkTag.${key} = ${value};`;
+                      }
+
+                      return `linkTag.setAttribute(${JSON.stringify(
+                        key
+                      )}, ${value});`;
+                    })
+                  ),
                   typeof this.runtimeOptions.insert !== 'undefined'
                     ? typeof this.runtimeOptions.insert === 'function'
                       ? `(${this.runtimeOptions.insert.toString()})(linkTag)`
@@ -945,7 +976,7 @@ class MiniCssExtractPlugin {
                   'resolve, reject',
                   [
                     `var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
-                    `var fullhref = ${RuntimeGlobals.publicPath} + href;`,
+                    `var fullhref = ${attributes.href};`,
                     'if(findStylesheet(href, fullhref)) return resolve();',
                     'createStylesheet(chunkId, fullhref, resolve, reject);',
                   ]
@@ -1016,7 +1047,7 @@ class MiniCssExtractPlugin {
                           'chunkId',
                           [
                             `var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
-                            `var fullhref = ${RuntimeGlobals.publicPath} + href;`,
+                            `var fullhref = ${attributes.href};`,
                             'var oldTag = findStylesheet(href, fullhref);',
                             'if(!oldTag) return;',
                             `promises.push(new Promise(${runtimeTemplate.basicFunction(

diff --git a/test/__snapshots__/attributes-option.test.js.snap.webpack5 b/test/__snapshots__/attributes-option.test.js.snap.webpack5
@@ -4,7 +4,7 @@ exports[`attributes option should work with attributes option: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link id=\\"target\\" data-target=\\"example\\" rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<link href=\\"simple.css\\" rel=\\"stylesheet\\" type=\\"text/css\\" id=\\"target\\" data-target=\\"example\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -22,7 +22,7 @@ exports[`attributes option should work without attributes option: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<link href=\\"simple.css\\" rel=\\"stylesheet\\" type=\\"text/css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>

diff --git a/test/__snapshots__/insert-option.test.js.snap.webpack5 b/test/__snapshots__/insert-option.test.js.snap.webpack5
@@ -3,7 +3,7 @@
 exports[`insert option should work when insert option is function: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><style id=\\"existing-style\\">.existing { color: yellow }</style>
+  <link href=\\"simple.css\\" rel=\\"stylesheet\\" type=\\"text/css\\"><style id=\\"existing-style\\">.existing { color: yellow }</style>
 <script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
@@ -21,7 +21,7 @@ exports[`insert option should work when insert option is function: warnings 1`]
 exports[`insert option should work when insert option is string: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
-  <style id=\\"existing-style\\">.existing { color: yellow }</style><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\">
+  <style id=\\"existing-style\\">.existing { color: yellow }</style><link href=\\"simple.css\\" rel=\\"stylesheet\\" type=\\"text/css\\">
 <script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
@@ -40,7 +40,7 @@ exports[`insert option should work without insert option: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<link href=\\"simple.css\\" rel=\\"stylesheet\\" type=\\"text/css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>

diff --git a/test/__snapshots__/linkTag-option.test.js.snap.webpack5 b/test/__snapshots__/linkTag-option.test.js.snap.webpack5
@@ -4,7 +4,7 @@ exports[`linkType option should work when linkType option is "false": DOM 1`] =
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<link href=\\"simple.css\\" rel=\\"stylesheet\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -22,7 +22,7 @@ exports[`linkType option should work when linkType option is "text/css": DOM 1`]
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<link href=\\"simple.css\\" rel=\\"stylesheet\\" type=\\"text/css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -40,7 +40,7 @@ exports[`linkType option should work without linkType option: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<link href=\\"simple.css\\" rel=\\"stylesheet\\" type=\\"text/css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>

diff --git a/...cted/webpack-5/0.07119853b0d8e8fbe3ca.css → ...cted/webpack-5/0.5f50282222b6b9c8631c.css b/...cted/webpack-5/0.07119853b0d8e8fbe3ca.css → ...cted/webpack-5/0.5f50282222b6b9c8631c.css
diff --git a/...pected/webpack-5/07119853b0d8e8fbe3ca.css → ...pected/webpack-5/5f50282222b6b9c8631c.css b/...pected/webpack-5/07119853b0d8e8fbe3ca.css → ...pected/webpack-5/5f50282222b6b9c8631c.css
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("07119853b0d8e8fbe3ca")
+/******/ 		__webpack_require__.h = () => ("5f50282222b6b9c8631c")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
@@ -174,9 +174,6 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	(() => {
 /******/ 		var createStylesheet = (chunkId, fullhref, resolve, reject) => {
 /******/ 			var linkTag = document.createElement("link");
-/******/ 		
-/******/ 			linkTag.rel = "stylesheet";
-/******/ 			linkTag.type = "text/css";
 /******/ 			var onLinkComplete = (event) => {
 /******/ 				// avoid mem leaks.
 /******/ 				linkTag.onerror = linkTag.onload = null;
@@ -193,9 +190,11 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 					reject(err);
 /******/ 				}
 /******/ 			}
-/******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
-/******/ 			linkTag.href = fullhref;
-/******/ 		
+/******/ 			linkTag.href = __webpack_require__.p + __webpack_require__.miniCssF(chunkId);
+/******/ 			linkTag.rel = "stylesheet";
+/******/ 			linkTag.onload = onLinkComplete;
+/******/ 			linkTag.onerror = onLinkComplete;
+/******/ 			linkTag.type = "text/css";
 /******/ 			document.head.appendChild(linkTag);
 /******/ 			return linkTag;
 /******/ 		};
@@ -216,7 +215,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 		var loadStylesheet = (chunkId) => {
 /******/ 			return new Promise((resolve, reject) => {
 /******/ 				var href = __webpack_require__.miniCssF(chunkId);
-/******/ 				var fullhref = __webpack_require__.p + href;
+/******/ 				var fullhref = __webpack_require__.p + __webpack_require__.miniCssF(chunkId);
 /******/ 				if(findStylesheet(href, fullhref)) return resolve();
 /******/ 				createStylesheet(chunkId, fullhref, resolve, reject);
 /******/ 			});

diff --git a/test/cases/hmr/expected/webpack-5/main.js b/test/cases/hmr/expected/webpack-5/main.js
@@ -846,9 +846,6 @@ module.exports = function (urlString) {
 /******/ 	(() => {
 /******/ 		var createStylesheet = (chunkId, fullhref, resolve, reject) => {
 /******/ 			var linkTag = document.createElement("link");
-/******/ 		
-/******/ 			linkTag.rel = "stylesheet";
-/******/ 			linkTag.type = "text/css";
 /******/ 			var onLinkComplete = (event) => {
 /******/ 				// avoid mem leaks.
 /******/ 				linkTag.onerror = linkTag.onload = null;
@@ -865,9 +862,11 @@ module.exports = function (urlString) {
 /******/ 					reject(err);
 /******/ 				}
 /******/ 			}
-/******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
-/******/ 			linkTag.href = fullhref;
-/******/ 		
+/******/ 			linkTag.href = __webpack_require__.p + __webpack_require__.miniCssF(chunkId);
+/******/ 			linkTag.rel = "stylesheet";
+/******/ 			linkTag.onload = onLinkComplete;
+/******/ 			linkTag.onerror = onLinkComplete;
+/******/ 			linkTag.type = "text/css";
 /******/ 			document.head.appendChild(linkTag);
 /******/ 			return linkTag;
 /******/ 		};
@@ -888,7 +887,7 @@ module.exports = function (urlString) {
 /******/ 		var loadStylesheet = (chunkId) => {
 /******/ 			return new Promise((resolve, reject) => {
 /******/ 				var href = __webpack_require__.miniCssF(chunkId);
-/******/ 				var fullhref = __webpack_require__.p + href;
+/******/ 				var fullhref = __webpack_require__.p + __webpack_require__.miniCssF(chunkId);
 /******/ 				if(findStylesheet(href, fullhref)) return resolve();
 /******/ 				createStylesheet(chunkId, fullhref, resolve, reject);
 /******/ 			});
@@ -913,7 +912,7 @@ module.exports = function (urlString) {
 /******/ 			applyHandlers.push(applyHandler);
 /******/ 			chunkIds.forEach((chunkId) => {
 /******/ 				var href = __webpack_require__.miniCssF(chunkId);
-/******/ 				var fullhref = __webpack_require__.p + href;
+/******/ 				var fullhref = __webpack_require__.p + __webpack_require__.miniCssF(chunkId);
 /******/ 				var oldTag = findStylesheet(href, fullhref);
 /******/ 				if(!oldTag) return;
 /******/ 				promises.push(new Promise((resolve, reject) => {

diff --git a/test/cases/insert-function/expected/webpack-5/main.js b/test/cases/insert-function/expected/webpack-5/main.js
@@ -158,9 +158,6 @@
 /******/ 	(() => {
 /******/ 		var createStylesheet = (chunkId, fullhref, resolve, reject) => {
 /******/ 			var linkTag = document.createElement("link");
-/******/ 		
-/******/ 			linkTag.rel = "stylesheet";
-/******/ 			linkTag.type = "text/css";
 /******/ 			var onLinkComplete = (event) => {
 /******/ 				// avoid mem leaks.
 /******/ 				linkTag.onerror = linkTag.onload = null;
@@ -177,9 +174,11 @@
 /******/ 					reject(err);
 /******/ 				}
 /******/ 			}
-/******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
-/******/ 			linkTag.href = fullhref;
-/******/ 		
+/******/ 			linkTag.href = __webpack_require__.p + __webpack_require__.miniCssF(chunkId);
+/******/ 			linkTag.rel = "stylesheet";
+/******/ 			linkTag.onload = onLinkComplete;
+/******/ 			linkTag.onerror = onLinkComplete;
+/******/ 			linkTag.type = "text/css";
 /******/ 			(function (linkTag) {
 /******/ 			      const reference = document.querySelector('.hot-reload');
 /******/ 		
@@ -206,7 +205,7 @@
 /******/ 		var loadStylesheet = (chunkId) => {
 /******/ 			return new Promise((resolve, reject) => {
 /******/ 				var href = __webpack_require__.miniCssF(chunkId);
-/******/ 				var fullhref = __webpack_require__.p + href;
+/******/ 				var fullhref = __webpack_require__.p + __webpack_require__.miniCssF(chunkId);
 /******/ 				if(findStylesheet(href, fullhref)) return resolve();
 /******/ 				createStylesheet(chunkId, fullhref, resolve, reject);
 /******/ 			});