webpack 5.107.1 → 5.108.0

package/lib/css/CssModulesPlugin.js

@@ -39,7 +39,11 @@ const { compareModulesByFullName } = require("../util/comparators");
 const createHash = require("../util/createHash");
 const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
-const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
+const { digestNonNumericOnlyWithFull } = require("../util/nonNumericOnlyHash");
+const {
+	PUBLIC_PATH_AUTO,
+	walkFullHashPlaceholders
+} = require("../util/publicPathPlaceholder");
 const removeBOM = require("../util/removeBOM");
 const CssGenerator = require("./CssGenerator");
 const CssModule = require("./CssModule");
@@ -56,6 +60,7 @@ const CssParser = require("./CssParser");
 /** @typedef {import("./CssModule").CssModuleCreateData} CssModuleCreateData */
 /** @typedef {import("../Module")} Module */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
+/** @typedef {import("./CssModule").CssModuleBuildInfo} CssModuleBuildInfo */
 /** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
 /** @typedef {import("../Chunk").ChunkFilenameTemplate} ChunkFilenameTemplate */
@@ -112,6 +117,45 @@ const getCssInjectStyleRuntimeModule = memoize(() =>
 	require("./CssInjectStyleRuntimeModule")
 );
 
+/**
+ * @typedef {object} PublicPathPlaceholderPlan
+ * @property {number[]} autos start offsets of each `PUBLIC_PATH_AUTO` placeholder
+ * @property {{ start: number, end: number, length: number }[]} hashes `[start, end)` ranges of each `PUBLIC_PATH_FULL_HASH` placeholder and its requested hash length
+ */
+
+/**
+ * Public-path placeholder offsets are invariant for a given module source —
+ * they don't depend on `undoPath`/`hash`/`inheritance`/runtime — so scan once
+ * and reuse across renders instead of re-materializing and re-scanning the
+ * source on every cache miss. Weakly keyed so entries release with the source.
+ * @type {WeakMap<Source, PublicPathPlaceholderPlan>}
+ */
+const publicPathPlaceholderPlans = new WeakMap();
+
+/**
+ * Locate the public-path placeholders in a materialized module source.
+ * @param {string} content materialized module source
+ * @returns {PublicPathPlaceholderPlan} placeholder offsets
+ */
+const computePublicPathPlaceholderPlan = (content) => {
+	/** @type {number[]} */
+	const autos = [];
+	const autoLen = PUBLIC_PATH_AUTO.length;
+	for (
+		let idx = content.indexOf(PUBLIC_PATH_AUTO);
+		idx !== -1;
+		idx = content.indexOf(PUBLIC_PATH_AUTO, idx + autoLen)
+	) {
+		autos.push(idx);
+	}
+	/** @type {{ start: number, end: number, length: number }[]} */
+	const hashes = [];
+	walkFullHashPlaceholders(content, (start, end, length) => {
+		hashes.push({ start, end, length });
+	});
+	return { autos, hashes };
+};
+
 /**
  * Returns ], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema.
  * @param {string} name name
@@ -361,67 +405,24 @@ class CssModulesPlugin {
 							const exportType =
 								/** @type {CssParser} */
 								(createData.parser).options.exportType;
