@depup/webpack 5.106.0-depup.0 → 5.109.0-depup.0

package/lib/css/CssInjectStyleRuntimeModule.js

@@ -6,10 +6,11 @@
 "use strict";
 
 const { SyncWaterfallHook } = require("tapable");
-const Compilation = require("../Compilation");
+/** @typedef {import("../Compilation")} Compilation */
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
+const createHooksRegistry = require("../util/createHooksRegistry");
 
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
@@ -19,30 +20,7 @@ const Template = require("../Template");
  * @property {SyncWaterfallHook<[string, Chunk]>} createStyle
  */
 
-/** @type {WeakMap<Compilation, CssInjectCompilationHooks>} */
-const compilationHooksMap = new WeakMap();
-
 class CssInjectStyleRuntimeModule extends RuntimeModule {
-	/**
-	 * @param {Compilation} compilation the compilation
-	 * @returns {CssInjectCompilationHooks} hooks
-	 */
-	static getCompilationHooks(compilation) {
-		if (!(compilation instanceof Compilation)) {
-			throw new TypeError(
-				"The 'compilation' argument must be an instance of Compilation"
-			);
-		}
-		let hooks = compilationHooksMap.get(compilation);
-		if (hooks === undefined) {
-			hooks = {
-				createStyle: new SyncWaterfallHook(["source", "chunk"])
-			};
-			compilationHooksMap.set(compilation, hooks);
-		}
-		return hooks;
-	}
-
 	/**
 	 * @param {ReadOnlyRuntimeRequirements} runtimeRequirements runtime requirements
 	 */
@@ -53,6 +31,7 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 	}
 
 	/**
+	 * Generates runtime code for this runtime module.
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
@@ -69,42 +48,67 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 		const { createStyle } =
 			CssInjectStyleRuntimeModule.getCompilationHooks(compilation);
 
+		// Only emit the nonce check when scriptNonce is part of the runtime
+		// requirements. Otherwise referencing `__webpack_require__.nc` would
+		// keep the require runtime alive for nothing.
+		const withScriptNonce =
+			_runtimeRequirements &&
+			_runtimeRequirements.has(RuntimeGlobals.scriptNonce);
+
+		const cst = runtimeTemplate.renderConst();
+		const isNeutralPlatform = runtimeTemplate.isNeutralPlatform();
+		// universal targets run in node too: collect styles for SSR retrieval
+		// instead of touching a DOM that isn't there
+		const injectGuard = isNeutralPlatform
+			? [
+					"if (typeof document === 'undefined') {",
+					Template.indent([
+						`${runtimeTemplate.cssServerStyleRegistry()}[identifier] = css;`,
+						"return;"
+					]),
+					"}"
+				]
+			: [];
+		const removeGuard = isNeutralPlatform
+			? [
+					"if (typeof document === 'undefined') {",
+					Template.indent([
+						`${cst} styles = ${runtimeTemplate.cssServerStyleRegistry()};`,
+						"for (var i = 0; i < identifiers.length; i++) delete styles[identifiers[i]];",
+						"return;"
+					]),
+					"}"
+				]
+			: [];
+
 		const createStyleElementCode = Template.asString([
-			"var style = document.createElement('style');",
+			`${cst} style = document.createElement('style');`,
 			"",
-			`if (${RuntimeGlobals.scriptNonce}) {`,
-			Template.indent(
-				`style.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
-			),
-			"}",
+			...(withScriptNonce
+				? [
+						`if (${RuntimeGlobals.scriptNonce}) {`,
+						Template.indent(
+							`style.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
+						),
+						"}"
+					]
+				: []),
 			'style.setAttribute("data-webpack", getDataWebpackId(key));'
 		]);
 
 		return Template.asString([
-			`var dataWebpackPrefix = ${uniqueName ? JSON.stringify(`${uniqueName}:`) : '"webpack:"'};`,
+			`${cst} dataWebpackPrefix = ${uniqueName ? JSON.stringify(`${uniqueName}:`) : '"webpack:"'};`,
 			"",
 			"function getDataWebpackId(identifier) {",
 			Template.indent("return dataWebpackPrefix + identifier;"),
 			"}",
 			"",
-			"function applyStyle(styleElement, css) {",
-			Template.indent("styleElement.textContent = css;"),
-			"}",
-			"",
-			"function removeStyleElement(styleElement) {",
-			Template.indent([
-				"if (styleElement.parentNode) {",
-				Template.indent("styleElement.parentNode.removeChild(styleElement);"),
-				"}"
-			]),
-			"}",
-			"",
 			"function findStyleElement(identifier) {",
 			Template.indent([
-				"var elements = document.getElementsByTagName('style');",
+				`${cst} elements = document.getElementsByTagName('style');`,
 				"for (var i = 0; i < elements.length; i++) {",
 				Template.indent([
-					"var el = elements[i];",
+					`${cst} el = elements[i];`,
 					"if (el.getAttribute('data-webpack') === getDataWebpackId(identifier)) {",
 					Template.indent("return el;"),
 					"}"
@@ -130,36 +134,41 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 			`${RuntimeGlobals.cssInjectStyle} = ${runtimeTemplate.basicFunction(
 				"identifier, css",
 				[
-					"var element = findStyleElement(identifier);",
-					"if (element) {",
-					Template.indent("applyStyle(element, css);"),
-					"} else {",
-					Template.indent([
-						"var element = insertStyleElement(identifier);",
-						"applyStyle(element, css);"
-					]),
-					"}"
+					...injectGuard,
+					`${cst} element = findStyleElement(identifier) || insertStyleElement(identifier);`,
+					"element.textContent = css;"
 				]
 			)};`,
 			"",
-			`${RuntimeGlobals.cssInjectStyle}.removeModules = ${runtimeTemplate.basicFunction(
-				"removedModules",
-				[
-					"if (!removedModules) return;",
-					"var identifiers = Array.isArray(removedModules) ? removedModules : [removedModules];",
-					"for (var i = 0; i < identifiers.length; i++) {",
-					Template.indent([
-						"var identifier = identifiers[i];",
-						"var element = findStyleElement(identifier);",
-						"if (element) {",
-						Template.indent("removeStyleElement(element);"),
-						"}"
-					]),
-					"}"
-				]
-			)};`,
 			withHmr
 				? Template.asString([
+						"",
+						"function removeStyleElement(styleElement) {",
+						Template.indent([
+							"if (styleElement.parentNode) {",
+							Template.indent(
+								"styleElement.parentNode.removeChild(styleElement);"
+							),
+							"}"
+						]),
+						"}",
+						`${RuntimeGlobals.cssInjectStyle}.removeModules = ${runtimeTemplate.basicFunction(
+							"removedModules",
+							[
+								"if (!removedModules) return;",
+								`${cst} identifiers = Array.isArray(removedModules) ? removedModules : [removedModules];`,
+								...removeGuard,
+								"for (var i = 0; i < identifiers.length; i++) {",
+								Template.indent([
+									`${cst} identifier = identifiers[i];`,
+									`${cst} element = findStyleElement(identifier);`,
+									"if (element) {",
+									Template.indent("removeStyleElement(element);"),
+									"}"
+								]),
+								"}"
+							]
+						)};`,
 						`${RuntimeGlobals.hmrDownloadUpdateHandlers}.cssInjectStyle = ${runtimeTemplate.basicFunction(
 							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
 							[
@@ -176,4 +185,11 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 	}
 }
 
+CssInjectStyleRuntimeModule.getCompilationHooks = createHooksRegistry(
+	() =>
+		/** @type {CssInjectCompilationHooks} */ ({
+			createStyle: new SyncWaterfallHook(["source", "chunk"])
+		})
+);
+
 module.exports = CssInjectStyleRuntimeModule;

