webpack 5.107.0 → 5.107.2

package/lib/asset/AssetGenerator.js

@@ -10,15 +10,15 @@ const { RawSource } = require("webpack-sources");
 const ConcatenationScope = require("../ConcatenationScope");
 const Generator = require("../Generator");
 const {
-	ASSET_AND_CSS_URL_TYPES,
-	ASSET_AND_JAVASCRIPT_AND_CSS_URL_TYPES,
+	ASSET_AND_ASSET_URL_TYPES,
+	ASSET_AND_JAVASCRIPT_AND_ASSET_URL_TYPES,
 	ASSET_AND_JAVASCRIPT_TYPES,
 	ASSET_TYPES,
+	ASSET_URL_TYPE,
+	ASSET_URL_TYPES,
 	CSS_TYPE,
-	CSS_URL_TYPE,
-	CSS_URL_TYPES,
 	HTML_TYPE,
-	JAVASCRIPT_AND_CSS_URL_TYPES,
+	JAVASCRIPT_AND_ASSET_URL_TYPES,
 	JAVASCRIPT_TYPE,
 	JAVASCRIPT_TYPES,
 	NO_TYPES
@@ -373,7 +373,7 @@ class AssetGenerator extends Generator {
 			assetPath = JSON.stringify(path + filename);
 		} else if (
 			generatorOptions.publicPath !== undefined &&
-			type === CSS_URL_TYPE
+			type === ASSET_URL_TYPE
 		) {
 			const { path, info } = runtimeTemplate.compilation.getAssetPathWithInfo(
 				generatorOptions.publicPath,
@@ -394,7 +394,7 @@ class AssetGenerator extends Generator {
 				{ expr: RuntimeGlobals.publicPath },
 				filename
 			);
-		} else if (type === CSS_URL_TYPE) {
+		} else if (type === ASSET_URL_TYPE) {
 			const compilation = runtimeTemplate.compilation;
 			const path =
 				compilation.outputOptions.publicPath === "auto"
@@ -560,7 +560,7 @@ class AssetGenerator extends Generator {
 		/** @type {string} */
 		let content;
 
-		const needContent = type === JAVASCRIPT_TYPE || type === CSS_URL_TYPE;
+		const needContent = type === JAVASCRIPT_TYPE || type === ASSET_URL_TYPE;
 		const data = getData ? getData() : undefined;
 
 		if (
@@ -613,7 +613,7 @@ class AssetGenerator extends Generator {
 					contentHash
 				);
 
-			if (data && (type === JAVASCRIPT_TYPE || type === CSS_URL_TYPE)) {
+			if (data && (type === JAVASCRIPT_TYPE || type === ASSET_URL_TYPE)) {
 				data.set("url", { ...data.get("url"), [type]: assetPath });
 			}
 
@@ -657,7 +657,7 @@ class AssetGenerator extends Generator {
 			runtimeRequirements.add(RuntimeGlobals.module);
 
 			return new RawSource(`${module.moduleArgument}.exports = ${content};`);
-		} else if (type === CSS_URL_TYPE) {
+		} else if (type === ASSET_URL_TYPE) {
 			return null;
 		}
 
@@ -710,9 +710,9 @@ class AssetGenerator extends Generator {
 					sourceTypes.has(JAVASCRIPT_TYPE) &&
 					(sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE))
 				) {
-					return JAVASCRIPT_AND_CSS_URL_TYPES;
+					return JAVASCRIPT_AND_ASSET_URL_TYPES;
 				} else if (sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE)) {
-					return CSS_URL_TYPES;
+					return ASSET_URL_TYPES;
 				}
 				return JAVASCRIPT_TYPES;
 			}
@@ -725,9 +725,9 @@ class AssetGenerator extends Generator {
 				sourceTypes.has(JAVASCRIPT_TYPE) &&
 				(sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE))
 			) {
-				return ASSET_AND_JAVASCRIPT_AND_CSS_URL_TYPES;
+				return ASSET_AND_JAVASCRIPT_AND_ASSET_URL_TYPES;
 			} else if (sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE)) {
-				return ASSET_AND_CSS_URL_TYPES;
+				return ASSET_AND_ASSET_URL_TYPES;
 			}
 			return ASSET_AND_JAVASCRIPT_TYPES;
 		}