-							if (resolveData.dependencies.length > 0) {
-								// When CSS is imported from CSS there is only one dependency
-								const dependency = resolveData.dependencies[0];
-
-								if (dependency instanceof CssImportDependency) {
-									const parent =
-										/** @type {CssModule} */
-										(compilation.moduleGraph.getParentModule(dependency));
-
-									if (parent instanceof CssModule) {
-										/** @type {Inheritance | undefined} */
-										let inheritance;
-
-										if (
-											parent.cssLayer !== undefined ||
-											parent.supports ||
-											parent.media
-										) {
-											if (!inheritance) {
-												inheritance = [];
-											}
-
-											inheritance.push([
-												parent.cssLayer,
-												parent.supports,
-												parent.media
-											]);
-										}
-
-										if (parent.inheritance) {
-											if (!inheritance) {
-												inheritance = [];
-											}
-
-											inheritance.push(...parent.inheritance);
-										}
-
-										return new CssModule(
-											/** @type {CssModuleCreateData} */
-											({
-												...createData,
-												cssLayer: dependency.layer,
-												supports: dependency.supports,
-												media: dependency.media,
-												inheritance,
-												exportType: parent.exportType || exportType
-											})
-										);
-									}
-
-									return new CssModule(
-										/** @type {CssModuleCreateData} */
-										({
-											...createData,
-											cssLayer: dependency.layer,
-											supports: dependency.supports,
-											media: dependency.media,
-											exportType
-										})
-									);
-								}
+							// When CSS is imported from CSS there is only one dependency
+							const dependency =
+								resolveData.dependencies.length > 0
+									? resolveData.dependencies[0]
+									: undefined;
+
+							if (dependency instanceof CssImportDependency) {
+								return new CssModule(
+									/** @type {CssModuleCreateData} */
+									({
+										...createData,
+										cssLayer: dependency.layer,
+										supports: dependency.supports,
+										media: dependency.media,
+										inheritance: dependency.inheritance,
+										exportType: dependency.exportType || exportType
+									})
+								);
 							}
 
 							return new CssModule(
@@ -451,7 +452,7 @@ class CssModulesPlugin {
 
 				JavascriptModulesPlugin.getCompilationHooks(
 					compilation
-				).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
+				).renderModuleContent.tap(PLUGIN_NAME, (source, module, ctx) => {
 					const injectCssStylesVar =
 						module instanceof ConcatenatedModule &&
 						module.modules.find(
@@ -481,8 +482,9 @@ class CssModulesPlugin {
 						// When exportType !== "link", modules behave like JavaScript modules
 						if (["link", "style"].includes(exportType)) {
 							// For exportType === "link", we can optimize with self-acceptance
-							const cssData = /** @type {BuildInfo} */ (module.buildInfo)
-								.cssData;
+							const cssData = /** @type {CssModuleBuildInfo} */ (
+								module.buildInfo
+							).cssData;
 							if (!cssData) {
 								return source;
 							}
@@ -500,7 +502,7 @@ class CssModulesPlugin {
 								"",
 								`var __webpack_css_exports__ = ${stringifiedExports};`,
 								"// only invalidate when locals change",
-								"if (module.hot.data && module.hot.data.__webpack_css_exports__ && module.hot.data.__webpack_css_exports__ != __webpack_css_exports__) {",
+								`if (${ctx.runtimeTemplate.optionalChaining("module.hot.data", "__webpack_css_exports__")} && module.hot.data.__webpack_css_exports__ != __webpack_css_exports__) {`,
 								Template.indent("module.hot.invalidate();"),
 								"} else {",
 								Template.indent("module.hot.accept();"),
@@ -571,8 +573,8 @@ class CssModulesPlugin {
 							hash.update(chunkGraph.getModuleHash(module, chunk.runtime));
 						}
 					}
-					const digest = hash.digest(hashDigest);
-					chunk.contentHash.css = nonNumericOnlyHash(digest, hashDigestLength);
+					[chunk.contentHash.css, chunk.contentHashFull.css] =
+						digestNonNumericOnlyWithFull(hash, hashDigest, hashDigestLength);
 				});
 				compilation.hooks.renderManifest.tap(PLUGIN_NAME, (result, options) => {
 					const { chunkGraph } = compilation;
@@ -900,18 +902,20 @@ class CssModulesPlugin {
 				)
 			).map((module) => {
 				if (
-					typeof (/** @type {BuildInfo} */ (module.buildInfo).charset) !==
-					"undefined"
+					typeof (
+						/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+					) !== "undefined"
 				) {
 					if (
 						typeof charset !== "undefined" &&
-						charset !== /** @type {BuildInfo} */ (module.buildInfo).charset
+						charset !==
+							/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
 					) {
 						const err = new WebpackError(
 							`Conflicting @charset at-rules detected: the module ${module.readableIdentifier(
 								compilation.requestShortener
 							)} (in chunk ${chunk.name || chunk.id}) specifies "${
-								/** @type {BuildInfo} */ (module.buildInfo).charset
+								/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
 							}", but "${charset}" was expected, all modules must use the same character set`
 						);
 
@@ -923,7 +927,8 @@ class CssModulesPlugin {
 					}
 
 					if (typeof charset === "undefined") {
-						charset = /** @type {BuildInfo} */ (module.buildInfo).charset;
+						charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
+							.charset;
 					}
 				}
 
@@ -968,63 +973,40 @@ class CssModulesPlugin {
 			source = cacheEntry.source;
 		} else {
 			if (!moduleSourceContent) return null;
-			const moduleSourceCode =
-				/** @type {string} */
-				(moduleSourceContent.source());
-			const replaceSource = new ReplaceSource(moduleSourceContent);
-
-			const autoPlaceholder = CssUrlDependency.PUBLIC_PATH_AUTO;
-			const autoPlaceholderLen = autoPlaceholder.length;
-			for (
-				let idx = moduleSourceCode.indexOf(autoPlaceholder);
-				idx !== -1;
-				idx = moduleSourceCode.indexOf(
-					autoPlaceholder,
-					idx + autoPlaceholderLen
-				)
-			) {
-				replaceSource.replace(idx, idx + autoPlaceholderLen - 1, undoPath);
+			let plan = publicPathPlaceholderPlans.get(moduleSourceContent);
+			if (plan === undefined) {
+				plan = computePublicPathPlaceholderPlan(
+					/** @type {string} */ (moduleSourceContent.source())
+				);
+				publicPathPlaceholderPlans.set(moduleSourceContent, plan);
 			}
 
-			if (hash) {
-				const hashPrefix = CssUrlDependency.PUBLIC_PATH_FULL_HASH;
-				const hashPrefixLen = hashPrefix.length;
-				const sourceLen = moduleSourceCode.length;
-				let idx = moduleSourceCode.indexOf(hashPrefix);
-				while (idx !== -1) {
-					let digitEnd = idx + hashPrefixLen;
-					while (digitEnd < sourceLen) {
-						const cc = moduleSourceCode.charCodeAt(digitEnd);
-						if (cc < 48 || cc > 57) break;
-						digitEnd++;
-					}
-					let nextSearch;
-					if (
-						digitEnd > idx + hashPrefixLen &&
-						digitEnd + 1 < sourceLen &&
-						moduleSourceCode.charCodeAt(digitEnd) === 95 &&
-						moduleSourceCode.charCodeAt(digitEnd + 1) === 95
-					) {
-						const length = Number.parseInt(
-							moduleSourceCode.slice(idx + hashPrefixLen, digitEnd),
-							10
-						);
+			/** @type {Source} */
+			let moduleSource = moduleSourceContent;
+
+			// Apply placeholder substitutions only when present; the common
+			// (no-placeholder) case skips the ReplaceSource wrapper entirely.
+			if (plan.autos.length > 0 || (hash && plan.hashes.length > 0)) {
+				const replaceSource = new ReplaceSource(moduleSourceContent);
+				const autoLen = PUBLIC_PATH_AUTO.length;
+				for (let i = 0; i < plan.autos.length; i++) {
+					const start = plan.autos[i];
+					replaceSource.replace(start, start + autoLen - 1, undoPath);
+				}
+				if (hash) {
+					for (let i = 0; i < plan.hashes.length; i++) {
+						const { start, end, length } = plan.hashes[i];
+						// `end` is exclusive; ReplaceSource.replace takes an inclusive end.
 						replaceSource.replace(
-							idx,
-							digitEnd + 1,
+							start,
+							end - 1,
 							length === 0 ? hash : hash.slice(0, length)
 						);
-						nextSearch = digitEnd + 2;
-					} else {
-						nextSearch = idx + hashPrefixLen;
 					}
-					idx = moduleSourceCode.indexOf(hashPrefix, nextSearch);
 				}
+				moduleSource = replaceSource;
 			}
 
-			/** @type {Source} */
-			let moduleSource = replaceSource;
-
 			for (let i = 0; i < inheritance.length; i++) {
 				const layer = inheritance[i][0];
 				const supports = inheritance[i][1];
@@ -1100,11 +1082,12 @@ class CssModulesPlugin {
 
 		for (const module of modules) {
 			if (
-				typeof (/** @type {BuildInfo} */ (module.buildInfo).charset) !==
-					"undefined" &&
+				typeof (
+					/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+				) !== "undefined" &&
 				typeof charset === "undefined"
 			) {
-				charset = /** @type {BuildInfo} */ (module.buildInfo).charset;
+				charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo).charset;
 			}
 
 			try {