package/lib/css/CssLoadingRuntimeModule.js

@@ -6,12 +6,13 @@
 "use strict";
 
 const { SyncWaterfallHook } = require("tapable");
-const Compilation = require("../Compilation");
+/** @typedef {import("../Compilation")} Compilation */
 const { CSS_TYPE } = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
 const compileBooleanMatcher = require("../util/compileBooleanMatcher");
+const createHooksRegistry = require("../util/createHooksRegistry");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
 /** @typedef {import("../Chunk")} Chunk */
@@ -24,44 +25,22 @@ const { chunkHasCss } = require("./CssModulesPlugin");
  * @property {SyncWaterfallHook<[string, Chunk]>} createStylesheet
  * @property {SyncWaterfallHook<[string, Chunk]>} linkPreload
  * @property {SyncWaterfallHook<[string, Chunk]>} linkPrefetch
+ * @property {SyncWaterfallHook<[string, Chunk]>} linkInsert
  */
 
-/** @type {WeakMap<Compilation, CssLoadingRuntimeModulePluginHooks>} */
-const compilationHooksMap = new WeakMap();
-
 class CssLoadingRuntimeModule extends RuntimeModule {
-	/**
-	 * @param {Compilation} compilation the compilation
-	 * @returns {CssLoadingRuntimeModulePluginHooks} hooks
-	 */
-	static getCompilationHooks(compilation) {
-		if (!(compilation instanceof Compilation)) {
-			throw new TypeError(
-				"The 'compilation' argument must be an instance of Compilation"
-			);
-		}
-		let hooks = compilationHooksMap.get(compilation);
-		if (hooks === undefined) {
-			hooks = {
-				createStylesheet: new SyncWaterfallHook(["source", "chunk"]),
-				linkPreload: new SyncWaterfallHook(["source", "chunk"]),
-				linkPrefetch: new SyncWaterfallHook(["source", "chunk"])
-			};
-			compilationHooksMap.set(compilation, hooks);
-		}
-		return hooks;
-	}
-
 	/**
 	 * @param {ReadOnlyRuntimeRequirements} runtimeRequirements runtime requirements
 	 */
 	constructor(runtimeRequirements) {
 		super("css loading", 10);
 
+		/** @type {ReadOnlyRuntimeRequirements} */
 		this._runtimeRequirements = runtimeRequirements;
 	}
 
 	/**
+	 * Generates runtime code for this runtime module.
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
@@ -75,7 +54,8 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				crossOriginLoading,
 				uniqueName,
 				chunkLoadTimeout: loadTimeout,
-				charset
+				charset,
+				importMetaName
 			}
 		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
@@ -119,9 +99,11 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const withPreload =
 			this._runtimeRequirements.has(RuntimeGlobals.preloadChunkHandlers) &&
 			(environment.document || isNeutralPlatform) &&
-			chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss);
+			(chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss) ||
+				// `parser.javascript.dynamicImportCssPreload` — CSS-only preload order.
+				chunk.hasChildByOrder(chunkGraph, "cssPreload", true, chunkHasCss));
 
-		const { linkPreload, linkPrefetch, createStylesheet } =
+		const { linkPreload, linkPrefetch, createStylesheet, linkInsert } =
 			CssLoadingRuntimeModule.getCompilationHooks(compilation);
 
 		const withFetchPriority = _runtimeRequirements.has(
@@ -168,39 +150,42 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				: ""
 		]);
 
+		const cst = runtimeTemplate.renderConst();
+		const lt = runtimeTemplate.renderLet();
+		const installedChunksObject = `{\n${Template.indent(
+			Array.from(initialChunkIds, (id) => `${JSON.stringify(id)}: 0`).join(
+				",\n"
+			)
+		)}\n}`;
 		return Template.asString([
 			"// object to store loaded and loading chunks",
 			"// undefined = chunk not loaded, null = chunk preloaded/prefetched",
 			"// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded",
-			`var installedChunks = ${
-				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
-			}{`,
-			Template.indent(
-				Array.from(initialChunkIds, (id) => `${JSON.stringify(id)}: 0`).join(
-					",\n"
-				)
-			),
-			"};",
+			`${cst} installedChunks = ${
+				stateExpression
+					? runtimeTemplate.assignOr(stateExpression, installedChunksObject)
+					: installedChunksObject
+			};`,
 			"",
 			uniqueName
-				? `var uniqueName = ${JSON.stringify(
+				? `${cst} uniqueName = ${JSON.stringify(
 						runtimeTemplate.outputOptions.uniqueName
 					)};`
 				: "// data-webpack is not used as build has no uniqueName",
 			withLoading || withHmr
 				? Template.asString([
-						'var loadingAttribute = "data-webpack-loading";',
-						`var loadStylesheet = ${runtimeTemplate.basicFunction(
+						`${cst} loadingAttribute = "data-webpack-loading";`,
+						`${cst} loadStylesheet = ${runtimeTemplate.basicFunction(
 							`chunkId, url, done${
 								withFetchPriority ? ", fetchPriority" : ""
 							}${withHmr ? ", hmr" : ""}`,
 							[
-								'var link, needAttach, key = "chunk-" + chunkId;',
+								`${lt} link, needAttach, key = "chunk-" + chunkId;`,
 								withHmr ? "if(!hmr) {" : "",
-								'var links = document.getElementsByTagName("link");',
+								`${cst} links = document.getElementsByTagName("link");`,
 								"for(var i = 0; i < links.length; i++) {",
 								Template.indent([
-									"var l = links[i];",
+									`${cst} l = links[i];`,
 									`if(l.rel == "stylesheet" && (${
 										withHmr
 											? 'l.href.startsWith(url) || l.getAttribute("href").startsWith(url)'
@@ -220,7 +205,8 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 									createStylesheet.call(code, /** @type {Chunk} */ (this.chunk))
 								]),
 								"}",
