@chromatic-com/cypress 0.12.8 → 0.13.1

package/embedded/node_modules/webpack/lib/css/CssParser.js

@@ -5,14 +5,10 @@
 
 "use strict";
 
+const path = require("path");
 const vm = require("vm");
-const CommentCompilationWarning = require("../CommentCompilationWarning");
-const CssModule = require("../CssModule");
-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");
@@ -20,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 */
@@ -33,7 +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 {[number, number]} Range */
 /** @typedef {{ line: number, column: number }} Position */
@@ -50,6 +54,9 @@ const CC_RIGHT_CURLY = "}".charCodeAt(0);
 const CC_HYPHEN_MINUS = "-".charCodeAt(0);
 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
@@ -61,9 +68,10 @@ const IMAGE_SET_FUNCTION = /^(?:-\w+-)?image-set$/i;
 const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(?:-\w+-)?keyframes$/;
 const COMPOSES_PROPERTY = /^(?:composes|compose-with)$/i;
 const IS_MODULES = /\.modules?\.[^.]+$/i;
-const CSS_COMMENT = /\/\*((?!\*\/).*?)\*\//g;
+const CSS_COMMENT = /\/\*((?!\*\/)[\s\S]*?)\*\//g;
 
 /**
+ * Returns matches.
  * @param {RegExp} regexp a regexp
  * @param {string} str a string
  * @returns {RegExpExecArray[]} matches
@@ -85,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
@@ -124,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.
@@ -370,7 +251,7 @@ const GRID_AUTO_FLOW = {
 };
 
 /** @type {Record<string, number>} */
