webpack 5.106.1 → 5.107.0

package/lib/css/CssParser.js

@@ -5,13 +5,10 @@
 
 "use strict";
 
+const path = require("path");
 const vm = require("vm");
-const CommentCompilationWarning = require("../CommentCompilationWarning");
-const ModuleDependencyWarning = require("../ModuleDependencyWarning");
 const { CSS_MODULE_TYPE_AUTO } = require("../ModuleTypeConstants");
 const Parser = require("../Parser");
-const UnsupportedFeatureWarning = require("../UnsupportedFeatureWarning");
-const WebpackError = require("../WebpackError");
 const ConstDependency = require("../dependencies/ConstDependency");
 const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
 const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
@@ -19,12 +16,18 @@ 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 LocConverter = require("../util/LocConverter");
 const binarySearchBounds = require("../util/binarySearchBounds");
 const { parseResource } = require("../util/identifier");
 const {
 	createMagicCommentContext,
 	webpackCommentRegExp
 } = require("../util/magicComment");
+const topologicalSort = require("../util/topologicalSort");
 const walkCssTokens = require("./walkCssTokens");
 
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
@@ -32,8 +35,9 @@ const walkCssTokens = require("./walkCssTokens");
 /** @typedef {import("../Parser").ParserState} ParserState */
 /** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
 /** @typedef {import("./walkCssTokens").CssTokenCallbacks} CssTokenCallbacks */
+/** @typedef {import("../../declarations/WebpackOptions").CssAutoOrModuleParserOptions} CssAutoOrModuleParserOptions */
 /** @typedef {import("../../declarations/WebpackOptions").CssModuleParserOptions} CssModuleParserOptions */
-/** @typedef {import("../CssModule")} CssModule */
+/** @typedef {import("./CssModule")} CssModule */
 
 /** @typedef {[number, number]} Range */
 /** @typedef {{ line: number, column: number }} Position */
@@ -52,6 +56,7 @@ const CC_TILDE = "~".charCodeAt(0);
 const CC_EQUAL = "=".charCodeAt(0);
 const CC_FULL_STOP = ".".charCodeAt(0);
 const CC_EXCLAMATION = "!".charCodeAt(0);
+const CC_AMPERSAND = "&".charCodeAt(0);
 
 // https://www.w3.org/TR/css-syntax-3/#newline
 // We don't have `preprocessing` stage, so we need specify all of them
@@ -66,6 +71,7 @@ const IS_MODULES = /\.modules?\.[^.]+$/i;
 const CSS_COMMENT = /\/\*((?!\*\/)[\s\S]*?)\*\//g;
 
 /**
+ * Returns matches.
  * @param {RegExp} regexp a regexp
  * @param {string} str a string
  * @returns {RegExpExecArray[]} matches
@@ -87,6 +93,7 @@ const matchAll = (regexp, str) => {
 };
 
 /**
+ * Returns normalized url.
  * @param {string} str url string
  * @param {boolean} isString is url wrapped in quotes
  * @returns {string} normalized url
@@ -126,135 +133,7 @@ const normalizeUrl = (str, isString) => {
 	return str;
 };
 
-const regexSingleEscape = /[ -,./:-@[\]^`{-~]/;
-const regexExcessiveSpaces =
-	/(^|\\+)?(\\[A-F0-9]{1,6})\u0020(?![a-fA-F0-9\u0020])/g;
-
-/**
- * @param {string} str string
- * @returns {string} escaped identifier
- */
-const escapeIdentifier = (str) => {
-	let output = "";
-	let counter = 0;
-
-	while (counter < str.length) {
-		const character = str.charAt(counter++);
-
-		/** @type {string} */
-		let value;
-
-		if (/[\t\n\f\r\v]/.test(character)) {
-			const codePoint = character.charCodeAt(0);
-
-			value = `\\${codePoint.toString(16).toUpperCase()} `;
-		} else if (character === "\\" || regexSingleEscape.test(character)) {
-			value = `\\${character}`;
-		} else {
-			value = character;
-		}
-
-		output += value;
-	}
-
-	const firstChar = str.charAt(0);
-
-	if (/^-[-\d]/.test(output)) {
-		output = `\\-${output.slice(1)}`;
-	} else if (/\d/.test(firstChar)) {
-		output = `\\3${firstChar} ${output.slice(1)}`;
-	}
-
-	// Remove spaces after `\HEX` escapes that are not followed by a hex digit,
-	// since they’re redundant. Note that this is only possible if the escape
-	// sequence isn’t preceded by an odd number of backslashes.
-	output = output.replace(regexExcessiveSpaces, ($0, $1, $2) => {
-		if ($1 && $1.length % 2) {
-			// It’s not safe to remove the space, so don’t.
-			return $0;
-		}
-
-		// Strip the space.
-		return ($1 || "") + $2;
-	});
-
-	return output;
-};
-
-const CONTAINS_ESCAPE = /\\/;
-
-/**
- * @param {string} str string
- * @returns {[string, number] | undefined} hex
- */
-const gobbleHex = (str) => {
-	const lower = str.toLowerCase();
-	let hex = "";
-	let spaceTerminated = false;
-
-	for (let i = 0; i < 6 && lower[i] !== undefined; i++) {
-		const code = lower.charCodeAt(i);
-		// check to see if we are dealing with a valid hex char [a-f|0-9]
-		const valid = (code >= 97 && code <= 102) || (code >= 48 && code <= 57);
-		// https://drafts.csswg.org/css-syntax/#consume-escaped-code-point
-		spaceTerminated = code === 32;
-		if (!valid) break;
-		hex += lower[i];
-	}
-
-	if (hex.length === 0) return undefined;
-
-	const codePoint = Number.parseInt(hex, 16);
-	const isSurrogate = codePoint >= 0xd800 && codePoint <= 0xdfff;
-
-	// Add special case for
-	// "If this number is zero, or is for a surrogate, or is greater than the maximum allowed code point"
-	// https://drafts.csswg.org/css-syntax/#maximum-allowed-code-point
-	if (isSurrogate || codePoint === 0x0000 || codePoint > 0x10ffff) {
-		return ["\uFFFD", hex.length + (spaceTerminated ? 1 : 0)];
-	}
-
-	return [
-		String.fromCodePoint(codePoint),
-		hex.length + (spaceTerminated ? 1 : 0)
-	];
-};
-
-/**
- * @param {string} str string
- * @returns {string} unescaped string
- */
-const unescapeIdentifier = (str) => {
-	const needToProcess = CONTAINS_ESCAPE.test(str);
-	if (!needToProcess) return str;
-	let ret = "";
-	for (let i = 0; i < str.length; i++) {
-		if (str[i] === "\\") {
-			const gobbled = gobbleHex(str.slice(i + 1, i + 7));
-			if (gobbled !== undefined) {
-				ret += gobbled[0];
-				i += gobbled[1];
-				continue;
-			}
-			// Retain a pair of \\ if double escaped `\\\\`
-			// https://github.com/postcss/postcss-selector-parser/commit/268c9a7656fb53f543dc620aa5b73a30ec3ff20e
-			if (str[i + 1] === "\\") {
-				ret += "\\";
-				i += 1;
-				continue;
-			}
-			// if \\ is at the end of the string retain it
-			// https://github.com/postcss/postcss-selector-parser/commit/01a6b346e3612ce1ab20219acc26abdc259ccefb
-			if (str.length === i + 1) {
-				ret += str[i];
-			}
-			continue;
-		}
-		ret += str[i];
-	}
-
-	return ret;
-};
+const { escapeIdentifier, unescapeIdentifier } = walkCssTokens;
 
 /**
  * A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo.
@@ -406,6 +285,7 @@ const GRID = {
 };
 
 /**
+ * Gets known properties.
  * @param {{ animation?: boolean, container?: boolean, customIdents?: boolean, grid?: boolean }=} options options
  * @returns {Map<string, Record<string, number>>} list of known properties
  */
