webpack 5.106.2 → 5.107.0

package/lib/css/CssInjectStyleRuntimeModule.js

@@ -70,14 +70,25 @@ 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 createStyleElementCode = Template.asString([
 			"var 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));'
 		]);
 
@@ -88,18 +99,6 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 			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');",
@@ -131,36 +130,39 @@ 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);"
-					]),
-					"}"
+					"var 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;",
+								"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);"),
+									"}"
+								]),
+								"}"
+							]
+						)};`,
 						`${RuntimeGlobals.hmrDownloadUpdateHandlers}.cssInjectStyle = ${runtimeTemplate.basicFunction(
 							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
 							[

package/lib/css/CssLoadingRuntimeModule.js

@@ -24,6 +24,7 @@ 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>} */
@@ -45,7 +46,8 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			hooks = {
 				createStylesheet: new SyncWaterfallHook(["source", "chunk"]),
 				linkPreload: new SyncWaterfallHook(["source", "chunk"]),
-				linkPrefetch: new SyncWaterfallHook(["source", "chunk"])
+				linkPrefetch: new SyncWaterfallHook(["source", "chunk"]),
+				linkInsert: new SyncWaterfallHook(["source", "chunk"])
 			};
 			compilationHooksMap.set(compilation, hooks);
 		}
@@ -122,7 +124,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			(environment.document || isNeutralPlatform) &&
 			chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss);
 
-		const { linkPreload, linkPrefetch, createStylesheet } =
+		const { linkPreload, linkPrefetch, createStylesheet, linkInsert } =
 			CssLoadingRuntimeModule.getCompilationHooks(compilation);
 
 		const withFetchPriority = _runtimeRequirements.has(
@@ -242,8 +244,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;"
 							]
 						)};`

package/lib/{CssModule.js → css/CssModule.js}

@@ -5,15 +5,15 @@
 
 "use strict";
 
-const NormalModule = require("./NormalModule");
-const makeSerializable = require("./util/makeSerializable");
+const NormalModule = require("../NormalModule");
+const makeSerializable = require("../util/makeSerializable");
 
-/** @typedef {import("./Module")} Module */
-/** @typedef {import("./NormalModule").NormalModuleCreateData} NormalModuleCreateData */
-/** @typedef {import("./RequestShortener")} RequestShortener */
-/** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
-/** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
-/** @typedef {import("../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
+/** @typedef {import("../Module")} Module */
+/** @typedef {import("../NormalModule").NormalModuleCreateData} NormalModuleCreateData */
+/** @typedef {import("../RequestShortener")} RequestShortener */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+/** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
 
 /** @typedef {string | undefined} CssLayer */
 /** @typedef {string | undefined} Supports */
@@ -21,26 +21,26 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {[CssLayer, Supports, Media]} InheritanceItem */
 /** @typedef {InheritanceItem[]} Inheritance */
 
-/** @typedef {NormalModuleCreateData & { cssLayer: CssLayer, supports: Supports, media: Media, inheritance?: Inheritance, exportType?: CssParserExportType }} CSSModuleCreateData */
+/** @typedef {NormalModuleCreateData & { cssLayer: CssLayer, supports: Supports, media: Media, inheritance?: Inheritance, exportType?: CssParserExportType }} CssModuleCreateData */
 
 class CssModule extends NormalModule {
 	/**
 	 * Creates an instance of CssModule.
-	 * @param {CSSModuleCreateData} options options object
+	 * @param {CssModuleCreateData} options options object
 	 */
 	constructor(options) {
 		super(options);
 
 		// Avoid override `layer` for `Module` class, because it is a feature to run module in specific layer
-		/** @type {CSSModuleCreateData['cssLayer']} */
+		/** @type {CssModuleCreateData['cssLayer']} */
 		this.cssLayer = options.cssLayer;
-		/** @type {CSSModuleCreateData['supports']} */
+		/** @type {CssModuleCreateData['supports']} */
 		this.supports = options.supports;
-		/** @type {CSSModuleCreateData['media']} */
+		/** @type {CssModuleCreateData['media']} */
 		this.media = options.media;
-		/** @type {CSSModuleCreateData['inheritance']} */
+		/** @type {CssModuleCreateData['inheritance']} */
 		this.inheritance = options.inheritance;
-		/** @type {CSSModuleCreateData['exportType']} */
+		/** @type {CssModuleCreateData['exportType']} */
 		this.exportType = options.exportType;
 	}