webpack 5.107.1 → 5.108.0

package/lib/css/CssInjectStyleRuntimeModule.js

@@ -77,8 +77,34 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 			_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');`,
 			"",
 			...(withScriptNonce
 				? [
@@ -93,7 +119,7 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 		]);
 
 		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;"),
@@ -101,10 +127,10 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 			"",
 			"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,7 +156,8 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 			`${RuntimeGlobals.cssInjectStyle} = ${runtimeTemplate.basicFunction(
 				"identifier, css",
 				[
-					"var element = findStyleElement(identifier) || insertStyleElement(identifier);",
+					...injectGuard,
+					`${cst} element = findStyleElement(identifier) || insertStyleElement(identifier);`,
 					"element.textContent = css;"
 				]
 			)};`,
@@ -151,11 +178,12 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 							"removedModules",
 							[
 								"if (!removedModules) return;",
-								"var identifiers = Array.isArray(removedModules) ? removedModules : [removedModules];",
+								`${cst} identifiers = Array.isArray(removedModules) ? removedModules : [removedModules];`,
+								...removeGuard,
 								"for (var i = 0; i < identifiers.length; i++) {",
 								Template.indent([
-									"var identifier = identifiers[i];",
-									"var element = findStyleElement(identifier);",
+									`${cst} identifier = identifiers[i];`,
+									`${cst} element = findStyleElement(identifier);`,
 									"if (element) {",
 									Template.indent("removeStyleElement(element);"),
 									"}"

package/lib/css/CssLoadingRuntimeModule.js

@@ -60,6 +60,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 	constructor(runtimeRequirements) {
 		super("css loading", 10);
 
+		/** @type {ReadOnlyRuntimeRequirements} */
 		this._runtimeRequirements = runtimeRequirements;
 	}
 
@@ -78,7 +79,8 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				crossOriginLoading,
 				uniqueName,
 				chunkLoadTimeout: loadTimeout,
-				charset
+				charset,
+				importMetaName
 			}
 		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
@@ -171,39 +173,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)'
@@ -223,7 +228,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;",
@@ -236,7 +242,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);"
 								]),
@@ -273,7 +279,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([
 									"",
@@ -287,17 +293,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)) {`,
@@ -308,8 +314,8 @@ 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;",
@@ -337,7 +343,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;"
@@ -361,12 +385,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(
@@ -401,12 +426,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(
@@ -439,26 +465,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"
@@ -471,33 +497,78 @@ 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;",

package/lib/css/CssModule.js

@@ -8,11 +8,14 @@
 const NormalModule = require("../NormalModule");
 const makeSerializable = require("../util/makeSerializable");
 
+/** @typedef {import("../DependencyTemplate").CssData} CssData */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */
+/** @typedef {import("../NormalModule").NormalModuleBuildInfo} NormalModuleBuildInfo */
 /** @typedef {import("../NormalModule").NormalModuleCreateData} NormalModuleCreateData */
 /** @typedef {import("../RequestShortener")} RequestShortener */
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext<[CssLayer, Supports, Media, Inheritance | undefined, CssParserExportType | undefined]>} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext<[CssLayer, Supports, Media, Inheritance | undefined, CssParserExportType | undefined]>} ObjectSerializerContext */
 /** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
 
 /** @typedef {string | undefined} CssLayer */
@@ -23,6 +26,24 @@ const makeSerializable = require("../util/makeSerializable");
 
 /** @typedef {NormalModuleCreateData & { cssLayer: CssLayer, supports: Supports, media: Media, inheritance?: Inheritance, exportType?: CssParserExportType }} CssModuleCreateData */
 
+/**
+ * Defines the build info properties specific to css modules.
+ * @typedef {object} KnownCssModuleBuildInfo
+ * @property {CssData=} cssData
+ * @property {string=} charset charset at-rule
+ */
+
+/** @typedef {NormalModuleBuildInfo & KnownCssModuleBuildInfo} CssModuleBuildInfo */
+
+/**
+ * Defines the build meta properties specific to css modules.
+ * @typedef {object} KnownCssModuleBuildMeta
+ * @property {boolean=} isCssModule
+ * @property {boolean=} needIdInConcatenation
+ */
+
+/** @typedef {BuildMeta & KnownCssModuleBuildMeta} CssModuleBuildMeta */
+
 class CssModule extends NormalModule {
 	/**
 	 * Creates an instance of CssModule.
@@ -31,6 +52,12 @@ class CssModule extends NormalModule {
 	constructor(options) {
 		super(options);
 
+		// Redeclared with the css specific shape
+		/** @type {CssModuleBuildInfo | undefined} */
+		this.buildInfo = undefined;
+		/** @type {CssModuleBuildMeta | undefined} */
+		this.buildMeta = undefined;
+
 		// Avoid override `layer` for `Module` class, because it is a feature to run module in specific layer
 		/** @type {CssModuleCreateData['cssLayer']} */
 		this.cssLayer = options.cssLayer;
@@ -64,14 +91,13 @@ class CssModule extends NormalModule {
 		}
 
 		if (this.inheritance) {
-			const inheritance = this.inheritance.map(
-				(item, index) =>
-					`inheritance_${index}|${item[0] || ""}|${item[1] || ""}|${
-						item[2] || ""
-					}`
-			);
-
-			identifier += `|${inheritance.join("|")}`;
+			// Append directly — same bytes as `|` + items.join("|"), without the
+			// intermediate `.map()` array + per-item strings (`identifier()` is
+			// uncached and called repeatedly per module).
+			for (let i = 0; i < this.inheritance.length; i++) {
+				const item = this.inheritance[i];
+				identifier += `|inheritance_${i}|${item[0] || ""}|${item[1] || ""}|${item[2] || ""}`;
+			}
 		}
 
 		if (this.exportType) {
@@ -137,12 +163,12 @@ class CssModule extends NormalModule {
 	 * @param {ObjectSerializerContext} context context
 	 */
 	serialize(context) {
-		const { write } = context;
-		write(this.cssLayer);
-		write(this.supports);
-		write(this.media);
-		write(this.inheritance);
-		write(this.exportType);
+		context
+			.write(this.cssLayer)
+			.write(this.supports)
+			.write(this.media)
+			.write(this.inheritance)
+			.write(this.exportType);
 		super.serialize(context);
 	}
 
@@ -185,13 +211,16 @@ class CssModule extends NormalModule {
 	 * @param {ObjectDeserializerContext} context context
 	 */
 	deserialize(context) {
-		const { read } = context;
-		this.cssLayer = read();
-		this.supports = read();
-		this.media = read();
-		this.inheritance = read();
-		this.exportType = read();
-		super.deserialize(context);
+		this.cssLayer = context.read();
+		const c1 = context.rest;
+		this.supports = c1.read();
+		const c2 = c1.rest;
+		this.media = c2.read();
+		const c3 = c2.rest;
+		this.inheritance = c3.read();
+		const c4 = c3.rest;
+		this.exportType = c4.read();
+		super.deserialize(c4.rest);
 	}
 }