-								`var onLinkComplete = ${runtimeTemplate.basicFunction(
+								`${lt} timeout;`,
+								`${cst} onLinkComplete = ${runtimeTemplate.basicFunction(
 									"prev, event",
 									Template.asString([
 										"link.onerror = link.onload = null;",
@@ -233,7 +219,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								)};`,
 								"if(link.getAttribute(loadingAttribute)) {",
 								Template.indent([
-									`var timeout = setTimeout(onLinkComplete.bind(null, undefined, { type: 'timeout', target: link }), ${loadTimeout});`,
+									`timeout = setTimeout(onLinkComplete.bind(null, undefined, { type: 'timeout', target: link }), ${loadTimeout});`,
 									"link.onerror = onLinkComplete.bind(null, link.onerror);",
 									"link.onload = onLinkComplete.bind(null, link.onload);"
 								]),
@@ -241,8 +227,24 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								withHmr && withFetchPriority
 									? 'if (hmr && hmr.getAttribute("fetchpriority")) link.setAttribute("fetchpriority", hmr.getAttribute("fetchpriority"));'
 									: "",
-								withHmr ? "hmr ? document.head.insertBefore(link, hmr) :" : "",
-								"needAttach && document.head.appendChild(link);",
+								linkInsert.call(
+									withHmr
+										? Template.asString([
+												"if (hmr) {",
+												Template.indent(
+													"hmr.parentNode.insertBefore(link, hmr);"
+												),
+												"} else if (needAttach) {",
+												Template.indent("document.head.appendChild(link);"),
+												"}"
+											])
+										: Template.asString([
+												"if (needAttach) {",
+												Template.indent("document.head.appendChild(link);"),
+												"}"
+											]),
+									/** @type {Chunk} */ (this.chunk)
+								),
 								"return link;"
 							]
 						)};`
@@ -254,7 +256,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 							`chunkId, promises${withFetchPriority ? " , fetchPriority" : ""}`,
 							[
 								"// css chunk loading",
-								`var installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
+								`${lt} installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
 								'if(installedChunkData !== 0) { // 0 means "already installed".',
 								Template.indent([
 									"",
@@ -268,17 +270,17 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 											: `if(${hasCssMatcher("chunkId")}) {`,
 										Template.indent([
 											"// setup Promise in chunk cache",
-											`var promise = new Promise(${runtimeTemplate.expressionFunction(
+											`${cst} promise = new Promise(${runtimeTemplate.expressionFunction(
 												"installedChunkData = installedChunks[chunkId] = [resolve, reject]",
 												"resolve, reject"
 											)});`,
 											"promises.push(installedChunkData[2] = promise);",
 											"",
 											"// start chunk loading",
-											`var url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+											`${cst} url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
 											"// create error before stack unwound to get useful stacktrace later",
-											"var error = new Error();",
-											`var loadingEnded = ${runtimeTemplate.basicFunction(
+											`${cst} error = new Error();`,
+											`${cst} loadingEnded = ${runtimeTemplate.basicFunction(
 												"event",
 												[
 													`if(${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId)) {`,
@@ -289,12 +291,13 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 														Template.indent([
 															'if(event.type !== "load") {',
 															Template.indent([
-																"var errorType = event && event.type;",
-																"var realHref = event && event.target && event.target.href;",
+																`${cst} errorType = event && event.type;`,
+																`${cst} realHref = event && event.target && event.target.href;`,
 																"error.message = 'Loading css chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realHref + ')';",
 																"error.name = 'ChunkLoadError';",
 																"error.type = errorType;",
 																"error.request = realHref;",
+																"error.event = event;",
 																"installedChunkData[1](error);"
 															]),
 															"} else {",
@@ -318,7 +321,25 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 												});`
 											]),
 											isNeutralPlatform
-												? "} else { loadingEnded({ type: 'load' }); }"
+												? Template.asString([
+														"} else {",
+														Template.indent([
+															// no DOM (Node SSR): read the emitted CSS via dynamic import('fs') (works on every node), collect it; never reject on a missing file
+															`Promise.all([import('fs'), import('url')]).then(${runtimeTemplate.basicFunction(
+																"[{ readFile }, { URL }]",
+																[
+																	`readFile(new URL(url, ${importMetaName}.url), 'utf8', ${runtimeTemplate.basicFunction(
+																		"err, content",
+																		[
+																			`if (!err) ${runtimeTemplate.cssServerStyleRegistry()}["chunk-" + chunkId] = content;`,
+																			"loadingEnded({ type: 'load' });"
+																		]
+																	)});`
+																]
+															)});`
+														]),
+														"}"
+													])
 												: ""
 										]),
 										"} else installedChunks[chunkId] = 0;"
@@ -342,12 +363,13 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 						}) {`,
 						Template.indent([
 							"installedChunks[chunkId] = null;",
+							// prefetch is a browser-only resource hint; no-op without a DOM (e.g. node side of a universal build)
 							isNeutralPlatform
 								? "if (typeof document === 'undefined') return;"
 								: "",
 							linkPrefetch.call(
 								Template.asString([
-									"var link = document.createElement('link');",
+									`${cst} link = document.createElement('link');`,
 									charset ? "link.charset = 'utf-8';" : "",
 									crossOriginLoading
 										? `link.crossOrigin = ${JSON.stringify(
@@ -382,12 +404,13 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 						}) {`,
 						Template.indent([
 							"installedChunks[chunkId] = null;",
+							// preload is a browser-only resource hint; no-op without a DOM (e.g. node side of a universal build)
 							isNeutralPlatform
 								? "if (typeof document === 'undefined') return;"
 								: "",
 							linkPreload.call(
 								Template.asString([
-									"var link = document.createElement('link');",
+									`${cst} link = document.createElement('link');`,
 									charset ? "link.charset = 'utf-8';" : "",
 									`if (${RuntimeGlobals.scriptNonce}) {`,
 									Template.indent(
@@ -420,26 +443,26 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				: "// no preloaded",
 			withHmr
 				? Template.asString([
-						"var oldTags = [];",
-						"var newTags = [];",
-						`var applyHandler = ${runtimeTemplate.basicFunction("options", [
-							`return { dispose: ${runtimeTemplate.basicFunction("", [
+						`${cst} oldTags = [];`,
+						`${cst} newTags = [];`,
+						`${cst} applyHandler = ${runtimeTemplate.basicFunction("options", [
+							`return { ${runtimeTemplate.method("dispose", "", [
 								"while(oldTags.length) {",
 								Template.indent([
-									"var oldTag = oldTags.pop();",
-									"if(oldTag && oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"
+									`${cst} oldTag = oldTags.pop();`,
+									`if(${runtimeTemplate.optionalChaining("oldTag", "parentNode")}) oldTag.parentNode.removeChild(oldTag);`
 								]),
 								"}"
-							])}, apply: ${runtimeTemplate.basicFunction("", [
+							])}, ${runtimeTemplate.method("apply", "", [
 								"while(newTags.length) {",
 								Template.indent([
-									"var newTag = newTags.pop();",
+									`${cst} newTag = newTags.pop();`,
 									"newTag.sheet.disabled = false"
 								]),
 								"}"
 							])} };`
 						])}`,
-						`var cssTextKey = ${runtimeTemplate.returningFunction(
+						`${cst} cssTextKey = ${runtimeTemplate.returningFunction(
 							`Array.from(link.sheet.cssRules, ${runtimeTemplate.returningFunction(
 								"r.cssText",
 								"r"
@@ -452,37 +475,83 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
 							[
 								isNeutralPlatform
-									? "if (typeof document === 'undefined') return;"
+									? Template.asString([
+											"if (typeof document === 'undefined') {",
+											Template.indent([
+												// node SSR: refresh the server style registry from the re-emitted CSS instead of touching the DOM
+												`${cst} cssRemovedChunks = css && css.r;`,
+												`${cst} registry = ${runtimeTemplate.cssServerStyleRegistry()};`,
+												`chunkIds.forEach(${runtimeTemplate.basicFunction(
+													"chunkId",
+													[
+														`${cst} key = "chunk-" + chunkId;`,
+														`if(${runtimeTemplate.optionalChaining(
+															"cssRemovedChunks",
+															"indexOf(chunkId)"
+														)} >= 0) { delete registry[key]; return; }`,
+														`${cst} url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+														`promises.push(Promise.all([import('fs'), import('url')]).then(${runtimeTemplate.basicFunction(
+															"[{ readFile }, { URL }]",
+															[
+																`return new Promise(${runtimeTemplate.basicFunction(
+																	"resolve",
+																	[
+																		// best-effort: a non-file publicPath (e.g. a CDN) can't be read from disk, so skip
+																		"try {",
+																		Template.indent([
+																			`readFile(new URL(url, ${importMetaName}.url), 'utf8', ${runtimeTemplate.basicFunction(
+																				"err, content",
+																				[
+																					"if (!err) registry[key] = content;",
+																					"resolve();"
+																				]
+																			)});`
+																		]),
+																		"} catch (e) { resolve(); }"
+																	]
+																)});`
+															]
+														)}));`
+													]
+												)});`,
+												"return;"
+											]),
+											"}"
+										])
 									: "",
 								"applyHandlers.push(applyHandler);",
 								"// Read CSS removed chunks from update manifest",
-								"var cssRemovedChunks = css && css.r;",
+								`${cst} cssRemovedChunks = css && css.r;`,
 								`chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [
-									`var filename = ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
-									`var url = ${RuntimeGlobals.publicPath} + filename;`,
-									"var oldTag = loadStylesheet(chunkId, url);",
+									`${cst} filename = ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+									`${cst} url = ${RuntimeGlobals.publicPath} + filename;`,
+									`${cst} oldTag = loadStylesheet(chunkId, url);`,
 									`if(!oldTag && !${withHmr} ) return;`,
 									"// Skip if CSS was removed",
-									"if(cssRemovedChunks && cssRemovedChunks.indexOf(chunkId) >= 0) {",
+									`if(${runtimeTemplate.optionalChaining(
+										"cssRemovedChunks",
+										"indexOf(chunkId)"
+									)} >= 0) {`,
 									Template.indent(["oldTags.push(oldTag);", "return;"]),
 									"}",
 									"",
 									"// create error before stack unwound to get useful stacktrace later",
-									"var error = new Error();",
+									`${cst} error = new Error();`,
 									`promises.push(new Promise(${runtimeTemplate.basicFunction(
 										"resolve, reject",
 										[
-											`var link = loadStylesheet(chunkId, url + (url.indexOf("?") < 0 ? "?" : "&") + "hmr=" + Date.now(), ${runtimeTemplate.basicFunction(
+											`${cst} link = loadStylesheet(chunkId, url + (url.indexOf("?") < 0 ? "?" : "&") + "hmr=" + Date.now(), ${runtimeTemplate.basicFunction(
 												"event",
 												[
 													'if(event.type !== "load") {',
 													Template.indent([
-														"var errorType = event && event.type;",
-														"var realHref = event && event.target && event.target.href;",
+														`${cst} errorType = event && event.type;`,
+														`${cst} realHref = event && event.target && event.target.href;`,
 														"error.message = 'Loading css hot update chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realHref + ')';",
 														"error.name = 'ChunkLoadError';",
 														"error.type = errorType;",
 														"error.request = realHref;",
+														"error.event = event;",
 														"reject(error);"
 													]),
 													"} else {",
@@ -507,4 +576,14 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 	}
 }
 
+CssLoadingRuntimeModule.getCompilationHooks = createHooksRegistry(
+	() =>
+		/** @type {CssLoadingRuntimeModulePluginHooks} */ ({
+			createStylesheet: new SyncWaterfallHook(["source", "chunk"]),
+			linkPreload: new SyncWaterfallHook(["source", "chunk"]),
+			linkPrefetch: new SyncWaterfallHook(["source", "chunk"]),
+			linkInsert: new SyncWaterfallHook(["source", "chunk"])
+		})
+);
+
 module.exports = CssLoadingRuntimeModule;