@depup/webpack 5.106.1-depup.0 → 5.109.2-depup.0

package/lib/dependencies/CssIcssExportDependency.js

@@ -5,43 +5,93 @@
 
 "use strict";
 
-const { CSS_TYPE, JAVASCRIPT_TYPE } = require("../ModuleSourceTypeConstants");
+const { JAVASCRIPT_TYPE } = require("../ModuleSourceTypeConstants");
 const { interpolate } = require("../TemplatedPathPlugin");
-const WebpackError = require("../WebpackError");
+const WebpackError = require("../errors/WebpackError");
 const { cssExportConvention } = require("../util/conventions");
 const createHash = require("../util/createHash");
 const { makePathsRelative } = require("../util/identifier");
 const makeSerializable = require("../util/makeSerializable");
 const memoize = require("../util/memoize");
-const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
+const { digestNonNumericOnly } = require("../util/nonNumericOnlyHash");
+const { updateHashFromSource } = require("../util/source");
 const CssIcssImportDependency = require("./CssIcssImportDependency");
 const NullDependency = require("./NullDependency");
 
-const getCssParser = memoize(() => require("../css/CssParser"));
+const getCssTokens = memoize(() => require("../css/syntax"));
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
-/** @typedef {import("../../declarations/WebpackOptions").HashFunction} HashFunction */
 /** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
 /** @typedef {import("../../declarations/WebpackOptions").CssGeneratorLocalIdentName} CssGeneratorLocalIdentName */
-/** @typedef {import("../CssModule")} CssModule */
-/** @typedef {import("../Dependency")} Dependency */
-/** @typedef {import("../Dependency").ReferencedExports} ReferencedExports */
+/** @typedef {import("../../declarations/WebpackOptions").HashFunction} HashFunction */
+/** @typedef {import("../css/CssGenerator")} CssGenerator */
+/** @typedef {import("../css/CssModule")} CssModule */
+/** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../Dependency").ExportsSpec} ExportsSpec */
+/** @typedef {import("../Dependency").ReferencedExports} ReferencedExports */
 /** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
+/** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
-/** @typedef {import("../css/CssGenerator")} CssGenerator */
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
-/** @typedef {import("../util/Hash")} Hash */
-/** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
-/** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../RuntimeTemplate")} RuntimeTemplate */
 /** @typedef {import("../css/CssParser").Range} Range */
+/** @typedef {import("../Dependency").DependencyLocation} DependencyLocation */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext<(number | string | Value | Range | boolean | ExportMode | ExportType | DependencyLocation | undefined)[]>} ObjectDeserializerContext */
+/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext<(number | string | Value | Range | boolean | ExportMode | ExportType | DependencyLocation | undefined)[]>} ObjectSerializerContext */
+/** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
+/** @typedef {import("../errors/WebpackError")} WebpackErrorType */
 
-/** @typedef {(name: string) => string} ExportsConventionFn */
+/** @typedef {string | [string, string] | [string, string, string]} Value */
+/** @typedef {(name: string) => string | string[]} ExportsConventionFn */
+// 0 - none, 1 - replace, 2 - append, 3 - once, 4 - self-reference
+/** @typedef {0 | 1 | 2 | 3 | 4} ExportMode */
+// 0 - normal, 1 - custom css variable, 2 - grid custom ident, 3 - composes
+/** @typedef {0 | 1 | 2 | 3} ExportType */
+
+/** @type {Record<"NONE" | "REPLACE" | "APPEND" | "ONCE" | "SELF_REFERENCE", ExportMode>} */
+const EXPORT_MODE = {
+	NONE: 0,
+	REPLACE: 1,
+	APPEND: 2,
+	ONCE: 3,
+	SELF_REFERENCE: 4
+};
+
+/** @type {Record<"NORMAL" | "CUSTOM_VARIABLE" | "GRID_CUSTOM_IDENTIFIER" | "COMPOSES", ExportType>} */
+const EXPORT_TYPE = {
+	NORMAL: 0,
+	CUSTOM_VARIABLE: 1,
+	GRID_CUSTOM_IDENTIFIER: 2,
+	COMPOSES: 3
+};
+
+// Hoisted out of `getLocalIdent`'s `prepareId` so the patterns + the replacer
+// aren't recompiled/reallocated per interpolated id.
+const IDENT_LEADING_INVALID_REGEXP = /^([.-]|[^a-z0-9_-])+/i;
+const IDENT_INVALID_CHARS_REGEXP = /[^a-z0-9@_-]+/gi;
+const IDENT_LOCAL_PLACEHOLDER_REGEXP = /\[local\]/g;
+const IDENT_LEADING_PROTECT_REGEXP = /^((-?\d)|--)/;
+
+/**
+ * `interpolate` `prepareId` hook — sanitize an id segment into a valid CSS ident.
+ * Pure (captures nothing), so it's shared rather than allocated per call.
+ * @param {string | number} id id segment
+ * @returns {string | number} sanitized id segment
+ */
+const prepareLocalIdentId = (id) => {
+	if (typeof id !== "string") return id;
+	return (
+		id
+			.replace(IDENT_LEADING_INVALID_REGEXP, "")
+			// We keep the `@` symbol because it can be used in the package name (e.g. `@company/package`), and if we replace it with `_`, a class conflict may occur.
+			// For example - `@import "@foo/package/style.module.css"` and `@import "foo/package/style.module.css"` (`foo` is a package, `package` is just a directory) will create a class conflict.
+			.replace(IDENT_INVALID_CHARS_REGEXP, "_")
+	);
+};
 
 /**
+ * Returns local ident.
  * @param {string} local css local
  * @param {CssModule} module module
  * @param {ChunkGraph} chunkGraph chunk graph
@@ -63,11 +113,9 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 	const { uniqueName } = runtimeTemplate.outputOptions;
 
 	let localIdentHash = "";
+	let localIdentHashFull = "";
 
-	if (
-		typeof localIdentName === "function" ||
-		/\[(?:fullhash|hash)\]/.test(localIdentName)
-	) {
+	if (generator._localIdentNeedsHash) {
 		const hashSalt = generator.options.localIdentHashSalt;
 		const hashDigest =
 			/** @type {string} */
