webpack 5.111.0 → 5.112.0

package/lib/dependencies/{CssIcssExportDependency.js → css/CssIcssExportDependency.js}

@@ -5,70 +5,96 @@
 
 "use strict";
 
-const { JAVASCRIPT_TYPE } = require("../ModuleSourceTypeConstants");
-const { interpolate } = require("../TemplatedPathPlugin");
-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 { digestNonNumericOnly } = require("../util/nonNumericOnlyHash");
-const { updateHashFromSource } = require("../util/source");
-const CssIcssImportDependency = require("./CssIcssImportDependency");
-const NullDependency = require("./NullDependency");
-
-const getCssTokens = memoize(() => require("../css/syntax"));
-
+const { cssExportConvention } = require("../../css/conventions");
+const WebpackError = require("../../errors/WebpackError");
+const isDependencyKind = require("../../graph/isDependencyKind");
+const { JAVASCRIPT_TYPE } = require("../../module/ModuleSourceTypeConstants");
+const { interpolate } = require("../../template/TemplatedPathPlugin");
+const createHash = require("../../util/createHash");
+const { makePathsRelative } = require("../../util/identifier");
+const makeSerializable = require("../../util/makeSerializable");
+const memoize = require("../../util/memoize");
+const { digestNonNumericOnly } = require("../../util/nonNumericOnlyHash");
+const { updateHashFromSource } = require("../../util/source");
+const NullDependency = require("../core/NullDependency");
+
+const getCssTokens = memoize(() => require("../../css/syntax-parser"));
+const getCssData = memoize(() => require("../../css/data"));
+
+/** @import CssIcssImportDependency from "./CssIcssImportDependency" */
 /** @import { ReplaceSource } from "webpack-sources" */
 /**
  * @import {
  * 	CssGeneratorExportsConvention,
  * 	CssGeneratorLocalIdentName,
  * 	HashFunction
- * } from "../../declarations/WebpackOptions"
+ * } from "../../../declarations/WebpackOptions"
  */
-/** @import CssGenerator from "../css/CssGenerator" */
-/** @import CssModule from "../css/CssModule" */
-/** @import ChunkGraph from "../ChunkGraph" */
+/** @import CssGenerator from "../../css/CssGenerator" */
+/** @import CssModule from "../../css/CssModule" */
+/** @import ChunkGraph from "../../graph/ChunkGraph" */
 /**
  * @import Dependency, {
  * 	ExportsSpec,
  * 	ReferencedExports,
  * 	UpdateHashContext,
- * 	DependencyLocation
- * } from "../Dependency"
+ * 	DependencyLocation,
+ * 	DependencyKinds
+ * } from "../../graph/Dependency"
  */
 /**
  * @import {
  * 	CssDependencyTemplateContext as DependencyTemplateContext
- * } from "../DependencyTemplate"
+ * } from "../../template/DependencyTemplate"
  */
-/** @import ModuleGraph from "../ModuleGraph" */
-/** @import RuntimeTemplate from "../RuntimeTemplate" */
-/** @import { Range } from "../css/CssParser" */
-/** @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 */
-/** @import Hash from "../util/Hash" */
-/** @import { RuntimeSpec } from "../util/runtime" */
-/** @import WebpackErrorType from "../errors/WebpackError" */
-
-/** @typedef {string | [string, string] | [string, string, string]} Value */
+/** @import ModuleGraph from "../../graph/ModuleGraph" */
+/** @import RuntimeTemplate from "../../template/RuntimeTemplate" */
+/** @import { Range } from "../../css/CssParser" */
+/** @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 */
+/** @import Hash from "../../util/Hash" */
+/** @import { RuntimeSpec } from "../../util/runtime" */
+/** @import WebpackErrorType from "../../errors/WebpackError" */
+
+// A reference is `[localName, importName, request?]`; a `RESOLVED_REFERENCE`
+// also names the declaration's property, whose keywords stay unscoped.
+/** @typedef {string | [string, string] | [string, string, string] | [string, string, string | undefined, 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 - none, 1 - replace, 2 - append, 3 - once, 4 - self-reference, 5 - resolved
+// name / 6 - resolved selector (once, keyed by what an imported `@value` names),
+// 7 - resolved reference (a property value scoped once it resolves, not exported)
+/** @typedef {0 | 1 | 2 | 3 | 4 | 5 | 6 | 7} 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>} */
+/** @type {Record<"NONE" | "REPLACE" | "APPEND" | "ONCE" | "SELF_REFERENCE" | "RESOLVED_NAME" | "RESOLVED_SELECTOR" | "RESOLVED_REFERENCE", ExportMode>} */
 const EXPORT_MODE = {
 	NONE: 0,
 	REPLACE: 1,
 	APPEND: 2,
 	ONCE: 3,
-	SELF_REFERENCE: 4
+	SELF_REFERENCE: 4,
+	RESOLVED_NAME: 5,
+	RESOLVED_SELECTOR: 6,
+	RESOLVED_REFERENCE: 7
 };
 
