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

package/lib/css/CssParser.js

@@ -15,9 +15,6 @@ const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency
 const CssImportDependency = require("../dependencies/CssImportDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
-const CommentCompilationWarning = require("../errors/CommentCompilationWarning");
-const ModuleDependencyWarning = require("../errors/ModuleDependencyWarning");
-const UnsupportedFeatureWarning = require("../errors/UnsupportedFeatureWarning");
 const WebpackError = require("../errors/WebpackError");
 const ResourceHintPlugin = require("../prefetch/ResourceHintPlugin");
 const LocConverter = require("../util/LocConverter");
@@ -26,7 +23,9 @@ const {
 	createMagicCommentContext,
 	parseCommentOptionsInRange
 } = require("../util/magicComment");
+const memoize = require("../util/memoize");
 const topologicalSort = require("../util/topologicalSort");
+const { CSS_MODULES_KEYWORDS, CSS_MODULES_KEYWORD_OPTIONS } = require("./data");
 const {
 	A,
 	NodeType,
@@ -38,40 +37,83 @@ const {
 	normalizeUrl,
 	rangeEquals,
 	rangeEqualsLowerCase,
+	skipEscape,
 	toLowerCaseIfNeeded,
 	unescapeIdentifier
 } = require("./syntax");
 
+const getUnsupportedFeatureWarning = memoize(() =>
+	require("../errors/UnsupportedFeatureWarning")
+);
+
+const getModuleDependencyWarning = memoize(() =>
+	require("../errors/ModuleDependencyWarning")
+);
+
+const getCommentCompilationWarning = memoize(() =>
+	require("../errors/CommentCompilationWarning")
+);
+
 // `SourceProcessor` drives the parse and hands already-built AST nodes to the visitors; positions are read from those nodes' ranges rather than re-scanning the source.
 
-/** @typedef {import("../Module").BuildInfo} BuildInfo */
-/** @typedef {import("../Module").BuildMeta} BuildMeta */
-/** @typedef {import("./CssModule").CssModuleBuildInfo} CssModuleBuildInfo */
-/** @typedef {import("./CssModule").CssModuleBuildMeta} CssModuleBuildMeta */
-/** @typedef {import("../Parser").ParserState} ParserState */
-/** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
-/** @typedef {import("./syntax").AtRule} AtRule */
-/** @typedef {import("./syntax").Declaration} Declaration */
-/** @typedef {import("./syntax").FunctionNode} FunctionNode */
-/** @typedef {import("./syntax").Node} AstNode */
-/** @typedef {import("./syntax").QualifiedRule} QualifiedRule */
-/** @typedef {import("./syntax").Rule} Rule */
-/** @typedef {import("./syntax").SimpleBlock} SimpleBlock */
-/** @typedef {import("./syntax").Token} Token */
-/** @typedef {import("./syntax").UrlToken} UrlToken */
-/** @typedef {import("./syntax").HashToken} HashToken */
-/** @typedef {import("./syntax").VisitorMap} VisitorMap */
-/** @typedef {import("../../declarations/WebpackOptions").CssAutoOrModuleParserOptions} CssAutoOrModuleParserOptions */
-/** @typedef {import("../../declarations/WebpackOptions").CssModuleParserOptions} CssModuleParserOptions */
-/** @typedef {import("./CssModule")} CssModule */
-/** @typedef {import("./CssModule").Inheritance} Inheritance */
+/** @import { BuildInfo, BuildMeta } from "../Module" */
+/**
+ * @import CssModule, {
+ * 	CssModuleBuildInfo,
+ * 	CssModuleBuildMeta,
+ * 	Inheritance
+ * } from "./CssModule"
+ */
+/** @import { ParserState, PreparsedAst } from "../Parser" */
+/**
+ * @import {
+ * 	AtRule,
+ * 	Declaration,
+ * 	FunctionNode,
+ * 	Node as AstNode,
+ * 	QualifiedRule,
+ * 	Rule,
+ * 	SimpleBlock,
+ * 	Token,
+ * 	UrlToken,
+ * 	VisitorMap
+ * } from "./syntax"
+ */
+/**
+ * @import {
+ * 	CssAutoOrModuleParserOptions
+ * } from "../../declarations/WebpackOptions"
+ */
 
 /** @typedef {[number, number]} Range */
 /** @typedef {{ line: number, column: number }} Position */
 /** @typedef {{ from: string, items: ({ localName: string, importName: string })[] }} ValueAtRuleImport */
 /** @typedef {{ localName: string, value: string }} ValueAtRuleValue */
+/**
+ * What a `@custom-media` name resolves to. `condition` substitutes into any
+ * `<media-in-parens>` slot, `type` only at the start of a query, `boolean` is the
+ * spec's `true` / `false` (folded into the enclosing query rather than written
+ * out — no `<media-in-parens>` is unconditionally true on every engine).
+ * @typedef {{ kind: "condition" | "type", text: string } | { kind: "boolean", value: boolean } | { kind: "unsupported" }} CustomMediaValue
+ */
+/** @typedef {CustomMediaValue | { kind: "alias", name: string } | { kind: "or", parts: ({ text: string } | { alias: string })[] }} CustomMediaDefinition */
+/** @typedef {{ name: string, start: number, end: number, invalid: boolean, leading: boolean }} CustomMediaUse */
+/**
+ * A `@media` prelude captured as its boolean shape, so a `true` / `false`
+ * definition found later can be folded into it. Node ids are recycled per
+ * top-level rule, so this holds text and offsets rather than AST nodes.
+ * @typedef {{ kind: "text", text: string } | { kind: "ref", text: string, use: CustomMediaUse } | { kind: "group", operand: MediaNode } | { kind: "not", operand: MediaNode } | { kind: "chain", isOr: boolean, terms: MediaNode[] } | { kind: "typed", text: string, rest: MediaNode | null }} MediaNode
+ */
+
+/** @type {CustomMediaValue} */
+const CUSTOM_MEDIA_UNSUPPORTED = { kind: "unsupported" };
+/** @type {CustomMediaValue} */
+const CUSTOM_MEDIA_TRUE = { kind: "boolean", value: true };
+/** @type {CustomMediaValue} */
+const CUSTOM_MEDIA_FALSE = { kind: "boolean", value: false };
 
 const CC_COLON = ":".charCodeAt(0);
+const CC_FULL_STOP = ".".charCodeAt(0);
 const CC_HYPHEN_MINUS = "-".charCodeAt(0);
 const CC_SEMICOLON = ";".charCodeAt(0);
 const CC_TAB = "\t".charCodeAt(0);
@@ -103,22 +145,23 @@ const VIEW_TRANSITION_PART_PSEUDO =
 	/^view-transition-(?:group|image-pair|old|new)$/i;
 const IS_MODULES = /\.modules?\.[^.]+$/i;
 
-// `@font-face` src extension → preload `type`; the emission guesses `as="font"`.
-const FONT_MIME_TYPES = new Map([
-	["woff2", "font/woff2"],
-	["woff", "font/woff"],
-	["ttf", "font/ttf"],
-	["otf", "font/otf"],
-	["eot", "application/vnd.ms-fontobject"]
-]);
+// Which formats get a preload hint is webpack's call; what each one *is* comes
+// from `mime-db`, not a second copy of the mapping.
+const FONT_EXTENSIONS = new Set(["woff2", "woff", "ttf", "otf", "eot"]);
+
+// mime-db is heavy — only load it once a font src actually needs a `type`.
+const getMimeTypes = memoize(() => require("../util/mimeTypes"));
 
 /**
  * @param {string} request font url (may carry a query/hash)
  * @returns {string | undefined} preload `type` for a known font extension
  */
 const fontMimeType = (request) => {
-	const match = /\.([a-z0-9]+)(?:[?#]|$)/i.exec(request);
-	return match ? FONT_MIME_TYPES.get(match[1].toLowerCase()) : undefined;
+	// Off the path only: `font?fallback=.woff2` names no font.
+	const resourcePath = parseResource(request).path;
+	const extension = path.extname(resourcePath).slice(1).toLowerCase();
+	if (!FONT_EXTENSIONS.has(extension)) return undefined;
+	return getMimeTypes().lookup(resourcePath);
 };
 
 // Skip options for a non-CSS-Modules parse: drop the selector prelude (never
@@ -167,37 +210,18 @@ const ONLY_WHITESPACE = /^\s+$/;
 // Relative request prefix (`./` or `../`) — `isSelfReferenceRequest` per `from`.
 const RELATIVE_REQUEST = /^\.{1,2}\//;
 
-/**
- * Returns matches.
- * @param {RegExp} regexp a regexp
- * @param {string} str a string
- * @returns {RegExpExecArray[]} matches
- */
-const matchAll = (regexp, str) => {
-	/** @type {RegExpExecArray[]} */
-	const result = [];
-
-	/** @type {null | RegExpExecArray} */
-	let match;
-
-	while ((match = regexp.exec(str)) !== null) {
-		result.push(match);
-	}
-	return result;
-};
-
 /**
  * Range-keyed index over a known-properties table: ASCII-case-folded 31-hash
  * of the name bytes → canonical key(s). Lets the Declaration visitor answer
  * "is this a known property" (and get the canonical lowercase name) without
  * slicing the property name out of the source per declaration.
- * @type {WeakMap<Map<string, Record<string, number>>, Map<number, string | string[]>>}
+ * @type {WeakMap<Map<string, Map<string, number>>, Map<number, string | string[]>>}
  */
 const KNOWN_PROPERTY_INDEX_CACHE = new WeakMap();
 
 /**
  * Gets (or builds) the hash index for a known-properties table.
- * @param {Map<string, Record<string, number>>} knownProperties known properties table
+ * @param {Map<string, Map<string, number>>} knownProperties known properties table
  * @returns {Map<number, string | string[]>} hash → canonical name(s)
  */
 const getKnownPropertyIndex = (knownProperties) => {
@@ -231,6 +255,12 @@ const knownPropertyForRange = (index, input, start, end) => {
 	let h = end - start;
 	for (let i = start; i < end; i++) {
 		let c = input.charCodeAt(i);
+		// The table holds no raw-byte spelling, so re-read the unescaped one.
+		// Each pass shortens the name, so an escaped `\` cannot recurse forever.
+		if (c === CC_REVERSE_SOLIDUS) {
+			const name = unescapeIdentifier(input.slice(start, end));
+			return knownPropertyForRange(index, name, 0, name.length);
+		}
 		if (c >= 65 && c <= 90) c |= 0x20;
 		h = ((h << 5) - h + c) | 0;
 	}
@@ -245,291 +275,84 @@ const knownPropertyForRange = (index, input, start, end) => {
 	return undefined;
 };
 
-/** @type {Record<string, number>} */
-const PREDEFINED_COUNTER_STYLES = {
-	decimal: 1,
-	"decimal-leading-zero": 1,
-	"arabic-indic": 1,
-	armenian: 1,
-	"upper-armenian": 1,
-	"lower-armenian": 1,
-	bengali: 1,
-	cambodian: 1,
-	khmer: 1,
-	"cjk-decimal": 1,
-	devanagari: 1,
-	georgian: 1,
-	gujarati: 1,
-	/* cspell:disable-next-line */
-	gurmukhi: 1,
-	hebrew: 1,
-	kannada: 1,
-	lao: 1,
-	malayalam: 1,
-	mongolian: 1,
-	myanmar: 1,
-	oriya: 1,
-	persian: 1,
-	"lower-roman": 1,
-	"upper-roman": 1,
-	tamil: 1,
-	telugu: 1,
-	thai: 1,
-	tibetan: 1,
-
-	"lower-alpha": 1,
-	"lower-latin": 1,
-	"upper-alpha": 1,
-	"upper-latin": 1,
-	"lower-greek": 1,
-	hiragana: 1,
-	/* cspell:disable-next-line */
-	"hiragana-iroha": 1,
-	katakana: 1,
-	/* cspell:disable-next-line */
-	"katakana-iroha": 1,
-
-	disc: 1,
-	circle: 1,
-	square: 1,
-	"disclosure-open": 1,
-	"disclosure-closed": 1,
-
-	"cjk-earthly-branch": 1,
-	"cjk-heavenly-stem": 1,
-
-	"japanese-informal": 1,
-	"japanese-formal": 1,
-
-	"korean-hangul-formal": 1,
-	/* cspell:disable-next-line */
-	"korean-hanja-informal": 1,
-	/* cspell:disable-next-line */
-	"korean-hanja-formal": 1,
-
-	"simp-chinese-informal": 1,
-	"simp-chinese-formal": 1,
-	"trad-chinese-informal": 1,
-	"trad-chinese-formal": 1,
-	"cjk-ideographic": 1,
-
-	"ethiopic-numeric": 1
-};
-
-/** @type {Record<string, number>} */
-const GLOBAL_VALUES = {
-	// Global values
-	initial: Infinity,
-	inherit: Infinity,
-	unset: Infinity,
-	revert: Infinity,
-	"revert-layer": Infinity
-};
-
-/** @type {Record<string, number>} */
-const GRID_AREA_OR_COLUMN_OR_ROW = {
-	auto: Infinity,
-	span: Infinity,
-	...GLOBAL_VALUES
-};
-
-/** @type {Record<string, number>} */
-const GRID_AUTO_COLUMNS_OR_ROW = {
-	"min-content": Infinity,
-	"max-content": Infinity,
-	auto: Infinity,
-	...GLOBAL_VALUES
-};
-
-/** @type {Record<string, number>} */
-const GRID_AUTO_FLOW = {
-	row: 1,
-	column: 1,
-	dense: 1,
-	...GLOBAL_VALUES
-};
-
-/** @type {Record<string, number>} */
-const GRID_TEMPLATE_AREAS = {
-	// Special
-	none: 1,
-	...GLOBAL_VALUES
-};
-
-/** @type {Record<string, number>} */
-const GRID_TEMPLATE_COLUMNS_OR_ROWS = {
-	none: 1,
-	subgrid: 1,
-	masonry: 1,
-	"max-content": Infinity,
-	"min-content": Infinity,
-	auto: Infinity,
-	...GLOBAL_VALUES
-};
-
-/** @type {Record<string, number>} */
-const GRID_TEMPLATE = {
-	...GRID_TEMPLATE_AREAS,
-	...GRID_TEMPLATE_COLUMNS_OR_ROWS
-};
-
-/** @type {Record<string, number>} */
-const GRID = {
-	"auto-flow": 1,
-	dense: 1,
-	...GRID_AUTO_COLUMNS_OR_ROW,
-	...GRID_AUTO_FLOW,
-	...GRID_TEMPLATE_AREAS,
-	...GRID_TEMPLATE_COLUMNS_OR_ROWS
+/**
+ * Comma-separated index of the counter-name argument in a counter-reading function, or `-1` when the name isn't one. The name is matched over the raw byte range like the other function-name probes; only an escaped name (rare) pays the unescaped slice.
+ * @param {string} input source
+ * @param {number} start name start offset
+ * @param {number} end name end offset
+ * @param {string=} escapedName unescaped name, when the raw range carries an escape
+ * @returns {number} argument index of the counter name, or `-1`
+ */
+const counterFunctionNameIndex = (input, start, end, escapedName) => {
+	// The `target-counter(url, name, style?)` cross-reference forms (Generated Content for Paged Media) name the counter second; print engines read them.
+	if (escapedName !== undefined) {
+		if (
+			equalsLowerCase(escapedName, "counter") ||
+			equalsLowerCase(escapedName, "counters")
+		) {
+			return 0;
+		}
+		if (
+			equalsLowerCase(escapedName, "target-counter") ||
+			equalsLowerCase(escapedName, "target-counters")
+		) {
+			return 1;
+		}
+		return -1;
+	}
+	switch (end - start) {
+		case 7:
+			return rangeEqualsLowerCase(input, start, end, "counter") ? 0 : -1;
+		case 8:
+			return rangeEqualsLowerCase(input, start, end, "counters") ? 0 : -1;
+		case 14:
+			return rangeEqualsLowerCase(input, start, end, "target-counter") ? 1 : -1;
+		case 15:
+			return rangeEqualsLowerCase(input, start, end, "target-counters")
+				? 1
+				: -1;
+		default:
+			return -1;
+	}
 };
 
 /**
- * Gets known properties.
+ * Gets the known-properties table for the enabled scoping options: the
+ * properties a `css/module` reads a scoped name out of, each with the keywords
+ * of its own grammar (see `tooling/generate-css-data.js`).
  * @param {{ animation?: boolean, container?: boolean, customIdents?: boolean, grid?: boolean }=} options options
- * @returns {Map<string, Record<string, number>>} list of known properties
+ * @returns {Map<string, Map<string, number>>} list of known properties
  */
 const buildKnownProperties = (options = {}) => {
-	/** @type {Map<string, Record<string, number>>} */
+	/** @type {Map<string, Map<string, number>>} */
 	const knownProperties = new Map();
-
-	if (options.animation) {
-		knownProperties.set("animation", {
-			// animation-direction
-			normal: 1,
-			reverse: 1,
-			alternate: 1,
-			"alternate-reverse": 1,
-			// animation-fill-mode
-			forwards: 1,
-			backwards: 1,
-			both: 1,
-			// animation-iteration-count
-			infinite: 1,
-			// animation-play-state
-			paused: 1,
-			running: 1,
-			// animation-timing-function
-			ease: 1,
-			"ease-in": 1,
-			"ease-out": 1,
-			"ease-in-out": 1,
-			linear: 1,
-			"step-end": 1,
-			"step-start": 1,
-			// Special
-			none: Infinity, // No matter how many times you write none, it will never be an animation name
-			...GLOBAL_VALUES
-		});
-		knownProperties.set("animation-name", {
-			// Special
-			none: Infinity, // No matter how many times you write none, it will never be an animation name
-			...GLOBAL_VALUES
-		});
-	}
-
-	if (options.container) {
-		knownProperties.set("container", {
-			// container-type
-			normal: 1,
-			size: 1,
-			"inline-size": 1,
-			"scroll-state": 1,
-			// Special
-			none: Infinity,
-			...GLOBAL_VALUES
-		});
-		knownProperties.set("container-name", {
-			// Special
-			none: Infinity,
-			...GLOBAL_VALUES
-		});
-	}
-
-	if (options.customIdents) {
-		knownProperties.set("list-style", {
-			// list-style-position
-			inside: 1,
-			outside: 1,
-			// list-style-type
-			...PREDEFINED_COUNTER_STYLES,
-			// Special
-			none: Infinity,
-			...GLOBAL_VALUES
-		});
-		knownProperties.set("list-style-type", {
-			// list-style-type
-			...PREDEFINED_COUNTER_STYLES,
-			// Special
-			none: Infinity,
-			...GLOBAL_VALUES
-		});
-		knownProperties.set("system", {
-			cyclic: 1,
-			numeric: 1,
-			alphabetic: 1,
-			symbolic: 1,
-			additive: 1,
-			fixed: 1,
-			extends: 1,
-			...PREDEFINED_COUNTER_STYLES
-		});
-		knownProperties.set("fallback", {
-			...PREDEFINED_COUNTER_STYLES
-		});
-		knownProperties.set("speak-as", {
-			auto: 1,
-			bullets: 1,
-			numbers: 1,
-			words: 1,
-			"spell-out": 1,
-			...PREDEFINED_COUNTER_STYLES
-		});
-		knownProperties.set("view-transition-name", {
-			none: Infinity,
-			auto: Infinity,
-			"match-element": Infinity,
-			...GLOBAL_VALUES
-		});
-		knownProperties.set("view-transition-group", {
-			normal: Infinity,
-			contain: Infinity,
-			nearest: Infinity,
-			...GLOBAL_VALUES
-		});
-		knownProperties.set("view-transition-class", {
-			none: Infinity,
-			...GLOBAL_VALUES
-		});
-	}
-
-	if (options.grid) {
-		knownProperties.set("grid", GRID);
-		knownProperties.set("grid-area", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-column", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-column-end", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-column-start", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-row", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-row-end", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-row-start", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-template", GRID_TEMPLATE);
-		knownProperties.set("grid-template-areas", GRID_TEMPLATE_AREAS);
-		knownProperties.set("grid-template-columns", GRID_TEMPLATE_COLUMNS_OR_ROWS);
-		knownProperties.set("grid-template-rows", GRID_TEMPLATE_COLUMNS_OR_ROWS);
+	for (const [property, option] of CSS_MODULES_KEYWORD_OPTIONS) {
+		if (
+			options[
+				/** @type {"animation" | "container" | "customIdents" | "grid"} */
+				(option)
+			]
+		) {
+			knownProperties.set(
+				property,
+				/** @type {Map<string, number>} */
+				(CSS_MODULES_KEYWORDS.get(property))
+			);
+		}
 	}
-
 	return knownProperties;
 };
 
-/** @type {Map<number, Map<string, Record<string, number>>>} */
+/** @type {Map<number, Map<string, Map<string, number>>>} */
 const KNOWN_PROPERTIES_CACHE = new Map();
 
 /**
  * Memoized {@link buildKnownProperties}: the table depends only on the four
- * boolean options (≤16 combinations) and is read-only, while the same parser is
+ * boolean options (≤ 16 combinations) and is read-only, while the same parser is
  * reused across modules — so build each combination once and share it instead
- * of rebuilding the Map (and its value objects) per parsed module.
+ * of rebuilding the Map per parsed module.
  * @param {{ animation?: boolean, container?: boolean, customIdents?: boolean, grid?: boolean }=} options options
- * @returns {Map<string, Record<string, number>>} known properties table
+ * @returns {Map<string, Map<string, number>>} known properties table
  */
 const getKnownProperties = (options = {}) => {
 	const key =
@@ -610,6 +433,60 @@ const rangeHasEscape = (input, start, end) => {
 	return false;
 };
 
+/**
+ * Whether a raw ident range names a custom property — `\2d\2d x` is `--x` too,
+ * so a name opening with a dash or a backslash pays the unescape.
+ * @param {string} input source
+ * @param {number} start ident start offset
+ * @param {number} end ident end offset (exclusive)
+ * @returns {boolean} true when the ident names a custom property
+ */
+const rangeIsDashedIdentifier = (input, start, end) => {
+	// `--x` is the shortest spelling; an escaped one is longer still.
+	if (end - start < 3) return false;
+	const first = input.charCodeAt(start);
+	if (first === CC_HYPHEN_MINUS) {
+		if (input.charCodeAt(start + 1) === CC_HYPHEN_MINUS) return true;
+		if (input.charCodeAt(start + 1) !== CC_REVERSE_SOLIDUS) return false;
+	} else if (first !== CC_REVERSE_SOLIDUS) {
+		return false;
+	}
+	return isDashedIdentifier(unescapeIdentifier(input.slice(start, end)));
+};
+
+/**
+ * The named cell tokens of a `grid-template-areas` string, in source offsets.
+ * A whitespace closing a hex escape does not separate; a `.` run names nothing.
+ * @param {string} input source
+ * @param {number} start content start offset (inside the quote)
+ * @param {number} end content end offset (exclusive)
+ * @returns {[number, number][]} one `[start, end]` per named cell
+ */
+const gridAreaNames = (input, start, end) => {
+	/** @type {[number, number][]} */
+	const names = [];
+	let i = start;
+	while (i < end) {
+		while (i < end && isWhitespace(input.charCodeAt(i))) i++;
+		if (i >= end) break;
+		const nameStart = i;
+		let nullCell = true;
+		while (i < end) {
+			const cc = input.charCodeAt(i);
+			if (isWhitespace(cc)) break;
+			if (cc === CC_REVERSE_SOLIDUS) {
+				i = Math.min(skipEscape(input, i), end);
+				nullCell = false;
+				continue;
+			}
+			if (cc !== CC_FULL_STOP) nullCell = false;
+			i++;
+		}
+		if (!nullCell) names.push([nameStart, i]);
+	}
+	return names;
+};
+
 /**
  * @param {string} input source
  * @param {number} pos position
@@ -903,10 +780,14 @@ class CssParser extends Parser {
 		const { line: el, column: ec } = locConverter.get(end);
 
 		state.current.addWarning(
-			new ModuleDependencyWarning(state.module, new WebpackError(message), {
-				start: { line: sl, column: sc },
-				end: { line: el, column: ec }
-			})
+			new (getModuleDependencyWarning())(
+				state.module,
+				new WebpackError(message),
+				{
+					start: { line: sl, column: sc },
+					end: { line: el, column: ec }
+				}
+			)
 		);
 	}
 
@@ -931,6 +812,92 @@ class CssParser extends Parser {
 		state.module.addError(err);
 	}
 
+	/**
+	 * Arbitrate cross-kind CSS-Modules export collisions collected during
+	 * parsing. A class always wins the shared JS export key over the
+	 * CSS-only kinds (`@keyframes`, `@counter-style`, `@container`, custom
+	 * property, grid identifier) — matching css-loader / lightning css /
+	 * postcss-modules; the loser's `EXPORT_MODE` is demoted to `NONE` so
+	 * the CSS-side rewrite is preserved but the entry no longer contributes
+	 * to `styles.<name>`. Other pairs (`class` ↔ `id`,
+	 * `class` ↔ `:export`, `class` ↔ `@value`, kind-vs-kind without a
+	 * class present, …) surface as a warning so the user resolves the name
+	 * themselves. Same-kind redeclarations are silent.
+	 * @param {ParserState} state parser state
+	 * @param {Map<string, { kind: string, line: number, column: number, entries: number[] }[]>} declaredExports collected declarations grouped by (name, kind)
+	 * @param {import("../dependencies/CssIcssExportDependency").CssExportEntry[]} cssExportEntries all export entries — losers are demoted in place
+	 * @returns {void}
+	 */
+	_resolveAmbiguousExports(state, declaredExports, cssExportEntries) {
+		const NONE = CssIcssExportDependency.EXPORT_MODE.NONE;
+		for (const [name, decls] of declaredExports) {
+			if (decls.length <= 1) continue;
+			// Prefer `class` as the winner (matches css-loader / lightning css / postcss-modules); otherwise the first-declared kind wins de facto.
+			let winner;
+			for (const d of decls) {
+				if (d.kind === "class") {
+					winner = d;
+					break;
+				}
+			}
+			const reference = winner !== undefined ? winner : decls[0];
+			for (const loser of decls) {
+				if (loser === reference) continue;
+				const anchor = cssExportEntries[loser.entries[0]];
+				if (
+					winner !== undefined &&
+					(loser.kind === "custom property" ||
+						loser.kind === "@keyframes" ||
+						loser.kind === "@counter-style" ||
+						loser.kind === "@container" ||
+						loser.kind === "grid identifier")
+				) {
+					for (const idx of loser.entries) {
+						cssExportEntries[idx].exportMode = NONE;
+					}
+					state.current.addWarning(
+						new (getModuleDependencyWarning())(
+							state.module,
+							new WebpackError(
+								`CSS module export "${name}" is shadowed by ${winner.kind} at line ${winner.line}:${winner.column}: the ${loser.kind} "${name}" is still scoped in the emitted CSS but is not accessible from the JavaScript export — rename one of them if both are needed`
+							),
+							{
+								start: {
+									line: anchor.locStartLine,
+									column: anchor.locStartColumn
+								},
+								end: {
+									line: anchor.locEndLine,
+									column: anchor.locEndColumn
+								}
+							}
+						)
+					);
+				} else {
+					// Other collision — warn without changing behavior.
+					state.current.addWarning(
+						new (getModuleDependencyWarning())(
+							state.module,
+							new WebpackError(
+								`Conflicting CSS module export "${name}": already declared as ${reference.kind} at line ${reference.line}:${reference.column}, redeclared as ${loser.kind}`
+							),
+							{
+								start: {
+									line: anchor.locStartLine,
+									column: anchor.locStartColumn
+								},
+								end: {
+									line: anchor.locEndLine,
+									column: anchor.locEndColumn
+								}
+							}
+						)
+					);
+				}
+			}
+		}
+	}
+
 	/**
 	 * Parses the provided source and updates the parser state.
 	 * @param {string | Buffer | PreparsedAst} source the source to parse
@@ -990,6 +957,43 @@ class CssParser extends Parser {
 
 		const module = state.module;
 
+		// Every CSS Modules export declaration is tracked here so `_resolveAmbiguousExports` can arbitrate cross-kind collisions in one pass at end-of-parse: a class silently wins over CSS-scoped kinds (`@keyframes`, `@counter-style`, `@container`, custom property, grid identifier) — matching css-loader / lightning css / postcss-modules — while other pairs (`class` ↔ `id`, `class` ↔ `:export`, `class` ↔ `@value`, …) surface as a warning so the user can resolve them.
+		/** @typedef {{ kind: string, line: number, column: number, entries: number[] }} DeclarationOfKind */
+		/** @type {Map<string, DeclarationOfKind[]>} */
+		const declaredExports = new Map();
+
+		/**
+		 * Track a declaration site for later ambiguity resolution. Pointer
+		 * into `cssExportEntries` is captured now because the entry is
+		 * pushed immediately after by the calling `addCssExport(…)`.
+		 * Property-value references (`animation: foo`) are not declarations
+		 * and skip this hook.
+		 * @param {string} name export name
+		 * @param {string} kind human-readable declaration kind
+		 * @param {number} line start line (1-based) of the declaration
+		 * @param {number} column start column (0-based) of the declaration
+		 * @returns {void}
+		 */
+		const recordDeclaration = (name, kind, line, column) => {
+			let decls = declaredExports.get(name);
+			if (decls === undefined) {
+				decls = [];
+				declaredExports.set(name, decls);
+			}
+			let d;
+			for (const existing of decls) {
+				if (existing.kind === kind) {
+					d = existing;
+					break;
+				}
+			}
+			if (d === undefined) {
+				d = { kind, line, column, entries: [] };
+				decls.push(d);
+			}
+			d.entries.push(cssExportEntries.length);
+		};
+
 		// All `:export`-style exports are collected into a single
 		// `CssIcssExportDependency` per module (emitted at parse end) instead of one
 		// `Dependency` per export — far fewer retained objects on CSS-heavy builds.
@@ -1156,7 +1160,7 @@ class CssParser extends Parser {
 			if (errors) {
 				for (const e of errors) {
 					state.module.addWarning(
-						new CommentCompilationWarning(
+						new (getCommentCompilationWarning())(
 							`Compilation error while processing magic comment(-s): /*${e.comment.value}*/: ${e.message}`,
 							rangeLoc(e.comment.range[0], e.comment.range[1])
 						)
@@ -1169,7 +1173,7 @@ class CssParser extends Parser {
 					// Loc is computed lazily here — it's only needed for this rare
 					// warning, not on every checked `url()` / `@import`.
 					state.module.addWarning(
-						new UnsupportedFeatureWarning(
+						new (getUnsupportedFeatureWarning())(
 							`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
 							rangeLoc(warnStart, warnEnd)
 						)
@@ -1198,10 +1202,12 @@ class CssParser extends Parser {
 			this.options.customMedia && input.includes("@custom-media");
 		const mayHaveCustomSelectors =
 			this.options.customSelectors && input.includes("@custom-selector");
-		/** @type {Map<string, { text: string, kind: ("condition" | "type" | "unsupported") }> | undefined} */
+		/** @type {Map<string, CustomMediaDefinition> | undefined} */
 		let customMediaDefs;
-		/** @type {{ name: string, start: number, end: number, invalid: boolean, leading: boolean }[] | undefined} */
-		let customMediaUses;
+		/** @type {Map<string, CustomMediaValue> | undefined} */
+		let customMediaValues;
+		/** @type {{ queries: MediaNode[], start: number, end: number, uses: CustomMediaUse[] }[] | undefined} */
+		let customMediaQueries;
 		/** @type {Map<string, string> | undefined} */
 		let customSelectorDefs;
 		/** @type {{ name: string, start: number, end: number }[] | undefined} */
@@ -1525,6 +1531,7 @@ class CssParser extends Parser {
 				} else if (type === 1) {
 					const { line: sl, column: sc } = locConverter.get(start);
 					const { line: el, column: ec } = locConverter.get(end);
+					recordDeclaration(name, ":export", sl, sc);
 					addCssExport(sl, sc, el, ec, name, getReexport(value));
 				}
 			};
@@ -1577,8 +1584,9 @@ class CssParser extends Parser {
 		 * Process a `local(...)` / `global(...)` pseudo-function: strip the call (and a leading legacy `:`) via a presentational dep, then emit `local()`'s inner top-level idents as ICSS exports.
 		 * @param {FunctionNode} fn parsed local/global function node
 		 * @param {1 | 2} type 1 = local, 2 = global
+		 * @param {string=} declarationKind human-readable export kind to use for conflict tracking when the caller is a declaration site (selector or at-rule prelude). Undefined for property-value references, which are not tracked.
 		 */
-		const processLocalOrGlobalFunction = (fn, type) => {
+		const processLocalOrGlobalFunction = (fn, type, declarationKind) => {
 			// Replace `local(` / `global(` (and a leading `:` for the `:local(`/`:global(` selector form) with empty.
 			const fnStart = A.start(fn);
 			const isColon = input.charCodeAt(fnStart - 1) === CC_COLON;
@@ -1596,6 +1604,14 @@ class CssParser extends Parser {
 					const { line: el, column: ec } = locConverter.get(A.end(cv));
 					const isDashedIdent = isDashedIdentifier(identifier);
 					if (isDashedIdent) identifier = identifier.slice(2);
+					if (declarationKind !== undefined) {
+						recordDeclaration(
+							identifier,
+							isDashedIdent ? "custom property" : declarationKind,
+							sl,
+							sc
+						);
+					}
 					addCssExport(
 						sl,
 						sc,
@@ -1623,9 +1639,10 @@ class CssParser extends Parser {
 		 * Localize the prelude name of `@keyframes` / `@counter-style` / `@container`: `options.string` takes the first string, `options.identifier` the first ident (a `RegExp` skips matching keywords), `:local()`/`:global()` count as found; top-level `var()`/`style()` dashed idents are always ICSS-processed.
 		 * @param {AtRule} atRule parsed at-rule
 		 * @param {{ string?: boolean, identifier?: boolean | RegExp }} options which prelude value kinds count as the local name
+		 * @param {string} kind human-readable export kind for the surrounding at-rule (`"@keyframes"`, `"@counter-style"`, `"@container"`)
 		 * @returns {number} position after handling
 		 */
-		const processLocalAtRule = (atRule, options) => {
+		const processLocalAtRule = (atRule, options, kind) => {
 			let found = false;
 			for (const cv of A.prelude(atRule)) {
 				const cvType = A.type(cv);
@@ -1636,6 +1653,7 @@ class CssParser extends Parser {
 						const value = A.unescaped(cv);
 						const { line: sl, column: sc } = locConverter.get(A.start(cv));
 						const { line: el, column: ec } = locConverter.get(A.end(cv));
+						recordDeclaration(value, kind, sl, sc);
 						addCssExport(
 							sl,
 							sc,
@@ -1664,6 +1682,7 @@ class CssParser extends Parser {
 						}
 						const { line: sl, column: sc } = locConverter.get(A.start(cv));
 						const { line: el, column: ec } = locConverter.get(A.end(cv));
+						recordDeclaration(identifier, kind, sl, sc);
 						addCssExport(
 							sl,
 							sc,
@@ -1693,7 +1712,7 @@ class CssParser extends Parser {
 					if (!found && type) {
 						found = true;
 						if (type === 1) pure.markLocal();
-						processLocalOrGlobalFunction(fn, type);
+						processLocalOrGlobalFunction(fn, type, kind);
 						continue;
 					}
 					if (
@@ -1707,15 +1726,29 @@ class CssParser extends Parser {
 			}
 			return A.end(atRule);
 		};
+		/**
+		 * The custom property's name, without its `--`. An escaped dash makes the
+		 * prefix longer than two bytes, so it comes off the unescaped value.
+		 * @param {number} identStart start of the `--<name>` ident
+		 * @param {number} identEnd end of the ident
+		 * @returns {string} the name after `--`
+		 */
+		const dashedIdentName = (identStart, identEnd) =>
+			source.charCodeAt(identStart) === CC_HYPHEN_MINUS &&
+			source.charCodeAt(identStart + 1) === CC_HYPHEN_MINUS
+				? unescapeRange(identStart + 2, identEnd)
+				: unescapeRange(identStart, identEnd).slice(2);
+
 		/**
 		 * Emit the ICSS export declaring this module exports the given custom property.
 		 * @param {number} identStart start of the `--<name>` ident
 		 * @param {number} identEnd end of the ident (exclusive)
 		 */
 		const emitDashedIdentExport = (identStart, identEnd) => {
-			const identifier = unescapeRange(identStart + 2, identEnd);
+			const identifier = dashedIdentName(identStart, identEnd);
 			const { line: sl, column: sc } = locConverter.get(identStart);
 			const { line: el, column: ec } = locConverter.get(identEnd);
+			recordDeclaration(identifier, "custom property", sl, sc);
 			addCssExport(
 				sl,
 				sc,
@@ -1745,7 +1778,7 @@ class CssParser extends Parser {
 			sourceEnd,
 			pathContent
 		) => {
-			const identifier = unescapeRange(identStart + 2, identEnd);
+			const identifier = dashedIdentName(identStart, identEnd);
 			const { line: sl, column: sc } = locConverter.get(identStart);
 			const { line: el, column: ec } = locConverter.get(sourceEnd - 1);
 			const localName = nextIcssImportName();
@@ -1760,6 +1793,7 @@ class CssParser extends Parser {
 			importDep.setLoc(sl, sc, el, ec);
 			module.addDependency(importDep);
 
+			recordDeclaration(identifier, "custom property", sl, sc);
 			addCssExport(
 				sl,
 				sc,
@@ -1812,16 +1846,7 @@ class CssParser extends Parser {
 
 			const identStart = A.start(identNode);
 			const identEnd = A.end(identNode);
-			// `isDashedIdentifier` on the value without slicing it: a literal `--`
-			// prefix of length >= 3 (escaped dashes don't match, same as the string
-			// form, since the raw bytes aren't `--`).
-			if (
-				identEnd - identStart < 3 ||
-				input.charCodeAt(identStart) !== CC_HYPHEN_MINUS ||
-				input.charCodeAt(identStart + 1) !== CC_HYPHEN_MINUS
-			) {
-				return;
-			}
+			if (!rangeIsDashedIdentifier(input, identStart, identEnd)) return;
 
 			let j = identIdx + 1;
 			while (j < fv.length && A.type(fv[j]) === NodeType.Whitespace) {
@@ -1877,18 +1902,25 @@ class CssParser extends Parser {
 			active: false,
 			/** Should top-level dashed-ident exports be emitted at this nesting level? */
 			emit: false,
-			/** LIFO save/restore of `active` + `emit` across function nesting, bit-packed (bit 0 = active, bit 1 = emit) to avoid a per-function-token object allocation. */
+			/** Directly inside a `counter()`-family call whose arguments were already rewritten — suppresses the generic ICSS ident rewrite over the same ranges. */
+			counterArgs: false,
+			/** LIFO save/restore of `active` + `emit` + `counterArgs` across function nesting, bit-packed (bit 0 = active, bit 1 = emit, bit 2 = counterArgs) to avoid a per-function-token object allocation. */
 			/** @type {number[]} */
 			stack: [],
 			/** Push the current scope; call before descending into a `Function` body. */
 			push() {
-				this.stack.push((this.active ? 1 : 0) | (this.emit ? 2 : 0));
+				this.stack.push(
+					(this.active ? 1 : 0) |
+						(this.emit ? 2 : 0) |
+						(this.counterArgs ? 4 : 0)
+				);
 			},
 			/** Pop the saved scope; call when leaving a `Function` body. */
 			pop() {
 				const s = /** @type {number} */ (this.stack.pop());
 				this.active = (s & 1) !== 0;
 				this.emit = (s & 2) !== 0;
+				this.counterArgs = (s & 4) !== 0;
 			}
 		};
 		// Nearest enclosing declaration / at-rule / qualified-rule, set by each structural enter; the Url / Function / Ident / Comma visitors read it (via `urlActive` / `localGlobalActive` / `icssActive`) to decide value handling from the node hierarchy instead of carrying precomputed flags.
@@ -1902,10 +1934,12 @@ class CssParser extends Parser {
 		let currentDeclIsKnownProperty = false;
 		/** Whether the current `composes:` declaration owns the whole value (suppresses value rewrites). */
 		let currentDeclComposesSkip = false;
+		/** Whether `counter()`-family arguments are scoped in the current declaration's value. */
+		let currentDeclCounterActive = false;
 
 		/**
 		 * Per-at-rule scope frames; `exit` reads `hasBlock` to pick the block-cleanup vs `suppressNextRulePrelude` branch.
-		 * @type {{ savedAnchor: boolean, savedLocalIdentifiers: string[], name: string, hasBlock: boolean, endsWithSemicolon: boolean, fontPreloaded: boolean }[]}
+		 * @type {{ savedAnchor: boolean, savedLocalIdentifierCount: number, name: string, hasBlock: boolean, endsWithSemicolon: boolean, fontPreloaded: boolean }[]}
 		 */
 		const atRuleStateStack = [];
 
@@ -2074,6 +2108,71 @@ class CssParser extends Parser {
 			}
 		};
 
+		/**
+		 * Emit the ICSS export for one ident argument of a `counter()`-family call. Dashed names are left to the blanket dashed-ident scanner, and reserved names (UA counters, predefined counter styles, CSS-wide keywords) stay global.
+		 * @param {AstNode} node the ident node
+		 * @param {string} reservedFrom property whose keywords must not be localized here
+		 * @returns {void}
+		 */
+		const emitCounterIdent = (node, reservedFrom) => {
+			const name = A.unescaped(node);
+			if (isDashedIdentifier(name)) return;
+			const reserved =
+				/** @type {Map<string, number>} */
+				(CSS_MODULES_KEYWORDS.get(reservedFrom));
+			if (reserved.has(toLowerCaseIfNeeded(name))) return;
+			const start = A.start(node);
+			const end = A.end(node);
+			const { line: sl, column: sc } = locConverter.get(start);
+			const { line: el, column: ec } = locConverter.get(end);
+			addCssExport(
+				sl,
+				sc,
+				el,
+				ec,
+				name,
+				getReexport(name),
+				[start, end],
+				true,
+				CssIcssExportDependency.EXPORT_MODE.ONCE
+			);
+		};
+
+		/**
+		 * Scope a `counter()` / `counters()` / `target-counter()` / `target-counters()` call: the counter-name argument localizes like a `counter-reset` value and a trailing `<counter-style>` ident like a `list-style-type` value, so both keep naming the scoped `counter-*` declaration / `@counter-style` rule.
+		 * @param {AstNode[]} cvs the call's argument component values
+		 * @param {number} nameIndex comma-separated index of the counter-name argument
+		 * @returns {void}
+		 */
+		const walkCounterFunction = (cvs, nameIndex) => {
+			let group = 0;
+			let groupNodes = 0;
+			/** Sole ident of the current argument, or undefined when the argument isn't a lone ident. */
+			let lastIdent;
+			for (const cv of cvs) {
+				const type = A.type(cv);
+				if (type === NodeType.Whitespace) continue;
+				if (type === NodeType.Comma) {
+					group++;
+					groupNodes = 0;
+					lastIdent = undefined;
+					continue;
+				}
+				groupNodes++;
+				const loneIdent = groupNodes === 1 && type === NodeType.Ident;
+				if (group === nameIndex) {
+					if (loneIdent) emitCounterIdent(cv, "counter-reset");
+					lastIdent = undefined;
+				} else {
+					lastIdent = loneIdent ? cv : undefined;
+				}
+			}
+			// The counter style is the last argument when it's a lone ident (`counter(n, style)` / `counters(n, sep, style)`).
+			if (lastIdent !== undefined && group > nameIndex) {
+				emitCounterIdent(lastIdent, "list-style-type");
+			}
+		};
+
 		/**
 		 * Walk component values as a selector list, emitting ID / attribute deps and recursing into `:not()`/`:is()`/`:local()`/`:global()` wrappers; `localMode` is the sub-tree mode and `topLevel` controls whether commas reset it (only outside parentheses).
 		 * @param {AstNode[]} values component values to walk
@@ -2182,6 +2281,7 @@ class CssParser extends Parser {
 						const idName = A.unescaped(v);
 						const { line: idSl, column: idSc } = locConverter.get(A.start(v));
 						const { line: idEl, column: idEc } = locConverter.get(A.end(v));
+						recordDeclaration(idName, "id", idSl, idSc);
 						addCssExport(
 							idSl,
 							idSc,
@@ -2224,6 +2324,7 @@ class CssParser extends Parser {
 							// Cursor reads instead of `A.loc` — this is the hottest export site.
 							const { line: sl, column: sc } = locConverter.get(A.start(next));
 							const { line: el, column: ec } = locConverter.get(A.end(next));
+							recordDeclaration(name, "class", sl, sc);
 							addCssExport(
 								sl,
 								sc,
@@ -2267,18 +2368,20 @@ class CssParser extends Parser {
 		};
 		/**
 		 * Per-qualified-rule scope frames; `{ bailed: true }` for inline-handled `:import` / `:export` pseudo-rules.
-		 * @type {({ bailed: true } | { bailed: false, savedAnchor: boolean, savedLocalIdentifiers: string[], savedPrevComposesFile: string | undefined, savedComposesFiles: Set<string> | null })[]}
+		 * @type {({ bailed: true } | { bailed: false, savedAnchor: boolean, savedLocalIdentifierCount: number, savedPrevComposesFile: string | undefined, savedComposesFiles: Set<string> | null })[]}
 		 */
 		const qualifiedRuleStateStack = [];
 
 		/**
-		 * Whether url() deps are emitted here (from `currentStructural`): false outside `options.url` and inside an `@import` prelude (the import target, unless url recovery is on).
+		 * Whether url() deps are emitted here (from `currentStructural`): off in an `@import`
+		 * prelude (the import target, unless recovering) and in `@namespace` (an opaque identifier).
 		 * @returns {boolean} true when url() deps should be emitted
 		 */
 		const urlActive = () => {
 			if (!this.options.url || !currentStructural) return false;
 			if (A.type(currentStructural) === NodeType.AtRule) {
 				// `currentAtRuleName` is cached on at-rule enter — no per-value slice.
+				if (currentAtRuleName === "@namespace") return false;
 				return currentAtRuleName !== "@import" || currentUrlRecovery;
 			}
 			return true;
@@ -3007,6 +3110,7 @@ class CssParser extends Parser {
 					{
 						const { line: sl, column: sc } = locConverter.get(start);
 						const { line: el, column: ec } = locConverter.get(nameEnd);
+						recordDeclaration(localName, "@value", sl, sc);
 						addCssExport(
 							sl,
 							sc,
@@ -3048,10 +3152,12 @@ class CssParser extends Parser {
 
 					icssDefinitions.set(localName, def);
 
+					recordDeclaration(localName, "@value", sl, sc);
 					addCssExport(sl, sc, el, ec, localName, getReexport(value));
 				} else {
 					icssDefinitions.set(localName, { value });
 
+					recordDeclaration(localName, "@value", sl, sc);
 					addCssExport(sl, sc, el, ec, localName, value);
 				}
 			}
@@ -3084,7 +3190,10 @@ class CssParser extends Parser {
 		};
 
 		/**
-		 * Collect one `@custom-media --name <value>` definition (last-wins) and drop the rule. Classifies the value: `"condition"` (a media-in-parens, or comma list → `(a or b)`) inlines anywhere; `"type"` (a media type like `screen` / `not all` / `screen and (…)`) inlines only at a query's start; `true` / `false` / nested custom-media values are `"unsupported"` (warned on use — the ecosystem disagrees on these).
+		 * Collect one `@custom-media --name <value>` definition (last-wins) and drop
+		 * the rule. A value naming another custom media is kept as an `alias` — the
+		 * name it points at may be defined further down the file, and node ids are
+		 * recycled per top-level rule, so nothing AST-shaped can outlive the walk.
 		 * @param {AtRule} at the `@custom-media` at-rule
 		 */
 		const collectCustomMedia = (at) => {
@@ -3105,27 +3214,27 @@ class CssParser extends Parser {
 			if (!isDashedIdentifier(name)) return;
 			i++;
 
-			/**
-			 * @param {string} text resolved text
-			 * @param {"condition" | "type" | "unsupported"} kind value kind
-			 */
-			const store = (text, kind) => {
-				(customMediaDefs || (customMediaDefs = new Map())).set(name, {
-					text,
-					kind
-				});
-			};
-			const extra = { hasExtra: false };
-
 			// Value span after the name, trimmed.
 			let vs = i;
 			let ve = prelude.length;
 			while (vs < ve && A.type(prelude[vs]) === NodeType.Whitespace) vs++;
 			while (ve > vs && A.type(prelude[ve - 1]) === NodeType.Whitespace) ve--;
-			if (vs >= ve) {
-				store("", "unsupported");
-				return;
-			}
+			(customMediaDefs || (customMediaDefs = new Map())).set(
+				name,
+				classifyCustomMedia(prelude, vs, ve)
+			);
+		};
+
+		/**
+		 * Classify one `@custom-media` value against the live AST.
+		 * @param {readonly AstNode[]} prelude the defining at-rule's prelude
+		 * @param {number} vs first value token
+		 * @param {number} ve one past the last value token
+		 * @returns {CustomMediaDefinition} what the value is, aliases unresolved
+		 */
+		const classifyCustomMedia = (prelude, vs, ve) => {
+			if (vs >= ve) return CUSTOM_MEDIA_UNSUPPORTED;
+			const extra = { hasExtra: false };
 
 			let hasComma = false;
 			for (let k = vs; k < ve; k++) {
@@ -3138,46 +3247,52 @@ class CssParser extends Parser {
 			if (!hasComma) {
 				const first = prelude[vs];
 				const valueText = input.slice(A.start(first), A.end(prelude[ve - 1]));
-				if (A.type(first) === NodeType.SimpleBlock) {
-					// A lone `(--x)` is an unresolved nested custom media; anything else is a media-in-parens.
-					const nested =
-						loneDashedIdentOfBlock(
-							/** @type {SimpleBlock} */ (first),
-							extra
-						) !== undefined;
-					store(nested ? "" : valueText, nested ? "unsupported" : "condition");
-					return;
+				// A `(--x)` standing alone is this value spelled as another name.
+				if (ve - vs === 1 && A.type(first) === NodeType.SimpleBlock) {
+					const nested = loneDashedIdentOfBlock(
+						/** @type {SimpleBlock} */ (first),
+						extra
+					);
+					if (nested !== undefined && !extra.hasExtra) {
+						return { kind: "alias", name: nested };
+					}
 				}
-				if (A.type(first) !== NodeType.Ident) {
-					store("", "unsupported");
-					return;
+				// A reference anywhere else in the value has no resolution step of its
+				// own — only a `@media` prelude's uses are scanned — so writing this
+				// value out would emit the reference unresolved.
+				if (hasCustomMediaRef(prelude, vs, ve)) return CUSTOM_MEDIA_UNSUPPORTED;
+				if (A.type(first) === NodeType.SimpleBlock) {
+					return { kind: "condition", text: valueText };
 				}
-				if (
-					rangeEqualsLowerCase(input, A.start(first), A.end(first), "true") ||
-					rangeEqualsLowerCase(input, A.start(first), A.end(first), "false")
-				) {
-					store("", "unsupported");
-					return;
+				if (A.type(first) !== NodeType.Ident) return CUSTOM_MEDIA_UNSUPPORTED;
+				const s = A.start(first);
+				const e = A.end(first);
+				if (ve - vs === 1) {
+					if (rangeEqualsLowerCase(input, s, e, "true")) {
+						return CUSTOM_MEDIA_TRUE;
+					}
+					if (rangeEqualsLowerCase(input, s, e, "false")) {
+						return CUSTOM_MEDIA_FALSE;
+					}
 				}
-				if (rangeEqualsLowerCase(input, A.start(first), A.end(first), "not")) {
-					// `not (…)` is a media condition (wrap so it stays a media-in-parens); `not <type>` is a media type.
+				if (rangeEqualsLowerCase(input, s, e, "not")) {
+					// `not (…)` is a media condition (wrap so it stays a media-in-parens);
+					// `not <type>` is a media type.
 					let j = vs + 1;
 					while (j < ve && A.type(prelude[j]) === NodeType.Whitespace) j++;
 					if (j < ve && A.type(prelude[j]) === NodeType.SimpleBlock) {
-						store(`(${valueText})`, "condition");
-					} else {
-						store(valueText, "type");
+						return { kind: "condition", text: `(${valueText})` };
 					}
-					return;
+					return { kind: "type", text: valueText };
 				}
 				// `screen`, `only screen`, `screen and (…)`, …
-				store(valueText, "type");
-				return;
+				return { kind: "type", text: valueText };
 			}
 
-			// Comma list → `(seg1 or seg2 …)`; supported only when every segment is a media-in-parens.
-			/** @type {string[]} */
-			const segments = [];
+			// Comma list → `(seg1 or seg2 …)`; supported only when every segment is a
+			// media-in-parens (or a name standing for one).
+			/** @type {({ text: string } | { alias: string })[]} */
+			const parts = [];
 			let ok = true;
 			/** @type {AstNode[]} */
 			let seg = [];
@@ -3192,21 +3307,25 @@ class CssParser extends Parser {
 				}
 				const f = seg[a];
 				const text = input.slice(A.start(f), A.end(seg[b - 1]));
+				if (b - a === 1 && A.type(f) === NodeType.SimpleBlock) {
+					const nested = loneDashedIdentOfBlock(
+						/** @type {SimpleBlock} */ (f),
+						extra
+					);
+					if (extra.hasExtra) ok = false;
+					else if (nested === undefined) parts.push({ text });
+					else parts.push({ alias: nested });
+					return;
+				}
 				if (
-					b - a === 1 &&
-					A.type(f) === NodeType.SimpleBlock &&
-					loneDashedIdentOfBlock(/** @type {SimpleBlock} */ (f), extra) ===
-						undefined
-				) {
-					segments.push(text);
-				} else if (
 					A.type(f) === NodeType.Ident &&
-					rangeEqualsLowerCase(input, A.start(f), A.end(f), "not")
+					rangeEqualsLowerCase(input, A.start(f), A.end(f), "not") &&
+					!hasCustomMediaRef(seg, a, b)
 				) {
-					segments.push(`(${text})`);
-				} else {
-					ok = false;
+					parts.push({ text: `(${text})` });
+					return;
 				}
+				ok = false;
 			};
 			for (let k = vs; k < ve; k++) {
 				if (A.type(prelude[k]) === NodeType.Comma) {
@@ -3217,54 +3336,386 @@ class CssParser extends Parser {
 				}
 			}
 			flush();
-			if (ok && segments.length > 0) {
-				store(
-					segments.length === 1 ? segments[0] : `(${segments.join(" or ")})`,
-					"condition"
-				);
+			return ok ? { kind: "or", parts } : CUSTOM_MEDIA_UNSUPPORTED;
+		};
+
+		/**
+		 * What a `@custom-media` name resolves to, memoized. An undefined name and a
+		 * definition cycle both resolve to unsupported (the use site warns).
+		 * @param {string} name the dashed ident
+		 * @param {Set<string>} resolving names currently being resolved
+		 * @returns {CustomMediaValue} what the name resolves to
+		 */
+		const resolveCustomMediaValue = (name, resolving) => {
+			const cached = customMediaValues && customMediaValues.get(name);
+			if (cached !== undefined) return cached;
+			const def = customMediaDefs && customMediaDefs.get(name);
+			if (def === undefined || resolving.has(name)) {
+				return CUSTOM_MEDIA_UNSUPPORTED;
+			}
+			resolving.add(name);
+			/** @type {CustomMediaValue} */
+			let value;
+			if (def.kind === "alias") {
+				const inner = resolveCustomMediaValue(def.name, resolving);
+				// A media type cannot sit in parens, so a name standing for one is no value.
+				value = inner.kind === "type" ? CUSTOM_MEDIA_UNSUPPORTED : inner;
+			} else if (def.kind === "or") {
+				/** @type {string[]} */
+				const texts = [];
+				let ok = true;
+				let anyTrue = false;
+				for (const part of def.parts) {
+					if (!("alias" in part)) {
+						texts.push(part.text);
+						continue;
+					}
+					const inner = resolveCustomMediaValue(part.alias, resolving);
+					// A media query list is an `or`, so a constant segment drops out of it.
+					if (inner.kind === "boolean") anyTrue = anyTrue || inner.value;
+					else if (inner.kind === "condition") texts.push(inner.text);
+					else ok = false;
+				}
+				value = !ok
+					? CUSTOM_MEDIA_UNSUPPORTED
+					: anyTrue
+						? CUSTOM_MEDIA_TRUE
+						: texts.length === 0
+							? CUSTOM_MEDIA_FALSE
+							: {
+									kind: "condition",
+									text:
+										texts.length === 1 ? texts[0] : `(${texts.join(" or ")})`
+								};
 			} else {
-				store("", "unsupported");
+				value = def;
 			}
+			resolving.delete(name);
+			(customMediaValues || (customMediaValues = new Map())).set(name, value);
+			return value;
 		};
 
 		/**
-		 * Record every `(--name)` custom-media reference in a media prelude (recursing into nested groups/functions) for post-walk resolution; `invalid` flags a non-boolean-context use like `(--name: 1px)`, `leading` marks a reference that is the first term of a top-level query (the only spot a media-type value may be inlined).
-		 * @param {readonly AstNode[]} tokens prelude (or nested block) tokens
-		 * @param {boolean} topLevel whether `tokens` is the media prelude itself (vs. a nested group)
+		 * Whether a node is the media keyword `word` (media queries are ASCII
+		 * case-insensitive).
+		 * @param {AstNode} node candidate node
+		 * @param {string} word lower-case keyword
+		 * @returns {boolean} true on a match
 		 */
-		const scanCustomMediaUses = (tokens, topLevel) => {
-			const extra = { hasExtra: false };
-			let leading = true;
-			for (const t of tokens) {
-				const tt = A.type(t);
-				if (tt === NodeType.Whitespace) continue;
-				if (topLevel && tt === NodeType.Comma) {
-					leading = true;
+		const isMediaKeyword = (node, word) =>
+			A.type(node) === NodeType.Ident &&
+			rangeEqualsLowerCase(input, A.start(node), A.end(node), word);
+
+		/**
+		 * First significant index in `tokens[from…to)`.
+		 * @param {readonly AstNode[]} tokens token list
+		 * @param {number} from first index
+		 * @param {number} to one past the last index
+		 * @returns {number} the trimmed start
+		 */
+		const mediaTrimStart = (tokens, from, to) => {
+			let a = from;
+			while (a < to && A.type(tokens[a]) === NodeType.Whitespace) a++;
+			return a;
+		};
+
+		/**
+		 * One past the last significant index in `tokens[from…to)`.
+		 * @param {readonly AstNode[]} tokens token list
+		 * @param {number} from first index
+		 * @param {number} to one past the last index
+		 * @returns {number} the trimmed end
+		 */
+		const mediaTrimEnd = (tokens, from, to) => {
+			let b = to;
+			while (b > from && A.type(tokens[b - 1]) === NodeType.Whitespace) b--;
+			return b;
+		};
+
+		/**
+		 * The source text spanned by `tokens[from…to)`.
+		 * @param {readonly AstNode[]} tokens token list
+		 * @param {number} from first index
+		 * @param {number} to one past the last index
+		 * @returns {string} the source slice
+		 */
+		const mediaText = (tokens, from, to) =>
+			input.slice(A.start(tokens[from]), A.end(tokens[to - 1]));
+
+		// One flag object for the whole parse: `loneDashedIdentOfBlock` writes it and
+		// every caller reads it back before the next call.
+		const mediaExtra = { hasExtra: false };
+
+		/**
+		 * Whether any `(--name)` reference is reachable inside `node`. `childAt` walks
+		 * the children without materializing the list.
+		 * @param {AstNode} node a block or function node
+		 * @returns {boolean} true when a reference is present
+		 */
+		const hasCustomMediaRefIn = (node) => {
+			const count = A.childCount(node);
+			for (let k = 0; k < count; k++) {
+				const child = A.childAt(node, k);
+				const type = A.type(child);
+				if (type !== NodeType.SimpleBlock && type !== NodeType.Function) {
 					continue;
 				}
-				if (tt === NodeType.SimpleBlock) {
-					const name = loneDashedIdentOfBlock(
-						/** @type {SimpleBlock} */ (t),
-						extra
-					);
-					if (name !== undefined) {
-						(customMediaUses || (customMediaUses = [])).push({
-							name,
-							start: A.start(t),
-							end: A.end(t),
-							invalid: extra.hasExtra,
-							leading: Boolean(topLevel && leading)
-						});
-					} else {
-						scanCustomMediaUses(A.children(t), false);
+				if (
+					type === NodeType.SimpleBlock &&
+					loneDashedIdentOfBlock(
+						/** @type {SimpleBlock} */ (child),
+						mediaExtra
+					) !== undefined
+				) {
+					return true;
+				}
+				if (hasCustomMediaRefIn(child)) return true;
+			}
+			return false;
+		};
+
+		/**
+		 * Whether any `(--name)` reference is reachable in `tokens[from…to)`. Cheap
+		 * enough to run over every `@media` prelude so one without a reference builds
+		 * no tree at all.
+		 * @param {readonly AstNode[]} tokens token list
+		 * @param {number} from first index
+		 * @param {number} to one past the last index
+		 * @returns {boolean} true when a reference is present
+		 */
+		const hasCustomMediaRef = (tokens, from, to) => {
+			for (let i = from; i < to; i++) {
+				const node = tokens[i];
+				const type = A.type(node);
+				if (type !== NodeType.SimpleBlock && type !== NodeType.Function) {
+					continue;
+				}
+				if (
+					type === NodeType.SimpleBlock &&
+					loneDashedIdentOfBlock(
+						/** @type {SimpleBlock} */ (node),
+						mediaExtra
+					) !== undefined
+				) {
+					return true;
+				}
+				if (hasCustomMediaRefIn(node)) return true;
+			}
+			return false;
+		};
+
+		/**
+		 * Capture one `<media-in-parens>` — a reference to a custom media name, a
+		 * parenthesised sub-condition, or an opaque feature test.
+		 * @param {readonly AstNode[]} tokens token list
+		 * @param {number} from first index
+		 * @param {number} to one past the last index
+		 * @param {boolean} leading whether the term starts a top-level query
+		 * @param {CustomMediaUse[]} uses the prelude's use list, appended to
+		 * @returns {MediaNode} the captured term
+		 */
+		const captureMediaInParens = (tokens, from, to, leading, uses) => {
+			const a = mediaTrimStart(tokens, from, to);
+			const b = mediaTrimEnd(tokens, a, to);
+			if (a >= b) return { kind: "text", text: "" };
+			const text = mediaText(tokens, a, b);
+			if (b - a !== 1 || A.type(tokens[a]) !== NodeType.SimpleBlock) {
+				return { kind: "text", text };
+			}
+			const block = /** @type {SimpleBlock} */ (tokens[a]);
+			const name = loneDashedIdentOfBlock(block, mediaExtra);
+			if (name !== undefined) {
+				const use = {
+					name,
+					start: A.start(block),
+					end: A.end(block),
+					invalid: mediaExtra.hasExtra,
+					leading
+				};
+				uses.push(use);
+				return { kind: "ref", text, use };
+			}
+			const children = A.children(block);
+			const inner = captureMediaCondition(children, 0, children.length, uses);
+			return inner.kind === "text"
+				? { kind: "text", text }
+				: { kind: "group", operand: inner };
+		};
+
+		/**
+		 * Capture a `<media-condition>` — `not <in-parens>`, or an `and` / `or` chain
+		 * of them (CSS never mixes the two at one level).
+		 * @param {readonly AstNode[]} tokens token list
+		 * @param {number} from first index
+		 * @param {number} to one past the last index
+		 * @param {CustomMediaUse[]} uses the prelude's use list, appended to
+		 * @returns {MediaNode} the captured condition
+		 */
+		const captureMediaCondition = (tokens, from, to, uses) => {
+			const a = mediaTrimStart(tokens, from, to);
+			const b = mediaTrimEnd(tokens, a, to);
+			if (a >= b) return { kind: "text", text: "" };
+			if (isMediaKeyword(tokens[a], "not")) {
+				return {
+					kind: "not",
+					operand: captureMediaInParens(tokens, a + 1, b, false, uses)
+				};
+			}
+			/** @type {MediaNode[]} */
+			const terms = [];
+			let isOr = false;
+			let start = a;
+			for (let i = a; i <= b; i++) {
+				const atEnd = i === b;
+				if (
+					!atEnd &&
+					!isMediaKeyword(tokens[i], "and") &&
+					!isMediaKeyword(tokens[i], "or")
+				) {
+					continue;
+				}
+				if (!atEnd && isMediaKeyword(tokens[i], "or")) isOr = true;
+				terms.push(captureMediaInParens(tokens, start, i, start === a, uses));
+				start = i + 1;
+			}
+			if (terms.length === 1) return terms[0];
+			return { kind: "chain", isOr, terms };
+		};
+
+		/**
+		 * Capture one `<media-query>` — a bare condition, or a media type with an
+		 * optional `and` chain after it.
+		 * @param {readonly AstNode[]} tokens token list
+		 * @param {number} from first index
+		 * @param {number} to one past the last index
+		 * @param {CustomMediaUse[]} uses the prelude's use list, appended to
+		 * @returns {MediaNode} the captured query
+		 */
+		const captureMediaQuery = (tokens, from, to, uses) => {
+			const a = mediaTrimStart(tokens, from, to);
+			const b = mediaTrimEnd(tokens, a, to);
+			if (a >= b) return { kind: "text", text: "" };
+			const rest = mediaTrimStart(tokens, a + 1, b);
+			const startsWithType =
+				A.type(tokens[a]) === NodeType.Ident &&
+				(!isMediaKeyword(tokens[a], "not") ||
+					rest >= b ||
+					A.type(tokens[rest]) !== NodeType.SimpleBlock);
+			if (!startsWithType) return captureMediaCondition(tokens, a, b, uses);
+			// `[not | only]? <type> [and <condition-without-or>]?` — the type itself is
+			// never constant, so only the `and` chain after it can fold.
+			let split = b;
+			for (let i = a; i < b; i++) {
+				if (isMediaKeyword(tokens[i], "and")) {
+					split = i;
+					break;
+				}
+			}
+			return {
+				kind: "typed",
+				text: mediaText(tokens, a, mediaTrimEnd(tokens, a, split)),
+				rest:
+					split === b ? null : captureMediaCondition(tokens, split + 1, b, uses)
+			};
+		};
+
+		/**
+		 * Record one `@media` prelude, the custom-media references inside it, and the
+		 * boolean shape needed to fold it once the references resolve.
+		 * @param {AtRule} at the `@media` at-rule
+		 */
+		const collectMediaQuery = (at) => {
+			const prelude = A.prelude(at);
+			const start = mediaTrimStart(prelude, 0, prelude.length);
+			const end = mediaTrimEnd(prelude, start, prelude.length);
+			if (start >= end || !hasCustomMediaRef(prelude, start, end)) return;
+			/** @type {CustomMediaUse[]} */
+			const uses = [];
+			/** @type {MediaNode[]} */
+			const queries = [];
+			let queryStart = start;
+			for (let i = start; i <= end; i++) {
+				if (i !== end && A.type(prelude[i]) !== NodeType.Comma) continue;
+				queries.push(captureMediaQuery(prelude, queryStart, i, uses));
+				queryStart = i + 1;
+			}
+			if (uses.length === 0) return;
+			(customMediaQueries || (customMediaQueries = [])).push({
+				queries,
+				start: A.start(prelude[start]),
+				end: A.end(prelude[end - 1]),
+				uses
+			});
+		};
+
+		/**
+		 * Fold a captured media node against the resolved definitions. A reference the
+		 * resolver could not classify keeps its source text, so it prints as authored.
+		 * @param {MediaNode} node the captured node
+		 * @param {Set<string>} resolving names currently being resolved
+		 * @returns {boolean | string} the constant, or the node's text
+		 */
+		const foldMediaNode = (node, resolving) => {
+			switch (node.kind) {
+				case "text":
+					return node.text;
+				case "ref": {
+					const value = resolveCustomMediaValue(node.use.name, resolving);
+					if (node.use.invalid) return node.text;
+					if (value.kind === "boolean") return value.value;
+					if (value.kind === "condition") return value.text;
+					if (value.kind === "type" && node.use.leading) return value.text;
+					return node.text;
+				}
+				case "group": {
+					const inner = foldMediaNode(node.operand, resolving);
+					return typeof inner === "boolean" ? inner : `(${inner})`;
+				}
+				case "not": {
+					const operand = foldMediaNode(node.operand, resolving);
+					return typeof operand === "boolean" ? !operand : `not ${operand}`;
+				}
+				case "chain": {
+					/** @type {string[]} */
+					const kept = [];
+					for (const term of node.terms) {
+						const folded = foldMediaNode(term, resolving);
+						if (folded === node.isOr) return node.isOr;
+						if (typeof folded !== "boolean") kept.push(folded);
 					}
-				} else if (tt === NodeType.Function) {
-					scanCustomMediaUses(A.children(t), false);
+					if (kept.length === 0) return !node.isOr;
+					if (kept.length === 1) return kept[0];
+					return kept.join(node.isOr ? " or " : " and ");
+				}
+				default: {
+					if (node.rest === null) return node.text;
+					const rest = foldMediaNode(node.rest, resolving);
+					if (rest === false) return false;
+					if (rest === true) return node.text;
+					return `${node.text} and ${rest}`;
 				}
-				if (topLevel) leading = false;
 			}
 		};
 
+		/**
+		 * Fold a whole `@media` prelude. A query that is always false leaves the list;
+		 * one that is always true makes the list match everywhere (`all`), and a list
+		 * with nothing left matches nowhere (`not all`).
+		 * @param {MediaNode[]} queries the prelude's captured queries
+		 * @param {Set<string>} resolving names currently being resolved
+		 * @returns {string} the folded prelude
+		 */
+		const foldMediaPrelude = (queries, resolving) => {
+			/** @type {string[]} */
+			const kept = [];
+			for (const query of queries) {
+				const folded = foldMediaNode(query, resolving);
+				if (folded === true) return "all";
+				if (folded !== false && folded !== "") kept.push(folded);
+			}
+			return kept.length === 0 ? "not all" : kept.join(", ");
+		};
+
 		/**
 		 * Collect one `@custom-selector :--name <selector-list>` definition (last-wins) and drop the rule.
 		 * @param {AtRule} at the `@custom-selector` at-rule
@@ -3328,55 +3779,71 @@ class CssParser extends Parser {
 		};
 
 		/**
-		 * Rewrite the collected `@custom-media` / `@custom-selector` uses now that all (possibly later-defined) definitions are known; warns on invalid, unknown, or unsupported custom-media uses.
+		 * Rewrite the collected `@custom-media` / `@custom-selector` uses now that all (possibly later-defined) definitions are known; warns on invalid, unknown, or media-type-in-a-non-leading-position custom-media uses.
 		 */
 		const resolveCustomMediaAndSelectors = () => {
-			if (customMediaUses) {
-				for (const use of customMediaUses) {
-					if (use.invalid) {
-						this._emitWarning(
-							state,
-							`Custom media query '${use.name}' must be used in a boolean context`,
-							locConverter,
-							use.start,
-							use.end
-						);
-						continue;
-					}
-					const def = customMediaDefs && customMediaDefs.get(use.name);
-					if (!def) {
-						this._emitWarning(
-							state,
-							`Unknown custom media query '${use.name}'`,
-							locConverter,
-							use.start,
-							use.end
-						);
-						continue;
+			if (customMediaQueries) {
+				/** @type {Set<string>} */
+				const resolving = new Set();
+				for (const query of customMediaQueries) {
+					let hasBoolean = false;
+					for (const use of query.uses) {
+						if (use.invalid) {
+							this._emitWarning(
+								state,
+								`Custom media query '${use.name}' must be used in a boolean context`,
+								locConverter,
+								use.start,
+								use.end
+							);
+							continue;
+						}
+						const value = resolveCustomMediaValue(use.name, resolving);
+						if (value.kind === "unsupported") {
+							this._emitWarning(
+								state,
+								customMediaDefs && customMediaDefs.has(use.name)
+									? `Custom media query '${use.name}' has a value that cannot be resolved and was left as written`
+									: `Unknown custom media query '${use.name}'`,
+								locConverter,
+								use.start,
+								use.end
+							);
+						} else if (value.kind === "boolean") {
+							hasBoolean = true;
+						} else if (value.kind === "type" && !use.leading) {
+							this._emitWarning(
+								state,
+								`Custom media query '${use.name}' resolves to a media type and can only be used at the start of a media query`,
+								locConverter,
+								use.start,
+								use.end
+							);
+						}
 					}
-					if (def.kind === "unsupported") {
-						this._emitWarning(
-							state,
-							`Custom media query '${use.name}' uses an unsupported value ('true'/'false' or a nested custom media) and was left unresolved`,
-							locConverter,
-							use.start,
-							use.end
+					// `true` / `false` have no `<media-in-parens>` spelling, so a prelude
+					// holding one is rewritten whole — every other use in it folds with it.
+					if (hasBoolean) {
+						module.addPresentationalDependency(
+							new ConstDependency(foldMediaPrelude(query.queries, resolving), [
+								query.start,
+								query.end
+							])
 						);
 						continue;
 					}
-					if (def.kind === "type" && !use.leading) {
-						this._emitWarning(
-							state,
-							`Custom media query '${use.name}' resolves to a media type and can only be used at the start of a media query`,
-							locConverter,
-							use.start,
-							use.end
-						);
-						continue;
+					for (const use of query.uses) {
+						if (use.invalid) continue;
+						const value = resolveCustomMediaValue(use.name, resolving);
+						if (
+							value.kind === "condition" ||
+							(value.kind === "type" && use.leading)
+						) {
+							module.addPresentationalDependency(
+								new ConstDependency(value.text, [use.start, use.end])
+							);
+						}
 					}
-					module.addPresentationalDependency(
-						new ConstDependency(def.text, [use.start, use.end])
-					);
 				}
 			}
 			if (customSelectorUses) {
@@ -3400,10 +3867,13 @@ class CssParser extends Parser {
 			/** @type {Record<string, number>} */
 			let parsedKeywords = Object.create(null);
 			const isGridProperty = Boolean(declPropertyName.startsWith("grid"));
-			// Only `view-transition-*` legitimately takes a dashed-ident value; other known properties keep the historical plain-ident handling.
+			// Only `view-transition-*` and `counter-*` legitimately take a dashed-ident value; other known properties keep the historical plain-ident handling.
 			const isViewTransitionProperty = Boolean(
 				declPropertyName.startsWith("view-transition")
 			);
+			const isCounterProperty = Boolean(
+				declPropertyName.startsWith("counter-")
+			);
 			const isGridTemplate = isGridProperty
 				? Boolean(
 						declPropertyName === "grid" ||
@@ -3413,7 +3883,7 @@ class CssParser extends Parser {
 					)
 				: false;
 			const keywords =
-				/** @type {Record<string, number>} */
+				/** @type {Map<string, number>} */
 				(knownProperties.get(declPropertyName));
 			let afterExclamation = false;
 			/**
@@ -3430,6 +3900,8 @@ class CssParser extends Parser {
 					isString ? start + 1 : start,
 					isString ? end - 1 : end
 				);
+				// Only grid-line names are declaration sites here; property-value references (`animation: foo`) are usages.
+				if (isGridProperty) recordDeclaration(name, "grid identifier", sl, sc);
 				addCssExport(
 					sl,
 					sc,
@@ -3463,8 +3935,11 @@ class CssParser extends Parser {
 								break;
 							}
 							const identifier = A.value(cv);
-							// `view-transition-name: --foo` — a dashed name scopes as a custom property under `dashedIdents`, not as a plain ident export.
-							if (isViewTransitionProperty && isDashedIdentifier(identifier)) {
+							// `view-transition-name: --foo` / `counter-reset: --foo` — a dashed name scopes as a custom property under `dashedIdents`, not as a plain ident export.
+							if (
+								(isViewTransitionProperty || isCounterProperty) &&
+								isDashedIdentifier(identifier)
+							) {
 								if (this.options.dashedIdents) {
 									emitDashedIdentExport(A.start(cv), A.end(cv));
 								}
@@ -3476,10 +3951,8 @@ class CssParser extends Parser {
 								typeof parsedKeywords[keyword] !== "undefined"
 									? parsedKeywords[keyword] + 1
 									: 0;
-							if (
-								keywords[keyword] &&
-								parsedKeywords[keyword] < keywords[keyword]
-							) {
+							const limit = keywords.get(keyword);
+							if (limit !== undefined && parsedKeywords[keyword] < limit) {
 								break;
 							}
 							emit(A.start(cv), A.end(cv));
@@ -3497,11 +3970,15 @@ class CssParser extends Parser {
 								declPropertyName === "grid-template" ||
 								declPropertyName === "grid-template-areas"
 							) {
-								const areas = A.unescaped(cv);
-								const matches = matchAll(/\b\w+\b/g, areas);
-								for (const match of matches) {
-									const areaStart = A.start(cv) + 1 + match.index;
-									emit(areaStart, areaStart + match[0].length, false);
+								// Raw offsets: a match index into the unescaped text would
+								// slide the replaced range past every escape before it.
+								const names = gridAreaNames(
+									source,
+									A.start(cv) + 1,
+									A.end(cv) - 1
+								);
+								for (const [nameStart, nameEnd] of names) {
+									emit(nameStart, nameEnd, false);
 								}
 							}
 							break;
@@ -3521,7 +3998,12 @@ class CssParser extends Parser {
 							break;
 						}
 						case NodeType.Function:
-							if (isGridTemplate) {
+							// `repeat(…)` line names, and the `counter-reset: reversed(name)` wrapper — but not `local()`/`global()`, whose idents the value visitors own.
+							if (
+								isGridTemplate ||
+								(isCounterProperty &&
+									equalsLowerCase(A.unescapedName(cv), "reversed"))
+							) {
 								walkExports(A.children(cv));
 							}
 							break;
@@ -3588,13 +4070,10 @@ class CssParser extends Parser {
 					currentUrlRecovery = false;
 					advanceCommentCursor(A.start(at));
 					const savedAnchor = currentRule.hasLocalAnchor;
-					const savedLocalIdentifiers = currentRule.localIdentifiers;
-					// Only modules-mode walks mutate `localIdentifiers`; otherwise share
-					// the (empty) parent list instead of copying it per rule.
-					currentRule.localIdentifiers = isModules
-						? [...savedLocalIdentifiers]
-						: savedLocalIdentifiers;
-					const name = `@${toLowerCaseIfNeeded(A.name(at))}`;
+					// Rollback point: nested walks append to the shared list; the exit
+					// truncates back to this length (no per-rule copy).
+					const savedLocalIdentifierCount = currentRule.localIdentifiers.length;
+					const name = `@${toLowerCaseIfNeeded(A.unescapedName(at))}`;
 					switch (name) {
 						case "@namespace": {
 							this._emitWarning(
@@ -3638,7 +4117,7 @@ class CssParser extends Parser {
 							break;
 						}
 						case "@media": {
-							if (mayHaveCustomMedia) scanCustomMediaUses(A.prelude(at), true);
+							if (mayHaveCustomMedia) collectMediaQuery(at);
 							break;
 						}
 						default: {
@@ -3650,21 +4129,33 @@ class CssParser extends Parser {
 								this.options.animation &&
 								OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)
 							) {
-								processLocalAtRule(at, {
-									string: mode === "local",
-									identifier: mode === "local"
-								});
+								processLocalAtRule(
+									at,
+									{
+										string: mode === "local",
+										identifier: mode === "local"
+									},
+									"@keyframes"
+								);
 							} else if (
 								this.options.customIdents &&
 								name === "@counter-style"
 							) {
-								processLocalAtRule(at, {
-									identifier: mode === "local"
-								});
+								processLocalAtRule(
+									at,
+									{
+										identifier: mode === "local"
+									},
+									"@counter-style"
+								);
 							} else if (this.options.container && name === "@container") {
-								processLocalAtRule(at, {
-									identifier: mode === "local" ? /^(none|and|or|not)$/ : false
-								});
+								processLocalAtRule(
+									at,
+									{
+										identifier: mode === "local" ? /^(none|and|or|not)$/ : false
+									},
+									"@container"
+								);
 							}
 						}
 					}
@@ -3672,7 +4163,7 @@ class CssParser extends Parser {
 					// `@scope (.x) to (.y)` — walk the prelude as a selector list.
 					if (
 						isModules &&
-						equalsLowerCase(A.name(at), "scope") &&
+						equalsLowerCase(A.unescapedName(at), "scope") &&
 						A.prelude(at).length > 0
 					) {
 						walkSelectorList(
@@ -3688,6 +4179,7 @@ class CssParser extends Parser {
 					const isProcessedByLocalAtRule = isLocalHandledAtRule(name);
 					currentStructural = at;
 					currentAtRuleName = name;
+					currentDeclCounterActive = false;
 					dashed.active = false;
 					// `@import` url() is the import target — only walk its prelude for url deps on malformed-import recovery.
 					if (this.options.url && (name !== "@import" || currentUrlRecovery)) {
@@ -3728,12 +4220,13 @@ class CssParser extends Parser {
 						);
 					}
 
-					// pure.stack push for block-bearing at-rules.
+					// pure.stack push for block-bearing at-rules (pure-off builds skip
+					// the frame object — every consumer inside is a no-op then).
 					const atDecls = A.declarations(at);
 					const atChildRules = A.childRules(at);
 					const atHasBlock = Boolean(atDecls || atChildRules);
 					const atBlockStart = A.blockStart(at);
-					if (atHasBlock && atBlockStart !== -1) {
+					if (pure.enabled && atHasBlock && atBlockStart !== -1) {
 						const isAtRulePrelude = isPureBodyAtRule(name);
 						if (isAtRulePrelude) pure.finalizeSelector();
 						pure.enterBlock({
@@ -3749,7 +4242,7 @@ class CssParser extends Parser {
 
 					atRuleStateStack.push({
 						savedAnchor,
-						savedLocalIdentifiers,
+						savedLocalIdentifierCount,
 						name,
 						hasBlock: atHasBlock,
 						endsWithSemicolon: source.charCodeAt(A.end(at)) === CC_SEMICOLON,
@@ -3772,7 +4265,7 @@ class CssParser extends Parser {
 						suppressNextRulePrelude = true;
 					}
 					currentRule.hasLocalAnchor = state.savedAnchor;
-					currentRule.localIdentifiers = state.savedLocalIdentifiers;
+					currentRule.localIdentifiers.length = state.savedLocalIdentifierCount;
 					if (path.parent === null) finishTopLevelRule(node, true);
 				}
 			},
@@ -3783,11 +4276,16 @@ class CssParser extends Parser {
 					const rule = /** @type {QualifiedRule} */ (node);
 					const topLevel = path.parent === null;
 					advanceCommentCursor(A.start(rule));
+					// One prelude materialization per rule, shared by the scans below
+					// (null in plain mode, which never reads the array).
+					const rulePrelude =
+						isModules || mayHaveCustomSelectors ? A.prelude(rule) : null;
 					// `:--name` custom-selector references (dashed idents never collide with the `:import`/`:export` ICSS preludes below).
-					if (mayHaveCustomSelectors) scanCustomSelectorUses(A.prelude(rule));
+					if (mayHaveCustomSelectors && rulePrelude !== null) {
+						scanCustomSelectorUses(rulePrelude);
+					}
 					// `:import(…) { … }` / `:export { … }` ICSS pseudo-rules are processed inline at top level; nested ones bail out.
-					if (isModules) {
-						const rulePrelude = A.prelude(rule);
+					if (isModules && rulePrelude !== null) {
 						const firstIdx = nextNonWhitespace(rulePrelude, 0);
 						if (
 							firstIdx + 1 < rulePrelude.length &&
@@ -3828,14 +4326,12 @@ class CssParser extends Parser {
 							}
 						}
 					}
-					// Reset the anchor flag for this rule's body, inheriting (copying) the parent's identifier list so nested `composes:` sees both parent and child class names.
+					// Reset the anchor flag for this rule's body; nested `composes:` sees
+					// parent + own class names in the shared identifier list, rolled back
+					// by length on exit (no per-rule copy).
 					const savedAnchor = currentRule.hasLocalAnchor;
-					const savedLocalIdentifiers = currentRule.localIdentifiers;
+					const savedLocalIdentifierCount = currentRule.localIdentifiers.length;
 					currentRule.hasLocalAnchor = false;
-					// Only modules-mode walks mutate `localIdentifiers`; otherwise share the (empty) parent list instead of copying it per rule.
-					currentRule.localIdentifiers = isModules
-						? [...savedLocalIdentifiers]
-						: savedLocalIdentifiers;
 					// Composes-state reset between rules (saved / restored around this rule); composesFiles is swapped out and re-created lazily only if this rule composes.
 					const savedPrevComposesFile = currentRule.composesPrevFile;
 					const savedComposesFiles = currentRule.composesFiles;
@@ -3844,13 +4340,12 @@ class CssParser extends Parser {
 					qualifiedRuleStateStack.push({
 						bailed: false,
 						savedAnchor,
-						savedLocalIdentifiers,
+						savedLocalIdentifierCount,
 						savedPrevComposesFile,
 						savedComposesFiles
 					});
 					// Selectors are only CSS-Modules-relevant when `isModules` holds.
-					const rulePrelude = A.prelude(rule);
-					if (isModules) {
+					if (isModules && rulePrelude !== null) {
 						walkSelectorList(
 							rulePrelude,
 							/** @type {"local" | "global"} */ (
@@ -3860,22 +4355,24 @@ class CssParser extends Parser {
 					}
 					// A malformed declaration can leave orphan `url(...)` in the prelude — let the url visitor pick those up.
 					currentStructural = rule;
+					currentDeclCounterActive = false;
 					dashed.active = false;
 					dashed.emit = false;
-					if (this.options.url && rulePrelude.length > 0) {
-						lastTokenEndForComments = A.start(rulePrelude[0]);
+					if (this.options.url && A.childCount(rule) > 0) {
+						lastTokenEndForComments = A.start(A.childAt(rule, 0));
 					}
 					// Dashed-ident scoping for the deprecated `--foo: { … }` custom-property-set syntax (prelude starts with a dashed-ident).
 					if (
 						this.options.dashedIdents &&
 						isModules &&
+						rulePrelude !== null &&
 						rulePrelude.length > 0
 					) {
 						const first = rulePrelude[nextNonWhitespace(rulePrelude, 0)];
 						if (
 							first &&
 							A.type(first) === NodeType.Ident &&
-							isDashedIdentifier(A.value(first))
+							rangeIsDashedIdentifier(source, A.start(first), A.end(first))
 						) {
 							const effectiveLocalMode = isEffectivelyLocal();
 							if (effectiveLocalMode) {
@@ -3885,6 +4382,7 @@ class CssParser extends Parser {
 						}
 					}
 					// Pure-mode: report an impure prelude (if leaf-ish) and push the inherited-context frame before walking the body.
+					if (!pure.enabled) return;
 					const ruleBlockStart = A.blockStart(rule);
 					pure.enterBlock({
 						isRulePrelude: true,
@@ -3903,7 +4401,7 @@ class CssParser extends Parser {
 					if (!state || state.bailed) return;
 					pure.exitBlock();
 					currentRule.hasLocalAnchor = state.savedAnchor;
-					currentRule.localIdentifiers = state.savedLocalIdentifiers;
+					currentRule.localIdentifiers.length = state.savedLocalIdentifierCount;
 					currentRule.composesPrevFile = state.savedPrevComposesFile;
 					currentRule.composesFiles = state.savedComposesFiles;
 					if (path.parent === null) finishTopLevelRule(node, false);
@@ -3928,6 +4426,8 @@ class CssParser extends Parser {
 				lastTokenEndForComments = colonPos + 1;
 				currentDeclIsKnownProperty = false;
 				currentDeclComposesSkip = false;
+				currentDeclCounterActive = false;
+				dashed.counterArgs = false;
 				// Property-name analysis and value exports are CSS-Modules-only; a plain
 				// stylesheet's declarations need no per-decl name slice / known-property lookup.
 				if (!isModules) return;
@@ -3939,13 +4439,23 @@ class CssParser extends Parser {
 				let declName;
 				/** @type {string | undefined} */
 				let declPropertyName;
-				if (source.charCodeAt(nameStart) === CC_HYPHEN_MINUS) {
-					// Vendor-prefixed or custom property — rare, take the string path.
-					declName = A.name(decl);
-					declPropertyName = toLowerCaseIfNeeded(
-						declName.replace(VENDOR_PREFIX, "")
-					);
-					currentDeclIsKnownProperty = knownProperties.has(declPropertyName);
+				let declIsDashed = false;
+				if (
+					source.charCodeAt(nameStart) === CC_HYPHEN_MINUS ||
+					source.charCodeAt(nameStart) === CC_REVERSE_SOLIDUS
+				) {
+					if (rangeIsDashedIdentifier(source, nameStart, nameEnd)) {
+						// Custom property: never vendor-prefixed / known / composes.
+						declIsDashed = true;
+					} else {
+						// Vendor-prefixed, degenerate short, or an escaped name that is
+						// not dashed after all — rare, string path.
+						declName = A.unescapedName(decl);
+						declPropertyName = toLowerCaseIfNeeded(
+							declName.replace(VENDOR_PREFIX, "")
+						);
+						currentDeclIsKnownProperty = knownProperties.has(declPropertyName);
+					}
 				} else {
 					declPropertyName = knownPropertyForRange(
 						knownPropertyIndex,
@@ -3966,6 +4476,11 @@ class CssParser extends Parser {
 							rangeEqualsLowerCase(source, nameStart, nameEnd, "compose-with"));
 				if (currentDeclComposesSkip) emitComposesWithAnchor(decl);
 				const skipForComposes = currentDeclComposesSkip;
+				// `content: counter(name, style)` can name a scoped counter / `@counter-style` from any property, so this isn't driven by the known-property table.
+				currentDeclCounterActive =
+					Boolean(this.options.customIdents) &&
+					effectiveLocalMode &&
+					!skipForComposes;
 				// Known-property value localization (`animation-name: foo` exports `foo`).
 				if (effectiveLocalMode && currentDeclIsKnownProperty) {
 					emitKnownPropertyExports(
@@ -3979,8 +4494,8 @@ class CssParser extends Parser {
 					effectiveLocalMode &&
 					!skipForComposes
 				) {
-					// Only the `-`-prefixed path can carry a dashed ident.
-					if (declName !== undefined && isDashedIdentifier(declName)) {
+					// Only the `--`-prefixed path can carry a dashed ident.
+					if (declIsDashed) {
 						emitDashedIdentExport(nameStart, nameEnd);
 					}
 					dashed.active = true;
@@ -3996,7 +4511,7 @@ class CssParser extends Parser {
 						declName = source.slice(nameStart, nameEnd);
 					}
 					if (
-						!(dashed.active && isDashedIdentifier(declName)) &&
+						!(dashed.active && declIsDashed) &&
 						icssDefinitions.has(declName)
 					) {
 						emitICSSSymbol(declName, nameStart, nameEnd);
@@ -4122,8 +4637,22 @@ class CssParser extends Parser {
 							emitICSSSymbol(fname, fnNameStart, fnNameEnd);
 						}
 					}
+					// `counter()` / `counters()` / `target-counter()` / `target-counters()`: rewrite the counter name and any trailing counter-style ident.
+					let counterNameIndex = -1;
+					if (currentDeclCounterActive && !isLocalFn && !isGlobalFn) {
+						counterNameIndex = counterFunctionNameIndex(
+							input,
+							fnNameStart,
+							fnNameEnd,
+							escapedName
+						);
+						if (counterNameIndex !== -1) {
+							walkCounterFunction(A.children(fn), counterNameIndex);
+						}
+					}
 					// Dashed-ident scoping: handle this function, then set the child nesting level's state for the walk.
 					dashed.push();
+					dashed.counterArgs = counterNameIndex !== -1;
 					if (dashed.active) {
 						if (isLocalFn || isGlobalFn) {
 							// `local()` / `global()` dashed args go through the ICSS path above, not here.
@@ -4171,12 +4700,18 @@ class CssParser extends Parser {
 				// and ICSS context (any non-CSS-Modules stylesheet) a bare ident carries
 				// no work, and idents are the most common node, so skipping the per-ident
 				// `value` slice matters. With no `@value`/`:import` definitions the ICSS
-				// probe can never hit, so it doesn't warrant the slice either.
+				// probe can never hit, so it doesn't warrant the slice either. The dashed
+				// probe reads two char codes instead of slicing (escaped dashes don't
+				// match, same as the string form — cf. `processDashedIdentInVarFunction`).
 				const dashedActive = dashed.active;
 				const icss = icssActive() && icssDefinitions.size !== 0;
 				if (!dashedActive && !icss) return;
-				const identValue = A.value(node);
-				if (dashedActive && isDashedIdentifier(identValue)) {
+				const identStart = A.start(node);
+				const identEnd = A.end(node);
+				if (
+					dashedActive &&
+					rangeIsDashedIdentifier(input, identStart, identEnd)
+				) {
 					// Dashed idents are scoped here, never `@value` ICSS-rewritten.
 					if (!dashed.emit) return;
 					// Resolve the `--foo from "./x.css"` / `--foo from global` import suffix via sibling lookahead over the parent's child span (`path.index` avoids materializing the sibling list per dashed ident).
@@ -4219,13 +4754,13 @@ class CssParser extends Parser {
 									"global"
 								)
 							) {
-								emitDashedIdentFromGlobal(A.end(node), A.end(sourceNode));
+								emitDashedIdentFromGlobal(identEnd, A.end(sourceNode));
 								return;
 							}
 							if (sourceNode && A.type(sourceNode) === NodeType.String) {
 								emitDashedIdentImport(
-									A.start(node),
-									A.end(node),
+									identStart,
+									identEnd,
 									A.start(fromIdent),
 									A.end(sourceNode),
 									input.slice(A.start(sourceNode) + 1, A.end(sourceNode) - 1)
@@ -4234,12 +4769,16 @@ class CssParser extends Parser {
 							}
 						}
 					}
-					emitDashedIdentExport(A.start(node), A.end(node));
+					emitDashedIdentExport(identStart, identEnd);
 					return;
 				}
 				if (!icss) return;
+				// Already rewritten as a counter / counter-style name — a second dep would overlap the same range.
+				if (dashed.counterArgs) return;
+				// Deferred: only the ICSS probe needs the ident's string value.
+				const identValue = A.value(node);
 				if (icssDefinitions.has(identValue)) {
-					emitICSSSymbol(identValue, A.start(node), A.end(node));
+					emitICSSSymbol(identValue, identStart, identEnd);
 				}
 			}
 		};
@@ -4249,19 +4788,22 @@ class CssParser extends Parser {
 		// (per-source) is passed to `process`. One skip set: selector prelude +
 		// unread value leaves (non-modules only; CSS Modules needs its selectors
 		// and ICSS-captured values).
-		new SourceProcessor({
-			as: /** @type {"stylesheet" | "block-contents"} */ (this.options.as),
-			// Non-modules parses skip selector preludes, but `@custom-selector` expansion needs them, so keep them when the file may use one.
-			skip: isModules
-				? undefined
-				: mayHaveCustomSelectors
-					? SKIP_NON_MODULES_KEEP_SELECTORS
-					: SKIP_NON_MODULES
-		})
+		new SourceProcessor()
 			.use(/** @type {VisitorMap} */ (visitors))
-			.process(source, { locConverter });
+			.process(source, {
+				as: /** @type {"stylesheet" | "block-contents"} */ (this.options.as),
+				// Non-modules parses skip selector preludes, but `@custom-selector` expansion needs them, so keep them when the file may use one.
+				skip: isModules
+					? undefined
+					: mayHaveCustomSelectors
+						? SKIP_NON_MODULES_KEEP_SELECTORS
+						: SKIP_NON_MODULES,
+				locConverter
+			});
 
-		if (customMediaUses || customSelectorUses) resolveCustomMediaAndSelectors();
+		if (customMediaQueries || customSelectorUses) {
+			resolveCustomMediaAndSelectors();
+		}
 
 		/** @type {BuildInfo} */
 		(module.buildInfo).strict = true;
@@ -4286,6 +4828,9 @@ class CssParser extends Parser {
 			: "redirect-warn";
 
 		if (cssExportEntries.length > 0) {
+			if (isModules && declaredExports.size > 0) {
+				this._resolveAmbiguousExports(state, declaredExports, cssExportEntries);
+			}
 			module.addDependency(new CssIcssExportDependency(cssExportEntries));
 		}