package/lib/asset/AssetModulesPlugin.js

@@ -20,13 +20,12 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../../declarations/WebpackOptions").AssetGeneratorDataUrl} AssetGeneratorDataUrl */
 /** @typedef {import("../../declarations/WebpackOptions").AssetModuleOutputPath} AssetModuleOutputPath */
 /** @typedef {import("../../declarations/WebpackOptions").RawPublicPath} RawPublicPath */
-/** @typedef {import("../../declarations/WebpackOptions").FilenameTemplate} FilenameTemplate */
+/** @typedef {import("../../declarations/WebpackOptions").AssetModuleFilename} AssetModuleFilename */
 /** @typedef {import("../Compilation").AssetInfo} AssetInfo */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("../NormalModule")} NormalModule */
-/** @typedef {import("../NormalModule").NormalModuleCreateData} NormalModuleCreateData */
 
 /**
  * Returns definition.
@@ -98,10 +97,7 @@ class AssetModulesPlugin {
 						.for(type)
 						.tap(PLUGIN_NAME, (createData, _resolveData) => {
 							// TODO create the module via new AssetModule with its own properties
-							const module = new NormalModule(
-								/** @type {NormalModuleCreateData} */
-								(createData)
-							);
+							const module = new NormalModule(createData);
 							if (this.options.sideEffectFree) {
 								module.factoryMeta = { sideEffectFree: true };
 							}
@@ -227,7 +223,7 @@ class AssetModulesPlugin {
 								}
 							}
 
-							/** @type {undefined | FilenameTemplate} */
+							/** @type {undefined | AssetModuleFilename} */
 							let filename;
 							/** @type {undefined | RawPublicPath} */
 							let publicPath;

package/lib/asset/AssetSourceGenerator.js

@@ -9,11 +9,11 @@ const { RawSource } = require("webpack-sources");
 const ConcatenationScope = require("../ConcatenationScope");
 const Generator = require("../Generator");
 const {
+	ASSET_URL_TYPE,
+	ASSET_URL_TYPES,
 	CSS_TYPE,
-	CSS_URL_TYPE,
-	CSS_URL_TYPES,
 	HTML_TYPE,
-	JAVASCRIPT_AND_CSS_URL_TYPES,
+	JAVASCRIPT_AND_ASSET_URL_TYPES,
 	JAVASCRIPT_TYPE,
 	JAVASCRIPT_TYPES,
 	NO_TYPES
@@ -79,7 +79,7 @@ class AssetSourceGenerator extends Generator {
 				}
 				return new RawSource(sourceContent);
 			}
-			case CSS_URL_TYPE: {
+			case ASSET_URL_TYPE: {
 				if (!originalSource) {
 					return null;
 				}
@@ -150,9 +150,9 @@ class AssetSourceGenerator extends Generator {
 				sourceTypes.has(JAVASCRIPT_TYPE) &&
 				(sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE))
 			) {
-				return JAVASCRIPT_AND_CSS_URL_TYPES;
+				return JAVASCRIPT_AND_ASSET_URL_TYPES;
 			} else if (sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE)) {
-				return CSS_URL_TYPES;
+				return ASSET_URL_TYPES;
 			}
 			return JAVASCRIPT_TYPES;
 		}

package/lib/buildChunkGraph.js

@@ -16,6 +16,7 @@ const { getEntryRuntime, mergeRuntime } = require("./util/runtime");
 /** @typedef {import("./DependenciesBlock")} DependenciesBlock */
 /** @typedef {import("./Dependency").DependencyLocation} DependencyLocation */
 /** @typedef {import("./Entrypoint")} Entrypoint */
+/** @typedef {import("./Entrypoint").EntryOptions} EntryOptions */
 /** @typedef {import("./Module")} Module */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./ModuleGraphConnection").ConnectionState} ConnectionState */