+/**
+ * Whether an entry is only resolved once its imported `@value` is, so its `name` is no export key.
+ * @param {ExportMode} exportMode export mode
+ * @returns {boolean} true for the `RESOLVED_*` modes, numbered last
+ */
+const isResolvedMode = (exportMode) => exportMode >= EXPORT_MODE.RESOLVED_NAME;
+
+/**
+ * The warning for a `@value` standing in for a declared name (an at-rule prelude, `local()`) whose value is not one identifier.
+ * @param {string} name `@value` name as written
+ * @param {string} value what it resolves to
+ * @returns {string} warning message
+ */
+const notSimpleIdentifierMessage = (name, value) =>
+	`'@value' '${name}' resolves to '${value}', which is not a single identifier: it is scoped in the CSS but not exported to JavaScript`;
+
 /** @type {Record<"NORMAL" | "CUSTOM_VARIABLE" | "GRID_CUSTOM_IDENTIFIER" | "COMPOSES", ExportType>} */
 const EXPORT_TYPE = {
 	NORMAL: 0,
@@ -347,20 +373,42 @@ class CssIcssExportDependency extends NullDependency {
 
 		/** @type {{ name: string, canMangle: boolean }[]} */
 		const exports = [];
+		/** @type {CssModule[] | undefined} */
+		let dependencies;
+		/** @type {ResolutionCache | undefined} */
+		let cache;
 		for (const entry of this.entries) {
 			if (
 				entry.exportMode === EXPORT_MODE.NONE ||
-				entry.exportMode === EXPORT_MODE.SELF_REFERENCE
+				entry.exportMode === EXPORT_MODE.SELF_REFERENCE ||
+				entry.exportMode === EXPORT_MODE.RESOLVED_REFERENCE
 			) {
 				continue;
 			}
+			if (isResolvedMode(entry.exportMode)) {
+				// The name lives in another module, so these exports follow its changes.
+				if (dependencies === undefined) dependencies = [];
+				if (cache === undefined) cache = createResolutionCache();
+				const declaration = resolveDeclaration(
+					moduleGraph,
+					module,
+					entry,
+					cache,
+					dependencies
+				);
+				if (declaration === undefined) continue;
+				for (const name of cssExportConvention(declaration.name, convention)) {
+					exports.push({ name, canMangle: true });
+				}
+				continue;
+			}
 			for (const name of entryConventionNames(entry, convention)) {
 				exports.push({ name, canMangle: true });
 			}
 		}
 
-		if (exports.length === 0) return undefined;
-		return { exports, dependencies: undefined };
+		if (exports.length === 0 && dependencies === undefined) return undefined;
+		return { exports, dependencies };
 	}
 
 	/**
@@ -370,10 +418,9 @@ class CssIcssExportDependency extends NullDependency {
 	 * @returns {ReferencedExports} referenced exports
 	 */
 	getReferencedExports(moduleGraph, runtime) {
-		// `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.
+		// `composes: foo;` references the composed class, not the composing one.
+		// Every other entry mode references the whole exports object, so one such
+		// entry subsumes the self-reference names.
 		let hasNonSelfReference = false;
 		/** @type {ReferencedExports} */
 		const referenced = [];
@@ -420,7 +467,36 @@ class CssIcssExportDependency extends NullDependency {
 		let module;
 		let exportsInfo;
 		let convention;
+		/** @type {ResolutionCache | undefined} */
+		let cache;
 		for (const entry of this.entries) {
+			if (entry.exportMode === EXPORT_MODE.RESOLVED_NAME) {
+				const parent =
+					/** @type {CssModule | undefined} */
+					(moduleGraph.getParentModule(this));
+				if (!parent) return warnings;
+				if (cache === undefined) cache = createResolutionCache();
+				const text = resolveImportedText(moduleGraph, parent, entry, cache);
+				if (text === undefined || getCssTokens().isSimpleIdentifier(text)) {
+					continue;
+				}
+				const error = new WebpackError(
+					notSimpleIdentifierMessage(
+						/** @type {string[]} */ (entry.value)[0],
+						text
+					)
+				);
+				error.module = parent;
+				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);
+				continue;
+			}
 			if (
 				entry.exportMode !== EXPORT_MODE.SELF_REFERENCE ||
 				typeof entry.value !== "string"
@@ -612,7 +688,7 @@ const getExportIndex = (cache, module) => {
 	if (map === undefined) {
 		map = EMPTY_INDEX;
 		for (const dep of module.dependencies) {
-			if (dep instanceof CssIcssExportDependency) {
+			if (isDependencyKind(dep, "css-icss-export")) {
 				map = dep.getEntriesByName();
 				break;
 			}
@@ -639,7 +715,7 @@ const getImportIndex = (module) => {
 	/** @type {Map<string, CssIcssImportDependency[]>} */
 	const index = new Map();
 	for (const d of module.dependencies) {
-		if (!(d instanceof CssIcssImportDependency)) continue;
+		if (!isDependencyKind(d, "css-icss-import")) continue;
 		const list = index.get(d.localName);
 		if (list) list.push(d);
 		else index.set(d.localName, [d]);
@@ -668,6 +744,161 @@ const findImportDep = (module, localName, request) => {
 	return list[0];
 };
 
+/**
+ * Follows a `@value` import, through re-exports, to the entry defining it. Skips demoted (`NONE`) cross-kind entries so it picks the same winner as the JS export map, and `RESOLVED_*` ones, which aren't keyed by their own name.
+ * @param {ModuleGraph} moduleGraph module graph
+ * @param {CssModule} module module holding the import
+ * @param {string} localName local name
+ * @param {string} importName import name
+ * @param {string | undefined} request user request of the `@value` import
+ * @param {Set<CssExportEntry>} seen cycle guard
+ * @param {ResolutionCache} cache resolution cache
+ * @param {CssModule[]=} visited collects each module the chain passes through
+ * @param {boolean=} localized for a use that scopes a name: a plain value naming what its own module scoped (`@value a: b; @keyframes a {}`) resolves to that declaration
+ * @returns {{ entry: CssExportEntry, module: CssModule } | undefined} defining entry and its module
+ */
+const resolveImportedEntry = (
+	moduleGraph,
+	module,
+	localName,
+	importName,
+	request,
+	seen,
+	cache,
+	visited,
+	localized
+) => {
+	for (;;) {
+		const importDep = findImportDep(module, localName, request);
+		if (!importDep) return undefined;
+		const target = getTargetModule(cache, moduleGraph, importDep);
+		if (!target) return undefined;
+		if (visited) visited.push(target);
+		const matches = getExportIndex(cache, target).get(importName);
+		let exportEntry;
+		if (matches) {
+			for (const m of matches) {
+				if (
+					m.exportMode !== EXPORT_MODE.NONE &&
+					!isResolvedMode(m.exportMode)
+				) {
+					exportEntry = m;
+					break;
+				}
+			}
+		}
+		if (!exportEntry || seen.has(exportEntry)) return undefined;
+		seen.add(exportEntry);
+		if (!Array.isArray(exportEntry.value)) {
+			if (localized && !exportEntry.interpolate) {
+				const declarations = getExportIndex(cache, target).get(
+					exportEntry.value.trim()
+				);
+				if (declarations !== undefined) {
+					for (const d of declarations) {
+						if (
+							d.interpolate &&
+							d.exportType === EXPORT_TYPE.NORMAL &&
+							d.exportMode !== EXPORT_MODE.NONE &&
+							!isResolvedMode(d.exportMode) &&
+							typeof d.value === "string"
+						) {
+							return { entry: d, module: target };
+						}
+					}
+				}
+			}
+			return { entry: exportEntry, module: target };
+		}
+		module = target;
+		localName = exportEntry.value[0];
+		importName = exportEntry.value[1];
+		request = exportEntry.value[2];
+	}
+};
+
+/**
+ * The text a `RESOLVED_NAME` entry's imported `@value` resolves to, when the defining module holds it as a plain value rather than a name it scoped itself.
+ * @param {ModuleGraph} moduleGraph module graph
+ * @param {CssModule} module module owning the entry
+ * @param {CssExportEntry} entry entry whose value is `[localName, importName, request?]`
+ * @param {ResolutionCache} cache resolution cache
+ * @param {CssModule[]=} visited collects each module the chain passes through
+ * @param {boolean=} localized resolve to what the defining module scoped under that name, when it did
+ * @returns {string | undefined} the trimmed plain value, if any
+ */
+const resolveImportedText = (
+	moduleGraph,
+	module,
+	entry,
+	cache,
+	visited,
+	localized = true
+) => {
+	const value = /** @type {string[]} */ (entry.value);
+	const target = resolveImportedEntry(
+		moduleGraph,
+		module,
+		value[0],
+		value[1],
+		value[2],
+		new Set(),
+		cache,
+		visited,
+		localized
+	);
+	if (!target || target.entry.interpolate) return undefined;
+	return /** @type {string} */ (target.entry.value).trim();
+};
+
+/**
+ * What a `RESOLVED_*` entry scopes once its import resolves to a plain value, as a local `@value` would: one ident, or for a selector one `.class` / `#id`. Anything else is substituted verbatim.
+ * @param {ModuleGraph} moduleGraph module graph
+ * @param {CssModule} module module owning the entry
+ * @param {CssExportEntry} entry `RESOLVED_*` entry
+ * @param {ResolutionCache} cache resolution cache
+ * @param {CssModule[]=} visited collects each module the chain passes through
+ * @returns {{ prefix: string, name: string } | undefined} selector prefix (empty for a name) and the ident to scope
+ */
+const resolveDeclaration = (moduleGraph, module, entry, cache, visited) => {
+	const text = resolveImportedText(moduleGraph, module, entry, cache, visited);
+	if (text === undefined) return undefined;
+	const { isSimpleIdentifier } = getCssTokens();
+	if (entry.exportMode === EXPORT_MODE.RESOLVED_SELECTOR) {
+		const prefix = text.charAt(0);
+		return (prefix === "." || prefix === "#") &&
+			isSimpleIdentifier(text.slice(1))
+			? { prefix, name: text.slice(1) }
+			: undefined;
+	}
+	return isSimpleIdentifier(text) ? { prefix: "", name: text } : undefined;
+};
+
+/**
+ * Whether a `RESOLVED_REFERENCE` resolves to a keyword of its property (`linear` in `animation`), which stays text even where its defining module scoped that name.
+ * @param {ModuleGraph} moduleGraph module graph
+ * @param {CssModule} module module owning the entry
+ * @param {CssExportEntry} entry entry
+ * @param {ResolutionCache} cache resolution cache
+ * @returns {boolean} true for a keyword reference
+ */
+const isReferenceKeyword = (moduleGraph, module, entry, cache) => {
+	if (entry.exportMode !== EXPORT_MODE.RESOLVED_REFERENCE) return false;
+	const keywords = getCssData()
+		.getCssModulesKeywords()
+		.get(/** @type {string[]} */ (entry.value)[3]);
+	if (keywords === undefined) return false;
+	const text = resolveImportedText(
+		moduleGraph,
+		module,
+		entry,
+		cache,
+		undefined,
+		false
+	);
+	return text !== undefined && keywords.has(text.toLowerCase());
+};
+
 CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends (
 	NullDependency.Template
 ) {
@@ -681,6 +912,8 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 	 * @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`)
+	 * @param {CssExportEntry=} scopeEntry entry to scope a plain imported value under, for a reference in a localized position
+	 * @param {boolean=} localized whether the use scopes a name, so a value naming its own module's declaration resolves to it
 	 * @returns {string | undefined} found reference
 	 */
 	static resolve(
@@ -689,54 +922,38 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 		templateContext,
 		request,
 		seen = new Set(),
-		cache = createResolutionCache()
+		cache = createResolutionCache(),
+		scopeEntry = undefined,
+		localized = scopeEntry !== undefined
 	) {
-		const { moduleGraph } = templateContext;
-		const importDep = findImportDep(
+		const target = resolveImportedEntry(
+			templateContext.moduleGraph,
 			/** @type {CssModule} */ (templateContext.module),
 			localName,
-			request
+			importName,
+			request,
+			seen,
+			cache,
+			undefined,
+			localized
 		);
-		if (!importDep) return undefined;
-
-		const module = getTargetModule(cache, moduleGraph, importDep);
-		if (!module) return undefined;
-
-		const matches = getExportIndex(cache, module).get(importName);
-		// Skip demoted (`NONE`) cross-kind entries so `@value name from` picks the same winner as the JS export map.
-		let exportEntry;
-		if (matches) {
-			for (const m of matches) {
-				if (m.exportMode !== EXPORT_MODE.NONE) {
-					exportEntry = m;
-					break;
-				}
-			}
-		}
-		if (!exportEntry) return undefined;
-		if (seen.has(exportEntry)) return undefined;
-		seen.add(exportEntry);
-
-		const { value, interpolate } = exportEntry;
-
-		if (Array.isArray(value)) {
-			return CssIcssExportDependencyTemplate.resolve(
-				value[0],
-				value[1],
-				{ ...templateContext, module },
-				value[2],
-				seen,
-				cache
-			);
-		}
-
-		if (interpolate) {
+		if (!target) return undefined;
+		const { entry: exportEntry, module } = target;
+		const value = /** @type {string} */ (exportEntry.value);
+		if (exportEntry.interpolate) {
 			return CssIcssExportDependencyTemplate.getIdentifier(value, exportEntry, {
 				...templateContext,
 				module
 			});
 		}
-
+		// A plain value scopes in the importing module, as a local `@value` would.
+		if (scopeEntry !== undefined) {
+			return CssIcssExportDependencyTemplate.getIdentifier(
+				value,
+				scopeEntry,
+				templateContext
+			);
+		}
 		return value;
 	}
 
@@ -776,7 +993,12 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 			const matches = getExportIndex(cache, module).get(name);
 			if (matches) {
 				for (const d of matches) {
-					if (d.exportMode === EXPORT_MODE.NONE) continue;
+					if (
+						d.exportMode === EXPORT_MODE.NONE ||
+						isResolvedMode(d.exportMode)
+					) {
+						continue;
+					}
 					if (Array.isArray(d.value)) {
 						references.push(
 							...CssIcssExportDependencyTemplate.resolveReferences(
@@ -850,10 +1072,9 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 		if (!entry.interpolate) return value;
 		const { moduleGraph, module, chunkGraph, runtimeTemplate } =
 			templateContext;
-		// Key order is by rising cardinality: `moduleGraph.cached` is a trie that
-		// allocates a node per level per new prefix, so the per-export `value` goes
-		// last — otherwise every export name forks the trie and re-allocates the
-		// three elements below it, which are constant for the whole compilation.
+		// Keys are ordered by rising cardinality, since `moduleGraph.cached` is a
+		// trie allocating a node per level per prefix: the per-export `value` last,
+		// or every name forks the trie above the parts constant for the build.
 		return moduleGraph.cached(
 			computeInterpolatedIdentifier,
 			/** @type {CssModule} */ (module),
@@ -886,10 +1107,14 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 
 		for (const entry of dep.entries) {
 			if (!entry.range && !isJs) continue;
+			// Neither exported nor rewritten in JS, so not worth resolving there.
+			if (isJs && entry.exportMode === EXPORT_MODE.RESOLVED_REFERENCE) continue;
 			const isReference = Array.isArray(entry.value);
 
 			/** @type {string} */
 			let value;
+			/** @type {{ prefix: string, name: string } | undefined} */
+			let declaration;
 			if (entry.exportType === EXPORT_TYPE.COMPOSES && isJs) {
 				value = CssIcssExportDependencyTemplate.resolveReferences(
 					entry,
@@ -897,6 +1122,31 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 					new Set(),
 					cache
 				).join(" ");
+			} else if (isResolvedMode(entry.exportMode)) {
+				const keyword = isReferenceKeyword(moduleGraph, module, entry, cache);
+				declaration = keyword
+					? undefined
+					: resolveDeclaration(moduleGraph, module, entry, cache);
+				value =
+					declaration !== undefined
+						? CssIcssExportDependencyTemplate.getIdentifier(
+								declaration.name,
+								entry,
+								templateContext
+							)
+						: CssIcssExportDependencyTemplate.resolve(
+								/** @type {string[]} */ (entry.value)[0],
+								/** @type {string[]} */ (entry.value)[1],
+								templateContext,
+								/** @type {string[]} */ (entry.value)[2],
+								new Set(),
+								cache,
+								// A declared name is still scoped, as a local `@value` is.
+								entry.exportMode === EXPORT_MODE.RESOLVED_NAME
+									? entry
+									: undefined,
+								!keyword
+							) || /** @type {string[]} */ (entry.value)[0];
 			} else if (isReference) {
 				const resolved = CssIcssExportDependencyTemplate.resolve(
 					/** @type {string[]} */ (entry.value)[0],
@@ -904,7 +1154,10 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 					templateContext,
 					/** @type {string[]} */ (entry.value)[2],
 					new Set(),
-					cache
+					cache,
+					entry.interpolate && entry.exportType === EXPORT_TYPE.NORMAL
+						? entry
+						: undefined
 				);
 				value = resolved || /** @type {string[]} */ (entry.value)[0];
 			} else {
@@ -926,11 +1179,14 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 			}
 
 			if (isJs && entry.exportMode !== EXPORT_MODE.NONE) {
-				const names = entryConventionNames(
-					entry,
+				const convention =
 					/** @type {CssGeneratorExportsConvention} */
-					(generator.options.exportsConvention)
-				);
+					(generator.options.exportsConvention);
+				const names = !isResolvedMode(entry.exportMode)
+					? entryConventionNames(entry, convention)
+					: declaration !== undefined
+						? cssExportConvention(declaration.name, convention)
+						: [];
 				/** @type {Set<string>} */
 				const allNames = new Set();
 				for (const name of names) {
@@ -950,7 +1206,10 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 				const depLocLine = entry.locStartLine;
 				const depLocColumn = entry.locStartColumn;
 				for (const used of allNames) {
-					if (entry.exportMode === EXPORT_MODE.ONCE) {
+					if (
+						entry.exportMode === EXPORT_MODE.ONCE ||
+						isResolvedMode(entry.exportMode)
+					) {
 						if (cssData.exports.has(used)) continue;
 						cssData.exports.set(used, unescaped);
 						if (
@@ -990,21 +1249,37 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 				entry.exportMode !== EXPORT_MODE.APPEND &&
 				entry.exportMode !== EXPORT_MODE.SELF_REFERENCE
 			) {
-				source.replace(entry.range[0], entry.range[1] - 1, value);
+				// A resolved `.class` / `#id` keeps its prefix in the CSS only.
+				source.replace(
+					entry.range[0],
+					entry.range[1] - 1,
+					declaration !== undefined && declaration.prefix !== ""
+						? declaration.prefix + value
+						: value
+				);
 			}
 		}
 	}
 };
 
-/** @type {Record<"NONE" | "REPLACE" | "APPEND" | "ONCE" | "SELF_REFERENCE", ExportMode>} */
+/** @type {Record<"NONE" | "REPLACE" | "APPEND" | "ONCE" | "SELF_REFERENCE" | "RESOLVED_NAME" | "RESOLVED_SELECTOR" | "RESOLVED_REFERENCE", ExportMode>} */
 CssIcssExportDependency.EXPORT_MODE = EXPORT_MODE;
 
+CssIcssExportDependency.notSimpleIdentifierMessage = notSimpleIdentifierMessage;
+
 /** @type {Record<"NORMAL" | "CUSTOM_VARIABLE" | "GRID_CUSTOM_IDENTIFIER" | "COMPOSES", ExportType>} */
 CssIcssExportDependency.EXPORT_TYPE = EXPORT_TYPE;
 
-makeSerializable(
-	CssIcssExportDependency,
+makeSerializable(CssIcssExportDependency, [
+	"webpack/lib/dependencies/css/CssIcssExportDependency",
+	// TODO in the next major release: remove, they restore pre-move cache packs
 	"webpack/lib/dependencies/CssIcssExportDependency"
-);
+]);
+
+/** @type {Set<keyof DependencyKinds>} */
+CssIcssExportDependency.KINDS = new Set([
+	...NullDependency.KINDS,
+	"css-icss-export"
+]);
 
 module.exports = CssIcssExportDependency;