-const GRID_TEMPLATE_ARES = {
+const GRID_TEMPLATE_AREAS = {
 	// Special
 	none: 1,
 	...GLOBAL_VALUES
@@ -389,7 +270,7 @@ const GRID_TEMPLATE_COLUMNS_OR_ROWS = {
 
 /** @type {Record<string, number>} */
 const GRID_TEMPLATE = {
-	...GRID_TEMPLATE_ARES,
+	...GRID_TEMPLATE_AREAS,
 	...GRID_TEMPLATE_COLUMNS_OR_ROWS
 };
 
@@ -399,11 +280,12 @@ const GRID = {
 	dense: 1,
 	...GRID_AUTO_COLUMNS_OR_ROW,
 	...GRID_AUTO_FLOW,
-	...GRID_TEMPLATE_ARES,
+	...GRID_TEMPLATE_AREAS,
 	...GRID_TEMPLATE_COLUMNS_OR_ROWS
 };
 
 /**
+ * Gets known properties.
  * @param {{ animation?: boolean, container?: boolean, customIdents?: boolean, grid?: boolean }=} options options
  * @returns {Map<string, Record<string, number>>} list of known properties
  */
@@ -511,12 +393,11 @@ const getKnownProperties = (options = {}) => {
 		knownProperties.set("grid-column", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-column-end", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-column-start", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-column-start", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-row", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-row-end", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-row-start", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-template", GRID_TEMPLATE);
-		knownProperties.set("grid-template-areas", GRID_TEMPLATE_ARES);
+		knownProperties.set("grid-template-areas", GRID_TEMPLATE_AREAS);
 		knownProperties.set("grid-template-columns", GRID_TEMPLATE_COLUMNS_OR_ROWS);
 		knownProperties.set("grid-template-rows", GRID_TEMPLATE_COLUMNS_OR_ROWS);
 	}
@@ -524,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
@@ -582,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 = {}) {
@@ -614,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
@@ -633,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
@@ -647,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;
@@ -655,7 +522,6 @@ class CssParser extends Parser {
 			mode === "auto" &&
 			module.type === CSS_MODULE_TYPE_AUTO &&
 			IS_MODULES.test(
-				// TODO matchResource
 				parseResource(/** @type {string} */ (module.getResource())).path
 			)
 		) {
@@ -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);
 
@@ -689,15 +593,129 @@ class CssParser extends Parser {
 		let blockNestingLevel = 0;
 		/** @type {0 | 1 | undefined} */
 		let modeData;
+		/** @type {number} */
+		let counter = 0;
 
 		/** @type {string[]} */
 		let lastLocalIdentifiers = [];
 
-		/** @typedef {{ value: string, isReference?: boolean }} 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
@@ -729,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
@@ -745,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 },
@@ -755,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
@@ -772,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)}'`,
@@ -784,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,
@@ -868,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
@@ -935,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
@@ -984,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);
@@ -997,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
@@ -1061,23 +1175,42 @@ class CssParser extends Parser {
 		// CSS modules stuff
 
 		/**
+		 * Returns resolved reexport (localName and importName).
 		 * @param {string} value value to resolve
-		 * @returns {string | [string, string, boolean]} resolved reexport
+		 * @param {string=} localName override local name
+		 * @param {boolean=} isCustomProperty true when it is custom property, otherwise false
+		 * @returns {string | [string, string] | [string, string, string]} resolved reexport (`localName`, `importName` and optional `request` of the active `@value` import)
 		 */
-		const getReexport = (value) => {
-			const reexport = icssDefinitions.get(value);
+		const getReexport = (value, localName, isCustomProperty) => {
+			const reexport = icssDefinitions.get(
+				isCustomProperty ? `--${value}` : value
+			);
 
 			if (reexport) {
-				if (reexport.isReference) {
-					return [value, reexport.value, true];
+				if (reexport.importName) {
+					const resolvedLocalName =
+						reexport.localName || (isCustomProperty ? `--${value}` : value);
+					return reexport.request
+						? [resolvedLocalName, reexport.importName, reexport.request]
+						: [resolvedLocalName, reexport.importName];
 				}
-				return [value, reexport.value, false];
+
+				if (isCustomProperty) {
+					return /** @type {string} */ (reexport.value).slice(2);
+				}
+
+				return /** @type {string} */ (reexport.value);
+			}
+
+			if (localName) {
+				return [localName, value];
 			}
 
 			return value;
 		};
 
 		/**
+		 * Process import or export.
 		 * @param {0 | 1} type import or export
 		 * @param {string} input input
 		 * @param {number} pos start position
@@ -1105,7 +1238,7 @@ class CssParser extends Parser {
 				if (!str) {
 					this._emitWarning(
 						state,
-						`Unexpected '${input[pos]}' at ${pos} during parsing of '${type ? ":import" : ":export"}' (expected string)`,
+						`Unexpected '${input[pos]}' at ${pos} during parsing of '${type === 0 ? ":import" : ":export"}' (expected string)`,
 						locConverter,
 						stringStart,
 						pos
@@ -1131,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
@@ -1144,14 +1278,18 @@ class CssParser extends Parser {
 						[0, 0],
 						/** @type {"local" | "global"} */
 						(mode),
-						value
+						value,
+						name
 					);
 					const { line: sl, column: sc } = locConverter.get(start);
 					const { line: el, column: ec } = locConverter.get(end);
 					dep.setLoc(sl, sc, el, ec);
 					module.addDependency(dep);
 
-					icssDefinitions.set(name, { value, isReference: true });
+					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);
@@ -1244,7 +1382,79 @@ class CssParser extends Parser {
 			return pos;
 		};
 
+		/** @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
+		 */
+		const parseValueAtRuleParams = (str) => {
+			if (/from(\/\*|\s)(?:[\s\S]+)$/i.test(str)) {
+				str = str.replace(CSS_COMMENT, " ").trim().replace(/;$/, "");
+				const fromIdx = str.lastIndexOf("from");
+				const path = str
+					.slice(fromIdx + 5)
+					.trim()
+					.replace(/['"]/g, "");
+				let content = str.slice(0, fromIdx).trim();
+
+				if (content.startsWith("(") && content.endsWith(")")) {
+					content = content.slice(1, -1);
+				}
+
+				return {
+					from: path,
+					items: content.split(",").map((item) => {
+						item = item.trim();
+
+						if (item.includes(":")) {
+							const [local, remote] = item.split(":");
+
+							return { localName: local.trim(), importName: remote.trim() };
+						}
+
+						const asParts = item.split(/\s+as\s+/);
+
+						if (asParts.length === 2) {
+							return {
+								localName: asParts[1].trim(),
+								importName: asParts[0].trim()
+							};
+						}
+
+						return { localName: item, importName: item };
+					})
+				};
+			}
+
+			/** @type {string} */
+			let localName;
+			/** @type {string} */
+			let value;
+
+			const idx = str.indexOf(":");
+
+			if (idx !== -1) {
+				localName = str.slice(0, idx).replace(CSS_COMMENT, "").trim();
+				value = str.slice(idx + 1);
+			} else {
+				const mask = str.replace(CSS_COMMENT, (m) => " ".repeat(m.length));
+				const idx = mask.search(/\S\s/) + 1;
+
+				localName = str.slice(0, idx).replace(CSS_COMMENT, "").trim();
+				value = str.slice(idx + (str[idx] === " " ? 1 : 0));
+			}
+
+			if (value.length > 0 && !/^\s+$/.test(value.replace(CSS_COMMENT, ""))) {
+				value = value.trim();
+			}
+
+			return { localName, value };
+		};
+
+		/**
+		 * Processes the provided input.
 		 * @param {string} input input
 		 * @param {number} start name start position
 		 * @param {number} end name end position
@@ -1254,55 +1464,55 @@ class CssParser extends Parser {
 			const semi = eatUntilSemi(input, end);
 			const atRuleEnd = semi + 1;
 			const params = input.slice(end, semi);
-			let [alias, request] = params.split(/\s*from\s*/);
+			const parsed = parseValueAtRuleParams(params);
 
-			if (request) {
-				const aliases = alias
-					.replace(CSS_COMMENT, " ")
-					.trim()
-					.replace(/^\(\s*|\s*\)$/g, "")
-					.split(/\s*,\s*/);
-
-				request = request.replace(CSS_COMMENT, "").trim();
-
-				const isExplicitImport = request[0] === "'" || request[0] === '"';
+			if (
+				typeof (/** @type {ValueAtRuleImport} */ (parsed).from) !== "undefined"
+			) {
+				if (/** @type {ValueAtRuleImport} */ (parsed).from.length === 0) {
+					this._emitWarning(
+						state,
+						`Broken '@value' at-rule: ${input.slice(start, atRuleEnd)}'`,
+						locConverter,
+						start,
+						atRuleEnd
+					);
 
-				if (isExplicitImport) {
-					request = request.slice(1, -1);
+					const dep = new ConstDependency("", [start, atRuleEnd]);
+					module.addPresentationalDependency(dep);
+					return atRuleEnd;
 				}
 
-				for (const alias of aliases) {
-					const [name, aliasName] = alias.split(/\s+as\s+/);
+				let { from, items } = /** @type {ValueAtRuleImport} */ (parsed);
 
+				for (const { importName, localName } of items) {
 					{
-						const reexport = icssDefinitions.get(request);
+						const reexport = icssDefinitions.get(from);
 
-						if (reexport) {
-							request = reexport.value.slice(1, -1);
+						if (reexport && reexport.value) {
+							from = reexport.value.slice(1, -1);
 						}
 
 						const dep = new CssIcssImportDependency(
-							request,
+							from,
 							[0, 0],
 							/** @type {"local" | "global"} */
 							(mode),
-							name
+							importName,
+							localName
 						);
 						const { line: sl, column: sc } = locConverter.get(start);
 						const { line: el, column: ec } = locConverter.get(end);
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);
 
-						icssDefinitions.set(aliasName || name, {
-							value: name,
-							isReference: true
-						});
+						icssDefinitions.set(localName, { importName, request: from });
 					}
 
 					{
 						const dep = new CssIcssExportDependency(
-							aliasName || name,
-							getReexport(aliasName || name),
+							localName,
+							getReexport(localName),
 							undefined,
 							false,
 							CssIcssExportDependency.EXPORT_MODE.REPLACE
@@ -1314,9 +1524,7 @@ class CssParser extends Parser {
 					}
 				}
 			} else {
-				const ident = walkCssTokens.eatIdentSequence(alias, 0);
-
-				if (!ident) {
+				if (/** @type {ValueAtRuleValue} */ (parsed).localName.length === 0) {
 					this._emitWarning(
 						state,
 						`Broken '@value' at-rule: ${input.slice(start, atRuleEnd)}'`,
@@ -1330,33 +1538,32 @@ class CssParser extends Parser {
 					return atRuleEnd;
 				}
 
-				const pos = walkCssTokens.eatWhitespaceAndComments(alias, ident[1])[0];
-
-				const name = alias.slice(ident[0], ident[1]);
-				let value =
-					alias.charCodeAt(pos) === CC_COLON
-						? alias.slice(pos + 1)
-						: alias.slice(ident[1]);
-
-				if (value && !/^\s+$/.test(value.replace(CSS_COMMENT, ""))) {
-					value = value.trim();
-				}
+				const { localName, value } = /** @type {ValueAtRuleValue} */ (parsed);
+				const { line: sl, column: sc } = locConverter.get(start);
+				const { line: el, column: ec } = locConverter.get(end);
 
 				if (icssDefinitions.has(value)) {
 					const def =
 						/** @type {IcssDefinition} */
 						(icssDefinitions.get(value));
 
-					value = def.value;
-				}
+					def.localName = value;
 
-				icssDefinitions.set(name, { value });
+					icssDefinitions.set(localName, def);
 
-				const dep = new CssIcssExportDependency(name, value);
-				const { line: sl, column: sc } = locConverter.get(start);
-				const { line: el, column: ec } = locConverter.get(end);
-				dep.setLoc(sl, sc, el, ec);
-				module.addDependency(dep);
+					const dep = new CssIcssExportDependency(
+						localName,
+						getReexport(value)
+					);
+					dep.setLoc(sl, sc, el, ec);
+					module.addDependency(dep);
+				} else {
+					icssDefinitions.set(localName, { value });
+
+					const dep = new CssIcssExportDependency(localName, value);
+					dep.setLoc(sl, sc, el, ec);
+					module.addDependency(dep);
+				}
 			}
 
 			const dep = new ConstDependency("", [start, atRuleEnd]);
@@ -1365,22 +1572,24 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process icss symbol.
 		 * @param {string} name ICSS symbol name
 		 * @param {number} start start position
 		 * @param {number} end end position
 		 * @returns {number} position after handling
 		 */
 		const processICSSSymbol = (name, start, end) => {
-			const { value, isReference } =
+			const def =
 				/** @type {IcssDefinition} */
 				(icssDefinitions.get(name));
 			const { line: sl, column: sc } = locConverter.get(start);
 			const { line: el, column: ec } = locConverter.get(end);
 			const dep = new CssIcssSymbolDependency(
-				name,
-				value,
+				def.localName || name,
 				[start, end],
-				isReference
+				def.value,
+				def.importName,
+				def.request
 			);
 			dep.setLoc(sl, sc, el, ec);
 			module.addDependency(dep);
@@ -1388,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
@@ -1408,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);
@@ -1449,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
@@ -1463,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(
@@ -1476,6 +1691,7 @@ class CssParser extends Parser {
 							dep.setLoc(sl, sc, el, ec);
 							module.addDependency(dep);
 							found = true;
+							if (pureMode) currentSelectorHasLocal = true;
 						}
 						return end;
 					},
@@ -1484,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 &&
@@ -1507,6 +1723,7 @@ class CssParser extends Parser {
 								dep.setLoc(sl, sc, el, ec);
 								module.addDependency(dep);
 								found = true;
+								if (pureMode) currentSelectorHasLocal = true;
 							}
 						}
 						return end;
@@ -1525,6 +1742,7 @@ class CssParser extends Parser {
 
 						if (!found && type) {
 							found = true;
+							if (type === 1 && pureMode) currentSelectorHasLocal = true;
 							return processLocalOrGlobalFunction(input, type, start, end);
 						}
 
@@ -1543,6 +1761,7 @@ class CssParser extends Parser {
 			);
 		};
 		/**
+		 * Process dashed ident.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -1551,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(
@@ -1587,19 +1806,35 @@ class CssParser extends Parser {
 				} else if (from[2] === false) {
 					const { line: sl, column: sc } = locConverter.get(customIdent[0]);
 					const { line: el, column: ec } = locConverter.get(from[1] - 1);
-					const dep = new CssIcssImportDependency(
-						path.slice(1, -1),
-						[customIdent[0], from[1] - 1],
-						/** @type {"local" | "global"} */
-						(mode),
-						identifier,
-						identifier,
-						CssIcssExportDependency.EXPORT_MODE.NONE,
-						CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
-					);
+					const localName = `__ICSS_IMPORT_${counter++}__`;
 
-					dep.setLoc(sl, sc, el, ec);
-					module.addDependency(dep);
+					{
+						const dep = new CssIcssImportDependency(
+							path.slice(1, -1),
+							[customIdent[0], from[1] - 1],
+							/** @type {"local" | "global"} */
+							(mode),
+							identifier,
+							localName
+						);
+
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
+
+					{
+						const dep = new CssIcssExportDependency(
+							identifier,
+							getReexport(identifier, localName, true),
+							[customIdent[0], from[1] - 1],
+							true,
+							CssIcssExportDependency.EXPORT_MODE.ONCE,
+							CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
+						);
+
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
 
 					{
 						const dep = new ConstDependency("", [fromWord[0], from[1]]);
@@ -1612,7 +1847,7 @@ class CssParser extends Parser {
 				const { line: el, column: ec } = locConverter.get(customIdent[1]);
 				const dep = new CssIcssExportDependency(
 					identifier,
-					getReexport(identifier),
+					getReexport(identifier, undefined, true),
 					[customIdent[0], customIdent[1]],
 					true,
 					CssIcssExportDependency.EXPORT_MODE.ONCE,
@@ -1626,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
@@ -1671,10 +1907,16 @@ class CssParser extends Parser {
 						)
 					: false;
 
+				let afterExclamation = false;
+
 				const end = walkCssTokens.consumeUntil(
 					input,
 					pos,
 					{
+						delim(input, start, end) {
+							afterExclamation = input.charCodeAt(start) === CC_EXCLAMATION;
+							return end;
+						},
 						leftSquareBracket(input, start, end) {
 							let i = end;
 
@@ -1705,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);
@@ -1723,6 +1965,11 @@ class CssParser extends Parser {
 								return end;
 							}
 
+							if (afterExclamation) {
+								afterExclamation = false;
+								return end;
+							}
+
 							const identifier = input.slice(start, end);
 							const keyword = identifier.toLowerCase();
 
@@ -1794,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)
@@ -1834,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) {
@@ -1880,21 +2127,23 @@ 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));
-							const resolvedClassName = getReexport(identifier);
+						for (const entry of classNames) {
+							const [start, end, isGlobal] = entry;
+							const identifier = unescapeIdentifierCached(
+								input.slice(start, end)
+							);
 							const dep = new CssIcssExportDependency(
 								lastLocalIdentifier,
-								resolvedClassName,
+								getReexport(identifier),
 								[start, end],
-								isGlobalFunction ? false : !Array.isArray(resolvedClassName),
-								isGlobalFunction
+								!isGlobal,
+								isGlobal
 									? CssIcssExportDependency.EXPORT_MODE.APPEND
-									: CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE
+									: CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE,
+								CssIcssExportDependency.EXPORT_TYPE.COMPOSES
 							);
 							const { line: sl, column: sc } = locConverter.get(start);
 							const { line: el, column: ec } = locConverter.get(end);
@@ -1921,24 +2170,83 @@ class CssParser extends Parser {
 
 						if (from) {
 							const request = input.slice(from[0] + 1, from[1] - 1);
+							const selfReference = isSelfReferenceRequest(request);
 
-							for (const className of classNames) {
-								const [start, end] = className;
-								const identifier = unescapeIdentifier(input.slice(start, end));
-								const dep = new CssIcssImportDependency(
-									request,
-									[start, end],
-									/** @type {"local" | "global"} */
-									(mode),
-									identifier,
-									/** @type {string} */
-									(lastLocalIdentifier),
-									CssIcssExportDependency.EXPORT_MODE.APPEND
+							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 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);
-								dep.setLoc(sl, sc, el, ec);
-								module.addDependency(dep);
+
+								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++}__`;
+
+								{
+									const dep = new CssIcssImportDependency(
+										request,
+										[start, end],
+										/** @type {"local" | "global"} */
+										(mode),
+										identifier,
+										localName
+									);
+									dep.setLoc(sl, sc, el, ec);
+									module.addDependency(dep);
+									if (!composesFirstFileImport.has(request)) {
+										composesFirstFileImport.set(request, dep);
+									}
+								}
+
+								{
+									const dep = new CssIcssExportDependency(
+										lastLocalIdentifier,
+										getReexport(identifier, localName),
+										[start, end],
+										true,
+										CssIcssExportDependency.EXPORT_MODE.APPEND,
+										CssIcssExportDependency.EXPORT_TYPE.COMPOSES
+									);
+									dep.setLoc(sl, sc, el, ec);
+									module.addDependency(dep);
+								}
 							}
 
 							classNames.clear();
@@ -1947,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(
@@ -1958,7 +2266,8 @@ class CssParser extends Parser {
 										getReexport(identifier),
 										[start, end],
 										false,
-										CssIcssExportDependency.EXPORT_MODE.APPEND
+										CssIcssExportDependency.EXPORT_MODE.APPEND,
+										CssIcssExportDependency.EXPORT_TYPE.COMPOSES
 									);
 									const { line: sl, column: sc } = locConverter.get(start);
 									const { line: el, column: ec } = locConverter.get(end);
@@ -1981,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(
@@ -2004,6 +2313,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process id selector.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -2011,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),
@@ -2023,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
@@ -2035,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,
@@ -2048,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
@@ -2061,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") {
@@ -2097,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(
@@ -2117,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;
 			},
@@ -2173,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(
@@ -2184,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) {
@@ -2199,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;
@@ -2243,22 +2661,54 @@ 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) => {
 				if (isModules) {
 					const identifier = input.slice(start, end);
 
-					if (icssDefinitions.has(identifier)) {
-						return processICSSSymbol(identifier, start, end);
-					}
-
 					if (
 						this.options.dashedIdents &&
 						isLocalMode() &&
@@ -2267,9 +2717,17 @@ class CssParser extends Parser {
 						return processDashedIdent(input, start, end);
 					}
 
+					if (icssDefinitions.has(identifier)) {
+						return processICSSSymbol(identifier, start, end);
+					}
+
 					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);
 							}
@@ -2281,9 +2739,18 @@ class CssParser extends Parser {
 				return end;
 			},
 			delim: (input, start, end) => {
-				if (isNextRulePrelude && isLocalMode()) {
+				const ch = input.charCodeAt(start);
+				if (ch === CC_FULL_STOP && isNextRulePrelude && isLocalMode()) {
 					return processClassSelector(input, start, end);
 				}
+				if (
+					ch === CC_AMPERSAND &&
+					isNextRulePrelude &&
+					parentEffectivePure() &&
+					pureMode
+				) {
+					currentSelectorHasLocal = true;
+				}
 
 				return end;
 			},
@@ -2486,13 +2953,10 @@ class CssParser extends Parser {
 				return end;
 			},
 			comma: (input, start, end) => {
-				if (isModules) {
-					const popped = balanced.pop();
-
-					if (!popped) {
-						// Reset stack for `:global .class :local .class-other` selector after
-						modeData = undefined;
-					}
+				if (isModules && balanced.length === 0) {
+					// Reset stack for `:global .class :local .class-other` selector after
+					modeData = undefined;
+					if (pureMode && isNextRulePrelude) finalizeSelector();
 				}
 
 				lastTokenEndForComments = start;
@@ -2504,36 +2968,33 @@ 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";
 		buildMeta.defaultObject = this.options.namedExports
 			? false
 			: "redirect-warn";
-		buildMeta.exportType = this.options.exportType;
-
-		if (!buildMeta.exportType) {
-			// Inherit exportType from parent module to ensure consistency.
-			// When a CSS file is imported with syntax like `import "./basic.css" with { type: "css" }`,
-			// the parent module's exportType is set to "css-style-sheet".
-			// Child modules imported via @import should inherit this exportType
-			// instead of using the default "link", ensuring that the entire
-			// import chain uses the same export format.
-			const parent = state.compilation.moduleGraph.getIssuer(module);
-			if (parent instanceof CssModule) {
-				buildMeta.exportType = /** @type {BuildMeta} */ (
-					parent.buildMeta
-				).exportType;
-			}
-		}
-		if (!buildMeta.exportType) {
-			buildMeta.exportType = "link";
-		}
 
-		// TODO this.namedExports?
 		if (
-			buildMeta.exportType === "text" ||
-			buildMeta.exportType === "css-style-sheet"
+			/** @type {CssModule} */ (module).exportType === "text" ||
+			/** @type {CssModule} */ (module).exportType === "css-style-sheet"
 		) {
 			module.addDependency(new StaticExportsDependency(["default"], true));
 		} else {
@@ -2544,6 +3005,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Returns comments in the range.
 	 * @param {Range} range range
 	 * @returns {Comment[]} comments in the range
 	 */
@@ -2551,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
@@ -2573,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
 	 */