webpack 5.108.3 → 5.109.0

package/lib/css/CssParser.js

@@ -6,7 +6,6 @@
 "use strict";
 
 const path = require("path");
-const vm = require("vm");
 const { CSS_MODULE_TYPE_AUTO } = require("../ModuleTypeConstants");
 const Parser = require("../Parser");
 const ConstDependency = require("../dependencies/ConstDependency");
@@ -20,19 +19,26 @@ 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");
-const binarySearchBounds = require("../util/binarySearchBounds");
 const { parseResource } = require("../util/identifier");
 const {
 	createMagicCommentContext,
-	webpackCommentRegExp
+	parseCommentOptionsInRange
 } = require("../util/magicComment");
 const topologicalSort = require("../util/topologicalSort");
 const {
 	A,
 	NodeType,
 	SourceProcessor,
+	buildSkipSet,
 	equalsLowerCase,
+	isDashedIdentifier,
+	isWhitespace,
+	normalizeUrl,
+	rangeEquals,
+	rangeEqualsLowerCase,
+	toLowerCaseIfNeeded,
 	unescapeIdentifier
 } = require("./syntax");
 
@@ -74,6 +80,8 @@ const CC_LINE_FEED = "\n".charCodeAt(0);
 const CC_CARRIAGE_RETURN = "\r".charCodeAt(0);
 const CC_FORM_FEED = "\f".charCodeAt(0);
 const CC_LEFT_CURLY = "{".charCodeAt(0);
+const CC_LOWER_V = "v".charCodeAt(0);
+const CC_UPPER_V = "V".charCodeAt(0);
 
 // A parsed CSS comment. `loc` is computed on demand — only magic-comment error
 // warnings read it, so comment-heavy CSS skips the per-comment line/col work.
@@ -81,20 +89,73 @@ const CC_LEFT_CURLY = "{".charCodeAt(0);
 /** @typedef {{ value: string, range: Range }} Comment */
 
 // Newlines (CSS Syntax 3 §3.3) — listed explicitly since there's no preprocessing stage.
-const STRING_MULTILINE = /\\[\n\r\f]/g;
 // https://www.w3.org/TR/css-syntax-3/#whitespace
-const TRIM_WHITE_SPACES = /(^[ \t\n\r\f]*|[ \t\n\r\f]*$)/g;
 // Pure-mode markers: `cssmodules-pure-ignore` opts a single rule out of the purity check, `cssmodules-pure-no-check` (before the first rule) opts the whole file out.
 const PURE_IGNORE_RE = /^\s*cssmodules-pure-ignore(?:\s|$)/;
 const PURE_NO_CHECK_RE = /^\s*cssmodules-pure-no-check(?:\s|$)/;
-const UNESCAPE = /\\([0-9a-f]{1,6}[ \t\n\r\f]?|[\s\S])/gi;
 const IMAGE_SET_FUNCTION = /^(?:-\w+-)?image-set$/i;
-// `parseCommentOptions` fast path: a whole-comment `webpackXxx: <bool|number|null>`; every other (and every failing) shape falls back to the `vm.runInContext` path.
-const MAGIC_COMMENT_FAST_PATH =
-	/^\s*(webpack[A-Z][A-Za-z]+)\s*:\s*(true|false|null|-?\d+(?:\.\d+)?)\s*$/;
 const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(?:-\w+-)?keyframes$/;
+const VENDOR_PREFIX = /^-\w+-/;
 const COMPOSES_PROPERTY = /^(?:composes|compose-with)$/i;
+// Functional view-transition pseudo-elements whose `(<name> .class…)` argument names are scoped like `view-transition-name`/`-class` values.
+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"]
+]);
+
+/**
+ * @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;
+};
+
+// Skip options for a non-CSS-Modules parse: drop the selector prelude (never
+// walked without modules) plus value / function-arg leaves nothing reads (the
+// `Ident` visitor no-ops, the `Declaration` visitor returns early, no ICSS).
+// `url` / functions / strings / blocks / commas are kept — they carry url()
+// rewrites and image-set fences. At-rule preludes are kept (`@media` / `@import`
+// are read). CSS-Modules parses skip nothing: selectors are walked and ICSS
+// `:export { k: v }` captures each value's byte range from its first / last node.
+const SKIP_NON_MODULES = {
+	types: buildSkipSet([
+		NodeType.Number,
+		NodeType.Dimension,
+		NodeType.Percentage,
+		NodeType.Ident,
+		NodeType.Hash,
+		NodeType.Colon,
+		NodeType.Delim,
+		// Nothing reads value/arg whitespace either — consumers use
+		// `nextNonWhitespace` / type checks that tolerate its absence.
+		NodeType.Whitespace
+	]),
+	selectorPrelude: true
+};
+// Like SKIP_NON_MODULES but keeps selector preludes and the `Colon` / `Ident`
+// tokens inside function-arg lists, so `@custom-selector` `:--name` references
+// (including nested ones like `:is(:--name)`) survive a non-modules parse.
+const SKIP_NON_MODULES_KEEP_SELECTORS = {
+	types: buildSkipSet([
+		NodeType.Number,
+		NodeType.Dimension,
+		NodeType.Percentage,
+		NodeType.Hash,
+		NodeType.Delim,
+		NodeType.Whitespace
+	]),
+	selectorPrelude: false
+};
 const CSS_COMMENT = /\/\*((?!\*\/)[\s\S]*?)\*\//g;
 // `@value` recognizers (postcss-modules-values shape): the import form `<names> from <source>`, and the `<importName> as <localName>` alias inside it.
 const VALUE_IMPORT_FORM = /from(\/\*|\s)(?:[\s\S]+)$/i;
@@ -125,74 +186,63 @@ const matchAll = (regexp, str) => {
 };
 
 /**
- * Returns normalized url.
- * @param {string} str url string
- * @param {boolean} isString is url wrapped in quotes
- * @returns {string} normalized url
+ * 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[]>>}
  */