@@ -90,108 +138,182 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 		hash.update(relativeResourcePath);
 		hash.update(local);
 
-		localIdentHash = hash.digest(hashDigest).slice(0, hashDigestLength);
+		// Keep the untruncated digest so an inline `[fullhash:<digest>]` re-encodes
+		// with full entropy (see the `fullHash`/`fullHashDigest` passed below).
+		localIdentHashFull = hash.digest(hashDigest);
+		localIdentHash = localIdentHashFull.slice(0, hashDigestLength);
 	}
 
 	let contentHash = "";
 
-	if (
-		typeof localIdentName === "function" ||
-		/\[contenthash\]/.test(localIdentName)
-	) {
+	if (generator._localIdentNeedsContentHash) {
 		const hash = createHash(runtimeTemplate.outputOptions.hashFunction);
 		const source = module.originalSource();
 
 		if (source) {
-			hash.update(source.buffer());
+			updateHashFromSource(hash, source);
 		}
 
 		if (module.error) {
 			hash.update(module.error.toString());
 		}
 
-		const fullContentHash = hash.digest(
-			runtimeTemplate.outputOptions.hashDigest
-		);
-
-		contentHash = nonNumericOnlyHash(
-			fullContentHash,
-			runtimeTemplate.outputOptions.hashDigestLength
+		contentHash = digestNonNumericOnly(
+			hash,
+			/** @type {string} */ (runtimeTemplate.outputOptions.hashDigest),
+			/** @type {number} */ (runtimeTemplate.outputOptions.hashDigestLength)
 		);
 	}
 
 	let localIdent = interpolate(localIdentName, {
-		prepareId: (id) => {
-			if (typeof id !== "string") return id;
-
-			return (
-				id
-					.replace(/^([.-]|[^a-z0-9_-])+/i, "")
-					// We keep the `@` symbol because it can be used in the package name (e.g. `@company/package`), and if we replace it with `_`, a class conflict may occur.
-					// For example - `@import "@foo/package/style.module.css"` and `@import "foo/package/style.module.css"` (`foo` is a package, `package` is just a directory) will create a class conflict.
-					.replace(/[^a-z0-9@_-]+/gi, "_")
-			);
-		},
+		prepareId: prepareLocalIdentId,
 		filename: relativeResourcePath,
 		hash: localIdentHash,
+		// css-loader semantics: `[hash]` is the local ident hash, not the module
+		// hash (use `[modulehash]` for that).
+		hashAsFullHash: true,
+		// `[hash]`/`[contenthash]` are encoded with the output digest, but the
+		// `[fullhash]` local ident hash uses `localIdentHashDigest`, so re-encode it
+		// from its own (full) digest.
+		hashDigest: runtimeTemplate.outputOptions.hashDigest,
+		fullHash: localIdentHashFull,
+		fullHashDigest:
+			/** @type {string} */
+			(generator.options.localIdentHashDigest),
 		local,
+		uniqueName,
 		contentHash,
 		chunkGraph,
 		module
 	});
 
-	// TODO move these things into interpolate
-	if (/\[local\]/.test(localIdent)) {
-		localIdent = localIdent.replace(/\[local\]/g, local);
-	}
-
-	if (/\[uniqueName\]/.test(localIdent)) {
-		localIdent = localIdent.replace(
-			/\[uniqueName\]/g,
-			/** @type {string} */ (uniqueName)
-		);
-	}
+	// TODO move this into interpolate
+	// `replace` on a non-matching global regexp returns the string unchanged, so
+	// the `.test` guard is redundant — one scan instead of two.
+	localIdent = localIdent.replace(IDENT_LOCAL_PLACEHOLDER_REGEXP, local);
 
 	// Protect the first character from unsupported values
-	return localIdent.replace(/^((-?\d)|--)/, "_$1");
+	return localIdent.replace(IDENT_LEADING_PROTECT_REGEXP, "_$1");
 };
 
-/** @typedef {string | [string, string]} Value */
+/**
+ * Computes the interpolated identifier for `(module, value, exportType)`.
+ * Module-level reference so `moduleGraph.cached` can use it as a stable
+ * computer key — repeated lookups during a build skip `cssExportConvention`,
+ * `getLocalIdent` (with its content / path hashing) and `escapeIdentifier`.
+ * @param {ModuleGraph} _moduleGraph module graph (unused, kept for `cached` signature)
+ * @param {CssModule} module css module the value resolves in
+ * @param {string} value raw value to interpolate
+ * @param {ExportType} exportType export type discriminator
+ * @param {ChunkGraph} chunkGraph chunk graph
+ * @param {RuntimeTemplate} runtimeTemplate runtime template
+ * @returns {string} interpolated identifier
+ */
+const computeInterpolatedIdentifier = (
+	_moduleGraph,
+	module,
+	value,
+	exportType,
+	chunkGraph,
+	runtimeTemplate
+) => {
+	const generator = /** @type {CssGenerator} */ (module.generator);
+	const local = cssExportConvention(
+		value,
+		/** @type {CssGeneratorExportsConvention} */
+		(generator.options.exportsConvention)
+	)[0];
+	const prefix = exportType === EXPORT_TYPE.CUSTOM_VARIABLE ? "--" : "";
+	return (
+		prefix +
+		getCssTokens().escapeIdentifier(
+			getLocalIdent(local, module, chunkGraph, runtimeTemplate),
+			runtimeTemplate.compilation.compiler.root
+		)
+	);
+};
 
-// 0 - replace, 1 - replace, 2 - append,  2 - once
-/** @typedef {0 | 1 | 2 | 3 | 4} ExportMode */
-// 0 - normal, 1 - custom css variable, 2 - grid custom ident, 3 - composes
-/** @typedef {0 | 1 | 2 | 3} ExportType */
+/**
+ * One `:export { name: value }` style entry — a plain object so a module holds
+ * a single `Dependency` plus a flat array instead of thousands of `Dependency`
+ * instances. `_conventionNames`/`_valueConventionNames` memoize the convention
+ * expansion per entry.
+ * @typedef {object} CssExportEntry
+ * @property {string} name export name
+ * @property {Value} value value or [localName, importName, request?]
+ * @property {Range=} range source range to replace, when present
+ * @property {boolean} interpolate whether the value needs interpolation
+ * @property {ExportMode} exportMode export mode
+ * @property {ExportType} exportType export type
+ * @property {number} locStartLine per-export source start line (1-based; flat numbers instead of a nested `DependencyLocation` — entries are per-export hot allocations)
+ * @property {number} locStartColumn per-export source start column
+ * @property {number} locEndLine per-export source end line
+ * @property {number} locEndColumn per-export source end column
+ * @property {string[]=} _conventionNames memoized convention names for `name`
+ * @property {string[]=} _valueConventionNames memoized convention names for `value`
+ */
+
+/**
+ * Memoized `cssExportConvention(entry.name, convention)`.
+ * @param {CssExportEntry} entry entry
+ * @param {CssGeneratorExportsConvention} convention convention
+ * @returns {string[]} convention names
+ */
+const entryConventionNames = (entry, convention) => {
+	if (entry._conventionNames) return entry._conventionNames;
+	entry._conventionNames = cssExportConvention(entry.name, convention);
+	return entry._conventionNames;
+};
+
+/**
+ * Memoized `cssExportConvention(entry.value, convention)`. Caller guarantees
+ * `typeof entry.value === "string"`.
+ * @param {CssExportEntry} entry entry
+ * @param {CssGeneratorExportsConvention} convention convention
+ * @returns {string[]} convention names
+ */
+const entryValueConventionNames = (entry, convention) => {
+	if (entry._valueConventionNames) return entry._valueConventionNames;
+	entry._valueConventionNames = cssExportConvention(
+		/** @type {string} */ (entry.value),
+		convention
+	);
+	return entry._valueConventionNames;
+};
 
 class CssIcssExportDependency extends NullDependency {
 	/**
-	 * Example of dependency:
-	 *
-	 * :export { LOCAL_NAME: EXPORT_NAME }
-	 * @param {string} name export name
-	 * @param {Value} value value or local name and import name
-	 * @param {Range=} range range
-	 * @param {boolean=} interpolate true when value need to be interpolated, otherwise false
-	 * @param {ExportMode=} exportMode export mode
-	 * @param {ExportType=} exportType export type
+	 * One consolidated `:export` dependency for a whole CSS module.
+	 * @param {CssExportEntry[]} entries export entries in source order
 	 */
-	constructor(
-		name,
-		value,
-		range,
-		interpolate = false,
-		exportMode = CssIcssExportDependency.EXPORT_MODE.REPLACE,
-		exportType = CssIcssExportDependency.EXPORT_TYPE.NORMAL
-	) {
+	constructor(entries) {
 		super();
-		this.name = name;
-		this.value = value;
-		this.range = range;
-		this.interpolate = interpolate;
-		this.exportMode = exportMode;
-		this.exportType = exportType;
+		/** @type {CssExportEntry[]} */
+		this.entries = entries;
 		/** @type {undefined | string} */
 		this._hashUpdate = undefined;
+		/** @type {undefined | Map<string, CssExportEntry[]>} lazily-built `name -> entries` index, reused across every importer's codegen */
+		this._entriesByName = undefined;
+	}
+
+	/**
+	 * The `entries` grouped by export name, built once and reused. `entries` is
+	 * immutable after construction/deserialization, so this stays valid for the
+	 * dependency's lifetime (the composes/`@value` target of many importers).
+	 * @returns {Map<string, CssExportEntry[]>} entries grouped by export name
+	 */
+	getEntriesByName() {
+		if (this._entriesByName === undefined) {
+			/** @type {Map<string, CssExportEntry[]>} */
+			const map = new Map();
+			for (const e of this.entries) {
+				const list = map.get(e.name);
+				if (list) list.push(e);
+				else map.set(e.name, [e]);
+			}
+			this._entriesByName = map;
+		}
+		return this._entriesByName;
 	}
 
 	get type() {
@@ -199,16 +321,33 @@ class CssIcssExportDependency extends NullDependency {
 	}
 
 	/**
-	 * @param {string} name export name
-	 * @param {CssGeneratorExportsConvention} convention convention of the export name
-	 * @returns {string[]} convention results
+	 * Returns the exported names
+	 * @param {ModuleGraph} moduleGraph module graph
+	 * @returns {ExportsSpec | undefined} export names
 	 */
-	getExportsConventionNames(name, convention) {
-		if (this._conventionNames) {
-			return this._conventionNames;
+	getExports(moduleGraph) {
+		const module = /** @type {CssModule} */ (moduleGraph.getParentModule(this));
+		const generator = /** @type {CssGenerator} */ (module.generator);
+		const convention =
+			/** @type {CssGeneratorExportsConvention} */
+			(generator.options.exportsConvention);
+
+		/** @type {{ name: string, canMangle: boolean }[]} */
+		const exports = [];
+		for (const entry of this.entries) {
+			if (
+				entry.exportMode === EXPORT_MODE.NONE ||
+				entry.exportMode === EXPORT_MODE.SELF_REFERENCE
+			) {
+				continue;
+			}
+			for (const name of entryConventionNames(entry, convention)) {
+				exports.push({ name, canMangle: true });
+			}
 		}
-		this._conventionNames = cssExportConvention(name, convention);
-		return this._conventionNames;
+
+		if (exports.length === 0) return undefined;
+		return { exports, dependencies: undefined };
 	}
 
 	/**
@@ -218,80 +357,103 @@ class CssIcssExportDependency extends NullDependency {
 	 * @returns {ReferencedExports} referenced exports
 	 */
 	getReferencedExports(moduleGraph, runtime) {
-		if (
-			this.exportMode === CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE
-		) {
-			return [
-				{
-					name: [this.name],
-					canMangle: true
+		// `composes: foo;` (SELF_REFERENCE) references the composed class
+		// (`entry.value`), not the composing class. Every other entry mode
+		// keeps the whole exports object referenced (legacy behaviour), so the
+		// presence of any such entry subsumes the self-reference names.
+		let hasNonSelfReference = false;
+		/** @type {ReferencedExports} */
+		const referenced = [];
+		let generator;
+		for (const entry of this.entries) {
+			if (
+				entry.exportMode === EXPORT_MODE.SELF_REFERENCE &&
+				typeof entry.value === "string"
+			) {
+				const module =
+					/** @type {CssModule} */
+					(moduleGraph.getParentModule(this));
+				generator = generator || /** @type {CssGenerator} */ (module.generator);
+				const names = entryValueConventionNames(
+					entry,
+					/** @type {CssGeneratorExportsConvention} */
+					(generator.options.exportsConvention)
+				);
+				for (const name of names) {
+					referenced.push({ name: [name], canMangle: true });
 				}
-			];
+			} else {
+				hasNonSelfReference = true;
+			}
 		}
 
-		return super.getReferencedExports(moduleGraph, runtime);
-	}
-
-	/**
-	 * Returns the exported names
-	 * @param {ModuleGraph} moduleGraph module graph
-	 * @returns {ExportsSpec | undefined} export names
-	 */
-	getExports(moduleGraph) {
-		if (
-			this.exportMode === CssIcssExportDependency.EXPORT_MODE.NONE ||
-			this.exportMode === CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE
-		) {
-			return;
+		if (hasNonSelfReference) {
+			return super.getReferencedExports(moduleGraph, runtime);
 		}
-
-		const module = /** @type {CssModule} */ (moduleGraph.getParentModule(this));
-		const generator = /** @type {CssGenerator} */ (module.generator);
-		const names = this.getExportsConventionNames(
-			this.name,
-			/** @type {CssGeneratorExportsConvention} */
-			(generator.options.exportsConvention)
-		);
-
-		return {
-			exports: [...names].map((name) => ({
-				name,
-				canMangle: true
-			})),
-			dependencies: undefined
-		};
+		if (referenced.length === 0) {
+			return super.getReferencedExports(moduleGraph, runtime);
+		}
+		return referenced;
 	}
 
 	/**
-	 * Returns warnings
+	 * Returns warnings.
 	 * @param {ModuleGraph} moduleGraph module graph
 	 * @returns {WebpackError[] | null | undefined} warnings
 	 */
 	getWarnings(moduleGraph) {
-		if (
-			this.exportMode === CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE &&
-			!Array.isArray(this.value)
-		) {
-			const module = moduleGraph.getParentModule(this);
-
+		/** @type {WebpackErrorType[] | null} */
+		let warnings = null;
+		let module;
+		let exportsInfo;
+		let convention;
+		for (const entry of this.entries) {
 			if (
-				module &&
-				!moduleGraph.getExportsInfo(module).isExportProvided(this.value)
+				entry.exportMode !== EXPORT_MODE.SELF_REFERENCE ||
+				typeof entry.value !== "string"
 			) {
+				continue;
+			}
+			if (module === undefined) {
+				module =
+					/** @type {CssModule | undefined} */
+					(moduleGraph.getParentModule(this));
+				if (!module) return warnings;
+				const generator = /** @type {CssGenerator} */ (module.generator);
+				convention =
+					/** @type {CssGeneratorExportsConvention} */
+					(generator.options.exportsConvention);
+				exportsInfo = moduleGraph.getExportsInfo(module);
+			}
+			const names = entryValueConventionNames(
+				entry,
+				/** @type {CssGeneratorExportsConvention} */ (convention)
+			);
+			const ei = /** @type {NonNullable<typeof exportsInfo>} */ (exportsInfo);
+			const isProvided = names.some((name) => ei.isExportProvided(name));
+			if (!isProvided) {
 				const error = new WebpackError(
-					`Self-referencing name "${this.value}" not found`
+					`Self-referencing name "${entry.value}" not found`
 				);
 				error.module = module;
-
-				return [error];
+				// Per-entry loc so Compilation attributes the warning precisely
+				// (it can't use the consolidated dependency's single loc). Built
+				// on demand — entries carry flat numbers, not location objects.
+				if (entry.locStartLine > 0) {
+					error.loc = {
+						start: { line: entry.locStartLine, column: entry.locStartColumn },
+						end: { line: entry.locEndLine, column: entry.locEndColumn }
+					};
+				}
+				if (warnings === null) warnings = [];
+				warnings.push(error);
 			}
 		}
-
-		return null;
+		return warnings;
 	}
 
 	/**
-	 * Update the hash
+	 * Updates the hash with the data contributed by this instance.
 	 * @param {Hash} hash hash to be updated
 	 * @param {UpdateHashContext} context context
 	 * @returns {void}
@@ -302,100 +464,252 @@ class CssIcssExportDependency extends NullDependency {
 				/** @type {CssModule} */
 				(chunkGraph.moduleGraph.getParentModule(this));
 			const generator = /** @type {CssGenerator} */ (module.generator);
-			const names = this.getExportsConventionNames(
-				this.name,
+			const convention =
 				/** @type {CssGeneratorExportsConvention} */
-				(generator.options.exportsConvention)
-			);
-			this._hashUpdate = `exportsConvention|${JSON.stringify(names)}|localIdentName|${JSON.stringify(generator.options.localIdentName)}`;
+				(generator.options.exportsConvention);
+			const localIdentName = JSON.stringify(generator.options.localIdentName);
+			// Concatenate each entry's contribution with no separator so the byte
+			// stream matches the legacy per-export `updateHash` sequence exactly
+			// (keeps module hashes stable for import-free modules).
+			let update = "";
+			for (const entry of this.entries) {
+				const names = entryConventionNames(entry, convention);
+				update += `exportsConvention|${JSON.stringify(names)}|localIdentName|${localIdentName}|value|${JSON.stringify(entry.value)}|range|${JSON.stringify(entry.range)}|interpolate|${entry.interpolate}|exportMode|${entry.exportMode}|exportType|${entry.exportType}`;
+			}
+			this._hashUpdate = update;
 		}
 		hash.update(this._hashUpdate);
 	}
 
 	/**
+	 * Serializes this instance into the provided serializer context.
 	 * @param {ObjectSerializerContext} context context
 	 */
 	serialize(context) {
 		const { write } = context;
-		write(this.name);
-		write(this.value);
-		write(this.range);
-		write(this.interpolate);
-		write(this.exportMode);
-		write(this.exportType);
+		write(this.entries.length);
+		for (const entry of this.entries) {
+			write(entry.name);
+			write(entry.value);
+			write(entry.range);
+			write(entry.interpolate);
+			write(entry.exportMode);
+			write(entry.exportType);
+			write(entry.locStartLine);
+			write(entry.locStartColumn);
+			write(entry.locEndLine);
+			write(entry.locEndColumn);
+		}
 		super.serialize(context);
 	}
 
 	/**
+	 * Restores this instance from the provided deserializer context.
 	 * @param {ObjectDeserializerContext} context context
 	 */
 	deserialize(context) {
 		const { read } = context;
-		this.name = read();
-		this.value = read();
-		this.range = read();
-		this.interpolate = read();
-		this.exportMode = read();
-		this.exportType = read();
+		const length = /** @type {number} */ (read());
+		/** @type {CssExportEntry[]} */
+		const entries = [];
+		for (let i = 0; i < length; i++) {
+			entries.push({
+				name: /** @type {string} */ (read()),
+				value: /** @type {Value} */ (read()),
+				range: /** @type {Range=} */ (read()),
+				interpolate: /** @type {boolean} */ (read()),
+				exportMode: /** @type {ExportMode} */ (read()),
+				exportType: /** @type {ExportType} */ (read()),
+				locStartLine: /** @type {number} */ (read()),
+				locStartColumn: /** @type {number} */ (read()),
+				locEndLine: /** @type {number} */ (read()),
+				locEndColumn: /** @type {number} */ (read())
+			});
+		}
+		this.entries = entries;
+		this._hashUpdate = undefined;
+		this._entriesByName = undefined;
 		super.deserialize(context);
 	}
 }
 
+/**
+ * @typedef {object} ResolutionCache
+ * @property {Map<CssModule, Map<string, CssExportEntry[]>>} exports module -> (export name -> entries) across all its export deps
+ * @property {Map<CssIcssImportDependency, CssModule | null>} targets import dep -> resolved target module
+ */
+
+/**
+ * Creates the transient per-`apply` cache shared by `resolve` and
+ * `resolveReferences`. It is GC'd when the codegen call returns and is never
+ * retained on the dependency.
+ * @returns {ResolutionCache} empty resolution cache
+ */
+const createResolutionCache = () => ({
+	exports: new Map(),
+	targets: new Map()
+});
+
+/**
+ * Shared read-only index for modules that own no export dep.
+ * @type {Map<string, CssExportEntry[]>}
+ */
+const EMPTY_INDEX = new Map();
+
+/**
+ * Per-module `local name -> import deps` index, keyed by module and validated by
+ * `buildInfo` identity (a fresh object per build). `apply` runs once per source
+ * type (CSS and JS), so this survives both passes — the index is built once per
+ * build instead of once per `apply`. Weakly held, so it never keeps a module
+ * alive.
+ * @type {WeakMap<CssModule, { buildInfo: unknown, index: Map<string, CssIcssImportDependency[]> }>}
+ */
+const moduleImportIndexes = new WeakMap();
+
+/**
+ * Get (or lazily resolve) the target module of an `@value`/composes import dep.
+ * The same import dep is followed by many entries within one codegen, so the
+ * `moduleGraph.getModule` lookup is memoized per dep.
+ * @param {ResolutionCache} cache resolution cache
+ * @param {ModuleGraph} moduleGraph module graph
+ * @param {CssIcssImportDependency} importDep import dependency
+ * @returns {CssModule | null} resolved target module, or `null` if none
+ */
+const getTargetModule = (cache, moduleGraph, importDep) => {
+	let module = cache.targets.get(importDep);
+	if (module === undefined) {
+		module = /** @type {CssModule | null} */ (moduleGraph.getModule(importDep));
+		cache.targets.set(importDep, module);
+	}
+	return module;
+};
+
+/**
+ * Get (or lazily build) the `name -> entries` index for `module`. There is one
+ * consolidated `CssIcssExportDependency` per module, and its own index is cached
+ * on the dep — so a module composed/imported by many others builds its index
+ * once per build rather than once per importer, and resolution does a single Map
+ * lookup instead of re-scanning `module.dependencies` per reference.
+ * @param {ResolutionCache} cache resolution cache
+ * @param {CssModule} module css module
+ * @returns {Map<string, CssExportEntry[]>} entries grouped by export name
+ */
+const getExportIndex = (cache, module) => {
+	let map = cache.exports.get(module);
+	if (map === undefined) {
+		map = EMPTY_INDEX;
+		for (const dep of module.dependencies) {
+			if (dep instanceof CssIcssExportDependency) {
+				map = dep.getEntriesByName();
+				break;
+			}
+		}
+		cache.exports.set(module, map);
+	}
+	return map;
+};
+
+/**
+ * Get (or lazily build) the `local name -> import deps` index for `module`, so
+ * `findImportDep` is a Map lookup instead of a linear scan of every dependency.
+ * Cached per build on the module (validated by `buildInfo` identity) so both the
+ * CSS and JS codegen passes reuse one scan of `module.dependencies`.
+ * @param {CssModule} module css module
+ * @returns {Map<string, CssIcssImportDependency[]>} import deps grouped by local name
+ */
+const getImportIndex = (module) => {
+	const buildInfo = module.buildInfo;
+	const cached = moduleImportIndexes.get(module);
+	if (cached !== undefined && cached.buildInfo === buildInfo) {
+		return cached.index;
+	}
+	/** @type {Map<string, CssIcssImportDependency[]>} */
+	const index = new Map();
+	for (const d of module.dependencies) {
+		if (!(d instanceof CssIcssImportDependency)) continue;
+		const list = index.get(d.localName);
+		if (list) list.push(d);
+		else index.set(d.localName, [d]);
+	}
+	moduleImportIndexes.set(module, { buildInfo, index });
+	return index;
+};
+
+/**
+ * Finds the active `CssIcssImportDependency` for a given local name. When a
+ * `request` is provided the lookup also requires the import dependency's
+ * `request` to match, so references between two `@value foo from "..."`
+ * declarations resolve through the import in scope at the reference site.
+ * @param {CssModule} module module owning the dependencies to search
+ * @param {string} localName local name
+ * @param {string=} request user request of the `@value` import to match
+ * @returns {CssIcssImportDependency | undefined} matching import dep, if any
+ */
+const findImportDep = (module, localName, request) => {
+	const list = getImportIndex(module).get(localName);
+	if (list === undefined) return undefined;
+	// Import deps keep dependency order, so `list[0]` is the first match (the
+	// legacy `firstMatch` fallback when no request-specific match exists).
+	if (request === undefined) return list[0];
+	for (const d of list) if (d.request === request) return d;
+	return list[0];
+};
+
 CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends (
 	NullDependency.Template
 ) {
-	// TODO looking how to cache
 	/**
+	 * Resolves a `[localName, importName, request]` reference to its final
+	 * value by following `@value` imports into other modules' consolidated
+	 * export dependencies.
 	 * @param {string} localName local name
 	 * @param {string} importName import name
 	 * @param {DependencyTemplateContext} templateContext the context object
-	 * @param {Set<CssIcssExportDependency>} seen seen to prevent cyclical problems
+	 * @param {string | undefined} request user request of the `@value` import
+	 * @param {Set<CssExportEntry>=} seen cycle guard
+	 * @param {ResolutionCache=} cache transient per-codegen index (shared with `resolveReferences` within one `apply`)
 	 * @returns {string | undefined} found reference
 	 */
-	static resolve(localName, importName, templateContext, seen = new Set()) {
+	static resolve(
+		localName,
+		importName,
+		templateContext,
+		request,
+		seen = new Set(),
+		cache = createResolutionCache()
+	) {
 		const { moduleGraph } = templateContext;
-		const importDep =
-			/** @type {CssIcssImportDependency | undefined} */
-			(
-				templateContext.module.dependencies.find(
-					(d) =>
-						d instanceof CssIcssImportDependency && d.localName === localName
-				)
-			);
+		const importDep = findImportDep(
+			/** @type {CssModule} */ (templateContext.module),
+			localName,
+			request
+		);
 		if (!importDep) return undefined;
 
-		const module = /** @type {CssModule} */ (moduleGraph.getModule(importDep));
+		const module = getTargetModule(cache, moduleGraph, importDep);
 		if (!module) return undefined;
 
-		const exportDep =
-			/** @type {CssIcssExportDependency} */
-			(
-				module.dependencies.find(
-					(d) => d instanceof CssIcssExportDependency && d.name === importName
-				)
-			);
-
-		if (!exportDep) return undefined;
+		const matches = getExportIndex(cache, module).get(importName);
+		const exportEntry = matches && matches[0];
+		if (!exportEntry) return undefined;
+		if (seen.has(exportEntry)) return undefined;
+		seen.add(exportEntry);
 
-		if (seen.has(exportDep)) return undefined;
-		seen.add(exportDep);
-
-		const { value, interpolate } = exportDep;
+		const { value, interpolate } = exportEntry;
 
 		if (Array.isArray(value)) {
-			return this.resolve(
+			return CssIcssExportDependencyTemplate.resolve(
 				value[0],
 				value[1],
-				{
-					...templateContext,
-					module
-				},
-				seen
+				{ ...templateContext, module },
+				value[2],
+				seen,
+				cache
 			);
 		}
 
 		if (interpolate) {
-			return CssIcssExportDependency.Template.getIdentifier(value, exportDep, {
+			return CssIcssExportDependencyTemplate.getIdentifier(value, exportEntry, {
 				...templateContext,
 				module
 			});
@@ -405,84 +719,86 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 	}
 
 	/**
-	 * @param {CssIcssExportDependency} dep value
+	 * Resolves all references of a `composes` entry, deduplicated.
+	 * @param {CssExportEntry} entry composes entry
 	 * @param {DependencyTemplateContext} templateContext template context
-	 * @param {Set<CssIcssExportDependency>} seen to prevent cyclical problems
+	 * @param {Set<CssExportEntry>} seen cycle guard
+	 * @param {ResolutionCache} cache transient per-codegen index, discarded after the module's `apply` (so it isn't retained on the dependency)
 	 * @returns {string[]} final names
 	 */
-	static resolveReferences(dep, templateContext, seen = new Set()) {
+	static resolveReferences(entry, templateContext, seen, cache) {
 		/** @type {string[]} */
 		const references = [];
 
-		if (seen.has(dep)) return references;
-		seen.add(dep);
-
-		if (Array.isArray(dep.value)) {
-			const importDep =
-				/** @type {CssIcssImportDependency | undefined} */
-				(
-					templateContext.module.dependencies.find(
-						(d) =>
-							d instanceof CssIcssImportDependency &&
-							d.localName === dep.value[0]
-					)
-				);
+		if (seen.has(entry)) return references;
+		seen.add(entry);
+
+		if (Array.isArray(entry.value)) {
+			const importDep = findImportDep(
+				/** @type {CssModule} */ (templateContext.module),
+				entry.value[0],
+				entry.value[2]
+			);
 			if (!importDep) return references;
 
-			const module =
-				/** @type {CssModule} */
-				(templateContext.moduleGraph.getModule(importDep));
+			const module = getTargetModule(
+				cache,
+				templateContext.moduleGraph,
+				importDep
+			);
 			if (!module) return references;
 
-			for (const d of module.dependencies) {
-				if (d instanceof CssIcssExportDependency && d.name === dep.value[1]) {
+			// Same overridden context and target name for every matched entry — build once, not per entry.
+			const subContext = { ...templateContext, module };
+			const name = /** @type {string[]} */ (entry.value)[1];
+			const matches = getExportIndex(cache, module).get(name);
+			if (matches) {
+				for (const d of matches) {
 					if (Array.isArray(d.value)) {
-						const deepReferences =
-							CssIcssExportDependencyTemplate.resolveReferences(
+						references.push(
+							...CssIcssExportDependencyTemplate.resolveReferences(
 								d,
-								{
-									...templateContext,
-									module
-								},
-								seen
-							);
-
-						references.push(...deepReferences);
+								subContext,
+								seen,
+								cache
+							)
+						);
 					} else {
 						references.push(
-							CssIcssExportDependencyTemplate.getIdentifier(d.value, d, {
-								...templateContext,
-								module
-							})
+							CssIcssExportDependencyTemplate.getIdentifier(
+								d.value,
+								d,
+								subContext
+							)
 						);
 					}
 				}
 			}
 		} else {
-			// Adding basic class
 			references.push(
 				CssIcssExportDependencyTemplate.getIdentifier(
-					dep.value,
-					dep,
+					/** @type {string} */ (entry.value),
+					entry,
 					templateContext
 				)
 			);
 
-			for (const d of templateContext.module.dependencies) {
-				if (
-					d instanceof CssIcssExportDependency &&
-					d.exportType === CssIcssExportDependency.EXPORT_TYPE.COMPOSES &&
-					d.name === dep.value
-				) {
+			const matches = getExportIndex(
+				cache,
+				/** @type {CssModule} */ (templateContext.module)
+			).get(/** @type {string} */ (entry.value));
+			if (matches) {
+				for (const d of matches) {
+					if (d.exportType !== EXPORT_TYPE.COMPOSES) continue;
 					if (Array.isArray(d.value)) {
-						const deepReferences =
-							CssIcssExportDependencyTemplate.resolveReferences(
+						references.push(
+							...CssIcssExportDependencyTemplate.resolveReferences(
 								d,
 								templateContext,
-								seen
-							);
-
-						references.push(...deepReferences);
+								seen,
+								cache
+							)
+						);
 					} else {
 						references.push(
 							CssIcssExportDependencyTemplate.getIdentifier(
@@ -496,50 +812,32 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 			}
 		}
 
-		return [...new Set(references)];
+		return references.length > 1 ? [...new Set(references)] : references;
 	}
 
 	/**
+	 * Returns the interpolated identifier for an entry value.
 	 * @param {string} value value to identifier
-	 * @param {Dependency} dependency the dependency for which the template should be applied
+	 * @param {CssExportEntry} entry the entry
 	 * @param {DependencyTemplateContext} templateContext the context object
 	 * @returns {string} identifier
 	 */
-	static getIdentifier(value, dependency, templateContext) {
-		const dep = /** @type {CssIcssExportDependency} */ (dependency);
-
-		if (dep.interpolate) {
-			const { module: m } = templateContext;
-			const module = /** @type {CssModule} */ (m);
-			const generator = /** @type {CssGenerator} */ (module.generator);
-			const local = cssExportConvention(
-				value,
-				/** @type {CssGeneratorExportsConvention} */
-				(generator.options.exportsConvention)
-			)[0];
-			const prefix =
-				dep.exportType === CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
-					? "--"
-					: "";
-
-			return (
-				prefix +
-				getCssParser().escapeIdentifier(
-					getLocalIdent(
-						local,
-						/** @type {CssModule} */
-						(m),
-						templateContext.chunkGraph,
-						templateContext.runtimeTemplate
-					)
-				)
-			);
-		}
-
-		return value;
+	static getIdentifier(value, entry, templateContext) {
+		if (!entry.interpolate) return value;
+		const { moduleGraph, module, chunkGraph, runtimeTemplate } =
+			templateContext;
+		return moduleGraph.cached(
+			computeInterpolatedIdentifier,
+			/** @type {CssModule} */ (module),
+			value,
+			entry.exportType,
+			chunkGraph,
+			runtimeTemplate
+		);
 	}
 
 	/**
+	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Dependency} dependency the dependency for which the template should be applied
 	 * @param {ReplaceSource} source the current replace source which can be modified
 	 * @param {DependencyTemplateContext} templateContext the context object
@@ -547,112 +845,128 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 	 */
 	apply(dependency, source, templateContext) {
 		const dep = /** @type {CssIcssExportDependency} */ (dependency);
-		if (!dep.range && templateContext.type !== JAVASCRIPT_TYPE) return;
 		const { module: m, moduleGraph, runtime, cssData } = templateContext;
 		const module = /** @type {CssModule} */ (m);
 		const generator = /** @type {CssGenerator} */ (module.generator);
-		const isReference = Array.isArray(dep.value);
-
-		/** @type {string} */
-		let value;
-
-		// The `composes` has more complex logic for collecting all the classes
-		if (
-			dep.exportType === CssIcssExportDependency.EXPORT_TYPE.COMPOSES &&
-			templateContext.type === JAVASCRIPT_TYPE
-		) {
-			value = CssIcssExportDependencyTemplate.resolveReferences(
-				dep,
-				templateContext
-			).join(" ");
-		} else if (isReference) {
-			const resolved = CssIcssExportDependencyTemplate.resolve(
-				dep.value[0],
-				dep.value[1],
-				templateContext
-			);
+		const isJs = templateContext.type === JAVASCRIPT_TYPE;
+		// All entries belong to this one module, so resolve its ExportsInfo once
+		// instead of re-resolving `module -> exportsInfo` per export name.
+		const exportsInfo = isJs ? moduleGraph.getExportsInfo(module) : undefined;
+		// Transient per-module indexes for composes resolution within this
+		// module's codegen; GC'd when apply returns (never retained on the dependency).
+		const cache = createResolutionCache();
+
+		for (const entry of dep.entries) {
+			if (!entry.range && !isJs) continue;
+			const isReference = Array.isArray(entry.value);
 
-			// Fallback to the local name if not resolved
-			value = resolved || dep.value[0];
-		} else {
-			value = CssIcssExportDependencyTemplate.getIdentifier(
-				/** @type {string} */ (dep.value),
-				dep,
-				templateContext
-			);
-		}
+			/** @type {string} */
+			let value;
+			if (entry.exportType === EXPORT_TYPE.COMPOSES && isJs) {
+				value = CssIcssExportDependencyTemplate.resolveReferences(
+					entry,
+					templateContext,
+					new Set(),
+					cache
+				).join(" ");
+			} else if (isReference) {
+				const resolved = CssIcssExportDependencyTemplate.resolve(
+					/** @type {string[]} */ (entry.value)[0],
+					/** @type {string[]} */ (entry.value)[1],
+					templateContext,
+					/** @type {string[]} */ (entry.value)[2],
+					new Set(),
+					cache
+				);
+				value = resolved || /** @type {string[]} */ (entry.value)[0];
+			} else {
+				value = CssIcssExportDependencyTemplate.getIdentifier(
+					/** @type {string} */ (entry.value),
+					entry,
+					templateContext
+				);
+			}
 
-		if (
-			dep.exportType ===
-			CssIcssExportDependency.EXPORT_TYPE.GRID_CUSTOM_IDENTIFIER
-		) {
-			value += `-${dep.name}`;
-		}
+			if (entry.exportType === EXPORT_TYPE.GRID_CUSTOM_IDENTIFIER) {
+				value += `-${entry.name}`;
+			}
 
-		if (
-			templateContext.type === JAVASCRIPT_TYPE &&
-			dep.exportMode !== CssIcssExportDependency.EXPORT_MODE.NONE
-		) {
-			const names = dep.getExportsConventionNames(
-				dep.name,
-				/** @type {CssGeneratorExportsConvention} */
-				(generator.options.exportsConvention)
-			);
-			const usedNames =
-				/** @type {string[]} */
-				(
-					names
-						.map((name) =>
-							moduleGraph.getExportInfo(module, name).getUsedName(name, runtime)
-						)
-						.filter(Boolean)
+			if (isJs && entry.exportMode !== EXPORT_MODE.NONE) {
+				const names = entryConventionNames(
+					entry,
+					/** @type {CssGeneratorExportsConvention} */
+					(generator.options.exportsConvention)
 				);
-			const allNames = new Set([...usedNames, ...names]);
-			const unescaped = getCssParser().unescapeIdentifier(value);
-
-			for (const used of allNames) {
-				if (dep.exportMode === CssIcssExportDependency.EXPORT_MODE.ONCE) {
-					if (cssData.exports.has(used)) return;
-					cssData.exports.set(used, unescaped);
-				} else {
-					const originalValue =
-						dep.exportMode === CssIcssExportDependency.EXPORT_MODE.REPLACE
-							? undefined
-							: cssData.exports.get(used);
-
-					cssData.exports.set(
-						used,
-						`${originalValue ? `${originalValue}${unescaped ? " " : ""}` : ""}${unescaped}`
-					);
+				/** @type {Set<string>} */
+				const allNames = new Set();
+				for (const name of names) {
+					if (
+						/** @type {NonNullable<typeof exportsInfo>} */ (exportsInfo)
+							.getExportInfo(name)
+							.getUsedName(name, runtime)
+					) {
+						allNames.add(name);
+					}
+				}
+				const unescaped = getCssTokens().unescapeIdentifier(
+					value,
+					templateContext.runtimeTemplate.compilation.compiler.root
+				);
+
+				const depLocLine = entry.locStartLine;
+				const depLocColumn = entry.locStartColumn;
+				for (const used of allNames) {
+					if (entry.exportMode === EXPORT_MODE.ONCE) {
+						if (cssData.exports.has(used)) continue;
+						cssData.exports.set(used, unescaped);
+						if (
+							depLocLine > 0 &&
+							cssData.exportLocs &&
+							!cssData.exportLocs.has(used)
+						) {
+							cssData.exportLocs.set(used, {
+								line: depLocLine,
+								column: depLocColumn
+							});
+						}
+					} else {
+						const originalValue =
+							entry.exportMode === EXPORT_MODE.REPLACE
+								? undefined
+								: cssData.exports.get(used);
+						cssData.exports.set(
+							used,
+							`${originalValue ? `${originalValue}${unescaped ? " " : ""}` : ""}${unescaped}`
+						);
+						if (
+							depLocLine > 0 &&
+							cssData.exportLocs &&
+							!cssData.exportLocs.has(used)
+						) {
+							cssData.exportLocs.set(used, {
+								line: depLocLine,
+								column: depLocColumn
+							});
+						}
+					}
 				}
+			} else if (
+				entry.range &&
+				templateContext.type !== JAVASCRIPT_TYPE &&
+				entry.exportMode !== EXPORT_MODE.APPEND &&
+				entry.exportMode !== EXPORT_MODE.SELF_REFERENCE
+			) {
+				source.replace(entry.range[0], entry.range[1] - 1, value);
 			}
-		} else if (
-			dep.range &&
-			templateContext.type === CSS_TYPE &&
-			dep.exportMode !== CssIcssExportDependency.EXPORT_MODE.APPEND &&
-			dep.exportMode !== CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE
-		) {
-			source.replace(dep.range[0], dep.range[1] - 1, value);
 		}
 	}
 };
 
 /** @type {Record<"NONE" | "REPLACE" | "APPEND" | "ONCE" | "SELF_REFERENCE", ExportMode>} */
-CssIcssExportDependency.EXPORT_MODE = {
-	NONE: 0,
-	REPLACE: 1,
-	APPEND: 2,
-	ONCE: 3,
-	SELF_REFERENCE: 4
-};
+CssIcssExportDependency.EXPORT_MODE = EXPORT_MODE;
 
 /** @type {Record<"NORMAL" | "CUSTOM_VARIABLE" | "GRID_CUSTOM_IDENTIFIER" | "COMPOSES", ExportType>} */
-CssIcssExportDependency.EXPORT_TYPE = {
-	NORMAL: 0,
-	CUSTOM_VARIABLE: 1,
-	GRID_CUSTOM_IDENTIFIER: 2,
-	COMPOSES: 3
-};
+CssIcssExportDependency.EXPORT_TYPE = EXPORT_TYPE;
 
 makeSerializable(
 	CssIcssExportDependency,