webpack 5.110.2 → 5.111.0

package/lib/DefinePlugin.js

@@ -20,6 +20,7 @@ const {
 	evaluateToString,
 	toConstantDependency
 } = require("./javascript/JavascriptParserHelpers");
+const { getBuildDiagnostics } = require("./util/buildDiagnostics");
 const createHash = require("./util/createHash");
 const createHooksRegistry = require("./util/createHooksRegistry");
 
@@ -92,8 +93,10 @@ class RuntimeValue {
 		const buildInfo = /** @type {BuildInfo} */ (parser.state.module.buildInfo);
 		if (this.options === true) {
 			buildInfo.cacheable = false;
+			const diagnostics = getBuildDiagnostics(buildInfo);
 			const reasons =
-				buildInfo.notCacheableReasons || (buildInfo.notCacheableReasons = []);
+				diagnostics.notCacheableReasons ||
+				(diagnostics.notCacheableReasons = []);
 			const reason = `DefinePlugin runtime value ${key}`;
 			if (!reasons.includes(reason)) reasons.push(reason);
 		} else {
@@ -375,7 +378,7 @@ const PLUGIN_NAME = "DefinePlugin";
 const VALUE_DEP_PREFIX = `webpack/${PLUGIN_NAME} `;
 const VALUE_DEP_MAIN = `webpack/${PLUGIN_NAME}_hash`;
 
-// Keys webpack injects itself are not the user's to remove, so `performance.unusedDefines`
+// Keys webpack injects itself are not the user's to remove, so `performance.unusedConfig`
 // never sees them.
 /** @type {WeakSet<DefinePlugin>} */
 const INTERNAL_PLUGINS = new WeakSet();
@@ -721,11 +724,11 @@ class DefinePlugin {
 			(compilation, { normalModuleFactory }) => {
 				const definitions = this.definitions;
 				const { performance } = compilation.options;
-				// Only `performance.unusedDefines` reads these, so a build without it
+				// Only `performance.unusedConfig` reads these, so a build without it
 				// collects nothing.
 				const collectDeclared =
 					performance !== false &&
-					performance.unusedDefines === true &&
+					performance.unusedConfig === true &&
 					!INTERNAL_PLUGINS.has(this);
 				/** @type {Set<string> | undefined} */
 				let declaredKeys;
@@ -1218,13 +1221,26 @@ class DefinePlugin {
 							}
 							return -1;
 						};
+						// Cut the chain at the undefined member, so a read after it still
+						// throws; an optional link there short-circuits the whole chain.
 						parser.hooks.expressionMemberChain
 							.for(chainRoot)
-							.tap(PLUGIN_NAME, (expr, members) => {
+							.tap(PLUGIN_NAME, (expr, members, membersOptionals) => {
 								const deps = [key];
-								if (findUndefinedMemberAccess(members, deps) === -1) return;
+								const undefinedIndex = findUndefinedMemberAccess(members, deps);
+								if (undefinedIndex === -1) return;
 								for (const dep of deps) addValueDependency(dep);
-								return toConstantDependency(parser, "undefined")(expr);
+								return toConstantDependency(
+									parser,
+									"undefined"
+								)(
+									membersOptionals[undefinedIndex + 1]
+										? expr
+										: dropTrailingMembers(
+												expr,
+												members.length - 1 - undefinedIndex
+											)
+								);
 							});
 						// Cut the chain at the undefined member, so what follows still
 						// throws; an optional link there takes the call, arguments unevaluated.
@@ -1331,7 +1347,7 @@ class DefinePlugin {
 DefinePlugin.getCompilationHooks = createHooksRegistry(createCompilationHooks);
 
 /**
- * Marks an instance as webpack's own, so `performance.unusedDefines` never
+ * Marks an instance as webpack's own, so `performance.unusedConfig` never
  * reports the keys it declares against the user.
  * @param {DefinePlugin} plugin the instance webpack constructed itself
  * @returns {DefinePlugin} the same instance

package/lib/DotenvPlugin.js

@@ -6,6 +6,7 @@
 "use strict";
 
 const FileSystemInfo = require("./FileSystemInfo");
+const DotenvFileError = require("./errors/DotenvFileError");
 const { join } = require("./util/fs");
 
 /** @import { DotenvPluginOptions } from "../declarations/WebpackOptions" */
@@ -155,8 +156,8 @@ function expandValue(value, processEnv, runningParsed) {
 		const opMatch = expression.match(opRegex);
 		const splitter = opMatch ? opMatch[0] : null;
 
-		const r = expression.split(/** @type {string} */ (splitter));
-		// const r = splitter ? expression.split(splitter) : [expression];
+		// `split(null)` splits on the string "null", cutting up names containing it
+		const r = splitter ? expression.split(splitter) : [expression];
 
 		/** @type {string} */
 		let defaultValue;
@@ -235,16 +236,21 @@ function expand(options) {
 /**
  * Format environment variables as DefinePlugin definitions
  * @param {Env} env environment variables
- * @returns {Record<string, string>} formatted definitions
+ * @returns {Record<string, string | Env>} formatted definitions
  */
 const envToDefinitions = (env) => {
-	const definitions = /** @type {Record<string, string>} */ ({});
+	const definitions = /** @type {Record<string, string | Env>} */ ({});
+	// one nested definition rather than a `import.meta.env.<key>` per key: a
+	// dotted key would otherwise read back as a nested object, not as the key
+	const importMetaEnv = /** @type {Env} */ (Object.create(null));
 
 	for (const [key, value] of Object.entries(env)) {
 		const defValue = JSON.stringify(value);
+		// `process.env` stays flat — it must not shadow the real one at runtime
 		definitions[`process.env.${key}`] = defValue;
-		definitions[`import.meta.env.${key}`] = defValue;
+		importMetaEnv[key] = defValue;
 	}
+	definitions["import.meta.env"] = importMetaEnv;
 
 	return definitions;
 };
@@ -296,6 +302,8 @@ class DotenvPlugin {
 
 		/** @type {undefined | InstanceType<Snapshot>} */
 		let snapshot;
+		/** @type {undefined | DotenvFileError} */
+		let loadError;
 
 		const cache = compiler.getCache(PLUGIN_NAME);
 		const identifier = JSON.stringify(
@@ -304,16 +312,31 @@ class DotenvPlugin {
 		const itemCache = cache.getItemCache(identifier, null);
 
 		compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async () => {
-			const { parsed, snapshot: newSnapshot } = dir
-				? await this._loadEnv(compiler, itemCache, dir)
-				: { parsed: {} };
-			const env = this._getEnv(prefixes, parsed);
-
-			definePlugin.definitions = envToDefinitions(env || {});
-			snapshot = newSnapshot;
+			loadError = undefined;
+			try {
+				const { parsed, snapshot: newSnapshot } = dir
+					? await this._loadEnv(compiler, itemCache, dir)
+					: { parsed: {} };
+				const env = this._getEnv(prefixes, parsed);
+
+				definePlugin.definitions = envToDefinitions(env || {});
+				snapshot = newSnapshot;
+			} catch (err) {
+				// reported on the compilation so watch mode recovers when it is fixed
+				if (!(err instanceof DotenvFileError)) throw err;
+				loadError = err;
+				definePlugin.definitions = envToDefinitions({});
+				snapshot = undefined;
+			}
 		});
 
 		compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+			if (loadError) {
+				compilation.errors.push(loadError);
+				compilation.fileDependencies.add(
+					/** @type {string} */ (loadError.file)
+				);
+			}
 			if (snapshot) {
 				compilation.fileDependencies.addAll(snapshot.getFileIterable());
 				compilation.missingDependencies.addAll(snapshot.getMissingIterable());
@@ -369,7 +392,12 @@ class DotenvPlugin {
 						fileDependencies.push(filePath);
 						return content;
 					},
-					() => {
+					(err) => {
+						const code = /** @type {NodeJS.ErrnoException} */ (err).code;
+						// only an absent file is normal; anything else is a real fault
+						if (code !== "ENOENT" && code !== "ENOTDIR") {
+							throw new DotenvFileError(filePath, err);
+						}
 						// File doesn't exist, add to missingDependencies (this is normal)
 						missingDependencies.push(filePath);
 						return "";

package/lib/ExternalModule.js

@@ -29,6 +29,7 @@ const { coreModules } = require("./node/nodeBuiltins");
 const createHash = require("./util/createHash");
 const createHooksRegistry = require("./util/createHooksRegistry");
 const extractUrlAndGlobal = require("./util/extractUrlAndGlobal");
+const { toJsStringLiteral } = require("./util/identifier");
 const makeSerializable = require("./util/makeSerializable");
 const memoize = require("./util/memoize");
 const { propertyAccess } = require("./util/property");
@@ -110,6 +111,7 @@ const getEnvironmentNotSupportAsyncWarning = memoize(() =>
  * @property {InitFragment<ChunkRenderContext>[]=} chunkInitFragments
  * @property {ReadOnlyRuntimeRequirements=} runtimeRequirements
  * @property {[string, string][]=} specifiers
+ * @property {string=} externalReexport native reexport source and attributes
  */
 
 /** @typedef {true | [string, string][]} Imported */
@@ -417,6 +419,18 @@ const importAssertionReplacer = (key, value) => {
 	return value;
 };
 
+/**
+ * Renders the import attributes clause of a static import or reexport.
+ * @param {ImportDependencyMeta | undefined} dependencyMeta import metadata
+ * @returns {string} static import attributes
+ */
+const getImportAttributes = (dependencyMeta) =>
+	dependencyMeta && dependencyMeta.attributes
+		? dependencyMeta.attributes._isLegacyAssert
+			? ` assert ${JSON.stringify(dependencyMeta.attributes, importAssertionReplacer)}`
+			: ` with ${JSON.stringify(dependencyMeta.attributes)}`
+		: "";
+
 /**
  * Represents ModuleExternalInitFragment.
  * @extends {InitFragment<GenerateContext>}
@@ -503,33 +517,25 @@ class ModuleExternalInitFragment extends InitFragment {
 			_request: request,
 			_identifier: identifier
 		} = this;
-		const attributes =
-			dependencyMeta && dependencyMeta.attributes
-				? dependencyMeta.attributes._isLegacyAssert
-					? ` assert ${JSON.stringify(
-							dependencyMeta.attributes,
-							importAssertionReplacer
-						)}`
-					: ` with ${JSON.stringify(dependencyMeta.attributes)}`
-				: "";
+		const attributes = getImportAttributes(dependencyMeta);
 		const phase = dependencyMeta && dependencyMeta.phase;
 		checkPhaseIsSupported(phase, context.runtimeTemplate);
 		let content = "";
 		if (ImportPhaseUtils.isSource(phase) && imported === true) {
 			// There is no `import source * as ns` form: the source phase binds one
 			// identifier, so it stands in for the namespace the other branches build.
-			content = `import source ${identifier} from ${JSON.stringify(
+			content = `import source ${identifier} from ${toJsStringLiteral(
 				request
 			)}${attributes};\n`;
 		} else if (imported === true) {
 			// namespace
 			const phaseKeyword = ImportPhaseUtils.isDefer(phase) ? "defer " : "";
-			content = `import ${phaseKeyword}* as ${identifier} from ${JSON.stringify(
+			content = `import ${phaseKeyword}* as ${identifier} from ${toJsStringLiteral(
 				request
 			)}${attributes};\n`;
 		} else if (imported.length === 0) {
 			// just import, no use
-			content = `import ${JSON.stringify(request)}${attributes};\n`;
+			content = `import ${toJsStringLiteral(request)}${attributes};\n`;
 		} else if (
 			ImportPhaseUtils.isSource(phase) &&
 			imported.length === 1 &&
@@ -537,7 +543,7 @@ class ModuleExternalInitFragment extends InitFragment {
 		) {
 			// `import source x from "…"` — the source-phase form binds the source
 			// object directly to a single identifier (no namespace, no destructuring).
-			content = `import source ${imported[0][1]} from ${JSON.stringify(
+			content = `import source ${imported[0][1]} from ${toJsStringLiteral(
 				request
 			)}${attributes};\n`;
 		} else {
@@ -548,7 +554,7 @@ class ModuleExternalInitFragment extends InitFragment {
 					}
 					return name;
 				})
-				.join(", ")} } from ${JSON.stringify(request)}${attributes};\n`;
+				.join(", ")} } from ${toJsStringLiteral(request)}${attributes};\n`;
 		}
 		return content;
 	}
@@ -738,6 +744,12 @@ const getSourceForModuleExternal = (
 	}
 	return {
 		expression,
+		externalReexport:
+			moduleAndSpecifiers.length === 1 &&
+			!ImportPhaseUtils.isDefer(phase) &&
+			!ImportPhaseUtils.isSource(phase)
+				? `from ${toJsStringLiteral(moduleAndSpecifiers[0])}${getImportAttributes(dependencyMeta)}`
+				: undefined,
 		init: moduleRemapping
 			? `${runtimeTemplate.renderConst()} x = ${runtimeTemplate.basicFunction(
 					"y",
@@ -1238,6 +1250,17 @@ class ExternalModule extends Module {
 		return this._resolveExternalType(this.externalType) !== "module";
 	}
 
+	/**
+	 * The request this external resolves to for its own type, with the record form
+	 * narrowed to its entry. An array is a module specifier plus a property path.
+	 * @returns {string | string[] | undefined} the resolved request
+	 */
+	getResolvedRequest() {
+		return /** @type {string | string[] | undefined} */ (
+			this._getRequestAndExternalType().request
+		);
+	}
+
 	/**
 	 * Get request and external type.
 	 * @private
@@ -1535,6 +1558,10 @@ class ExternalModule extends Module {
 					data = new Map();
 					data.set("chunkInitFragments", sourceData.chunkInitFragments);
 				}
+				if (sourceData.externalReexport) {
+					if (!data) data = new Map();
+					data.set("externalReexport", sourceData.externalReexport);
+				}
 
 				/** @type {Sources} */
 				const sources = new Map();

package/lib/FileSystemInfo.js

@@ -8,11 +8,11 @@
 const nodeModule = require("module");
 const { isAbsolute } = require("path");
 const { create: createResolver } = require("enhanced-resolve");
-const asyncLib = require("neo-async");
 const { DEFAULTS } = require("./config/defaults");
 const { collectCjsRequireSpecifiers } = require("./javascript/syntax");
 const AsyncQueue = require("./util/AsyncQueue");
 const StackedCacheMap = require("./util/StackedCacheMap");
+const asyncLib = require("./util/async");
 const createHash = require("./util/createHash");
 const { dirname, join, lstatReadlinkAbsolute, relative } = require("./util/fs");
 const makeSerializable = require("./util/makeSerializable");
@@ -1884,10 +1884,13 @@ class FileSystemInfo {
 	 * Resolves build dependencies.
 	 * @param {string} context context directory
 	 * @param {Iterable<string>} deps dependencies
+	 * @param {Iterable<string> | undefined} optionalDeps optional dependencies that may be missing
 	 * @param {(err?: Error | null, resolveBuildDependenciesResult?: ResolveBuildDependenciesResult) => void} callback callback function
 	 * @returns {void}
 	 */
-	resolveBuildDependencies(context, deps, callback) {
+	resolveBuildDependencies(context, deps, optionalDeps, callback) {
+		/** @type {Set<string>} */
+		const optional = new Set(optionalDeps);
 		const { resolveContext, resolveEsm, resolveCjs, resolveCjsAsChild } =
 			this._createBuildDependenciesResolvers();
 
@@ -1979,7 +1982,7 @@ class FileSystemInfo {
 						type: RBDT_RESOLVE_INITIAL,
 						context,
 						path: dep,
-						expected: undefined,
+						expected: optional.has(dep) ? false : undefined,
 						issuer: undefined
 					})
 			),
@@ -2005,6 +2008,7 @@ class FileSystemInfo {
 							if (err) {
 								if (expected === false) {
 									resolveResults.set(key, false);
+									resolveMissing.add(path);
 									return callback();
 								}
 								invalidResolveResults.add(key);
@@ -2060,6 +2064,7 @@ class FileSystemInfo {
 								if (err) {
 									if (expected === false) {
 										resolveResults.set(key, false);
+										resolveMissing.add(path);
 										return callback();
 									}
 									invalidResolveResults.add(key);
@@ -2514,20 +2519,18 @@ class FileSystemInfo {
 			},
 			/**
 			 * Processes the provided err.
-			 * @param {Error | typeof INVALID=} err error or invalid flag
+			 * @param {(Error | typeof INVALID | null)=} err error or invalid flag
 			 * @returns {void}
 			 */
-			/** @type {import("neo-async").ErrorCallback<Error | typeof INVALID>} */ (
-				(err) => {
-					if (err === INVALID) {
-						return callback(null, false);
-					}
-					if (err) {
-						return callback(err);
-					}
-					return callback(null, true);
+			(err) => {
+				if (err === INVALID) {
+					return callback(null, false);
 				}
-			)
+				if (err) {
+					return callback(err);
+				}
+				return callback(null, true);
+			}
 		);
 	}
 

package/lib/FlagDependencyExportsPlugin.js

@@ -5,8 +5,8 @@
 
 "use strict";
 
-const asyncLib = require("neo-async");
 const Queue = require("./util/Queue");
+const asyncLib = require("./util/async");
 const { compareModulesByIdentifier } = require("./util/comparators");
 const createHash = require("./util/createHash");
 
@@ -30,15 +30,40 @@ const PLUGIN_LOGGER_NAME = `webpack.${PLUGIN_NAME}`;
 /** @typedef {{ etag: string, data: InstanceType<RestoreProvidedData> }} MemCacheEntry */
 
 /**
+ * Cache key fragment for what changes provided exports without changing the
+ * module's source: still-lazy barrel requests and DefinePlugin value versions.
  * @param {Module} module the module
  * @param {LazyBarrelController} lazyBarrelController the compilation's lazy barrel controller
  * @param {HashFunction} hashFunction hash function for long keys
- * @returns {string} the hash
+ * @returns {string} etag for provided-exports mem/persistent cache, "" when neither applies
  */
-const getLazyRequestsHash = (module, lazyBarrelController, hashFunction) => {
-	const lazyKeys = lazyBarrelController.getLazyRequests(module);
-	if (!lazyKeys) return "";
-	const joined = [...lazyKeys].join("|");
+const getProvidedExportsEtag = (module, lazyBarrelController, hashFunction) => {
+	const lazyRequests = lazyBarrelController.getLazyRequests(module);
+	const buildInfo = /** @type {BuildInfo | undefined} */ (module.buildInfo);
+	const valueDependencies = buildInfo && buildInfo.valueDependencies;
+	const hasValueDependencies =
+		valueDependencies !== undefined && valueDependencies.size > 0;
+	if (!lazyRequests && !hasValueDependencies) return "";
+	/** @type {(string | string[] | undefined)[][]} */
+	const valueEntries = [];
+	if (hasValueDependencies) {
+		const versions =
+			/** @type {NonNullable<BuildInfo["valueDependencies"]>} */
+			(valueDependencies);
+		for (const key of [...versions.keys()].sort()) {
+			const value = versions.get(key);
+			// An absent version serializes as null, distinct from both other shapes
+			valueEntries.push([
+				key,
+				value instanceof Set ? [...value].sort() : value
+			]);
+		}
+	}
+	// JSON, so a separator inside a request or a version cannot forge another entry
+	const joined = JSON.stringify([
+		lazyRequests ? [...lazyRequests] : [],
+		valueEntries
+	]);
 	if (joined.length < 100) return joined;
 	const hash = createHash(hashFunction);
 	hash.update(joined);
@@ -78,9 +103,7 @@ class FlagDependencyExportsPlugin {
 					// Step 1: Try to restore cached provided export info from cache
 					logger.time("restore cached provided exports");
 					asyncLib.each(
-						/** @type {import("neo-async").IterableCollection<Module>} */ (
-							/** @type {unknown} */ (modules)
-						),
+						modules,
 						(module, callback) => {
 							const exportsInfo = moduleGraph.getExportsInfo(module);
 							// If the module doesn't have an exportsType, it's a module
@@ -109,7 +132,7 @@ class FlagDependencyExportsPlugin {
 							const memCache = moduleMemCaches && moduleMemCaches.get(module);
 							/** @type {MemCacheEntry | undefined} */
 							const memCacheEntry = memCache && memCache.get(this);
-							const hash = getLazyRequestsHash(
+							const etag = getProvidedExportsEtag(
 								module,
 								lazyBarrelController,
 								hashFunction
@@ -118,7 +141,7 @@ class FlagDependencyExportsPlugin {
 							// detection cannot invalidate the mem cache when the un-lazied
 							// connections are unsafe-cached (they are skipped when comparing
 							// references)
-							if (memCacheEntry !== undefined && memCacheEntry.etag === hash) {
+							if (memCacheEntry !== undefined && memCacheEntry.etag === etag) {
 								statRestoredFromMemCache++;
 								exportsInfo.restoreProvided(memCacheEntry.data);
 								return callback();
@@ -128,7 +151,7 @@ class FlagDependencyExportsPlugin {
 							);
 							cache.get(
 								module.identifier(),
-								hash ? `${buildHash}|${hash}` : buildHash,
+								etag ? `${buildHash}|${etag}` : buildHash,
 								(err, result) => {
 									if (err) return callback(err);
 
@@ -351,12 +374,13 @@ class FlagDependencyExportsPlugin {
 												changed = true;
 											}
 
-											if (
-												inlined !== undefined &&
-												exportInfo.canInlineProvide === undefined
-											) {
-												exportInfo.canInlineProvide = inlined;
-												changed = true;
+											if (inlined !== undefined) {
+												const prev = exportInfo.canInlineProvide;
+												// Watch rebuilds keep ExportInfo; refresh when the constant changes
+												if (prev === undefined || !prev.equals(inlined)) {
+													exportInfo.canInlineProvide = inlined;
+													changed = true;
+												}
 											}
 
 											if (terminalBinding && !exportInfo.terminalBinding) {
@@ -513,7 +537,7 @@ class FlagDependencyExportsPlugin {
 										.getRestoreProvidedData();
 									const memCache =
 										moduleMemCaches && moduleMemCaches.get(module);
-									const hash = getLazyRequestsHash(
+									const etag = getProvidedExportsEtag(
 										module,
 										lazyBarrelController,
 										hashFunction
@@ -521,7 +545,7 @@ class FlagDependencyExportsPlugin {
 									if (memCache) {
 										/** @type {MemCacheEntry} */
 										const entry = {
-											etag: hash,
+											etag,
 											data: cachedData
 										};
 										memCache.set(this, entry);
@@ -531,7 +555,7 @@ class FlagDependencyExportsPlugin {
 									);
 									cache.store(
 										module.identifier(),
-										hash ? `${buildHash}|${hash}` : buildHash,
+										etag ? `${buildHash}|${etag}` : buildHash,
 										cachedData,
 										callback
 									);

package/lib/FlagDependencyUsagePlugin.js

@@ -345,10 +345,16 @@ class FlagDependencyUsagePlugin {
 											if (oldItem === undefined || Array.isArray(oldItem)) {
 												exportsMap.set(key, item);
 											} else {
+												// An unset flag means "allowed", so merge on `!== false`:
+												// `undefined && false` reads back as allowed.
 												exportsMap.set(key, {
 													name: item.name,
-													canMangle: item.canMangle && oldItem.canMangle,
-													canInline: item.canInline && oldItem.canInline
+													canMangle:
+														item.canMangle !== false &&
+														oldItem.canMangle !== false,
+													canInline:
+														item.canInline !== false &&
+														oldItem.canInline !== false
 												});
 											}
 										}

package/lib/HotModuleReplacementPlugin.js

@@ -17,7 +17,11 @@ const {
 } = require("./ModuleTypeConstants");
 const NormalModule = require("./NormalModule");
 const RuntimeGlobals = require("./RuntimeGlobals");
-const { chunkHasCss } = require("./css/CssModulesPlugin");
+const { getPresentKinds } = require("./TemplatedPathPlugin");
+const {
+	chunkHasCss,
+	getChunkFilenameTemplate: getCssChunkFilenameTemplate
+} = require("./css/CssModulesPlugin");
 const ConstDependency = require("./dependencies/ConstDependency");
 const ImportMetaHotAcceptDependency = require("./dependencies/ImportMetaHotAcceptDependency");
 const ImportMetaHotDeclineDependency = require("./dependencies/ImportMetaHotDeclineDependency");
@@ -72,6 +76,22 @@ const {
 /** @typedef {{ updatedChunkIds: ChunkIds, removedChunkIds: ChunkIds, removedModules: ModuleSet, forceLoadChunkIds: ChunkIds, filename: string, assetInfo: AssetInfo }} HotUpdateMainContentByRuntimeItem */
 /** @typedef {Map<string, HotUpdateMainContentByRuntimeItem>} HotUpdateMainContentByRuntime */
 
+/**
+ * Whether a filename template reads any hash, so the name it gives a chunk can move
+ * between two builds.
+ * @param {string} template the filename template
+ * @returns {boolean} true when a hash is part of the name
+ */
+const templateReadsHash = (template) => {
+	const kinds = getPresentKinds(template);
+	return (
+		kinds.has("hash") ||
+		kinds.has("fullhash") ||
+		kinds.has("chunkhash") ||
+		kinds.has("contenthash")
+	);
+};
+
 const PLUGIN_NAME = "HotModuleReplacementPlugin";
 
 class HotModuleReplacementPlugin {
@@ -856,7 +876,7 @@ To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename
 								assetInfo
 							}
 						] of hotUpdateMainContentByFilename) {
-							/** @type {{ c: ChunkId[], r: ChunkId[], m: ModuleId[], f?: ChunkId[], css?: { r: ChunkId[] } }} */
+							/** @type {{ c: ChunkId[], r: ChunkId[], m: ModuleId[], f?: ChunkId[], css?: { r: ChunkId[], n?: Record<ChunkId, string> } }} */
 							const hotUpdateMainJson = {
 								c: [...updatedChunkIds],
 								r: [...removedChunkIds],
@@ -882,21 +902,47 @@ To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename
 							// Build CSS removed chunks list (chunks in updatedChunkIds that no longer have CSS)
 							/** @type {ChunkId[]} */
 							const cssRemovedChunkIds = [];
+							/** @type {Record<ChunkId, string> | undefined} */
+							let cssChunkNames;
 							if (compilation.options.experiments.css) {
 								for (const chunkId of updatedChunkIds) {
 									for (const /** @type {Chunk} */ chunk of compilation.chunks) {
-										if (chunk.id === chunkId) {
-											if (!chunkHasCss(chunk, chunkGraph)) {
-												cssRemovedChunkIds.push(chunkId);
-											}
+										if (chunk.id !== chunkId) continue;
+										if (!chunkHasCss(chunk, chunkGraph)) {
+											cssRemovedChunkIds.push(chunkId);
 											break;
 										}
+										// The runtime's name map is refreshed only by the update chunk
+										// itself, so a name that moved with the content travels here.
+										const template = getCssChunkFilenameTemplate(
+											chunk,
+											compilation.outputOptions
+										);
+										if (
+											typeof template !== "string" ||
+											templateReadsHash(template)
+										) {
+											if (cssChunkNames === undefined) cssChunkNames = {};
+											cssChunkNames[chunkId] = compilation.getPath(template, {
+												hash: compilation.hash,
+												runtime: chunk.runtime,
+												chunk,
+												contentHashType: "css"
+											});
+										}
+										break;
 									}
 								}
 							}
 
-							if (cssRemovedChunkIds.length > 0) {
+							if (
+								cssRemovedChunkIds.length > 0 ||
+								cssChunkNames !== undefined
+							) {
 								hotUpdateMainJson.css = { r: cssRemovedChunkIds };
+								if (cssChunkNames !== undefined) {
+									hotUpdateMainJson.css.n = cssChunkNames;
+								}
 							}
 
 							const source = new RawSource(

package/lib/JavascriptMetaInfoPlugin.js

@@ -11,6 +11,7 @@ const {
 	JAVASCRIPT_MODULE_TYPE_ESM
 } = require("./ModuleTypeConstants");
 const { getInnerGraphUtils } = require("./optimize/InnerGraph");
+const { recordOptimizationBailout } = require("./util/buildDiagnostics");
 
 /** @import Compiler from "./Compiler" */
 /** @import { BuildInfo } from "./Module" */
@@ -73,9 +74,10 @@ class JavascriptMetaInfoPlugin {
 							const wasEnabled = innerGraph.isEnabled(parser.state);
 							innerGraph.bailout(parser.state);
 							if (wasEnabled) {
-								compilation.moduleGraph
-									.getOptimizationBailout(parser.state.module)
-									.push("Inner graph bailout: eval()");
+								recordOptimizationBailout(
+									buildInfo,
+									"Inner graph bailout: eval()"
+								);
 							}
 						}
 					});