-const normalizeUrl = (str, isString) => {
-	// Fast paths: skip the regex engine for the common URL with no escape and
-	// no edge whitespace (e.g. `./img.png`). Each guard is equivalent to the
-	// regex being a no-op.
-	// Remove escaped newlines from a string-token url like `url("im\<newline>g.png")`.
-	if (isString && str.includes("\\")) {
-		str = str.replace(STRING_MULTILINE, "");
-	}
+const KNOWN_PROPERTY_INDEX_CACHE = new WeakMap();
 
-	// Remove unnecessary spaces from `url("   img.png	 ")`
-	if (
-		str.length !== 0 &&
-		(isCssWhitespace(str.charCodeAt(0)) ||
-			isCssWhitespace(str.charCodeAt(str.length - 1)))
-	) {
-		str = str.replace(TRIM_WHITE_SPACES, "");
-	}
-
-	// Unescape
-	if (str.includes("\\")) {
-		str = str.replace(UNESCAPE, (match) => {
-			if (match.length > 2) {
-				return String.fromCharCode(Number.parseInt(match.slice(1).trim(), 16));
+/**
+ * Gets (or builds) the hash index for a known-properties table.
+ * @param {Map<string, Record<string, number>>} knownProperties known properties table
+ * @returns {Map<number, string | string[]>} hash → canonical name(s)
+ */
+const getKnownPropertyIndex = (knownProperties) => {
+	let index = KNOWN_PROPERTY_INDEX_CACHE.get(knownProperties);
+	if (index === undefined) {
+		index = new Map();
+		for (const name of knownProperties.keys()) {
+			let h = name.length;
+			for (let i = 0; i < name.length; i++) {
+				h = ((h << 5) - h + name.charCodeAt(i)) | 0;
 			}
-			return match[1];
-		});
-	}
-
-	if (/^data:/i.test(str)) {
-		return str;
-	}
-
-	if (str.includes("%")) {
-		// Convert `url('%2E/img.png')` -> `url('./img.png')`
-		try {
-			str = decodeURIComponent(str);
-		} catch (_err) {
-			// Ignore
+			const hit = index.get(h);
+			if (hit === undefined) index.set(h, name);
+			else if (typeof hit === "string") index.set(h, [hit, name]);
+			else hit.push(name);
 		}
+		KNOWN_PROPERTY_INDEX_CACHE.set(knownProperties, index);
 	}
-
-	return str;
+	return index;
 };
 
-// `escapeIdentifier` / `unescapeIdentifier` live in ./syntax.js; they're re-exported at the bottom for back-compat callers.
-
 /**
- * A custom property name (`<dashed-ident>`): a `--`-prefixed identifier other than bare `--`.
- * @param {string} identifier identifier
- * @returns {boolean} true when identifier is dashed, otherwise false
- */
-const isDashedIdentifier = (identifier) =>
-	identifier.startsWith("--") && identifier.length >= 3;
-
-/**
- * `binarySearchBounds` comparator for `getComments` — hoisted so the lookup
- * doesn't allocate a fresh closure per call.
- * @param {Comment} comment comment
- * @param {number} needle needle (byte offset)
- * @returns {number} comparison
+ * Canonical known-property name for a source range (ASCII case-insensitive), without slicing.
+ * @param {Map<number, string | string[]>} index hash index from `getKnownPropertyIndex`
+ * @param {string} input source
+ * @param {number} start name start
+ * @param {number} end name end (exclusive)
+ * @returns {string | undefined} canonical lowercase name, or undefined when unknown
  */
-const compareCommentStart = (comment, needle) =>
-	/** @type {Range} */ (comment.range)[0] - needle;
+const knownPropertyForRange = (index, input, start, end) => {
+	let h = end - start;
+	for (let i = start; i < end; i++) {
+		let c = input.charCodeAt(i);
+		if (c >= 65 && c <= 90) c |= 0x20;
+		h = ((h << 5) - h + c) | 0;
+	}
+	const hit = index.get(h);
+	if (hit === undefined) return undefined;
+	if (typeof hit === "string") {
+		return rangeEqualsLowerCase(input, start, end, hit) ? hit : undefined;
+	}
+	for (let i = 0; i < hit.length; i++) {
+		if (rangeEqualsLowerCase(input, start, end, hit[i])) return hit[i];
+	}
+	return undefined;
+};
 
 /** @type {Record<string, number>} */
 const PREDEFINED_COUNTER_STYLES = {
@@ -433,6 +483,22 @@ const buildKnownProperties = (options = {}) => {
 			"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) {
@@ -478,24 +544,8 @@ const getKnownProperties = (options = {}) => {
 	return table;
 };
 
-const EMPTY_COMMENT_OPTIONS = {
-	options: null,
-	errors: null
-};
-
 // Byte-level source-cursor scans for computing replacement / strip ranges on raw source after parsing.
 
-/**
- * @param {number} cc char code
- * @returns {boolean} true when `cc` is CSS whitespace (space/tab/newline/CR/FF)
- */
-const isCssWhitespace = (cc) =>
-	cc === CC_SPACE ||
-	cc === CC_TAB ||
-	cc === CC_LINE_FEED ||
-	cc === CC_CARRIAGE_RETURN ||
-	cc === CC_FORM_FEED;
-
 /**
  * Skip trailing whitespace + at most one newline (CRLF-aware).
  * @param {string} input source
@@ -598,7 +648,7 @@ const scanRuleBody = (declarations, childRules) => {
 				hasNestedBlock = true;
 				if (
 					!hasDirectDecl &&
-					!isPureBodyAtRule(`@${A.name(child).toLowerCase()}`) &&
+					!isPureBodyAtRule(`@${toLowerCaseIfNeeded(A.name(child))}`) &&
 					scanRuleBody(atDecls, atChildRules).hasDirectDecl
 				) {
 					hasDirectDecl = true;
@@ -815,6 +865,8 @@ class CssParser extends Parser {
 			animation: true,
 			container: true,
 			customIdents: true,
+			customMedia: true,
+			customSelectors: true,
 			dashedIdents: true,
 			function: true,
 			grid: true,
@@ -884,6 +936,43 @@ class CssParser extends Parser {
 		/** @type {Comment[]} */
 		const comments = [];
 
+		const urlHints = this.options.urlHints;
+		const fontPreload = this.options.fontPreload;
+		/**
+		 * Apply `parser.css.urlHints` defaults + `webpackPrefetch` /
+		 * `webpackPreload` / `webpackFetchPriority` / `webpackAs` /
+		 * `webpackType` / `webpackMedia` magic-comment overrides to a fresh
+		 * `CssUrlDependency`. Magic comments win over the project-wide default.
+		 * @param {CssUrlDependency} dep dep
+		 * @param {string} request asset request
+		 * @param {Record<string, EXPECTED_ANY> | null | undefined} options parsed comment options
+		 * @param {import("../Dependency").DependencyLocation} loc location for warnings
+		 * @returns {void}
+		 */
+		const applyResourceHintDefaults = (dep, request, options, loc) => {
+			// `fontPreload` heuristic: seed `preload`/`as`/`type` for the first url
+			// of each `@font-face` (the nearest enclosing at-rule) as the lowest
+			// default, so `urlHints` rules and magic comments below still override.
+			if (fontPreload && atRuleStateStack.length > 0) {
+				const top = atRuleStateStack[atRuleStateStack.length - 1];
+				if (top.name === "@font-face" && !top.fontPreloaded) {
+					top.fontPreloaded = true;
+					dep.preload = true;
+					dep.asAttribute = "font";
+					const type = fontMimeType(request);
+					if (type) dep.typeAttribute = type;
+				}
+			}
+			ResourceHintPlugin.applyResourceHints(
+				dep,
+				urlHints,
+				request,
+				options,
+				state.module,
+				loc
+			);
+		};
+
 		const module = state.module;
 
 		// All `:export`-style exports are collected into a single
@@ -916,6 +1005,8 @@ class CssParser extends Parser {
 			exportMode = CssIcssExportDependency.EXPORT_MODE.REPLACE,
 			exportType = CssIcssExportDependency.EXPORT_TYPE.NORMAL
 		) => {
+			// Flat location numbers — the nested loc objects were the parser's
+			// hottest allocation (3 objects per exported name).
 			cssExportEntries.push({
 				name,
 				value,
@@ -923,7 +1014,10 @@ class CssParser extends Parser {
 				interpolate,
 				exportMode,
 				exportType,
-				loc: { start: { line: sl, column: sc }, end: { line: el, column: ec } }
+				locStartLine: sl,
+				locStartColumn: sc,
+				locEndLine: el,
+				locEndColumn: ec
 			});
 		};
 
@@ -940,12 +1034,29 @@ class CssParser extends Parser {
 
 		const isModules = mode === "global" || mode === "local";
 
+		/** @type {Map<string, boolean>} */
+		const selfReferenceCache = new Map();
+
 		/**
 		 * Whether a relative `from "<request>"` resolves back to the current module (matching query/fragment too).
+		 * Memoized per parse — `composes … from "./x.css"` repeats the same request many times per file.
 		 * @param {string} request request string from `from "<request>"`
 		 * @returns {boolean} true if request resolves to the current module
 		 */
 		const isSelfReferenceRequest = (request) => {
+			const cached = selfReferenceCache.get(request);
+			if (cached !== undefined) return cached;
+			const result = isSelfReferenceRequestUncached(request);
+			selfReferenceCache.set(request, result);
+			return result;
+		};
+
+		/**
+		 * Uncached `isSelfReferenceRequest`.
+		 * @param {string} request request string from `from "<request>"`
+		 * @returns {boolean} true if request resolves to the current module
+		 */
+		const isSelfReferenceRequestUncached = (request) => {
 			if (!RELATIVE_REQUEST.test(request)) return false;
 			if (!module.context) return false;
 			const parsedRequest = parseResource(request);
@@ -969,6 +1080,7 @@ class CssParser extends Parser {
 			customIdents: this.options.customIdents,
 			grid: this.options.grid
 		});
+		const knownPropertyIndex = getKnownPropertyIndex(knownProperties);
 
 		/** @type {CssModuleBuildMeta} */
 		(module.buildMeta).isCssModule = isModules;
@@ -1011,14 +1123,21 @@ class CssParser extends Parser {
 		};
 
 		/**
-		 * Apply the magic comments in `range`: warn on any compilation error, validate `webpackIgnore`, and report whether the resource is ignored (so the caller skips emitting its dependency).
+		 * Apply the magic comments in `range`: warn on any compilation error, validate `webpackIgnore`, and return both the parsed options (for resource-hint / other magic-comment consumers) and whether the resource is ignored.
 		 * @param {Range} range byte range to scan for magic comments
 		 * @param {number} warnStart start offset of the loc for an invalid-`webpackIgnore` warning (computed lazily)
 		 * @param {number} warnEnd end offset of that loc
-		 * @returns {boolean} true when `webpackIgnore: true`
+		 * @returns {{ ignored: boolean, options: Record<string, EXPECTED_ANY> | null }} parsed options and `webpackIgnore` flag
 		 */
-		const webpackIgnored = (range, warnStart, warnEnd) => {
-			const { options, errors } = parseCommentOptions(range);
+		const magicCommentsIn = (range, warnStart, warnEnd) => {
+			/** @type {{ options: Record<string, EXPECTED_ANY> | null, errors: (Error & { comment: Comment })[] | null }} */
+			const { options, errors } = parseCommentOptionsInRange(
+				/** @type {(Comment & { range: [number, number], value: string })[]} */ (
+					comments
+				),
+				range,
+				this.magicCommentContext
+			);
 			if (errors) {
 				for (const e of errors) {
 					state.module.addWarning(
@@ -1029,6 +1148,7 @@ class CssParser extends Parser {
 					);
 				}
 			}
+			let ignored = false;
 			if (options && options.webpackIgnore !== undefined) {
 				if (typeof options.webpackIgnore !== "boolean") {
 					// Loc is computed lazily here — it's only needed for this rare
@@ -1040,15 +1160,38 @@ class CssParser extends Parser {
 						)
 					);
 				} else {
-					return options.webpackIgnore;
+					ignored = options.webpackIgnore;
 				}
 			}
-			return false;
+			return { ignored, options };
 		};
+		/**
+		 * Backwards-compatible boolean shortcut of {@link magicCommentsIn} for call sites that only need the ignore flag.
+		 * @param {Range} range byte range to scan for magic comments
+		 * @param {number} warnStart start offset of the loc for an invalid-`webpackIgnore` warning
+		 * @param {number} warnEnd end offset of that loc
+		 * @returns {boolean} true when `webpackIgnore: true`
+		 */
+		const webpackIgnored = (range, warnStart, warnEnd) =>
+			magicCommentsIn(range, warnStart, warnEnd).ignored;
 
 		// Closure-scope alias for `source` used by AST-walking helpers for substring extraction.
 		const input = source;
 
+		// `@custom-media` / `@custom-selector` are build-time only (no engine ships them), so they're resolved by file-local substitution. The `includes` gates keep files without them at zero overhead; definitions may follow their uses (names are stylesheet-global), so uses are collected during the walk and resolved after it.
+		const mayHaveCustomMedia =
+			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} */
+		let customMediaDefs;
+		/** @type {{ name: string, start: number, end: number, invalid: boolean, leading: boolean }[] | undefined} */
+		let customMediaUses;
+		/** @type {Map<string, string> | undefined} */
+		let customSelectorDefs;
+		/** @type {{ name: string, start: number, end: number }[] | undefined} */
+		let customSelectorUses;
+
 		/**
 		 * Unescape a CSS identifier from a source byte range — for value spans not
 		 * backed by a single token (string contents, `--` dashed-ident bodies,
@@ -1242,18 +1385,17 @@ class CssParser extends Parser {
 			modeData ? modeData === "local" : mode === "local";
 
 		/**
-		 * Comment callback: push every comment-token (in source order) onto the local `comments`, read back by `advanceCommentCursor` (pure-mode flags) and `parseCommentOptions` (magic comments).
-		 * @param {string} input input
-		 * @param {number} start start
-		 * @param {number} end end
-		 * @returns {number} end
+		 * Comment visitor (`NodeType.Comment`): push every comment (in source order) onto the local `comments`, read back by `advanceCommentCursor` (pure-mode flags) and `parseCommentOptionsInRange` (magic comments).
+		 * @param {import("./syntax").CssPath} path walk path at the comment node
 		 */
-		const comment = (input, start, end) => {
+		const commentVisitor = (path) => {
+			const node = path.node;
+			const start = A.start(node);
+			const end = A.end(node);
 			comments.push({
-				value: input.slice(start + 2, end - 2),
+				value: source.slice(start + 2, end - 2),
 				range: [start, end]
 			});
-			return end;
 		};
 
 		/**
@@ -1274,88 +1416,6 @@ class CssParser extends Parser {
 			};
 		})();
 
-		const magicCommentContext = this.magicCommentContext;
-
-		/**
-		 * Comments fully inside `range`, via binary search over the source-ordered `comments`.
-		 * @param {Range} range range
-		 * @returns {Comment[]} comments in the range
-		 */
-		const getComments = (range) => {
-			// No comments: skip the binary search + result-array allocation (the common case — most CSS has no magic comments).
-			if (comments.length === 0) return [];
-			const [start, end] = range;
-			let idx = binarySearchBounds.ge(comments, start, compareCommentStart);
-			/** @type {Comment[]} */
-			const commentsInRange = [];
-			while (comments[idx] && comments[idx].range[1] <= end) {
-				commentsInRange.push(comments[idx]);
-				idx++;
-			}
-			return commentsInRange;
-		};
-
-		/**
-		 * Parse webpack magic-comment options from any comment inside `range`.
-		 * @param {Range} range range of the comment
-		 * @returns {{ options: Record<string, EXPECTED_ANY> | null, errors: (Error & { comment: Comment })[] | null }} result
-		 */
-		const parseCommentOptions = (range) => {
-			const found = getComments(range);
-			if (found.length === 0) {
-				return EMPTY_COMMENT_OPTIONS;
-			}
-			/** @type {Record<string, EXPECTED_ANY>} */
-			const options = {};
-			/** @type {(Error & { comment: Comment })[]} */
-			const errors = [];
-			for (const c of found) {
-				const { value } = c;
-				if (value && webpackCommentRegExp.test(value)) {
-					// Fast path for the common `webpackXxx: <bool|number|null>` pair, keeping it out of `vm.runInContext`.
-					const fast = MAGIC_COMMENT_FAST_PATH.exec(value);
-					if (fast !== null) {
-						const key = fast[1];
-						const raw = fast[2];
-						options[key] =
-							raw === "true"
-								? true
-								: raw === "false"
-									? false
-									: raw === "null"
-										? null
-										: Number(raw);
-						continue;
-					}
-					// try compile only if webpack options comment is present
-					try {
-						for (let [key, val] of Object.entries(
-							vm.runInContext(
-								`(function(){return {${value}};})()`,
-								magicCommentContext
-							)
-						)) {
-							if (typeof val === "object" && val !== null) {
-								val =
-									val.constructor.name === "RegExp"
-										? new RegExp(val)
-										: JSON.parse(JSON.stringify(val));
-							}
-							options[key] = val;
-						}
-					} catch (err) {
-						const newErr = new Error(
-							String(/** @type {Error} */ (err).message)
-						);
-						newErr.stack = String(/** @type {Error} */ (err).stack);
-						Object.assign(newErr, { comment: c });
-						errors.push(/** @type {(Error & { comment: Comment })} */ (newErr));
-					}
-				}
-			}
-			return { options, errors };
-		};
-
 		// CSS modules stuff
 
 		/**
@@ -1516,10 +1576,9 @@ class CssParser extends Parser {
 				for (const cv of A.children(fn)) {
 					if (A.type(cv) !== NodeType.Ident) continue;
 					let identifier = A.unescaped(cv);
-					const {
-						start: { line: sl, column: sc },
-						end: { line: el, column: ec }
-					} = A.loc(cv);
+					// Cursor reads instead of `A.loc` — no location objects allocated.
+					const { line: sl, column: sc } = locConverter.get(A.start(cv));
+					const { line: el, column: ec } = locConverter.get(A.end(cv));
 					const isDashedIdent = isDashedIdentifier(identifier);
 					if (isDashedIdent) identifier = identifier.slice(2);
 					addCssExport(
@@ -1560,10 +1619,8 @@ class CssParser extends Parser {
 				if (cvType === NodeType.String) {
 					if (!found && options.string) {
 						const value = A.unescaped(cv);
-						const {
-							start: { line: sl, column: sc },
-							end: { line: el, column: ec }
-						} = A.loc(cv);
+						const { line: sl, column: sc } = locConverter.get(A.start(cv));
+						const { line: el, column: ec } = locConverter.get(A.end(cv));
 						addCssExport(
 							sl,
 							sc,
@@ -1590,10 +1647,8 @@ class CssParser extends Parser {
 						) {
 							continue;
 						}
-						const {
-							start: { line: sl, column: sc },
-							end: { line: el, column: ec }
-						} = A.loc(cv);
+						const { line: sl, column: sc } = locConverter.get(A.start(cv));
+						const { line: el, column: ec } = locConverter.get(A.end(cv));
 						addCssExport(
 							sl,
 							sc,
@@ -1614,9 +1669,12 @@ class CssParser extends Parser {
 
 				if (cvType === NodeType.Function) {
 					const fn = /** @type {FunctionNode} */ (cv);
-					const fname = A.unescapedName(fn).toLowerCase();
-					const type =
-						fname === "local" ? 1 : fname === "global" ? 2 : undefined;
+					const fname = A.unescapedName(fn);
+					const type = equalsLowerCase(fname, "local")
+						? 1
+						: equalsLowerCase(fname, "global")
+							? 2
+							: undefined;
 					if (!found && type) {
 						found = true;
 						if (type === 1) pure.markLocal();
@@ -1626,7 +1684,7 @@ class CssParser extends Parser {
 					if (
 						this.options.dashedIdents &&
 						isLocalMode() &&
-						(fname === "var" || fname === "style")
+						(equalsLowerCase(fname, "var") || equalsLowerCase(fname, "style"))
 					) {
 						processDashedIdentInVarFunction(fn);
 					}
@@ -1758,7 +1816,7 @@ class CssParser extends Parser {
 			if (
 				j >= fv.length ||
 				A.type(fv[j]) !== NodeType.Ident ||
-				!equalsLowerCase(A.value(fv[j]), "from")
+				!rangeEqualsLowerCase(input, A.start(fv[j]), A.end(fv[j]), "from")
 			) {
 				emitDashedIdentExport(identStart, identEnd);
 				return;
@@ -1772,7 +1830,10 @@ class CssParser extends Parser {
 			if (j >= fv.length) return;
 
 			const src = fv[j];
-			if (A.type(src) === NodeType.Ident && A.value(src) === "global") {
+			if (
+				A.type(src) === NodeType.Ident &&
+				rangeEquals(input, A.start(src), A.end(src), "global")
+			) {
 				emitDashedIdentFromGlobal(identEnd, A.end(src));
 				return;
 			}
@@ -1849,7 +1910,7 @@ class CssParser extends Parser {
 
 		/**
 		 * 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 }[]}
+		 * @type {{ savedAnchor: boolean, savedLocalIdentifiers: string[], name: string, hasBlock: boolean, endsWithSemicolon: boolean, fontPreloaded: boolean }[]}
 		 */
 		const atRuleStateStack = [];
 
@@ -1901,7 +1962,7 @@ class CssParser extends Parser {
 			if (isLocal) {
 				while (
 					trailStart > 0 &&
-					isCssWhitespace(source.charCodeAt(trailStart - 1))
+					isWhitespace(source.charCodeAt(trailStart - 1))
 				) {
 					trailStart--;
 				}
@@ -1987,6 +2048,37 @@ class CssParser extends Parser {
 			);
 		};
 
+		/**
+		 * Scope a `::view-transition-*()` pseudo-element's `(<pt-name> .<pt-class>…)` argument: each non-dashed custom-ident (the part name and its classes) is localized like a `view-transition-name` value; `*` and dashed idents are left untouched. Keeps the pseudo consistent with the scoped `view-transition-name`/`-class` declarations.
+		 * @param {AstNode[]} cvs the pseudo-element's argument component values
+		 * @returns {void}
+		 */
+		const walkViewTransitionPart = (cvs) => {
+			// customIdents off: leave the whole `(…)` untouched (both name and classes), consistent with unscoped `view-transition-name`/`-class` declarations.
+			if (!this.options.customIdents) return;
+			for (const cv of cvs) {
+				if (A.type(cv) !== NodeType.Ident) continue;
+				const name = A.unescaped(cv);
+				if (isDashedIdentifier(name)) continue;
+				const start = A.start(cv);
+				const end = A.end(cv);
+				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
+				);
+				pure.markLocal();
+			}
+		};
+
 		/**
 		 * 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
@@ -2070,10 +2162,22 @@ class CssParser extends Parser {
 						}
 						break;
 					}
-					case NodeType.Function:
+					case NodeType.Function: {
+						// `::view-transition-group(name .class…)` etc.: scope the part name + classes as custom idents (the `v` char guard skips the slice for the common `:is`/`:not`/… functions).
+						const fnNameStart = A.nameStart(v);
+						if (
+							segmentMode === "local" &&
+							(input.charCodeAt(fnNameStart) === CC_LOWER_V ||
+								input.charCodeAt(fnNameStart) === CC_UPPER_V) &&
+							VIEW_TRANSITION_PART_PSEUDO.test(A.unescapedName(v))
+						) {
+							walkViewTransitionPart(A.children(v));
+							break;
+						}
 						// Any other function (`:not(…)`, `:is(…)`, …): recurse with the segment mode preserved (only `:local(…)` / `:global(…)`, handled above, switch mode).
 						walkSelectorList(A.children(v), segmentMode, false);
 						break;
+					}
 					case NodeType.Hash: {
 						if (A.typeFlag(v) !== "id" || segmentMode !== "local") {
 							break;
@@ -2081,10 +2185,8 @@ class CssParser extends Parser {
 						// ID selectors emit the ICSS export but aren't a `composes:` anchor.
 						const idValueStart = A.start(v) + 1;
 						const idName = A.unescaped(v);
-						const {
-							start: { line: idSl, column: idSc },
-							end: { line: idEl, column: idEc }
-						} = A.loc(v);
+						const { line: idSl, column: idSc } = locConverter.get(A.start(v));
+						const { line: idEl, column: idEc } = locConverter.get(A.end(v));
 						addCssExport(
 							idSl,
 							idSc,
@@ -2124,10 +2226,9 @@ class CssParser extends Parser {
 						if (segmentMode === "local") {
 							// `.<ident>` in local mode is a class selector (dep covers the ident bytes only).
 							const name = A.unescaped(next);
-							const {
-								start: { line: sl, column: sc },
-								end: { line: el, column: ec }
-							} = A.loc(next);
+							// 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));
 							addCssExport(
 								sl,
 								sc,
@@ -2142,7 +2243,7 @@ class CssParser extends Parser {
 							currentRule.hasLocalAnchor = true;
 							currentRule.localIdentifiers.push(name);
 							pure.markLocal();
-						} else {
+						} else if (icssDefinitions.size !== 0) {
 							// `.<ident>` in global mode: not localized, but the ident may be `@value`-defined and need ICSS rewrite.
 							const ident = A.value(next);
 							if (!isDashedIdentifier(ident) && icssDefinitions.has(ident)) {
@@ -2154,7 +2255,8 @@ class CssParser extends Parser {
 						break;
 					}
 					case NodeType.Ident: {
-						// ICSS rewrite for a bare `@value`-defined ident used as a type-style selector.
+						// ICSS rewrite for a bare `@value`-defined ident used as a type-style selector; only worth the slice when definitions exist.
+						if (icssDefinitions.size === 0) break;
 						const ident = A.value(v);
 						if (!isDashedIdentifier(ident) && icssDefinitions.has(ident)) {
 							emitICSSSymbol(ident, A.start(v), A.end(v));
@@ -2181,10 +2283,8 @@ class CssParser extends Parser {
 		const urlActive = () => {
 			if (!this.options.url || !currentStructural) return false;
 			if (A.type(currentStructural) === NodeType.AtRule) {
-				return (
-					!equalsLowerCase(A.name(currentStructural), "import") ||
-					currentUrlRecovery
-				);
+				// `currentAtRuleName` is cached on at-rule enter — no per-value slice.
+				return currentAtRuleName !== "@import" || currentUrlRecovery;
 			}
 			return true;
 		};
@@ -2200,6 +2300,8 @@ class CssParser extends Parser {
 			name === "@namespace" ||
 			name === "@value" ||
 			name === "@scope" ||
+			(mayHaveCustomMedia && name === "@custom-media") ||
+			(mayHaveCustomSelectors && name === "@custom-selector") ||
 			(isModules &&
 				((this.options.animation &&
 					OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)) ||
@@ -2231,7 +2333,10 @@ class CssParser extends Parser {
 			const t = A.type(currentStructural);
 			if (t === NodeType.AtRule) {
 				return (
-					currentAtRuleName !== "@value" && currentAtRuleName !== "@import"
+					currentAtRuleName !== "@value" &&
+					currentAtRuleName !== "@import" &&
+					currentAtRuleName !== "@custom-media" &&
+					currentAtRuleName !== "@custom-selector"
 				);
 			}
 			if (t === NodeType.Declaration) {
@@ -2524,7 +2629,7 @@ class CssParser extends Parser {
 			let resumeAt = A.end(decl);
 			if (source.charCodeAt(A.end(decl)) === CC_SEMICOLON) {
 				resumeAt = A.end(decl) + 1;
-				while (isCssWhitespace(source.charCodeAt(resumeAt))) resumeAt++;
+				while (isWhitespace(source.charCodeAt(resumeAt))) resumeAt++;
 			}
 			module.addPresentationalDependency(
 				new ConstDependency("", [A.nameStart(decl), resumeAt])
@@ -2534,23 +2639,20 @@ class CssParser extends Parser {
 		/**
 		 * Emit url() deps for a `url(...)` / `src(...)` / `image-set(...)` value function.
 		 * @param {FunctionNode} fn the function node
-		 * @param {string} fname the function name, lower-cased
+		 * @param {string} fname the unescaped function name (any case)
 		 */
 		const emitUrlFunction = (fn, fname) => {
-			if (fname === "url" || fname === "src") {
+			if (equalsLowerCase(fname, "url") || equalsLowerCase(fname, "src")) {
 				// Quoted `url("…")` / `src("…")`: first non-whitespace value must be the string token.
 				const first = A.children(fn)[nextNonWhitespace(A.children(fn), 0)];
 				if (!first || A.type(first) !== NodeType.String) return;
 				const string = /** @type {Token} */ (first);
-				if (
-					webpackIgnored(
-						[lastTokenEndForComments, A.start(fn)],
-						A.start(string),
-						A.end(string)
-					)
-				) {
-					return;
-				}
+				const { ignored, options } = magicCommentsIn(
+					[lastTokenEndForComments, A.start(fn)],
+					A.start(string),
+					A.end(string)
+				);
+				if (ignored) return;
 				const value = normalizeUrl(
 					input.slice(A.start(string) + 1, A.end(string) - 1),
 					true
@@ -2563,6 +2665,12 @@ class CssParser extends Parser {
 					"string"
 				);
 				setDepLoc(dep, A.start(string), A.end(string));
+				applyResourceHintDefaults(
+					dep,
+					value,
+					options,
+					rangeLoc(A.start(string), A.end(string))
+				);
 				module.addDependency(dep);
 				module.addCodeGenerationDependency(dep);
 			} else if (IMAGE_SET_FUNCTION.test(fname)) {
@@ -2587,21 +2695,24 @@ class CssParser extends Parser {
 						true
 					);
 					if (value.length === 0) continue;
-					if (
-						webpackIgnored(
-							[start, A.end(string)],
-							A.start(string),
-							A.end(string)
-						)
-					) {
-						continue;
-					}
+					const { ignored, options } = magicCommentsIn(
+						[start, A.end(string)],
+						A.start(string),
+						A.end(string)
+					);
+					if (ignored) continue;
 					const dep = new CssUrlDependency(
 						value,
 						[A.start(string), A.end(string)],
 						"url"
 					);
 					setDepLoc(dep, A.start(string), A.end(string));
+					applyResourceHintDefaults(
+						dep,
+						value,
+						options,
+						rangeLoc(A.start(string), A.end(string))
+					);
 					module.addDependency(dep);
 					module.addCodeGenerationDependency(dep);
 				}
@@ -2925,6 +3036,336 @@ class CssParser extends Parser {
 			module.addPresentationalDependency(dep);
 		};
 
+		/**
+		 * The lone dashed-ident name of a `( … )` block, or `undefined` — `(--foo)` yields `--foo`, `(--foo: 1px)` / `(min-width: 0)` yield `undefined`. `hasExtra` reports whether any non-whitespace token follows the ident (a boolean-context violation).
+		 * @param {SimpleBlock} block parenthesised block node
+		 * @param {{ hasExtra: boolean }} out extra-token flag output
+		 * @returns {string | undefined} the dashed-ident name, or undefined
+		 */
+		const loneDashedIdentOfBlock = (block, out) => {
+			out.hasExtra = false;
+			let ident;
+			for (const k of A.children(block)) {
+				if (A.type(k) === NodeType.Whitespace) continue;
+				if (ident !== undefined) {
+					out.hasExtra = true;
+					return ident;
+				}
+				if (A.type(k) !== NodeType.Ident) return undefined;
+				const v = A.value(k);
+				if (!isDashedIdentifier(v)) return undefined;
+				ident = v;
+			}
+			return ident;
+		};
+
+		/**
+		 * 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).
+		 * @param {AtRule} at the `@custom-media` at-rule
+		 */
+		const collectCustomMedia = (at) => {
+			const start = A.start(at);
+			const end = A.end(at);
+			const ruleEnd = input.charCodeAt(end) === CC_SEMICOLON ? end + 1 : end;
+			module.addPresentationalDependency(
+				new ConstDependency("", [start, ruleEnd])
+			);
+
+			const prelude = A.prelude(at);
+			let i = 0;
+			while (i < prelude.length && A.type(prelude[i]) === NodeType.Whitespace) {
+				i++;
+			}
+			if (i >= prelude.length || A.type(prelude[i]) !== NodeType.Ident) return;
+			const name = A.value(prelude[i]);
+			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;
+			}
+
+			let hasComma = false;
+			for (let k = vs; k < ve; k++) {
+				if (A.type(prelude[k]) === NodeType.Comma) {
+					hasComma = true;
+					break;
+				}
+			}
+
+			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;
+				}
+				if (A.type(first) !== NodeType.Ident) {
+					store("", "unsupported");
+					return;
+				}
+				if (
+					rangeEqualsLowerCase(input, A.start(first), A.end(first), "true") ||
+					rangeEqualsLowerCase(input, A.start(first), A.end(first), "false")
+				) {
+					store("", "unsupported");
+					return;
+				}
+				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.
+					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;
+				}
+				// `screen`, `only screen`, `screen and (…)`, …
+				store(valueText, "type");
+				return;
+			}
+
+			// Comma list → `(seg1 or seg2 …)`; supported only when every segment is a media-in-parens.
+			/** @type {string[]} */
+			const segments = [];
+			let ok = true;
+			/** @type {AstNode[]} */
+			let seg = [];
+			const flush = () => {
+				let a = 0;
+				let b = seg.length;
+				while (a < b && A.type(seg[a]) === NodeType.Whitespace) a++;
+				while (b > a && A.type(seg[b - 1]) === NodeType.Whitespace) b--;
+				if (a >= b) {
+					ok = false;
+					return;
+				}
+				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 &&
+					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")
+				) {
+					segments.push(`(${text})`);
+				} else {
+					ok = false;
+				}
+			};
+			for (let k = vs; k < ve; k++) {
+				if (A.type(prelude[k]) === NodeType.Comma) {
+					flush();
+					seg = [];
+				} else {
+					seg.push(prelude[k]);
+				}
+			}
+			flush();
+			if (ok && segments.length > 0) {
+				store(
+					segments.length === 1 ? segments[0] : `(${segments.join(" or ")})`,
+					"condition"
+				);
+			} else {
+				store("", "unsupported");
+			}
+		};
+
+		/**
+		 * 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)
+		 */
+		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;
+					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);
+					}
+				} else if (tt === NodeType.Function) {
+					scanCustomMediaUses(A.children(t), false);
+				}
+				if (topLevel) leading = false;
+			}
+		};
+
+		/**
+		 * Collect one `@custom-selector :--name <selector-list>` definition (last-wins) and drop the rule.
+		 * @param {AtRule} at the `@custom-selector` at-rule
+		 */
+		const collectCustomSelector = (at) => {
+			const start = A.start(at);
+			const end = A.end(at);
+			const ruleEnd = input.charCodeAt(end) === CC_SEMICOLON ? end + 1 : end;
+			module.addPresentationalDependency(
+				new ConstDependency("", [start, ruleEnd])
+			);
+
+			const prelude = A.prelude(at);
+			let i = 0;
+			while (i < prelude.length && A.type(prelude[i]) === NodeType.Whitespace) {
+				i++;
+			}
+			if (i + 1 >= prelude.length || A.type(prelude[i]) !== NodeType.Colon) {
+				return;
+			}
+			const nameNode = prelude[i + 1];
+			if (
+				A.type(nameNode) !== NodeType.Ident ||
+				A.end(prelude[i]) !== A.start(nameNode)
+			) {
+				return;
+			}
+			const name = A.value(nameNode);
+			if (!isDashedIdentifier(name)) return;
+			const list = input.slice(A.end(nameNode), end).trim();
+			if (list.length === 0) return;
+			(customSelectorDefs || (customSelectorDefs = new Map())).set(name, list);
+		};
+
+		/**
+		 * Record every `:--name` custom-selector reference in a selector prelude (recursing into `:is(…)` etc.) for post-walk expansion. A `:--name` is a colon immediately followed by a dashed ident.
+		 * @param {readonly AstNode[]} tokens selector prelude (or nested) tokens
+		 */
+		const scanCustomSelectorUses = (tokens) => {
+			for (let k = 0; k < tokens.length; k++) {
+				const t = tokens[k];
+				const tt = A.type(t);
+				if (tt === NodeType.Colon) {
+					const next = tokens[k + 1];
+					if (
+						next &&
+						A.type(next) === NodeType.Ident &&
+						A.end(t) === A.start(next) &&
+						isDashedIdentifier(A.value(next))
+					) {
+						(customSelectorUses || (customSelectorUses = [])).push({
+							name: A.value(next),
+							start: A.start(t),
+							end: A.end(next)
+						});
+					}
+				} else if (tt === NodeType.Function || tt === NodeType.SimpleBlock) {
+					scanCustomSelectorUses(A.children(t));
+				}
+			}
+		};
+
+		/**
+		 * 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.
+		 */
+		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 (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
+						);
+						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;
+					}
+					module.addPresentationalDependency(
+						new ConstDependency(def.text, [use.start, use.end])
+					);
+				}
+			}
+			if (customSelectorUses) {
+				for (const use of customSelectorUses) {
+					const list = customSelectorDefs && customSelectorDefs.get(use.name);
+					if (list === undefined) continue;
+					module.addPresentationalDependency(
+						new ConstDependency(`:is(${list})`, [use.start, use.end])
+					);
+				}
+			}
+		};
+
 		/**
 		 * Export the localizable idents / strings in a known property's value (`animation-name: foo`, grid line-names / template-areas, …). Top-level only, except `grid-template` recurses into `repeat(…)` and `[line-name]` blocks.
 		 * @param {Declaration} decl the declaration
@@ -2935,6 +3376,10 @@ 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.
+			const isViewTransitionProperty = Boolean(
+				declPropertyName.startsWith("view-transition")
+			);
 			const isGridTemplate = isGridProperty
 				? Boolean(
 						declPropertyName === "grid" ||
@@ -2994,7 +3439,15 @@ class CssParser extends Parser {
 								break;
 							}
 							const identifier = A.value(cv);
-							const keyword = identifier.toLowerCase();
+							// `view-transition-name: --foo` — a dashed name scopes as a custom property under `dashedIdents`, not as a plain ident export.
+							if (isViewTransitionProperty && isDashedIdentifier(identifier)) {
+								if (this.options.dashedIdents) {
+									emitDashedIdentExport(A.start(cv), A.end(cv));
+								}
+								break;
+							}
+							// Values are almost always lowercase already — avoid the copy.
+							const keyword = toLowerCaseIfNeeded(identifier);
 							parsedKeywords[keyword] =
 								typeof parsedKeywords[keyword] !== "undefined"
 									? parsedKeywords[keyword] + 1
@@ -3101,11 +3554,13 @@ class CssParser extends Parser {
 		// Drive the walk through SourceProcessor: structural enter / exit map to the `walkAst…Enter` / `…Exit` halves; value visitors handle url / ICSS / local-global.
 		/** @type {VisitorMap} */
 		const visitors = {
+			[NodeType.Comment]: commentVisitor,
 			[NodeType.AtRule]: {
 				// At-rule enter: scope save, name dispatch, prelude value context, pure-block push.
-				enter: (node, parent) => {
+				enter: (path) => {
+					const node = path.node;
 					const at = /** @type {AtRule} */ (node);
-					const topLevel = parent === null;
+					const topLevel = path.parent === null;
 					currentUrlRecovery = false;
 					advanceCommentCursor(A.start(at));
 					const savedAnchor = currentRule.hasLocalAnchor;
@@ -3115,7 +3570,7 @@ class CssParser extends Parser {
 					currentRule.localIdentifiers = isModules
 						? [...savedLocalIdentifiers]
 						: savedLocalIdentifiers;
-					const name = `@${A.name(at).toLowerCase()}`;
+					const name = `@${toLowerCaseIfNeeded(A.name(at))}`;
 					switch (name) {
 						case "@namespace": {
 							this._emitWarning(
@@ -3150,6 +3605,18 @@ class CssParser extends Parser {
 							handleImportAtRule(at, topLevel);
 							break;
 						}
+						case "@custom-media": {
+							if (mayHaveCustomMedia) collectCustomMedia(at);
+							break;
+						}
+						case "@custom-selector": {
+							if (mayHaveCustomSelectors) collectCustomSelector(at);
+							break;
+						}
+						case "@media": {
+							if (mayHaveCustomMedia) scanCustomMediaUses(A.prelude(at), true);
+							break;
+						}
 						default: {
 							if (!isModules) break;
 							if (name === "@value") {
@@ -3207,7 +3674,8 @@ class CssParser extends Parser {
 						this.options.dashedIdents &&
 						isModules &&
 						!isProcessedByLocalAtRule &&
-						effectiveLocalMode
+						effectiveLocalMode &&
+						!(mayHaveCustomMedia && name === "@media")
 					);
 					dashed.emit = dashed.active;
 
@@ -3260,11 +3728,13 @@ class CssParser extends Parser {
 						savedLocalIdentifiers,
 						name,
 						hasBlock: atHasBlock,
-						endsWithSemicolon: source.charCodeAt(A.end(at)) === CC_SEMICOLON
+						endsWithSemicolon: source.charCodeAt(A.end(at)) === CC_SEMICOLON,
+						fontPreloaded: false
 					});
 				},
 				// At-rule exit: pure-frame finalization, `suppressNextRulePrelude`, scope restore, top-level reset.
-				exit: (node, parent) => {
+				exit: (path) => {
+					const node = path.node;
 					const state = atRuleStateStack.pop();
 					if (!state) return;
 					if (state.hasBlock) {
@@ -3279,15 +3749,18 @@ class CssParser extends Parser {
 					}
 					currentRule.hasLocalAnchor = state.savedAnchor;
 					currentRule.localIdentifiers = state.savedLocalIdentifiers;
-					if (parent === null) finishTopLevelRule(node, true);
+					if (path.parent === null) finishTopLevelRule(node, true);
 				}
 			},
 			[NodeType.QualifiedRule]: {
-				// Qualified-rule enter: scope setup, selector + prelude context, pure-block push; `:import` / `:export` bail via `ctx.skipChildren()`.
-				enter: (node, parent, ctx) => {
+				// Qualified-rule enter: scope setup, selector + prelude context, pure-block push; `:import` / `:export` bail via `path.skipChildren()`.
+				enter: (path) => {
+					const node = path.node;
 					const rule = /** @type {QualifiedRule} */ (node);
-					const topLevel = parent === null;
+					const topLevel = path.parent === null;
 					advanceCommentCursor(A.start(rule));
+					// `:--name` custom-selector references (dashed idents never collide with the `:import`/`:export` ICSS preludes below).
+					if (mayHaveCustomSelectors) scanCustomSelectorUses(A.prelude(rule));
 					// `:import(…) { … }` / `:export { … }` ICSS pseudo-rules are processed inline at top level; nested ones bail out.
 					if (isModules) {
 						const rulePrelude = A.prelude(rule);
@@ -3325,7 +3798,7 @@ class CssParser extends Parser {
 									A.setEnd(rule, A.blockEnd(rule));
 								}
 								// Don't recurse into the body — handled inline above.
-								if (ctx) ctx.skipChildren();
+								path.skipChildren();
 								qualifiedRuleStateStack.push({ bailed: true });
 								return;
 							}
@@ -3400,7 +3873,8 @@ class CssParser extends Parser {
 					});
 				},
 				// Qualified-rule exit: pure-frame finalization, scope restore, top-level reset; no-op for bailed ICSS.
-				exit: (node, parent) => {
+				exit: (path) => {
+					const node = path.node;
 					const state = qualifiedRuleStateStack.pop();
 					if (!state || state.bailed) return;
 					pure.exitBlock();
@@ -3408,11 +3882,12 @@ class CssParser extends Parser {
 					currentRule.localIdentifiers = state.savedLocalIdentifiers;
 					currentRule.composesPrevFile = state.savedPrevComposesFile;
 					currentRule.composesFiles = state.savedComposesFiles;
-					if (parent === null) finishTopLevelRule(node, false);
+					if (path.parent === null) finishTopLevelRule(node, false);
 				}
 			},
 			// Top-level declarations are parse errors (dropped by `parseAStylesheet`), so a declaration's parent is always a block.
-			[NodeType.Declaration]: (node) => {
+			[NodeType.Declaration]: (path) => {
+				const node = path.node;
 				const decl = /** @type {Declaration} */ (node);
 				// Reset value-visitor context, read by the value visitors below.
 				currentStructural = decl;
@@ -3432,20 +3907,47 @@ class CssParser extends Parser {
 				// 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;
-				const declName = A.name(decl);
-				const declPropertyName = declName.replace(/^(-\w+-)/, "").toLowerCase();
-				// Cache the known-property flag so the per-token value visitors don't recompute it.
-				currentDeclIsKnownProperty = knownProperties.has(declPropertyName);
+				const nameStart = A.nameStart(decl);
+				const nameEnd = A.nameEnd(decl);
+				// Range-based name analysis — the common declaration never
+				// slices its name out of the source.
+				/** @type {string | undefined} */
+				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);
+				} else {
+					declPropertyName = knownPropertyForRange(
+						knownPropertyIndex,
+						source,
+						nameStart,
+						nameEnd
+					);
+					// Cache the known-property flag so the per-token value visitors don't recompute it.
+					currentDeclIsKnownProperty = declPropertyName !== undefined;
+				}
 				const effectiveLocalMode = isEffectivelyLocal();
 				// `composes:` with a local anchor: its strip-dep covers the whole declaration, so suppress the value's local/global/dashed/ICSS rewrites.
 				currentDeclComposesSkip =
 					currentRule.hasLocalAnchor &&
-					COMPOSES_PROPERTY.test(declPropertyName);
+					(declPropertyName !== undefined
+						? COMPOSES_PROPERTY.test(declPropertyName)
+						: rangeEqualsLowerCase(source, nameStart, nameEnd, "composes") ||
+							rangeEqualsLowerCase(source, nameStart, nameEnd, "compose-with"));
 				if (currentDeclComposesSkip) emitComposesWithAnchor(decl);
 				const skipForComposes = currentDeclComposesSkip;
 				// Known-property value localization (`animation-name: foo` exports `foo`).
 				if (effectiveLocalMode && currentDeclIsKnownProperty) {
-					emitKnownPropertyExports(decl, declPropertyName);
+					emitKnownPropertyExports(
+						decl,
+						/** @type {string} */ (declPropertyName)
+					);
 				}
 				// Dashed-ident (custom-property) export of the property name; the value's dashed idents are scoped by the Ident / Function visitors (top-level only for unknown properties).
 				if (
@@ -3453,24 +3955,33 @@ class CssParser extends Parser {
 					effectiveLocalMode &&
 					!skipForComposes
 				) {
-					if (isDashedIdentifier(declName)) {
-						emitDashedIdentExport(A.nameStart(decl), A.nameEnd(decl));
+					// Only the `-`-prefixed path can carry a dashed ident.
+					if (declName !== undefined && isDashedIdentifier(declName)) {
+						emitDashedIdentExport(nameStart, nameEnd);
 					}
 					dashed.active = true;
 					dashed.emit = !currentDeclIsKnownProperty;
 				}
-				// ICSS-symbol rewrite (`color: foo` when `foo` is `@value`-defined), skipping known properties, the composes anchor, and dashed idents (handled above).
+				// ICSS-symbol rewrite (`color: foo` when `foo` is `@value`-defined), skipping known properties, the composes anchor, and dashed idents (handled above). Nothing to rewrite without definitions — don't slice the name.
 				if (
 					!skipForComposes &&
 					!currentDeclIsKnownProperty &&
-					!(dashed.active && isDashedIdentifier(declName)) &&
-					icssDefinitions.has(declName)
+					icssDefinitions.size !== 0
 				) {
-					emitICSSSymbol(declName, A.nameStart(decl), A.nameEnd(decl));
+					if (declName === undefined) {
+						declName = source.slice(nameStart, nameEnd);
+					}
+					if (
+						!(dashed.active && isDashedIdentifier(declName)) &&
+						icssDefinitions.has(declName)
+					) {
+						emitICSSSymbol(declName, nameStart, nameEnd);
+					}
 				}
 			},
 			// Value-level visitors decide handling from the enclosing node via `urlActive()` / `localGlobalActive()` / `icssActive()`.
-			[NodeType.Url]: (node) => {
+			[NodeType.Url]: (path) => {
+				const node = path.node;
 				const url = /** @type {UrlToken} */ (node);
 				if (!urlActive()) return;
 				// Skip bare url-tokens for a known property in CSS-Modules local mode.
@@ -3483,15 +3994,12 @@ class CssParser extends Parser {
 				) {
 					return;
 				}
-				if (
-					webpackIgnored(
-						[lastTokenEndForComments, A.end(node)],
-						lastTokenEndForComments,
-						A.end(node)
-					)
-				) {
-					return;
-				}
+				const { ignored, options: urlComments } = magicCommentsIn(
+					[lastTokenEndForComments, A.end(node)],
+					lastTokenEndForComments,
+					A.end(node)
+				);
+				if (ignored) return;
 				let value = normalizeUrl(
 					input.slice(A.contentStart(url), A.contentEnd(url)),
 					false
@@ -3527,28 +4035,36 @@ class CssParser extends Parser {
 					"url"
 				);
 				setDepLoc(dep, A.start(node), A.end(node));
+				applyResourceHintDefaults(
+					dep,
+					value,
+					urlComments,
+					rangeLoc(A.start(node), A.end(node))
+				);
 				module.addDependency(dep);
 				module.addCodeGenerationDependency(dep);
 			},
-			[NodeType.Comma](node) {
+			[NodeType.Comma](path) {
+				const node = path.node;
 				if (urlActive()) lastTokenEndForComments = A.start(node);
 			},
 			[NodeType.Function]: {
-				enter: (node) => {
+				enter: (path) => {
+					const node = path.node;
 					const fn = /** @type {FunctionNode} */ (node);
 					const fnameRaw = A.unescapedName(fn);
-					const fname = fnameRaw.toLowerCase();
-					if (urlActive()) emitUrlFunction(fn, fname);
-					if (
-						localGlobalActive() &&
-						(fname === "local" || fname === "global")
-					) {
-						processLocalOrGlobalFunction(fn, fname === "local" ? 1 : 2);
+					// `equalsLowerCase` keeps this visitor free of a per-function
+					// lowercased copy — functions are the densest value nodes.
+					const isLocalFn = equalsLowerCase(fnameRaw, "local");
+					const isGlobalFn = !isLocalFn && equalsLowerCase(fnameRaw, "global");
+					if (urlActive()) emitUrlFunction(fn, fnameRaw);
+					if (localGlobalActive() && (isLocalFn || isGlobalFn)) {
+						processLocalOrGlobalFunction(fn, isLocalFn ? 1 : 2);
 					}
 					if (
 						icssActive() &&
-						fname !== "local" &&
-						fname !== "global" &&
+						!isLocalFn &&
+						!isGlobalFn &&
 						!(dashed.active && isDashedIdentifier(fnameRaw)) &&
 						icssDefinitions.has(fnameRaw)
 					) {
@@ -3557,10 +4073,13 @@ class CssParser extends Parser {
 					// Dashed-ident scoping: handle this function, then set the child nesting level's state for the walk.
 					dashed.push();
 					if (dashed.active) {
-						if (fname === "local" || fname === "global") {
+						if (isLocalFn || isGlobalFn) {
 							// `local()` / `global()` dashed args go through the ICSS path above, not here.
 							dashed.active = false;
-						} else if (fname === "var" || fname === "style") {
+						} else if (
+							equalsLowerCase(fnameRaw, "var") ||
+							equalsLowerCase(fnameRaw, "style")
+						) {
 							// `var(--foo, …)` / `style(--foo, …)`: emit the first ident; the fallback doesn't self-emit.
 							processDashedIdentInVarFunction(fn);
 							dashed.emit = false;
@@ -3574,34 +4093,46 @@ class CssParser extends Parser {
 					dashed.pop();
 				}
 			},
-			[NodeType.Ident](node, parent) {
+			[NodeType.Ident](path) {
+				const node = path.node;
 				// Fast exit before slicing the ident value: outside dashed-ident scoping
 				// 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.
+				// `value` slice matters. With no `@value`/`:import` definitions the ICSS
+				// probe can never hit, so it doesn't warrant the slice either.
 				const dashedActive = dashed.active;
-				const icss = icssActive();
+				const icss = icssActive() && icssDefinitions.size !== 0;
 				if (!dashedActive && !icss) return;
 				const identValue = A.value(node);
 				if (dashedActive && isDashedIdentifier(identValue)) {
 					// 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.
-					const siblings = childrenOf(parent);
+					const siblings = childrenOf(path.parent);
 					const i = siblings ? siblings.indexOf(node) : -1;
 					if (siblings && i !== -1) {
 						const j = nextNonWhitespace(siblings, i + 1);
 						if (
 							j < siblings.length &&
 							A.type(siblings[j]) === NodeType.Ident &&
-							equalsLowerCase(A.value(siblings[j]), "from")
+							rangeEqualsLowerCase(
+								input,
+								A.start(siblings[j]),
+								A.end(siblings[j]),
+								"from"
+							)
 						) {
 							const fromIdent = siblings[j];
 							const sourceNode = siblings[nextNonWhitespace(siblings, j + 1)];
 							if (
 								sourceNode &&
 								A.type(sourceNode) === NodeType.Ident &&
-								A.value(sourceNode) === "global"
+								rangeEquals(
+									input,
+									A.start(sourceNode),
+									A.end(sourceNode),
+									"global"
+								)
 							) {
 								emitDashedIdentFromGlobal(A.end(node), A.end(sourceNode));
 								return;
@@ -3628,14 +4159,24 @@ class CssParser extends Parser {
 			}
 		};
 		// `as` selects the top-level production (§5.3): a `style` attribute is a
-		// block's contents, everything else a full stylesheet (the default).
-		new SourceProcessor()
+		// block's contents, everything else a full stylesheet (the default). `as`
+		// and `skip` are per-parse config on the processor; only `locConverter`
+		// (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
+		})
 			.use(/** @type {VisitorMap} */ (visitors))
-			.process(source, {
-				locConverter,
-				comment,
-				as: /** @type {"stylesheet" | "block-contents"} */ (this.options.as)
-			});
+			.process(source, { locConverter });
+
+		if (customMediaUses || customSelectorUses) resolveCustomMediaAndSelectors();
 
 		/** @type {BuildInfo} */
 		(module.buildInfo).strict = true;