@@ -525,49 +405,6 @@ const getKnownProperties = (options = {}) => {
 	return knownProperties;
 };
 
-class LocConverter {
-	/**
-	 * @param {string} input input
-	 */
-	constructor(input) {
-		this._input = input;
-		this.line = 1;
-		this.column = 0;
-		this.pos = 0;
-	}
-
-	/**
-	 * @param {number} pos position
-	 * @returns {LocConverter} location converter
-	 */
-	get(pos) {
-		if (this.pos !== pos) {
-			if (this.pos < pos) {
-				const str = this._input.slice(this.pos, pos);
-				let i = str.lastIndexOf("\n");
-				if (i === -1) {
-					this.column += str.length;
-				} else {
-					this.column = str.length - i - 1;
-					this.line++;
-					while (i > 0 && (i = str.lastIndexOf("\n", i - 1)) !== -1) {
-						this.line++;
-					}
-				}
-			} else {
-				let i = this._input.lastIndexOf("\n", this.pos);
-				while (i >= pos) {
-					this.line--;
-					i = i > 0 ? this._input.lastIndexOf("\n", i - 1) : -1;
-				}
-				this.column = pos - i;
-			}
-			this.pos = pos;
-		}
-		return this;
-	}
-}
-
 const EMPTY_COMMENT_OPTIONS = {
 	options: null,
 	errors: null
@@ -583,14 +420,16 @@ const eatUntilSemi = walkCssTokens.eatUntil(";");
 const eatUntilLeftCurly = walkCssTokens.eatUntil("{");
 
 /**
+ * Defines the css parser own options type used by this module.
  * @typedef {object} CssParserOwnOptions
  * @property {("pure" | "global" | "local" | "auto")=} defaultMode default mode
  */
 
-/** @typedef {CssModuleParserOptions & CssParserOwnOptions} CssParserOptions */
+/** @typedef {CssAutoOrModuleParserOptions & CssParserOwnOptions} CssParserOptions */
 
 class CssParser extends Parser {
 	/**
+	 * Creates an instance of CssParser.
 	 * @param {CssParserOptions=} options options
 	 */
 	constructor(options = {}) {
@@ -615,6 +454,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Processes the provided state.
 	 * @param {ParserState} state parser state
 	 * @param {string} message warning message
 	 * @param {LocConverter} locConverter location converter
@@ -634,6 +474,28 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Emits a build error for the provided range.
+	 * @param {ParserState} state parser state
+	 * @param {string} message error message
+	 * @param {LocConverter} locConverter location converter
+	 * @param {number} start start offset
+	 * @param {number} end end offset
+	 */
+	_emitError(state, message, locConverter, start, end) {
+		const { line: sl, column: sc } = locConverter.get(start);
+		const { line: el, column: ec } = locConverter.get(end);
+
+		const err = new WebpackError(message);
+		err.module = state.module;
+		err.loc = {
+			start: { line: sl, column: sc },
+			end: { line: el, column: ec }
+		};
+		state.module.addError(err);
+	}
+
+	/**
+	 * Parses the provided source and updates the parser state.
 	 * @param {string | Buffer | PreparsedAst} source the source to parse
 	 * @param {ParserState} state the parser state
 	 * @returns {ParserState} the parser state
@@ -648,6 +510,10 @@ class CssParser extends Parser {
 			source = source.slice(1);
 		}
 
+		const unescapeIdentifierCached = unescapeIdentifier.bindCache(
+			state.compilation.compiler.root
+		);
+
 		let mode = this.defaultMode;
 
 		const module = state.module;
@@ -663,6 +529,40 @@ class CssParser extends Parser {
 		}
 
 		const isModules = mode === "global" || mode === "local";
+
+		const parsedModuleResource = parseResource(
+			/** @type {string} */ (module.getResource())
+		);
+
+		/**
+		 * Check whether a request points back to the current module
+		 * (e.g. `composes: foo from "./self.module.css"` inside `self.module.css`).
+		 * Only relative requests are checked — aliases / package / absolute requests
+		 * fall through to the normal import path. Requests with a `?query` or
+		 * `#fragment` are only treated as self when the parent module's resource
+		 * has the same query/fragment, since `NormalModuleFactory` keys modules
+		 * on the full resource string.
+		 * @param {string} request request string from `from "<request>"`
+		 * @returns {boolean} true if request resolves to the current module
+		 */
+		const isSelfReferenceRequest = (request) => {
+			if (!/^\.{1,2}\//.test(request)) return false;
+			if (!module.context) return false;
+			const parsedRequest = parseResource(request);
+			if (parsedRequest.query !== parsedModuleResource.query) return false;
+			if (parsedRequest.fragment !== parsedModuleResource.fragment) {
+				return false;
+			}
+			try {
+				return (
+					path.resolve(module.context, parsedRequest.path) ===
+					parsedModuleResource.path
+				);
+			} catch (_err) {
+				return false;
+			}
+		};
+
 		const knownProperties = getKnownProperties({
 			animation: this.options.animation,
 			container: this.options.container,
@@ -671,7 +571,11 @@ class CssParser extends Parser {
 		});
 
 		/** @type {BuildMeta} */
-		(module.buildMeta).isCSSModule = isModules;
+		(module.buildMeta).isCssModule = isModules;
+		if (/** @type {CssModule} */ (module).exportType === "style") {
+			/** @type {BuildMeta} */
+			(module.buildMeta).needIdInConcatenation = true;
+		}
 
 		const locConverter = new LocConverter(source);
 
@@ -695,11 +599,123 @@ class CssParser extends Parser {
 		/** @type {string[]} */
 		let lastLocalIdentifiers = [];
 
-		/** @typedef {{ value?: string, importName?: string, localName?: string }} IcssDefinition */
+		const pureMode = isModules && Boolean(this.options.pure);
+		/** @type {boolean} */
+		let currentSelectorHasLocal = false;
+		/** Whether any comma-separated selector in the current rule's prelude was impure. */
+		let currentRuleHasImpureSelector = false;
+		/** Offset just after the previous `}` (or 0) — used as the prelude start. */
+		let currentRulePreludeStart = 0;
+		/** Pure-mode flags (only meaningful when `pureMode` is true). */
+		let pureNoCheck = false;
+		let pureIgnorePending = false;
+		let nextBlockChildrenSkip = false;
+		let nextBlockTreatAsLeaf = false;
+		let seenTopLevelRule = false;
+		// True after an at-rule keyword and before the next `{` or `;`. Used so
+		// identifiers inside the at-rule prelude (e.g. `min-width` inside
+		// `@media (min-width: 768px)`) don't get counted as declarations.
+		let inAtRulePrelude = false;
+		/**
+		 * One entry per open block. `skipOwn` skips this rule's own check (set
+		 * when the parent passed down `skipChildren`, e.g. `from`/`to` inside
+		 * `@keyframes`). `skipChildren` is propagated to descendants. `ignored`
+		 * is per-rule only (PCSL semantics for `cssmodules-pure-ignore`).
+		 * `ancestorHadLocal` lets nested rules inherit purity from a
+		 * local-bearing ancestor.
+		 * @type {{
+		 * ignored: boolean,
+		 * skipOwn: boolean,
+		 * skipChildren: boolean,
+		 * treatAsLeaf: boolean,
+		 * ancestorHadLocal: boolean,
+		 * impure: boolean,
+		 * hasDirectDecl: boolean,
+		 * hasNestedBlock: boolean,
+		 * isRulePrelude: boolean,
+		 * preludeStart: number,
+		 * preludeEnd: number,
+		 * }[]}
+		 */
+		const pureBlockStack = [];
+
+		const PURE_IGNORE_RE = /^\s*cssmodules-pure-ignore(?:\s|$)/;
+		const PURE_NO_CHECK_RE = /^\s*cssmodules-pure-no-check(?:\s|$)/;
+
+		/**
+		 * @returns {(typeof pureBlockStack)[number] | undefined} top of stack
+		 */
+		const pureTop = () => pureBlockStack[pureBlockStack.length - 1];
+
+		/**
+		 * Was the parent rule pure overall (its own selectors pure or any
+		 * ancestor pure)? Used both for ancestor-inheritance and `&`-resolution.
+		 * @returns {boolean} true if any ancestor (self inclusive) provided a local
+		 */
+		const parentEffectivePure = () => {
+			const top = pureTop();
+			return top ? top.ancestorHadLocal : false;
+		};
+
+		/**
+		 * Marks the just-finished comma-separated selector (or whole prelude
+		 * at `{`) as impure if it lacks a local and no ancestor compensates.
+		 */
+		const finalizeSelector = () => {
+			if (!currentSelectorHasLocal && !parentEffectivePure()) {
+				currentRuleHasImpureSelector = true;
+			}
+			currentSelectorHasLocal = false;
+		};
+
+		/**
+		 * Reports a pure-mode violation covering the entire rule prelude.
+		 * @param {number} start prelude start offset
+		 * @param {number} end prelude end offset (`{` position)
+		 */
+		const reportPureRule = (start, end) => {
+			const slice = source.slice(start, end);
+			const lead = /** @type {RegExpExecArray} */ (
+				/^(?:\s|\/\*[\s\S]*?\*\/)*/.exec(slice)
+			)[0].length;
+			const trail = /** @type {RegExpExecArray} */ (/\s*$/.exec(slice))[0]
+				.length;
+			const from = start + lead;
+			const to = end - trail;
+			if (to <= from) return;
+			this._emitError(
+				state,
+				`Selector "${source.slice(from, to)}" is not pure (pure selectors must contain at least one local class or id)`,
+				locConverter,
+				from,
+				to
+			);
+		};
+
+		/** @typedef {{ value?: string, importName?: string, localName?: string, request?: string }} IcssDefinition */
 		/** @type {Map<string, IcssDefinition>} */
 		const icssDefinitions = new Map();
 
+		// Tracks `composes: <name> from "<file>"` declarations to enforce a
+		// predictable file load order across rules (port of
+		// postcss-modules-extract-imports#138). Each rule's composes order
+		// is a partial ordering: if `.x` composes `b from "./b"` before
+		// `c from "./c"`, then `b.css` must load before `c.css` so `c` can
+		// override `b` in the cascade. Edges are added inline as the rule
+		// is parsed; at end-of-parse the first composes-import dep of each
+		// file is tagged with `sourceOrder` according to a topological
+		// sort (`NormalModule#build` reorders by `sourceOrder` for us).
+		/** @type {Map<string, Set<string>>} */
+		const composesGraph = new Map();
+		/** @type {Map<string, CssIcssImportDependency>} */
+		const composesFirstFileImport = new Map();
+		/** @type {string | undefined} */
+		let currentRulePrevComposesFile;
+		/** @type {Set<string>} */
+		const currentRuleComposesFiles = new Set();
+
 		/**
+		 * Checks whether this css parser is next nested syntax.
 		 * @param {string} input input
 		 * @param {number} pos position
 		 * @returns {boolean} true, when next is nested syntax
@@ -731,12 +747,14 @@ class CssParser extends Parser {
 			return true;
 		};
 		/**
+		 * Checks whether this css parser is local mode.
 		 * @returns {boolean} true, when in local scope
 		 */
 		const isLocalMode = () =>
 			modeData === LOCAL_MODE || (mode === "local" && modeData === undefined);
 
 		/**
+		 * Returns end.
 		 * @param {string} input input
 		 * @param {number} start start
 		 * @param {number} end end
@@ -747,9 +765,11 @@ class CssParser extends Parser {
 			const { line: sl, column: sc } = locConverter.get(start);
 			const { line: el, column: ec } = locConverter.get(end);
 
+			const value = input.slice(start + 2, end - 2);
+
 			/** @type {Comment} */
 			const comment = {
-				value: input.slice(start + 2, end - 2),
+				value,
 				range: [start, end],
 				loc: {
 					start: { line: sl, column: sc },
@@ -757,12 +777,26 @@ class CssParser extends Parser {
 				}
 			};
 			this.comments.push(comment);
+
+			if (pureMode) {
+				if (PURE_IGNORE_RE.test(value)) {
+					pureIgnorePending = true;
+				} else if (
+					PURE_NO_CHECK_RE.test(value) &&
+					scope === CSS_MODE_TOP_LEVEL &&
+					!seenTopLevelRule
+				) {
+					pureNoCheck = true;
+				}
+			}
+
 			return end;
 		};
 
 		// Vanilla CSS stuff
 
 		/**
+		 * Processes the provided input.
 		 * @param {string} input input
 		 * @param {number} start name start position
 		 * @param {number} end name end position
@@ -774,7 +808,7 @@ class CssParser extends Parser {
 			});
 			if (!tokens[3]) return end;
 			const semi = tokens[3][1];
-			if (!tokens[0]) {
+			if (!tokens[0] || (tokens[0][4] && !isModules)) {
 				this._emitWarning(
 					state,
 					`Expected URL in '${input.slice(start, semi)}'`,
@@ -786,7 +820,48 @@ class CssParser extends Parser {
 			}
 
 			const urlToken = tokens[0];
-			const url = normalizeUrl(input.slice(urlToken[2], urlToken[3]), true);
+			/** @type {string} */
+			let url;
+			if (urlToken[4]) {
+				// URL given as identifier — resolve via CSS Modules @value.
+				const name = input.slice(urlToken[2], urlToken[3]);
+				const def = icssDefinitions.get(name);
+				if (!def) {
+					this._emitWarning(
+						state,
+						`Unknown '@value' identifier '${name}' in '${input.slice(start, semi)}'`,
+						locConverter,
+						start,
+						semi
+					);
+					// Consume the whole at-rule so the unresolved identifier
+					// doesn't get re-tokenized and accidentally substituted
+					// into a malformed `@import` in the output.
+					const dep = new ConstDependency("", [start, semi]);
+					module.addPresentationalDependency(dep);
+					return semi;
+				}
+				if (def.value === undefined) {
+					this._emitWarning(
+						state,
+						`'@value' identifier '${name}' was imported from another module and cannot be used as the URL of '@import' — only locally defined values are supported here`,
+						locConverter,
+						start,
+						semi
+					);
+					const dep = new ConstDependency("", [start, semi]);
+					module.addPresentationalDependency(dep);
+					return semi;
+				}
+				const raw = def.value.trim();
+				url =
+					(raw.startsWith('"') && raw.endsWith('"')) ||
+					(raw.startsWith("'") && raw.endsWith("'"))
+						? normalizeUrl(raw.slice(1, -1), true)
+						: normalizeUrl(raw, false);
+			} else {
+				url = normalizeUrl(input.slice(urlToken[2], urlToken[3]), true);
+			}
 			const newline = walkCssTokens.eatWhiteLine(input, semi);
 			const { options, errors: commentErrors } = this.parseCommentOptions([
 				end,
@@ -870,11 +945,23 @@ class CssParser extends Parser {
 			);
 			dep.setLoc(sl, sc, el, ec);
 			module.addDependency(dep);
+			// `text` and `css-style-sheet` parents inline the imported
+			// module's rendered CSS at build time, which means we read the
+			// imported module's `codeGenerationResults` (and through it the
+			// results of any assets the import references). Registering this
+			// as a code-generation dependency tells the compilation scheduler
+			// to generate the imported subtree before us.
+			const exportType = /** @type {import("./CssModule")} */ (module)
+				.exportType;
+			if (exportType === "text" || exportType === "css-style-sheet") {
+				module.addCodeGenerationDependency(dep);
+			}
 
 			return newline;
 		};
 
 		/**
+		 * Process url function.
 		 * @param {string} input input
 		 * @param {number} end end position
 		 * @param {string} name the name of function
@@ -937,6 +1024,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process old url function.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -986,9 +1074,32 @@ class CssParser extends Parser {
 					return end;
 				}
 			}
-			const value = normalizeUrl(input.slice(contentStart, contentEnd), false);
+			let value = normalizeUrl(input.slice(contentStart, contentEnd), false);
 			// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
 			if (value.length === 0) return end;
+			if (isModules) {
+				const def = icssDefinitions.get(value);
+				if (def) {
+					if (def.value !== undefined) {
+						const raw = def.value.trim();
+						value =
+							(raw.startsWith('"') && raw.endsWith('"')) ||
+							(raw.startsWith("'") && raw.endsWith("'"))
+								? normalizeUrl(raw.slice(1, -1), true)
+								: normalizeUrl(raw, false);
+						if (value.length === 0) return end;
+					} else {
+						this._emitWarning(
+							state,
+							`'@value' identifier '${value}' was imported from another module and cannot be used inside 'url()' — only locally defined values are supported here`,
+							locConverter,
+							start,
+							end
+						);
+						return end;
+					}
+				}
+			}
 			const dep = new CssUrlDependency(value, [start, end], "url");
 			const { line: sl, column: sc } = locConverter.get(start);
 			const { line: el, column: ec } = locConverter.get(end);
@@ -999,6 +1110,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process image set function.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -1063,10 +1175,11 @@ class CssParser extends Parser {
 		// CSS modules stuff
 
 		/**
+		 * Returns resolved reexport (localName and importName).
 		 * @param {string} value value to resolve
 		 * @param {string=} localName override local name
 		 * @param {boolean=} isCustomProperty true when it is custom property, otherwise false
-		 * @returns {string | [string, string]} resolved reexport (`localName` and `importName`)
+		 * @returns {string | [string, string] | [string, string, string]} resolved reexport (`localName`, `importName` and optional `request` of the active `@value` import)
 		 */
 		const getReexport = (value, localName, isCustomProperty) => {
 			const reexport = icssDefinitions.get(
@@ -1075,10 +1188,11 @@ class CssParser extends Parser {
 
 			if (reexport) {
 				if (reexport.importName) {
-					return [
-						reexport.localName || (isCustomProperty ? `--${value}` : value),
-						reexport.importName
-					];
+					const resolvedLocalName =
+						reexport.localName || (isCustomProperty ? `--${value}` : value);
+					return reexport.request
+						? [resolvedLocalName, reexport.importName, reexport.request]
+						: [resolvedLocalName, reexport.importName];
 				}
 
 				if (isCustomProperty) {
@@ -1096,6 +1210,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process import or export.
 		 * @param {0 | 1} type import or export
 		 * @param {string} input input
 		 * @param {number} pos start position
@@ -1149,6 +1264,7 @@ class CssParser extends Parser {
 			}
 
 			/**
+			 * Creates a dep from the provided name.
 			 * @param {string} name name
 			 * @param {string} value value
 			 * @param {number} start start of position
@@ -1170,7 +1286,10 @@ class CssParser extends Parser {
 					dep.setLoc(sl, sc, el, ec);
 					module.addDependency(dep);
 
-					icssDefinitions.set(name, { importName: value });
+					icssDefinitions.set(name, {
+						importName: value,
+						request: /** @type {string} */ (request)
+					});
 				} else if (type === 1) {
 					const dep = new CssIcssExportDependency(name, getReexport(value));
 					const { line: sl, column: sc } = locConverter.get(start);
@@ -1266,6 +1385,7 @@ class CssParser extends Parser {
 		/** @typedef {{ from: string, items: ({ localName: string, importName: string })[] }} ValueAtRuleImport */
 		/** @typedef {{ localName: string, value: string }} ValueAtRuleValue */
 		/**
+		 * Parses value at rule params.
 		 * @param {string} str value at-rule params
 		 * @returns {ValueAtRuleImport | ValueAtRuleValue} parsed result
 		 */
@@ -1334,6 +1454,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Processes the provided input.
 		 * @param {string} input input
 		 * @param {number} start name start position
 		 * @param {number} end name end position
@@ -1385,7 +1506,7 @@ class CssParser extends Parser {
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);
 
-						icssDefinitions.set(localName, { importName });
+						icssDefinitions.set(localName, { importName, request: from });
 					}
 
 					{
@@ -1451,6 +1572,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process icss symbol.
 		 * @param {string} name ICSS symbol name
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -1466,7 +1588,8 @@ class CssParser extends Parser {
 				def.localName || name,
 				[start, end],
 				def.value,
-				def.importName
+				def.importName,
+				def.request
 			);
 			dep.setLoc(sl, sc, el, ec);
 			module.addDependency(dep);
@@ -1474,6 +1597,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process local or global function.
 		 * @param {string} input input
 		 * @param {1 | 2} type type of function
 		 * @param {number} start start position
@@ -1494,7 +1618,9 @@ class CssParser extends Parser {
 				{
 					identifier(input, start, end) {
 						if (type === 1) {
-							let identifier = unescapeIdentifier(input.slice(start, end));
+							let identifier = unescapeIdentifierCached(
+								input.slice(start, end)
+							);
 							const { line: sl, column: sc } = locConverter.get(start);
 							const { line: el, column: ec } = locConverter.get(end);
 							const isDashedIdent = isDashedIdentifier(identifier);
@@ -1535,6 +1661,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process local at rule.
 		 * @param {string} input input
 		 * @param {number} end name end position
 		 * @param {{ string?: boolean, identifier?: boolean | RegExp }} options types which allowed to handle
@@ -1549,7 +1676,9 @@ class CssParser extends Parser {
 				{
 					string(_input, start, end) {
 						if (!found && options.string) {
-							const value = unescapeIdentifier(input.slice(start + 1, end - 1));
+							const value = unescapeIdentifierCached(
+								input.slice(start + 1, end - 1)
+							);
 							const { line: sl, column: sc } = locConverter.get(start);
 							const { line: el, column: ec } = locConverter.get(end);
 							const dep = new CssIcssExportDependency(
@@ -1562,6 +1691,7 @@ class CssParser extends Parser {
 							dep.setLoc(sl, sc, el, ec);
 							module.addDependency(dep);
 							found = true;
+							if (pureMode) currentSelectorHasLocal = true;
 						}
 						return end;
 					},
@@ -1570,7 +1700,7 @@ class CssParser extends Parser {
 							const value = input.slice(start, end);
 
 							if (options.identifier) {
-								const identifier = unescapeIdentifier(value);
+								const identifier = unescapeIdentifierCached(value);
 
 								if (
 									options.identifier instanceof RegExp &&
@@ -1593,6 +1723,7 @@ class CssParser extends Parser {
 								dep.setLoc(sl, sc, el, ec);
 								module.addDependency(dep);
 								found = true;
+								if (pureMode) currentSelectorHasLocal = true;
 							}
 						}
 						return end;
@@ -1611,6 +1742,7 @@ class CssParser extends Parser {
 
 						if (!found && type) {
 							found = true;
+							if (type === 1 && pureMode) currentSelectorHasLocal = true;
 							return processLocalOrGlobalFunction(input, type, start, end);
 						}
 
@@ -1629,6 +1761,7 @@ class CssParser extends Parser {
 			);
 		};
 		/**
+		 * Process dashed ident.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -1637,7 +1770,7 @@ class CssParser extends Parser {
 		const processDashedIdent = (input, start, end) => {
 			const customIdent = walkCssTokens.eatIdentSequence(input, start);
 			if (!customIdent) return end;
-			const identifier = unescapeIdentifier(
+			const identifier = unescapeIdentifierCached(
 				input.slice(customIdent[0] + 2, customIdent[1])
 			);
 			const afterCustomIdent = walkCssTokens.eatWhitespaceAndComments(
@@ -1728,6 +1861,7 @@ class CssParser extends Parser {
 			return end;
 		};
 		/**
+		 * Process local declaration.
 		 * @param {string} input input
 		 * @param {number} pos name start position
 		 * @param {number} end name end position
@@ -1813,7 +1947,7 @@ class CssParser extends Parser {
 								propertyName === "grid-template" ||
 								propertyName === "grid-template-areas"
 							) {
-								const areas = unescapeIdentifier(
+								const areas = unescapeIdentifierCached(
 									input.slice(start + 1, end - 1)
 								);
 								const matches = matchAll(/\b\w+\b/g, areas);
@@ -1907,7 +2041,7 @@ class CssParser extends Parser {
 						const { line: sl, column: sc } = locConverter.get(value[0]);
 						const { line: el, column: ec } = locConverter.get(value[1]);
 						const [start, end, isString] = value;
-						const name = unescapeIdentifier(
+						const name = unescapeIdentifierCached(
 							isString
 								? input.slice(start + 1, end - 1)
 								: input.slice(start, end)
@@ -1947,7 +2081,7 @@ class CssParser extends Parser {
 				const lastLocalIdentifier = lastLocalIdentifiers[0];
 				let end = pos;
 
-				/** @type {Set<[number, number]>} */
+				/** @type {Set<[number, number, boolean]>} */
 				const classNames = new Set();
 
 				while (true) {
@@ -1993,18 +2127,20 @@ class CssParser extends Parser {
 
 					if (isComma || isSemicolon || isRightCurly) {
 						if (className) {
-							classNames.add(className);
+							classNames.add([className[0], className[1], isGlobalFunction]);
 						}
 
-						for (const className of classNames) {
-							const [start, end] = className;
-							const identifier = unescapeIdentifier(input.slice(start, end));
+						for (const entry of classNames) {
+							const [start, end, isGlobal] = entry;
+							const identifier = unescapeIdentifierCached(
+								input.slice(start, end)
+							);
 							const dep = new CssIcssExportDependency(
 								lastLocalIdentifier,
 								getReexport(identifier),
 								[start, end],
-								!isGlobalFunction,
-								isGlobalFunction
+								!isGlobal,
+								isGlobal
 									? CssIcssExportDependency.EXPORT_MODE.APPEND
 									: CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE,
 								CssIcssExportDependency.EXPORT_TYPE.COMPOSES
@@ -2034,12 +2170,53 @@ class CssParser extends Parser {
 
 						if (from) {
 							const request = input.slice(from[0] + 1, from[1] - 1);
+							const selfReference = isSelfReferenceRequest(request);
+
+							if (!selfReference && !currentRuleComposesFiles.has(request)) {
+								currentRuleComposesFiles.add(request);
+								if (
+									currentRulePrevComposesFile !== undefined &&
+									currentRulePrevComposesFile !== request
+								) {
+									let successors = composesGraph.get(
+										currentRulePrevComposesFile
+									);
+									if (!successors) {
+										successors = new Set();
+										composesGraph.set(currentRulePrevComposesFile, successors);
+									}
+									successors.add(request);
+								}
+								currentRulePrevComposesFile = request;
+							}
 
-							for (const className of classNames) {
-								const [start, end] = className;
-								const identifier = unescapeIdentifier(input.slice(start, end));
+							for (const entry of classNames) {
+								const [start, end] = entry;
+								const identifier = unescapeIdentifierCached(
+									input.slice(start, end)
+								);
 								const { line: sl, column: sc } = locConverter.get(start);
 								const { line: el, column: ec } = locConverter.get(end);
+
+								if (selfReference) {
+									// `composes: foo from "./self.module.css"` from inside
+									// `self.module.css` — collapse to a self-reference, like
+									// `composes: foo` without `from`. When the composed name
+									// equals the local class name, it's a true no-op.
+									if (identifier === lastLocalIdentifier) continue;
+									const dep = new CssIcssExportDependency(
+										lastLocalIdentifier,
+										getReexport(identifier),
+										[start, end],
+										true,
+										CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE,
+										CssIcssExportDependency.EXPORT_TYPE.COMPOSES
+									);
+									dep.setLoc(sl, sc, el, ec);
+									module.addDependency(dep);
+									continue;
+								}
+
 								const localName = `__ICSS_IMPORT_${counter++}__`;
 
 								{
@@ -2053,6 +2230,9 @@ class CssParser extends Parser {
 									);
 									dep.setLoc(sl, sc, el, ec);
 									module.addDependency(dep);
+									if (!composesFirstFileImport.has(request)) {
+										composesFirstFileImport.set(request, dep);
+									}
 								}
 
 								{
@@ -2075,9 +2255,9 @@ class CssParser extends Parser {
 							from = walkCssTokens.eatIdentSequence(input, pos);
 
 							if (from && input.slice(from[0], from[1]) === "global") {
-								for (const className of classNames) {
-									const [start, end] = className;
-									const identifier = unescapeIdentifier(
+								for (const entry of classNames) {
+									const [start, end] = entry;
+									const identifier = unescapeIdentifierCached(
 										input.slice(start, end)
 									);
 									const dep = new CssIcssExportDependency(
@@ -2110,7 +2290,7 @@ class CssParser extends Parser {
 							}
 						}
 					} else if (className) {
-						classNames.add(className);
+						classNames.add([className[0], className[1], isGlobalFunction]);
 					} else {
 						const end = eatUntilSemi(input, pos);
 						this._emitWarning(
@@ -2133,6 +2313,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process id selector.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -2140,7 +2321,7 @@ class CssParser extends Parser {
 		 */
 		const processIdSelector = (input, start, end) => {
 			const valueStart = start + 1;
-			const name = unescapeIdentifier(input.slice(valueStart, end));
+			const name = unescapeIdentifierCached(input.slice(valueStart, end));
 			const dep = new CssIcssExportDependency(
 				name,
 				getReexport(name),
@@ -2152,10 +2333,12 @@ class CssParser extends Parser {
 			const { line: el, column: ec } = locConverter.get(end);
 			dep.setLoc(sl, sc, el, ec);
 			module.addDependency(dep);
+			if (pureMode) currentSelectorHasLocal = true;
 			return end;
 		};
 
 		/**
+		 * Process class selector.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -2164,7 +2347,7 @@ class CssParser extends Parser {
 		const processClassSelector = (input, start, end) => {
 			const ident = walkCssTokens.skipCommentsAndEatIdentSequence(input, end);
 			if (!ident) return end;
-			const name = unescapeIdentifier(input.slice(ident[0], ident[1]));
+			const name = unescapeIdentifierCached(input.slice(ident[0], ident[1]));
 			lastLocalIdentifiers.push(name);
 			const dep = new CssIcssExportDependency(
 				name,
@@ -2177,10 +2360,12 @@ class CssParser extends Parser {
 			const { line: el, column: ec } = locConverter.get(ident[1]);
 			dep.setLoc(sl, sc, el, ec);
 			module.addDependency(dep);
+			if (pureMode) currentSelectorHasLocal = true;
 			return ident[1];
 		};
 
 		/**
+		 * Process attribute selector.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -2190,7 +2375,7 @@ class CssParser extends Parser {
 			end = walkCssTokens.eatWhitespaceAndComments(input, end)[0];
 			const identifier = walkCssTokens.eatIdentSequence(input, end);
 			if (!identifier) return end;
-			const name = unescapeIdentifier(
+			const name = unescapeIdentifierCached(
 				input.slice(identifier[0], identifier[1])
 			);
 			if (name.toLowerCase() !== "class") {
@@ -2226,7 +2411,7 @@ class CssParser extends Parser {
 
 			const classNameStart = value[2] ? value[0] : value[0] + 1;
 			const classNameEnd = value[2] ? value[1] : value[1] - 1;
-			const className = unescapeIdentifier(
+			const className = unescapeIdentifierCached(
 				input.slice(classNameStart, classNameEnd)
 			);
 			const dep = new CssIcssExportDependency(
@@ -2246,44 +2431,97 @@ class CssParser extends Parser {
 		walkCssTokens(source, 0, {
 			comment,
 			leftCurlyBracket: (input, start, end) => {
-				switch (scope) {
-					case CSS_MODE_TOP_LEVEL: {
-						allowImportAtRule = false;
-						scope = CSS_MODE_IN_BLOCK;
-
-						if (isModules) {
-							blockNestingLevel = 1;
-							isNextRulePrelude = isNextNestedSyntax(input, end);
-						}
-
-						break;
-					}
-					case CSS_MODE_IN_BLOCK: {
-						if (isModules) {
-							blockNestingLevel++;
-							isNextRulePrelude = isNextNestedSyntax(input, end);
-						}
-						break;
-					}
+				const wasTopLevel = scope === CSS_MODE_TOP_LEVEL;
+				if (wasTopLevel) {
+					allowImportAtRule = false;
+					scope = CSS_MODE_IN_BLOCK;
+				} else if (scope !== CSS_MODE_IN_BLOCK) {
+					return end;
 				}
+				if (!isModules) return end;
+				if (pureMode) {
+					inAtRulePrelude = false;
+					if (wasTopLevel) seenTopLevelRule = true;
+					const isRulePrelude = isNextRulePrelude;
+					if (isRulePrelude) finalizeSelector();
+					const top = pureTop();
+					if (top) top.hasNestedBlock = true;
+					const inheritedSkip = top ? top.skipChildren : false;
+					pureBlockStack.push({
+						ignored: pureIgnorePending,
+						skipOwn: inheritedSkip,
+						skipChildren: nextBlockChildrenSkip || inheritedSkip,
+						treatAsLeaf: nextBlockTreatAsLeaf,
+						// "this rule is fully pure" (no impure comma-segment) OR any
+						// ancestor pure. Matches PCSL's `[isPureSelectorSymbol]`.
+						ancestorHadLocal:
+							parentEffectivePure() ||
+							(isRulePrelude && !currentRuleHasImpureSelector),
+						impure: isRulePrelude && currentRuleHasImpureSelector,
+						hasDirectDecl: false,
+						hasNestedBlock: false,
+						isRulePrelude,
+						preludeStart: currentRulePreludeStart,
+						preludeEnd: start
+					});
+					pureIgnorePending = false;
+					nextBlockChildrenSkip = false;
+					nextBlockTreatAsLeaf = false;
+					currentRuleHasImpureSelector = false;
+					currentSelectorHasLocal = false;
+					currentRulePreludeStart = end;
+				}
+				blockNestingLevel = wasTopLevel ? 1 : blockNestingLevel + 1;
+				isNextRulePrelude = isNextNestedSyntax(input, end);
 				return end;
 			},
 			rightCurlyBracket: (input, start, end) => {
-				switch (scope) {
-					case CSS_MODE_IN_BLOCK: {
-						if (--blockNestingLevel === 0) {
-							scope = CSS_MODE_TOP_LEVEL;
-
-							if (isModules) {
-								isNextRulePrelude = true;
-								modeData = undefined;
-								lastLocalIdentifiers = [];
-							}
-						} else if (isModules) {
-							isNextRulePrelude = isNextNestedSyntax(input, end);
+				if (scope !== CSS_MODE_IN_BLOCK) return end;
+				const closing = blockNestingLevel === 1;
+				if (closing) {
+					scope = CSS_MODE_TOP_LEVEL;
+					blockNestingLevel = 0;
+					if (!isModules) return end;
+					isNextRulePrelude = true;
+					modeData = undefined;
+					lastLocalIdentifiers = [];
+					currentRulePrevComposesFile = undefined;
+					currentRuleComposesFiles.clear();
+				} else {
+					blockNestingLevel--;
+					if (!isModules) return end;
+					isNextRulePrelude = isNextNestedSyntax(input, end);
+				}
+				if (pureMode) {
+					const frame = pureBlockStack.pop();
+					if (frame) {
+						// PCSL throws on impure rules whose body has any non-rule
+						// content (declaration, empty body). Rules whose body is
+						// only nested rules are skipped — child rules carry the
+						// check themselves.
+						if (
+							!pureNoCheck &&
+							!frame.ignored &&
+							!frame.skipOwn &&
+							frame.isRulePrelude &&
+							frame.impure &&
+							(frame.hasDirectDecl ||
+								!frame.hasNestedBlock ||
+								frame.treatAsLeaf)
+						) {
+							reportPureRule(frame.preludeStart, frame.preludeEnd);
+						}
+						// Propagate "has direct declaration" through at-rule frames
+						// so a parent rule containing only e.g. `@media { decl }` is
+						// still treated as "rule with declarations".
+						if (!frame.isRulePrelude && frame.hasDirectDecl) {
+							const parent = pureTop();
+							if (parent) parent.hasDirectDecl = true;
 						}
-						break;
 					}
+					currentRuleHasImpureSelector = false;
+					currentSelectorHasLocal = false;
+					currentRulePreludeStart = end;
 				}
 				return end;
 			},
@@ -2302,7 +2540,16 @@ class CssParser extends Parser {
 			},
 			atKeyword: (input, start, end) => {
 				const name = input.slice(start, end).toLowerCase();
+				const wasTopLevel = scope === CSS_MODE_TOP_LEVEL;
+				if (pureMode) {
+					inAtRulePrelude = true;
+					// Match PCSL's `isPureCheckDisabled`: any non-comment top-level
+					// node (including `;`-terminated at-rules like `@import`) seals
+					// the leading-comments window.
+					if (wasTopLevel) seenTopLevelRule = true;
+				}
 
+				let pos = end;
 				switch (name) {
 					case "@namespace": {
 						this._emitWarning(
@@ -2313,11 +2560,39 @@ class CssParser extends Parser {
 							end
 						);
 
-						return eatUntilSemi(input, start);
+						pos = eatUntilSemi(input, start);
+						break;
+					}
+					case "@charset": {
+						const atRuleEnd = eatUntilSemi(input, start);
+
+						if (/** @type {CssModule} */ (module).exportType === "style") {
+							pos = atRuleEnd;
+							break;
+						}
+
+						const dep = new ConstDependency("", [start, atRuleEnd + 1]);
+						module.addPresentationalDependency(dep);
+
+						const value = walkCssTokens.eatString(input, end);
+
+						if (!value) {
+							pos = atRuleEnd;
+							break;
+						}
+
+						/** @type {BuildInfo} */
+						(module.buildInfo).charset = input
+							.slice(value[0] + 1, value[1] - 1)
+							.toUpperCase();
+
+						pos = atRuleEnd;
+						break;
 					}
 					case "@import": {
 						if (!this.options.import) {
-							return eatUntilSemi(input, end);
+							pos = eatUntilSemi(input, end);
+							break;
 						}
 
 						if (!allowImportAtRule) {
@@ -2328,43 +2603,57 @@ class CssParser extends Parser {
 								start,
 								end
 							);
-							return end;
+							pos = eatUntilSemi(input, end);
+							break;
 						}
 
-						return processAtImport(input, start, end);
+						pos = processAtImport(input, start, end);
+						break;
 					}
 					default: {
 						if (isModules) {
 							if (name === "@value") {
-								return processAtValue(input, start, end);
+								pos = processAtValue(input, start, end);
+								break;
 							} else if (
 								this.options.animation &&
 								OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name) &&
 								isLocalMode()
 							) {
-								return processLocalAtRule(input, end, {
+								if (pureMode) {
+									nextBlockChildrenSkip = true;
+									nextBlockTreatAsLeaf = true;
+								}
+								pos = processLocalAtRule(input, end, {
 									string: true,
 									identifier: true
 								});
+								break;
 							} else if (
 								this.options.customIdents &&
 								name === "@counter-style" &&
 								isLocalMode()
 							) {
-								return processLocalAtRule(input, end, {
+								if (pureMode) {
+									nextBlockChildrenSkip = true;
+									nextBlockTreatAsLeaf = true;
+								}
+								pos = processLocalAtRule(input, end, {
 									identifier: true
 								});
+								break;
 							} else if (
 								this.options.container &&
 								name === "@container" &&
 								isLocalMode()
 							) {
-								return processLocalAtRule(input, end, {
+								pos = processLocalAtRule(input, end, {
 									identifier: /^(none|and|or|not)$/
 								});
+								break;
 							} else if (name === "@scope") {
 								isNextRulePrelude = true;
-								return end;
+								break;
 							}
 
 							isNextRulePrelude = false;
@@ -2372,12 +2661,48 @@ class CssParser extends Parser {
 					}
 				}
 
-				return end;
+				// If the at-rule consumed its own `;` (for `@import`/`@value`/
+				// `@charset`/`@namespace`), advance the prelude pointer so a
+				// later impure rule's reported selector doesn't include this
+				// at-rule's text. Body-bearing at-rules return at `{` — let
+				// `leftCurlyBracket` handle those.
+				if (pureMode && wasTopLevel && pos > end) {
+					let probe = pos - 1;
+					while (
+						probe > end &&
+						walkCssTokens.isWhiteSpace(input.charCodeAt(probe))
+					) {
+						probe--;
+					}
+					if (input.charCodeAt(probe) === CC_SEMICOLON) {
+						currentRulePreludeStart = pos;
+					}
+				}
+
+				return pos;
 			},
 			semicolon: (input, start, end) => {
 				if (isModules && scope === CSS_MODE_IN_BLOCK) {
 					isNextRulePrelude = isNextNestedSyntax(input, end);
 				}
+				if (pureMode) {
+					if (scope === CSS_MODE_IN_BLOCK) {
+						if (
+							balanced.length === 0 &&
+							!isNextRulePrelude &&
+							!inAtRulePrelude
+						) {
+							const top = pureTop();
+							if (top) top.hasDirectDecl = true;
+						}
+					} else if (scope === CSS_MODE_TOP_LEVEL && balanced.length === 0) {
+						// Top-level `;` ends a statement (e.g. `@import "x";`).
+						// Advance the prelude pointer so a later impure rule's
+						// reported selector doesn't include the preceding text.
+						currentRulePreludeStart = end;
+					}
+					inAtRulePrelude = false;
+				}
 				return end;
 			},
 			identifier: (input, start, end) => {
@@ -2399,6 +2724,10 @@ class CssParser extends Parser {
 					switch (scope) {
 						case CSS_MODE_IN_BLOCK: {
 							if (isModules && !isNextRulePrelude) {
+								if (balanced.length === 0 && !inAtRulePrelude) {
+									const top = pureTop();
+									if (top) top.hasDirectDecl = true;
+								}
 								// Handle only top level values and not inside functions
 								return processLocalDeclaration(input, start, end);
 							}
@@ -2410,12 +2739,17 @@ class CssParser extends Parser {
 				return end;
 			},
 			delim: (input, start, end) => {
+				const ch = input.charCodeAt(start);
+				if (ch === CC_FULL_STOP && isNextRulePrelude && isLocalMode()) {
+					return processClassSelector(input, start, end);
+				}
 				if (
-					input.charCodeAt(start) === CC_FULL_STOP &&
+					ch === CC_AMPERSAND &&
 					isNextRulePrelude &&
-					isLocalMode()
+					parentEffectivePure() &&
+					pureMode
 				) {
-					return processClassSelector(input, start, end);
+					currentSelectorHasLocal = true;
 				}
 
 				return end;
@@ -2622,6 +2956,7 @@ class CssParser extends Parser {
 				if (isModules && balanced.length === 0) {
 					// Reset stack for `:global .class :local .class-other` selector after
 					modeData = undefined;
+					if (pureMode && isNextRulePrelude) finalizeSelector();
 				}
 
 				lastTokenEndForComments = start;
@@ -2633,6 +2968,23 @@ class CssParser extends Parser {
 		/** @type {BuildInfo} */
 		(module.buildInfo).strict = true;
 
+		// Topologically sort the files referenced by `composes ... from`
+		// declarations and tag each file's first import dep with the
+		// resulting `sourceOrder`. `NormalModule#build` then reorders the
+		// deps via `sortWithSourceOrder` so the bundle loads them in
+		// cascade-correct order. Files stuck in a cycle are not visited
+		// and keep their natural loc-based position.
+		if (composesFirstFileImport.size > 1) {
+			topologicalSort(
+				composesGraph,
+				[...composesFirstFileImport.keys()],
+				(file, i) => {
+					/** @type {CssIcssImportDependency} */
+					(composesFirstFileImport.get(file)).sourceOrder = i;
+				}
+			);
+		}
+
 		const buildMeta = /** @type {BuildMeta} */ (state.module.buildMeta);
 
 		buildMeta.exportsType = this.options.namedExports ? "namespace" : "default";
@@ -2653,6 +3005,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Returns comments in the range.
 	 * @param {Range} range range
 	 * @returns {Comment[]} comments in the range
 	 */
@@ -2660,6 +3013,7 @@ class CssParser extends Parser {
 		if (!this.comments) return [];
 		const [rangeStart, rangeEnd] = range;
 		/**
+		 * Returns compared.
 		 * @param {Comment} comment comment
 		 * @param {number} needle needle
 		 * @returns {number} compared
@@ -2682,6 +3036,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Parses comment options.
 	 * @param {Range} range range of the comment
 	 * @returns {{ options: Record<string, EXPECTED_ANY> | null, errors: (Error & { comment: Comment })[] | null }} result
 	 */