@@ -581,7 +582,27 @@ const visitModules = (
 					}
 				} else {
 					entrypoint = /** @type {Entrypoint} */ (cgi.chunkGroup);
-					// TODO merge entryOptions
+					// Fill in options the existing entrypoint hasn't set yet. We never
+					// overwrite: blocks that dedupe to one entrypoint (e.g. several
+					// workers pointing at the same module) legitimately carry distinct
+					// values such as `runtime`, so the first block to create the
+					// entrypoint wins and later ones only contribute missing keys.
+					// `name` is excluded: it is the entrypoint's identity, fixed at
+					// creation (and used to key namedChunkGroups), so back-filling it
+					// from a block that deduped in via its module would leave
+					// `entrypoint.name` out of sync and make module codegen
+					// order-dependent, which breaks persistent caching.
+					const existingOptions = entrypoint.options;
+					for (const key_ of Object.keys(entryOptions)) {
+						const key =
+							/** @type {keyof EntryOptions} */
+							(key_);
+						if (key === "name") continue;
+						if (entryOptions[key] === undefined) continue;
+						if (existingOptions[key] !== undefined) continue;
+						/** @type {EntryOptions[keyof EntryOptions]} */
+						(existingOptions[key]) = entryOptions[key];
+					}
 					entrypoint.addOrigin(
 						module,
 						/** @type {DependencyLocation} */ (b.loc),
@@ -1290,7 +1311,8 @@ const connectChunkGroups = (
 		// connections and modules can only create one version
 		// TODO maybe decide this per runtime
 		if (
-			// TODO is this needed?
+			// Blocks with nested blocks must stay connected — skipping orphans the
+			// nested block's chunk group from this block's chunk group parent.
 			!blocksWithNestedBlocks.has(block) &&
 			connections.every(({ chunkGroup, originChunkGroupInfo }) =>
 				areModulesAvailable(

package/lib/cache/getLazyHashedEtag.js

@@ -25,7 +25,7 @@ class LazyHashedEtag {
 	 * @param {HashFunction} hashFunction the hash function to use
 	 */
 	constructor(obj, hashFunction = DEFAULTS.HASH_FUNCTION) {
-		/** @type {HashableObject} */
+		/** @type {HashableObject | undefined} */
 		this._obj = obj;
 		/** @type {undefined | string} */
 		this._hash = undefined;
@@ -40,8 +40,15 @@ class LazyHashedEtag {
 	toString() {
 		if (this._hash === undefined) {
 			const hash = createHash(this._hashFunction);
-			this._obj.updateHash(hash);
+			/** @type {HashableObject} */
+			(this._obj).updateHash(hash);
 			this._hash = hash.digest("base64");
+			// Drop the captured object once the hash is memoized. The hash is
+			// never reset, so we never need `_obj` again — and many callers
+			// (e.g. `SourceMapDevToolPlugin`, `RealContentHashPlugin`) capture
+			// a heavy `CachedSource` here that would otherwise stay reachable
+			// through this etag for the lifetime of the compilation cache.
+			this._obj = undefined;
 		}
 		return this._hash;
 	}

package/lib/css/CssModulesPlugin.js

@@ -58,7 +58,7 @@ const CssParser = require("./CssParser");
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
-/** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
+/** @typedef {import("../Chunk").ChunkFilenameTemplate} ChunkFilenameTemplate */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../Module").BuildMeta} BuildMeta */
 
@@ -1152,7 +1152,7 @@ class CssModulesPlugin {
 	 * Gets chunk filename template.
 	 * @param {Chunk} chunk chunk
 	 * @param {OutputOptions} outputOptions output options
-	 * @returns {TemplatePath} used filename template
+	 * @returns {ChunkFilenameTemplate} used filename template
 	 */
 	static getChunkFilenameTemplate(chunk, outputOptions) {
 		if (chunk.cssFilenameTemplate) {

package/lib/dependencies/CommonJsImportsParserPlugin.js

@@ -48,6 +48,22 @@ const RequireResolveHeaderDependency = require("./RequireResolveHeaderDependency
  * @property {string} context
  */
 
+/**
+ * Per-`const NAME = require(LITERAL)` binding state used to forward
+ * member-access references on `NAME` to the `CommonJsRequireDependency`
+ * created for the `require()` call.
+ * @typedef {object} RequireBindingData
+ * @property {RawReferencedExports} referencedExports mutable list shared with the dependency; pushed to as `NAME.x.y` accesses are walked
+ * @property {InstanceType<typeof import("./CommonJsRequireDependency")> | null} dep dependency for the `require()` call (assigned during walk)
+ */
+
+/** @type {WeakMap<CallExpression, RequireBindingData>} */
+const requireBindingData = new WeakMap();
+
+const REQUIRE_BINDING_TAG = Symbol(
+	"CommonJsImportsParserPlugin require binding"
+);
+
 const PLUGIN_NAME = "CommonJsImportsParserPlugin";
 
 /**
@@ -152,10 +168,18 @@ const createRequireCallHandler = (parser, options, getContext) => {
 	 */
 	const processRequireItem = (expr, param) => {
 		if (param.isString()) {
-			const referencedExports = getRequireReferencedExportsFromDestructuring(
+			let referencedExports = getRequireReferencedExportsFromDestructuring(
 				parser,
 				expr
 			);
+			const binding = requireBindingData.get(
+				/** @type {CallExpression} */ (expr)
+			);
+			if (binding && !referencedExports) {
+				// `const NAME = require(LITERAL)` — let later member-access walks
+				// on `NAME` populate the dependency's referenced exports.
+				referencedExports = binding.referencedExports;
+			}
 			const dep = new CommonJsRequireDependency(
 				/** @type {string} */ (param.string),
 				/** @type {Range} */ (param.range),
@@ -163,6 +187,7 @@ const createRequireCallHandler = (parser, options, getContext) => {
 				referencedExports,
 				/** @type {Range} */ (expr.range)
 			);
+			if (binding) binding.dep = dep;
 			dep.loc = /** @type {DependencyLocation} */ (expr.loc);
 			dep.optional = Boolean(parser.scope.inTry);
 			parser.state.current.addDependency(dep);
@@ -662,6 +687,88 @@ class CommonJsImportsParserPlugin {
 			.tap(PLUGIN_NAME, callChainHandler);
 		// #endregion
 
+		// #region Require bound to a const variable
+		// Track `const NAME = require(LITERAL)` so that static member accesses on
+		// `NAME` (e.g. `NAME.foo`, `NAME.foo()`) are forwarded to the same
+		// `CommonJsRequireDependency` as referenced exports — enabling tree
+		// shaking of CommonJS modules that are imported into a named binding
+		// rather than destructured.
+		parser.hooks.preDeclarator.tap(PLUGIN_NAME, (declarator, statement) => {
+			if (statement.kind !== "const") return;
+			if (declarator.id.type !== "Identifier") return;
+			if (!declarator.init || declarator.init.type !== "CallExpression") {
+				return;
+			}
+			const init = declarator.init;
+			if (
+				init.callee.type !== "Identifier" ||
+				init.callee.name !== "require" ||
+				init.arguments.length !== 1
+			) {
+				return;
+			}
+			const arg = init.arguments[0];
+			if (arg.type !== "Literal" || typeof arg.value !== "string") return;
+			// Only attach binding state when `require` resolves to the free
+			// `require` (i.e. it isn't shadowed in the current scope).
+			const requireInfo = parser.getFreeInfoFromVariable("require");
+			if (!requireInfo || requireInfo.name !== "require") return;
+			/** @type {RequireBindingData} */
+			const binding = {
+				referencedExports: [],
+				dep: null
+			};
+			requireBindingData.set(init, binding);
+			parser.tagVariable(declarator.id.name, REQUIRE_BINDING_TAG, binding);
+			return true;
+		});
+
+		parser.hooks.expression.for(REQUIRE_BINDING_TAG).tap(PLUGIN_NAME, () => {
+			const binding =
+				/** @type {RequireBindingData} */
+				(parser.currentTagData);
+			if (binding && binding.dep) {
+				// `NAME` is read as a value (not as the object of a static member
+				// chain), so we have to assume the whole exports object is used.
+				binding.dep.referencedExports = null;
+			}
+		});
+
+		parser.hooks.expressionMemberChain
+			.for(REQUIRE_BINDING_TAG)
+			.tap(PLUGIN_NAME, (_expr, members) => {
+				const binding =
+					/** @type {RequireBindingData} */
+					(parser.currentTagData);
+				if (binding && binding.dep && binding.dep.referencedExports) {
+					binding.dep.referencedExports.push(members);
+				}
+				// Returning truthy suppresses the parser's fallback chain (which
+				// would otherwise walk `NAME` as a bare expression and trigger our
+				// `expression` hook above, marking the whole namespace as used).
+				return true;
+			});
+
+		parser.hooks.callMemberChain
+			.for(REQUIRE_BINDING_TAG)
+			.tap(PLUGIN_NAME, (expr, members) => {
+				const binding =
+					/** @type {RequireBindingData} */
+					(parser.currentTagData);
+				if (binding && binding.dep && binding.dep.referencedExports) {
+					if (members.length === 0) {
+						// `NAME(...)` — calling the require result directly; the
+						// whole exports object is observable.
+						binding.dep.referencedExports = null;
+					} else {
+						binding.dep.referencedExports.push(members);
+					}
+				}
+				if (expr.arguments) parser.walkExpressions(expr.arguments);
+				return true;
+			});
+		// #endregion
+
 		// #region Require.resolve
 		/**
 		 * Processes the provided expr.

package/lib/dependencies/CssUrlDependency.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const { ASSET_URL_TYPE } = require("../ModuleSourceTypeConstants");
 const RawDataUrlModule = require("../asset/RawDataUrlModule");
 const makeSerializable = require("../util/makeSerializable");
 const memoize = require("../util/memoize");
@@ -208,8 +209,8 @@ CssUrlDependency.Template = class CssUrlDependencyTemplate extends (
 		const data = codeGen.data;
 		if (!data) return "data:,";
 		const url = data.get("url");
-		if (!url || !url["css-url"]) return "data:,";
-		return url["css-url"];
+		if (!url || !url[ASSET_URL_TYPE]) return "data:,";
+		return url[ASSET_URL_TYPE];
 	}
 };
 

package/lib/dependencies/HarmonyDetectionParserPlugin.js

@@ -92,6 +92,19 @@ module.exports = class HarmonyDetectionParserPlugin {
 			}
 		};
 
+		/**
+		 * Walks call arguments so import bindings used inside callbacks are
+		 * still tracked, then skips default AMD/CommonJS handling.
+		 * @param {import("estree").CallExpression} expr call expression
+		 * @returns {boolean | undefined} true if in harmony
+		 */
+		const walkArgumentsAndSkipInHarmony = (expr) => {
+			if (HarmonyExports.isEnabled(parser.state)) {
+				if (expr.arguments) parser.walkExpressions(expr.arguments);
+				return true;
+			}
+		};
+
 		const nonHarmonyIdentifiers = ["define", "exports"];
 		for (const identifier of nonHarmonyIdentifiers) {
 			parser.hooks.evaluateTypeof
@@ -100,7 +113,14 @@ module.exports = class HarmonyDetectionParserPlugin {
 			parser.hooks.typeof.for(identifier).tap(PLUGIN_NAME, skipInHarmony);
 			parser.hooks.evaluate.for(identifier).tap(PLUGIN_NAME, nullInHarmony);
 			parser.hooks.expression.for(identifier).tap(PLUGIN_NAME, skipInHarmony);
-			parser.hooks.call.for(identifier).tap(PLUGIN_NAME, skipInHarmony);
+			parser.hooks.call
+				.for(identifier)
+				.tap(
+					PLUGIN_NAME,
+					identifier === "define"
+						? walkArgumentsAndSkipInHarmony
+						: skipInHarmony
+				);
 		}
 	}
 };

package/lib/dependencies/HarmonyExportInitFragment.js

@@ -161,9 +161,6 @@ class HarmonyExportInitFragment extends InitFragment {
 	 * @returns {string | Source | undefined} the source code that will be included as initialization code
 	 */
 	getContent({ runtimeTemplate, runtimeRequirements }) {
-		runtimeRequirements.add(RuntimeGlobals.exports);
-		runtimeRequirements.add(RuntimeGlobals.definePropertyGetters);
-
 		const unusedPart =
 			this.unusedExports.size > 1
 				? `/* unused harmony exports ${joinIterableWithComma(
@@ -184,12 +181,14 @@ class HarmonyExportInitFragment extends InitFragment {
 				)}: ${runtimeTemplate.returningFunction(value)}`
 			);
 		}
-		const definePart =
-			this.exportMap.size > 0
-				? `/* harmony export */ ${RuntimeGlobals.definePropertyGetters}(${
-						this.exportsArgument
-					}, {${definitions.join(",")}\n/* harmony export */ });\n`
-				: "";
+		let definePart = "";
+		if (this.exportMap.size > 0) {
+			runtimeRequirements.add(RuntimeGlobals.exports);
+			runtimeRequirements.add(RuntimeGlobals.definePropertyGetters);
+			definePart = `/* harmony export */ ${RuntimeGlobals.definePropertyGetters}(${
+				this.exportsArgument
+			}, {${definitions.join(",")}\n/* harmony export */ });\n`;
+		}
 		return `${definePart}${unusedPart}`;
 	}
 }

package/lib/dependencies/HtmlInlineScriptDependency.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
+const HtmlGenerator = require("../html/HtmlGenerator");
 const makeSerializable = require("../util/makeSerializable");
-const CssUrlDependency = require("./CssUrlDependency");
 const ModuleDependency = require("./ModuleDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
@@ -101,19 +101,8 @@ HtmlInlineScriptDependency.Template = class HtmlInlineScriptDependencyTemplate e
 
 		if (entrypoint) {
 			const chunk = /** @type {Chunk} */ (entrypoint.getEntrypointChunk());
-			const outputOptions = runtimeTemplate.outputOptions;
-			const filenameTemplate =
-				chunk.filenameTemplate ||
-				(chunk.canBeInitial()
-					? outputOptions.filename
-					: outputOptions.chunkFilename);
-
-			const filename = compilation.getPath(filenameTemplate, {
-				chunk,
-				contentHashType: "javascript"
-			});
-
-			url = `${CssUrlDependency.PUBLIC_PATH_AUTO}${filename}`;
+			// Defer chunk-URL substitution to renderManifest — chunk hashes aren't ready yet.
+			url = HtmlGenerator.makeChunkUrlSentinel(chunk, "javascript");
 		}
 
 		// Insert ` src="…"` right after `<script` so the inline body is

package/lib/dependencies/HtmlInlineStyleDependency.js

@@ -10,12 +10,15 @@ const ModuleDependency = require("./ModuleDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
+/** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../javascript/JavascriptParser").Range} Range */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+/** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
 
 /**
@@ -45,6 +48,20 @@ class HtmlInlineStyleDependency extends ModuleDependency {
 		return "html-style";
 	}
 
+	/**
+	 * Updates the hash with the data contributed by this instance.
+	 * @param {Hash} hash hash to be updated
+	 * @param {UpdateHashContext} context context
+	 * @returns {void}
+	 */
+	updateHash(hash, context) {
+		// Recurse so the inline CSS's transitive deps (e.g. `url(asset)`) propagate up.
+		const { chunkGraph } = context;
+		const module = chunkGraph.moduleGraph.getModule(this);
+		if (!module) return;
+		module.updateHash(hash, context);
+	}
+
 	/**
 	 * Serializes this instance into the provided serializer context.
 	 * @param {ObjectSerializerContext} context context