webpack 5.102.1 → 5.103.0

package/lib/css/CssParser.js

@@ -7,6 +7,7 @@
 
 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");
@@ -14,11 +15,13 @@ const UnsupportedFeatureWarning = require("../UnsupportedFeatureWarning");
 const WebpackError = require("../WebpackError");
 const ConstDependency = require("../dependencies/ConstDependency");
 const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
+const CssIcssFromIdentifierDependency = require("../dependencies/CssIcssFromIdentifierDependency");
+const CssIcssGlobalIdentifierDependency = require("../dependencies/CssIcssGlobalIdentifierDependency");
 const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
+const CssIcssLocalIdentifierDependency = require("../dependencies/CssIcssLocalIdentifierDependency");
+const CssIcssSelfLocalIdentifierDependency = require("../dependencies/CssIcssSelfLocalIdentifierDependency");
 const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency");
 const CssImportDependency = require("../dependencies/CssImportDependency");
-const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
-const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const binarySearchBounds = require("../util/binarySearchBounds");
@@ -34,17 +37,21 @@ const walkCssTokens = require("./walkCssTokens");
 /** @typedef {import("../Parser").ParserState} ParserState */
 /** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
 /** @typedef {import("./walkCssTokens").CssTokenCallbacks} CssTokenCallbacks */
+/** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */
 
 /** @typedef {[number, number]} Range */
 /** @typedef {{ line: number, column: number }} Position */
 /** @typedef {{ value: string, range: Range, loc: { start: Position, end: Position } }} Comment */
 
 const CC_COLON = ":".charCodeAt(0);
+const CC_SEMICOLON = ";".charCodeAt(0);
+const CC_COMMA = ",".charCodeAt(0);
 const CC_SLASH = "/".charCodeAt(0);
 const CC_LEFT_PARENTHESIS = "(".charCodeAt(0);
 const CC_RIGHT_PARENTHESIS = ")".charCodeAt(0);
 const CC_LOWER_F = "f".charCodeAt(0);
 const CC_UPPER_F = "F".charCodeAt(0);
+const CC_RIGHT_CURLY = "}".charCodeAt(0);
 
 // https://www.w3.org/TR/css-syntax-3/#newline
 // We don't have `preprocessing` stage, so we need specify all of them
@@ -56,6 +63,7 @@ const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i;
 const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(-\w+-)?keyframes$/;
 const OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY =
 	/^(-\w+-)?animation(-name)?$/i;
+const COMPOSES_PROPERTY = /^(composes|compose-with)$/i;
 const IS_MODULES = /\.module(s)?\.[^.]+$/i;
 const CSS_COMMENT = /\/\*((?!\*\/).*?)\*\//g;
 
@@ -230,6 +238,40 @@ const unescapeIdentifier = (str) => {
 	return ret;
 };
 
+/** @type {Record<string, number>} */
+const ANIMATION_KEYWORDS = {
+	// animation-direction
+	normal: 1,
+	reverse: 1,
+	alternate: 1,
+	"alternate-reverse": 1,
+	// animation-fill-mode
+	forwards: 1,
+	backwards: 1,
+	both: 1,
+	// animation-iteration-count
+	infinite: 1,
+	// animation-play-state
+	paused: 1,
+	running: 1,
+	// animation-timing-function
+	ease: 1,
+	"ease-in": 1,
+	"ease-out": 1,
+	"ease-in-out": 1,
+	linear: 1,
+	"step-end": 1,
+	"step-start": 1,
+	// Special
+	none: Infinity, // No matter how many times you write none, it will never be an animation name
+	// Global values
+	initial: Infinity,
+	inherit: Infinity,
+	unset: Infinity,
+	revert: Infinity,
+	"revert-layer": Infinity
+};
+
 class LocConverter {
 	/**
 	 * @param {string} input input
@@ -291,6 +333,7 @@ const eatSemi = walkCssTokens.eatUntil(";");
  * @property {boolean=} url need handle URLs
  * @property {("pure" | "global" | "local" | "auto")=} defaultMode default mode
  * @property {boolean=} namedExports is named exports
+ * @property {CssParserExportType=} exportType export type
  */
 
 class CssParser extends Parser {
@@ -301,13 +344,15 @@ class CssParser extends Parser {
 		defaultMode = "pure",
 		importOption = true,
 		url = true,
-		namedExports = true
+		namedExports = true,
+		exportType
 	} = {}) {
 		super();
 		this.defaultMode = defaultMode;
 		this.import = importOption;
 		this.url = url;
 		this.namedExports = namedExports;
+		this.exportType = exportType;
 		/** @type {Comment[] | undefined} */
 		this.comments = undefined;
 		this.magicCommentContext = createMagicCommentContext();
@@ -382,13 +427,13 @@ class CssParser extends Parser {
 		let blockNestingLevel = 0;
 		/** @type {"local" | "global" | undefined} */
 		let modeData;
-		/** @type {boolean} */
-		let inAnimationProperty = false;
-		/** @type {[number, number, boolean] | undefined} */
-		let lastIdentifier;
 		/** @type {Set<string>} */
 		const declaredCssVariables = new Set();
-		/** @typedef {{ path?: string, value: string }} IcssDefinition */
+
+		/** @type {string[]} */
+		let lastLocalIdentifiers = [];
+
+		/** @typedef {{ value: string, isReference?: boolean }} IcssDefinition */
 		/** @type {Map<string, IcssDefinition>} */
 		const icssDefinitions = new Map();
 
@@ -449,16 +494,338 @@ class CssParser extends Parser {
 			return [pos, text.trimEnd()];
 		};
 
+		const eatPropertyName = walkCssTokens.eatUntil(":{};");
+
+		/**
+		 * @param {string} input input
+		 * @param {number} start start
+		 * @param {number} end end
+		 * @returns {number} end
+		 */
+		const comment = (input, start, end) => {
+			if (!this.comments) this.comments = [];
+			const { line: sl, column: sc } = locConverter.get(start);
+			const { line: el, column: ec } = locConverter.get(end);
+
+			/** @type {Comment} */
+			const comment = {
+				value: input.slice(start + 2, end - 2),
+				range: [start, end],
+				loc: {
+					start: { line: sl, column: sc },
+					end: { line: el, column: ec }
+				}
+			};
+			this.comments.push(comment);
+			return end;
+		};
+
+		// Vanilla CSS stuff
+
+		/**
+		 * @param {string} input input
+		 * @param {number} start name start position
+		 * @param {number} end name end position
+		 * @returns {number} position after handling
+		 */
+		const processAtImport = (input, start, end) => {
+			const tokens = walkCssTokens.eatImportTokens(input, end, {
+				comment
+			});
+			if (!tokens[3]) return end;
+			const semi = tokens[3][1];
+			if (!tokens[0]) {
+				this._emitWarning(
+					state,
+					`Expected URL in '${input.slice(start, semi)}'`,
+					locConverter,
+					start,
+					semi
+				);
+				return end;
+			}
+
+			const urlToken = tokens[0];
+			const url = normalizeUrl(input.slice(urlToken[2], urlToken[3]), true);
+			const newline = walkCssTokens.eatWhiteLine(input, semi);
+			const { options, errors: commentErrors } = this.parseCommentOptions([
+				end,
+				urlToken[1]
+			]);
+			if (commentErrors) {
+				for (const e of commentErrors) {
+					const { comment } = e;
+					state.module.addWarning(
+						new CommentCompilationWarning(
+							`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
+							comment.loc
+						)
+					);
+				}
+			}
+			if (options && options.webpackIgnore !== undefined) {
+				if (typeof options.webpackIgnore !== "boolean") {
+					const { line: sl, column: sc } = locConverter.get(start);
+					const { line: el, column: ec } = locConverter.get(newline);
+
+					state.module.addWarning(
+						new UnsupportedFeatureWarning(
+							`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
+							{
+								start: { line: sl, column: sc },
+								end: { line: el, column: ec }
+							}
+						)
+					);
+				} else if (options.webpackIgnore) {
+					return newline;
+				}
+			}
+			if (url.length === 0) {
+				const { line: sl, column: sc } = locConverter.get(start);
+				const { line: el, column: ec } = locConverter.get(newline);
+				const dep = new ConstDependency("", [start, newline]);
+				module.addPresentationalDependency(dep);
+				dep.setLoc(sl, sc, el, ec);
+
+				return newline;
+			}
+
+			let layer;
+
+			if (tokens[1]) {
+				layer = input.slice(tokens[1][0] + 6, tokens[1][1] - 1).trim();
+			}
+
+			let supports;
+
+			if (tokens[2]) {
+				supports = input.slice(tokens[2][0] + 9, tokens[2][1] - 1).trim();
+			}
+
+			const last = tokens[2] || tokens[1] || tokens[0];
+			const mediaStart = walkCssTokens.eatWhitespaceAndComments(input, last[1]);
+
+			let media;
+
+			if (mediaStart !== semi - 1) {
+				media = input.slice(mediaStart, semi - 1).trim();
+			}
+
+			const { line: sl, column: sc } = locConverter.get(start);
+			const { line: el, column: ec } = locConverter.get(newline);
+			const dep = new CssImportDependency(
+				url,
+				[start, newline],
+				mode === "local" || mode === "global" ? mode : undefined,
+				layer,
+				supports && supports.length > 0 ? supports : undefined,
+				media && media.length > 0 ? media : undefined
+			);
+			dep.setLoc(sl, sc, el, ec);
+			module.addDependency(dep);
+
+			return newline;
+		};
+
+		/**
+		 * @param {string} input input
+		 * @param {number} end end position
+		 * @param {string} name the name of function
+		 * @returns {number} position after handling
+		 */
+		const processURLFunction = (input, end, name) => {
+			const string = walkCssTokens.eatString(input, end);
+			if (!string) return end;
+			const { options, errors: commentErrors } = this.parseCommentOptions([
+				lastTokenEndForComments,
+				end
+			]);
+			if (commentErrors) {
+				for (const e of commentErrors) {
+					const { comment } = e;
+					state.module.addWarning(
+						new CommentCompilationWarning(
+							`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
+							comment.loc
+						)
+					);
+				}
+			}
+			if (options && options.webpackIgnore !== undefined) {
+				if (typeof options.webpackIgnore !== "boolean") {
+					const { line: sl, column: sc } = locConverter.get(string[0]);
+					const { line: el, column: ec } = locConverter.get(string[1]);
+
+					state.module.addWarning(
+						new UnsupportedFeatureWarning(
+							`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
+							{
+								start: { line: sl, column: sc },
+								end: { line: el, column: ec }
+							}
+						)
+					);
+				} else if (options.webpackIgnore) {
+					return end;
+				}
+			}
+			const value = normalizeUrl(
+				input.slice(string[0] + 1, string[1] - 1),
+				true
+			);
+			// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+			if (value.length === 0) return end;
+			const isUrl = name === "url" || name === "src";
+			const dep = new CssUrlDependency(
+				value,
+				[string[0], string[1]],
+				isUrl ? "string" : "url"
+			);
+			const { line: sl, column: sc } = locConverter.get(string[0]);
+			const { line: el, column: ec } = locConverter.get(string[1]);
+			dep.setLoc(sl, sc, el, ec);
+			module.addDependency(dep);
+			module.addCodeGenerationDependency(dep);
+			return string[1];
+		};
+
+		/**
+		 * @param {string} input input
+		 * @param {number} start start position
+		 * @param {number} end end position
+		 * @param {number} contentStart start position
+		 * @param {number} contentEnd end position
+		 * @returns {number} position after handling
+		 */
+		const processOldURLFunction = (
+			input,
+			start,
+			end,
+			contentStart,
+			contentEnd
+		) => {
+			const { options, errors: commentErrors } = this.parseCommentOptions([
+				lastTokenEndForComments,
+				end
+			]);
+			if (commentErrors) {
+				for (const e of commentErrors) {
+					const { comment } = e;
+					state.module.addWarning(
+						new CommentCompilationWarning(
+							`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
+							comment.loc
+						)
+					);
+				}
+			}
+			if (options && options.webpackIgnore !== undefined) {
+				if (typeof options.webpackIgnore !== "boolean") {
+					const { line: sl, column: sc } = locConverter.get(
+						lastTokenEndForComments
+					);
+					const { line: el, column: ec } = locConverter.get(end);
+
+					state.module.addWarning(
+						new UnsupportedFeatureWarning(
+							`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
+							{
+								start: { line: sl, column: sc },
+								end: { line: el, column: ec }
+							}
+						)
+					);
+				} else if (options.webpackIgnore) {
+					return end;
+				}
+			}
+			const value = normalizeUrl(input.slice(contentStart, contentEnd), false);
+			// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+			if (value.length === 0) 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);
+			dep.setLoc(sl, sc, el, ec);
+			module.addDependency(dep);
+			module.addCodeGenerationDependency(dep);
+			return end;
+		};
+
+		/**
+		 * @param {string} input input
+		 * @param {number} start start position
+		 * @param {number} end end position
+		 * @returns {number} position after handling
+		 */
+		const processImageSetFunction = (input, start, end) => {
+			lastTokenEndForComments = end;
+			const values = walkCssTokens.eatImageSetStrings(input, end, {
+				comment
+			});
+			if (values.length === 0) return end;
+			for (const [index, string] of values.entries()) {
+				const value = normalizeUrl(
+					input.slice(string[0] + 1, string[1] - 1),
+					true
+				);
+				if (value.length === 0) return end;
+				const { options, errors: commentErrors } = this.parseCommentOptions([
+					index === 0 ? start : values[index - 1][1],
+					string[1]
+				]);
+				if (commentErrors) {
+					for (const e of commentErrors) {
+						const { comment } = e;
+						state.module.addWarning(
+							new CommentCompilationWarning(
+								`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
+								comment.loc
+							)
+						);
+					}
+				}
+				if (options && options.webpackIgnore !== undefined) {
+					if (typeof options.webpackIgnore !== "boolean") {
+						const { line: sl, column: sc } = locConverter.get(string[0]);
+						const { line: el, column: ec } = locConverter.get(string[1]);
+
+						state.module.addWarning(
+							new UnsupportedFeatureWarning(
+								`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
+								{
+									start: { line: sl, column: sc },
+									end: { line: el, column: ec }
+								}
+							)
+						);
+					} else if (options.webpackIgnore) {
+						continue;
+					}
+				}
+				const dep = new CssUrlDependency(value, [string[0], string[1]], "url");
+				const { line: sl, column: sc } = locConverter.get(string[0]);
+				const { line: el, column: ec } = locConverter.get(string[1]);
+				dep.setLoc(sl, sc, el, ec);
+				module.addDependency(dep);
+				module.addCodeGenerationDependency(dep);
+			}
+			// Can contain `url()` inside, so let's return end to allow parse them
+			return end;
+		};
+
+		// CSS modules stuff
+
 		/**
 		 * @param {0 | 1} type import or export
 		 * @param {string} input input
 		 * @param {number} pos start position
 		 * @returns {number} position after parse
 		 */
-		const parseImportOrExport = (type, input, pos) => {
+		const processImportOrExport = (type, input, pos) => {
 			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 			/** @type {string | undefined} */
-			let importPath;
+			let request;
 			if (type === 0) {
 				let cc = input.charCodeAt(pos);
 				if (cc !== CC_LEFT_PARENTHESIS) {
@@ -477,14 +844,14 @@ class CssParser extends Parser {
 				if (!str) {
 					this._emitWarning(
 						state,
-						`Unexpected '${input[pos]}' at ${pos} during parsing of ':import' (expected string)`,
+						`Unexpected '${input[pos]}' at ${pos} during parsing of '${type ? ":import" : ":export"}' (expected string)`,
 						locConverter,
 						stringStart,
 						pos
 					);
 					return pos;
 				}
-				importPath = input.slice(str[0] + 1, str[1] - 1);
+				request = input.slice(str[0] + 1, str[1] - 1);
 				pos = str[1];
 				pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 				cc = input.charCodeAt(pos);
@@ -510,12 +877,28 @@ class CssParser extends Parser {
 			 */
 			const createDep = (name, value, start, end) => {
 				if (type === 0) {
-					icssDefinitions.set(name, {
-						path: /** @type {string} */ (importPath),
+					const dep = new CssIcssImportDependency(
+						/** @type {string} */
+						(request),
+						[0, 0],
+						/** @type {"local" | "global"} */
+						(mode),
 						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);
+
+					icssDefinitions.set(name, { value, isReference: true });
 				} else if (type === 1) {
-					const dep = new CssIcssExportDependency(name, value);
+					const reexport = icssDefinitions.get(value);
+					const dep = new CssIcssExportDependency(
+						name,
+						value,
+						reexport && reexport.isReference ? reexport.value : undefined,
+						undefined
+					);
 					const { line: sl, column: sc } = locConverter.get(start);
 					const { line: el, column: ec } = locConverter.get(end);
 					dep.setLoc(sl, sc, el, ec);
@@ -605,131 +988,732 @@ class CssParser extends Parser {
 
 			return pos;
 		};
-		const eatPropertyName = walkCssTokens.eatUntil(":{};");
+
 		/**
 		 * @param {string} input input
-		 * @param {number} pos name start position
+		 * @param {number} start name start position
 		 * @param {number} end name end position
 		 * @returns {number} position after handling
 		 */
-		const processLocalDeclaration = (input, pos, end) => {
-			modeData = undefined;
-			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
-			const propertyNameStart = pos;
-			const [propertyNameEnd, propertyName] = eatText(
-				input,
-				pos,
-				eatPropertyName
-			);
-			if (input.charCodeAt(propertyNameEnd) !== CC_COLON) return end;
-			pos = propertyNameEnd + 1;
-			if (propertyName.startsWith("--") && propertyName.length >= 3) {
-				// CSS Variable
-				const { line: sl, column: sc } = locConverter.get(propertyNameStart);
-				const { line: el, column: ec } = locConverter.get(propertyNameEnd);
-				const name = unescapeIdentifier(propertyName.slice(2));
-				const dep = new CssLocalIdentifierDependency(
-					name,
-					[propertyNameStart, propertyNameEnd],
-					"--"
-				);
-				dep.setLoc(sl, sc, el, ec);
-				module.addDependency(dep);
-				declaredCssVariables.add(name);
-			} else if (
-				OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
-			) {
-				inAnimationProperty = true;
-			}
-			return pos;
-		};
-		/**
-		 * @param {string} input input
-		 */
-		const processDeclarationValueDone = (input) => {
-			if (inAnimationProperty && lastIdentifier) {
-				const { line: sl, column: sc } = locConverter.get(lastIdentifier[0]);
-				const { line: el, column: ec } = locConverter.get(lastIdentifier[1]);
-				const name = unescapeIdentifier(
-					lastIdentifier[2]
-						? input.slice(lastIdentifier[0], lastIdentifier[1])
-						: input.slice(lastIdentifier[0] + 1, lastIdentifier[1] - 1)
-				);
-				const dep = new CssSelfLocalIdentifierDependency(name, [
-					lastIdentifier[0],
-					lastIdentifier[1]
-				]);
-				dep.setLoc(sl, sc, el, ec);
-				module.addDependency(dep);
-				lastIdentifier = undefined;
-			}
-		};
+		const processAtValue = (input, start, end) => {
+			const semi = eatUntilSemi(input, end);
+			const atRuleEnd = semi + 1;
+			const params = input.slice(end, semi);
+			let [alias, request] = params.split(/\s*from\s*/);
 
-		/**
-		 * @param {string} input input
-		 * @param {number} start start
-		 * @param {number} end end
-		 * @returns {number} end
-		 */
-		const comment = (input, start, end) => {
-			if (!this.comments) this.comments = [];
-			const { line: sl, column: sc } = locConverter.get(start);
-			const { line: el, column: ec } = locConverter.get(end);
+			if (request) {
+				const aliases = alias
+					.replace(CSS_COMMENT, " ")
+					.trim()
+					.replace(/^\(\s*|\s*\)$/g, "")
+					.split(/\s*,\s*/);
 
-			/** @type {Comment} */
-			const comment = {
-				value: input.slice(start + 2, end - 2),
-				range: [start, end],
-				loc: {
-					start: { line: sl, column: sc },
-					end: { line: el, column: ec }
+				request = request.replace(CSS_COMMENT, "").trim();
+
+				const isExplicitImport = request[0] === "'" || request[0] === '"';
+
+				if (isExplicitImport) {
+					request = request.slice(1, -1);
 				}
-			};
-			this.comments.push(comment);
-			return end;
-		};
 
-		walkCssTokens(source, 0, {
-			comment,
-			leftCurlyBracket: (input, start, end) => {
-				switch (scope) {
-					case CSS_MODE_TOP_LEVEL: {
-						allowImportAtRule = false;
-						scope = CSS_MODE_IN_BLOCK;
+				for (const alias of aliases) {
+					const [name, aliasName] = alias.split(/\s+as\s+/);
 
-						if (isModules) {
-							blockNestingLevel = 1;
-							isNextRulePrelude = isNextNestedSyntax(input, end);
-						}
+					{
+						const reexport = icssDefinitions.get(request);
 
-						break;
-					}
-					case CSS_MODE_IN_BLOCK: {
-						if (isModules) {
-							blockNestingLevel++;
-							isNextRulePrelude = isNextNestedSyntax(input, end);
+						if (reexport) {
+							request = reexport.value.slice(1, -1);
 						}
-						break;
-					}
-				}
-				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;
+						const dep = new CssIcssImportDependency(
+							request,
+							[0, 0],
+							/** @type {"local" | "global"} */
+							(mode),
+							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(aliasName || name, {
+							value: name,
+							isReference: true
+						});
+					}
+
+					if (aliasName) {
+						const reexport = icssDefinitions.get(aliasName);
+						const dep = new CssIcssExportDependency(
+							aliasName,
+							name,
+							reexport && reexport.isReference ? reexport.value : undefined,
+							undefined
+						);
+						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 reexport = icssDefinitions.get(name);
+						const dep = new CssIcssExportDependency(
+							name,
+							name,
+							reexport && reexport.isReference ? reexport.value : undefined,
+							undefined
+						);
+						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);
+					}
+				}
+			} else {
+				const ident = walkCssTokens.eatIdentSequence(alias, 0);
+
+				if (!ident) {
+					this._emitWarning(
+						state,
+						`Broken '@value' at-rule: ${input.slice(start, atRuleEnd)}'`,
+						locConverter,
+						start,
+						atRuleEnd
+					);
+
+					const dep = new ConstDependency("", [start, atRuleEnd]);
+					module.addPresentationalDependency(dep);
+					return atRuleEnd;
+				}
+
+				const pos = walkCssTokens.eatWhitespaceAndComments(alias, ident[1]);
+
+				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();
+				}
+
+				if (icssDefinitions.has(value)) {
+					const def =
+						/** @type {IcssDefinition} */
+						(icssDefinitions.get(value));
+
+					value = def.value;
+				}
+
+				icssDefinitions.set(name, { value });
+
+				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 ConstDependency("", [start, atRuleEnd]);
+			module.addPresentationalDependency(dep);
+			return atRuleEnd;
+		};
+
+		/**
+		 * @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 } =
+				/** @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,
+				[start, end],
+				isReference
+			);
+			dep.setLoc(sl, sc, el, ec);
+			module.addDependency(dep);
+			return end;
+		};
+
+		/**
+		 * @param {string} input input
+		 * @param {1 | 2} type type of function
+		 * @param {number} start start position
+		 * @param {number} end end position
+		 * @returns {number} position after handling
+		 */
+		const processLocalOrGlobalFunction = (input, type, start, end) => {
+			// Replace `local(`/` or `global(` (handle legacy `:local(` or `:global(` too)
+			{
+				const isColon = input.charCodeAt(start - 1) === CC_COLON;
+				const dep = new ConstDependency("", [isColon ? start - 1 : start, end]);
+				module.addPresentationalDependency(dep);
+			}
+
+			end = walkCssTokens.consumeUntil(
+				input,
+				start,
+				type === 1
+					? {
+							identifier(input, start, end) {
+								const name = unescapeIdentifier(input.slice(start, end));
+								const { line: sl, column: sc } = locConverter.get(start);
+								const { line: el, column: ec } = locConverter.get(end);
+								const dep = new CssIcssLocalIdentifierDependency(name, [
+									start,
+									end
+								]);
+								dep.setLoc(sl, sc, el, ec);
+								module.addDependency(dep);
+
+								return end;
+							}
+						}
+					: {},
+				{},
+				{ onlyTopLevel: true, functionValue: true }
+			);
+
+			{
+				// Replace the last `)`
+				const dep = new ConstDependency("", [end, end + 1]);
+				module.addPresentationalDependency(dep);
+			}
+
+			return end;
+		};
+
+		/**
+		 * @param {string} input input
+		 * @param {number} end name end position
+		 * @param {{ string?: boolean, identifier: boolean, validate?: (name: string) => boolean, dashed?: boolean }} options types which allowed to handle
+		 * @returns {number} position after handling
+		 */
+		const processLocalAtRule = (input, end, options) => {
+			/** @type {[number, number, boolean] | undefined} */
+			let value;
+			let found = false;
+
+			walkCssTokens.consumeUntil(
+				input,
+				end,
+				{
+					string(_input, start, end) {
+						if (!found && options.string) {
+							found = true;
+							value = [start, end, true];
+						}
+						return end;
+					},
+					identifier(_input, start, end) {
+						if (!found && options.identifier) {
+							found = true;
+							value = [start, end, false];
+						}
+						return end;
+					}
+				},
+				{
+					function(input, start, end) {
+						// No need to handle `:` (COLON), because it's always a function
+						const name = input
+							.slice(start, end - 1)
+							.replace(/\\/g, "")
+							.toLowerCase();
+
+						const type =
+							name === "local" ? 1 : name === "global" ? 2 : undefined;
+
+						if (!found && type) {
+							found = true;
+							return processLocalOrGlobalFunction(input, type, start, end);
+						}
+
+						return end;
+					}
+				},
+				{ onlyTopLevel: true, atRulePrelude: true }
+			);
+			if (!value) return end;
+			let name = value[2]
+				? input.slice(value[0] + 1, value[1] - 1)
+				: input.slice(value[0], value[1]);
+			if (options.validate && !options.validate(name)) return end;
+			name = unescapeIdentifier(name);
+			const { line: sl, column: sc } = locConverter.get(value[0]);
+			const { line: el, column: ec } = locConverter.get(value[1]);
+			if (options.dashed) {
+				name = name.slice(2);
+				declaredCssVariables.add(name);
+			}
+			const dep = new CssIcssLocalIdentifierDependency(
+				name,
+				[value[0], value[1]],
+				options.dashed ? "--" : ""
+			);
+			dep.setLoc(sl, sc, el, ec);
+			module.addDependency(dep);
+			return value[1];
+		};
+		/**
+		 * @param {string} input input
+		 * @param {number} end end position
+		 * @returns {number} position after handling
+		 */
+		const processVarFunction = (input, end) => {
+			const customIdent = walkCssTokens.eatIdentSequence(input, end);
+			if (!customIdent) return end;
+			let name = input.slice(customIdent[0], customIdent[1]);
+			// A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo.
+			// The <custom-property-name> production corresponds to this:
+			// it’s defined as any <dashed-ident> (a valid identifier that starts with two dashes),
+			// except -- itself, which is reserved for future use by CSS.
+			if (!name.startsWith("--") || name.length < 3) return end;
+			name = unescapeIdentifier(
+				input.slice(customIdent[0] + 2, customIdent[1])
+			);
+			const afterCustomIdent = walkCssTokens.eatWhitespaceAndComments(
+				input,
+				customIdent[1]
+			);
+			if (
+				input.charCodeAt(afterCustomIdent) === CC_LOWER_F ||
+				input.charCodeAt(afterCustomIdent) === CC_UPPER_F
+			) {
+				const fromWord = walkCssTokens.eatIdentSequence(
+					input,
+					afterCustomIdent
+				);
+				if (
+					!fromWord ||
+					input.slice(fromWord[0], fromWord[1]).toLowerCase() !== "from"
+				) {
+					return end;
+				}
+				const from = walkCssTokens.eatIdentSequenceOrString(
+					input,
+					walkCssTokens.eatWhitespaceAndComments(input, fromWord[1])
+				);
+				if (!from) {
+					return end;
+				}
+				const path = input.slice(from[0], from[1]);
+				if (from[2] === true && path === "global") {
+					const dep = new ConstDependency("", [customIdent[1], from[1]]);
+					module.addPresentationalDependency(dep);
+					return end;
+				} 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 CssIcssFromIdentifierDependency(
+						path.slice(1, -1),
+						/** @type {"local" | "global"} */
+						(mode),
+						[customIdent[0], from[1] - 1],
+						name,
+						name,
+						"--"
+					);
+
+					dep.setLoc(sl, sc, el, ec);
+					module.addDependency(dep);
+
+					{
+						const dep = new ConstDependency("", [fromWord[0], from[1]]);
+						module.addPresentationalDependency(dep);
+						return end;
+					}
+				}
+			} else {
+				const { line: sl, column: sc } = locConverter.get(customIdent[0]);
+				const { line: el, column: ec } = locConverter.get(customIdent[1]);
+				const dep = new CssIcssSelfLocalIdentifierDependency(
+					name,
+					undefined,
+					[customIdent[0], customIdent[1]],
+					"--",
+					declaredCssVariables
+				);
+				dep.setLoc(sl, sc, el, ec);
+				module.addDependency(dep);
+				return end;
+			}
+
+			return end;
+		};
+		/**
+		 * @param {string} input input
+		 * @param {number} pos name start position
+		 * @param {number} end name end position
+		 * @returns {number} position after handling
+		 */
+		const processLocalDeclaration = (input, pos, end) => {
+			modeData = undefined;
+			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+			const propertyNameStart = pos;
+			const [propertyNameEnd, propertyName] = eatText(
+				input,
+				pos,
+				eatPropertyName
+			);
+			if (input.charCodeAt(propertyNameEnd) !== CC_COLON) return end;
+			pos = propertyNameEnd + 1;
+			if (propertyName.startsWith("--") && propertyName.length >= 3) {
+				// CSS Variable
+				const { line: sl, column: sc } = locConverter.get(propertyNameStart);
+				const { line: el, column: ec } = locConverter.get(propertyNameEnd);
+				const name = unescapeIdentifier(propertyName.slice(2));
+				const dep = new CssIcssLocalIdentifierDependency(
+					name,
+					[propertyNameStart, propertyNameEnd],
+					"--"
+				);
+				dep.setLoc(sl, sc, el, ec);
+				module.addDependency(dep);
+				declaredCssVariables.add(name);
+			} else if (
+				OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
+			) {
+				/** @type {[number, number, boolean][]} */
+				const animationNames = [];
+				/** @type {Record<string, number>} */
+				let parsedAnimationKeywords = Object.create(null);
+
+				const end = walkCssTokens.consumeUntil(
+					input,
+					pos,
+					{
+						string(_input, start, end) {
+							animationNames.push([start, end, true]);
+
+							return end;
+						},
+						identifier(input, start, end) {
+							const keyword = input.slice(start, end).toLowerCase();
+
+							parsedAnimationKeywords[keyword] =
+								typeof parsedAnimationKeywords[keyword] !== "undefined"
+									? parsedAnimationKeywords[keyword] + 1
+									: 0;
+
+							if (
+								ANIMATION_KEYWORDS[keyword] &&
+								parsedAnimationKeywords[keyword] < ANIMATION_KEYWORDS[keyword]
+							) {
+								return end;
+							}
+
+							animationNames.push([start, end, false]);
+							return end;
+						},
+						comma(_input, _start, end) {
+							parsedAnimationKeywords = {};
+
+							return end;
+						}
+					},
+					{
+						function(input, start, end) {
+							const name = input
+								.slice(start, end - 1)
+								.replace(/\\/g, "")
+								.toLowerCase();
+
+							if (isLocalMode() && name === "var") {
+								return processVarFunction(input, end);
+							}
+
+							const type =
+								name === "local" ? 1 : name === "global" ? 2 : undefined;
+
+							if (type) {
+								return processLocalOrGlobalFunction(input, type, start, end);
+							}
+
+							return end;
+						}
+					},
+					{ onlyTopLevel: true, declarationValue: true }
+				);
+
+				if (animationNames.length > 0) {
+					for (const animationName of animationNames) {
+						const { line: sl, column: sc } = locConverter.get(animationName[0]);
+						const { line: el, column: ec } = locConverter.get(animationName[1]);
+						const [start, end, isString] = animationName;
+						const name = unescapeIdentifier(
+							isString
+								? input.slice(start + 1, end - 1)
+								: input.slice(start, end)
+						);
+						const dep = new CssIcssSelfLocalIdentifierDependency(
+							name,
+							undefined,
+							[start, end]
+						);
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
+				}
+
+				return end;
+			} else if (COMPOSES_PROPERTY.test(propertyName)) {
+				if (lastLocalIdentifiers.length > 1) {
+					const end = eatUntilSemi(input, pos);
+					this._emitWarning(
+						state,
+						`Composition is only allowed when selector is single local class name not in "${lastLocalIdentifiers.join('", "')}"`,
+						locConverter,
+						pos,
+						end
+					);
+
+					return end;
+				}
+
+				if (lastLocalIdentifiers.length !== 1) return pos;
+
+				const lastLocalIdentifier = lastLocalIdentifiers[0];
+				let end = pos;
+
+				/** @type {Set<[number, number]>} */
+				const classNames = new Set();
+
+				while (true) {
+					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+
+					let className = walkCssTokens.eatIdentSequence(input, pos);
+
+					const ifFunction =
+						className && input.charCodeAt(className[1]) === CC_LEFT_PARENTHESIS;
+					let isGlobalFunction = false;
+
+					if (className && ifFunction) {
+						const name = input
+							.slice(className[0], className[1])
+							.replace(/\\/g, "")
+							.toLowerCase();
+
+						isGlobalFunction = name === "global";
+						pos = walkCssTokens.eatWhitespaceAndComments(
+							input,
+							className[1] + 1
+						);
+						className = walkCssTokens.eatIdentSequence(input, pos);
+						if (className) {
+							pos = walkCssTokens.eatWhitespaceAndComments(input, className[1]);
+							pos += 1;
+						}
+					} else if (className) {
+						pos = walkCssTokens.eatWhitespaceAndComments(input, className[1]);
+						pos = className[1];
+					}
+
+					// True when we have multiple values
+					const isComma = input.charCodeAt(pos) === CC_COMMA;
+					const isSemicolon = input.charCodeAt(pos) === CC_SEMICOLON;
+					const isRightCurly = input.charCodeAt(pos) === CC_RIGHT_CURLY;
+
+					if (isComma || isSemicolon || isRightCurly) {
+						if (className) {
+							classNames.add(className);
+						}
+
+						for (const className of classNames) {
+							const [start, end] = className;
+							const identifier = unescapeIdentifier(input.slice(start, end));
+							const reexport = icssDefinitions.get(identifier);
+							const dep = isGlobalFunction
+								? new CssIcssGlobalIdentifierDependency(
+										lastLocalIdentifier,
+										identifier,
+										reexport && reexport.isReference
+											? reexport.value
+											: undefined,
+										[start, end]
+									)
+								: new CssIcssSelfLocalIdentifierDependency(
+										lastLocalIdentifier,
+										identifier,
+										[start, end],
+										undefined,
+										undefined,
+										reexport && reexport.isReference
+											? reexport.value
+											: undefined
+									);
+							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);
+						}
+
+						classNames.clear();
+
+						if (isSemicolon || isRightCurly) {
+							end = isSemicolon
+								? walkCssTokens.eatWhitespace(input, pos + 1)
+								: pos;
+							break;
+						}
+
+						pos += 1;
+					} else if (
+						classNames.size > 0 &&
+						className &&
+						input.slice(className[0], className[1]).toLowerCase() === "from"
+					) {
+						let from = walkCssTokens.eatString(input, pos);
+
+						if (from) {
+							const request = input.slice(from[0] + 1, from[1] - 1);
+
+							for (const className of classNames) {
+								const [start, end] = className;
+								const identifier = unescapeIdentifier(input.slice(start, end));
+								const dep = new CssIcssFromIdentifierDependency(
+									request,
+									/** @type {"local" | "global"} */
+									(mode),
+									[start, end],
+									identifier,
+									/** @type {string} */
+									(lastLocalIdentifier)
+								);
+								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);
+							}
+
+							classNames.clear();
+							pos = from[1];
+						} else {
+							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(
+										input.slice(start, end)
+									);
+									const reexport = icssDefinitions.get(identifier);
+									const dep = new CssIcssGlobalIdentifierDependency(
+										/** @type {string} */
+										(lastLocalIdentifier),
+										identifier,
+										reexport && reexport.isReference
+											? reexport.value
+											: undefined,
+										[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);
+								}
+
+								classNames.clear();
+								pos = from[1];
+							} else {
+								const end = eatUntilSemi(input, pos);
+								this._emitWarning(
+									state,
+									"Incorrect composition, expected global keyword or string value",
+									locConverter,
+									pos,
+									end
+								);
+								return end;
+							}
+						}
+					} else if (className) {
+						classNames.add(className);
+					} else {
+						const end = eatUntilSemi(input, pos);
+						this._emitWarning(
+							state,
+							"Incorrect composition, expected class named",
+							locConverter,
+							pos,
+							end
+						);
+						return end;
+					}
+				}
+
+				// Remove `composes` from source code
+				const dep = new ConstDependency("", [propertyNameStart, end]);
+				module.addPresentationalDependency(dep);
+			}
+			return pos;
+		};
+
+		/**
+		 * @param {string} input input
+		 * @param {number} start start position
+		 * @param {number} end end position
+		 * @returns {number} position after handling
+		 */
+		const processHashID = (input, start, end) => {
+			const valueStart = start + 1;
+			const name = unescapeIdentifier(input.slice(valueStart, end));
+			const dep = new CssIcssLocalIdentifierDependency(name, [valueStart, 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);
+			return end;
+		};
+
+		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;
+					}
+				}
+				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) {
-							if (isLocalMode()) {
-								processDeclarationValueDone(input);
-								inAnimationProperty = false;
-							}
-
 							isNextRulePrelude = isNextNestedSyntax(input, end);
 						}
 						break;
@@ -742,64 +1726,13 @@ class CssParser extends Parser {
 					return end;
 				}
 
-				const { options, errors: commentErrors } = this.parseCommentOptions([
-					lastTokenEndForComments,
-					end
-				]);
-				if (commentErrors) {
-					for (const e of commentErrors) {
-						const { comment } = e;
-						state.module.addWarning(
-							new CommentCompilationWarning(
-								`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
-								comment.loc
-							)
-						);
-					}
-				}
-				if (options && options.webpackIgnore !== undefined) {
-					if (typeof options.webpackIgnore !== "boolean") {
-						const { line: sl, column: sc } = locConverter.get(
-							lastTokenEndForComments
-						);
-						const { line: el, column: ec } = locConverter.get(end);
-
-						state.module.addWarning(
-							new UnsupportedFeatureWarning(
-								`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
-								{
-									start: { line: sl, column: sc },
-									end: { line: el, column: ec }
-								}
-							)
-						);
-					} else if (options.webpackIgnore) {
-						return end;
-					}
-				}
-				const value = normalizeUrl(
-					input.slice(contentStart, contentEnd),
-					false
+				return processOldURLFunction(
+					input,
+					start,
+					end,
+					contentStart,
+					contentEnd
 				);
-				// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
-				if (value.length === 0) 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);
-				dep.setLoc(sl, sc, el, ec);
-				module.addDependency(dep);
-				module.addCodeGenerationDependency(dep);
-				return end;
-			},
-			string: (_input, start, end) => {
-				switch (scope) {
-					case CSS_MODE_IN_BLOCK: {
-						if (inAnimationProperty && balanced.length === 0) {
-							lastIdentifier = [start, end, false];
-						}
-					}
-				}
-				return end;
 			},
 			atKeyword: (input, start, end) => {
 				const name = input.slice(start, end).toLowerCase();
@@ -832,234 +1765,26 @@ class CssParser extends Parser {
 							return end;
 						}
 
-						const tokens = walkCssTokens.eatImportTokens(input, end, {
-							comment
-						});
-						if (!tokens[3]) return end;
-						const semi = tokens[3][1];
-						if (!tokens[0]) {
-							this._emitWarning(
-								state,
-								`Expected URL in '${input.slice(start, semi)}'`,
-								locConverter,
-								start,
-								semi
-							);
-							return end;
-						}
-
-						const urlToken = tokens[0];
-						const url = normalizeUrl(
-							input.slice(urlToken[2], urlToken[3]),
-							true
-						);
-						const newline = walkCssTokens.eatWhiteLine(input, semi);
-						const { options, errors: commentErrors } = this.parseCommentOptions(
-							[end, urlToken[1]]
-						);
-						if (commentErrors) {
-							for (const e of commentErrors) {
-								const { comment } = e;
-								state.module.addWarning(
-									new CommentCompilationWarning(
-										`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
-										comment.loc
-									)
-								);
-							}
-						}
-						if (options && options.webpackIgnore !== undefined) {
-							if (typeof options.webpackIgnore !== "boolean") {
-								const { line: sl, column: sc } = locConverter.get(start);
-								const { line: el, column: ec } = locConverter.get(newline);
-
-								state.module.addWarning(
-									new UnsupportedFeatureWarning(
-										`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
-										{
-											start: { line: sl, column: sc },
-											end: { line: el, column: ec }
-										}
-									)
-								);
-							} else if (options.webpackIgnore) {
-								return newline;
-							}
-						}
-						if (url.length === 0) {
-							const { line: sl, column: sc } = locConverter.get(start);
-							const { line: el, column: ec } = locConverter.get(newline);
-							const dep = new ConstDependency("", [start, newline]);
-							module.addPresentationalDependency(dep);
-							dep.setLoc(sl, sc, el, ec);
-
-							return newline;
-						}
-
-						let layer;
-
-						if (tokens[1]) {
-							layer = input.slice(tokens[1][0] + 6, tokens[1][1] - 1).trim();
-						}
-
-						let supports;
-
-						if (tokens[2]) {
-							supports = input.slice(tokens[2][0] + 9, tokens[2][1] - 1).trim();
-						}
-
-						const last = tokens[2] || tokens[1] || tokens[0];
-						const mediaStart = walkCssTokens.eatWhitespaceAndComments(
-							input,
-							last[1]
-						);
-
-						let media;
-
-						if (mediaStart !== semi - 1) {
-							media = input.slice(mediaStart, semi - 1).trim();
-						}
-
-						const { line: sl, column: sc } = locConverter.get(start);
-						const { line: el, column: ec } = locConverter.get(newline);
-						const dep = new CssImportDependency(
-							url,
-							[start, newline],
-							layer,
-							supports && supports.length > 0 ? supports : undefined,
-							media && media.length > 0 ? media : undefined
-						);
-						dep.setLoc(sl, sc, el, ec);
-						module.addDependency(dep);
-
-						return newline;
+						return processAtImport(input, start, end);
 					}
 					default: {
 						if (isModules) {
 							if (name === "@value") {
-								const semi = eatUntilSemi(input, end);
-								const atRuleEnd = semi + 1;
-								const params = input.slice(end, semi);
-								let [alias, from] = params.split(/\s*from\s*/);
-
-								if (from) {
-									const aliases = alias
-										.replace(CSS_COMMENT, " ")
-										.trim()
-										.replace(/^\(|\)$/g, "")
-										.split(/\s*,\s*/);
-
-									from = from.replace(CSS_COMMENT, "").trim();
-
-									const isExplicitImport = from[0] === "'" || from[0] === '"';
-
-									if (isExplicitImport) {
-										from = from.slice(1, -1);
-									}
-
-									for (const alias of aliases) {
-										const [name, aliasName] = alias.split(/\s*as\s*/);
-
-										icssDefinitions.set(aliasName || name, {
-											value: name,
-											path: from
-										});
-									}
-								} else {
-									const ident = walkCssTokens.eatIdentSequence(alias, 0);
-
-									if (!ident) {
-										this._emitWarning(
-											state,
-											`Broken '@value' at-rule: ${input.slice(
-												start,
-												atRuleEnd
-											)}'`,
-											locConverter,
-											start,
-											atRuleEnd
-										);
-
-										const dep = new ConstDependency("", [start, atRuleEnd]);
-										module.addPresentationalDependency(dep);
-										return atRuleEnd;
-									}
-
-									const pos = walkCssTokens.eatWhitespaceAndComments(
-										alias,
-										ident[1]
-									);
-
-									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)) {
-										value = value.trim();
-									}
-
-									if (icssDefinitions.has(value)) {
-										const def =
-											/** @type {IcssDefinition} */
-											(icssDefinitions.get(value));
-
-										value = def.value;
-									}
-
-									icssDefinitions.set(name, { value });
-
-									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 ConstDependency("", [start, atRuleEnd]);
-								module.addPresentationalDependency(dep);
-								return atRuleEnd;
+								return processAtValue(input, start, end);
 							} else if (
 								OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name) &&
 								isLocalMode()
 							) {
-								const ident = walkCssTokens.eatIdentSequenceOrString(
-									input,
-									end
-								);
-								if (!ident) return end;
-								const name = unescapeIdentifier(
-									ident[2] === true
-										? input.slice(ident[0], ident[1])
-										: input.slice(ident[0] + 1, ident[1] - 1)
-								);
-								const { line: sl, column: sc } = locConverter.get(ident[0]);
-								const { line: el, column: ec } = locConverter.get(ident[1]);
-								const dep = new CssLocalIdentifierDependency(name, [
-									ident[0],
-									ident[1]
-								]);
-								dep.setLoc(sl, sc, el, ec);
-								module.addDependency(dep);
-								return ident[1];
+								return processLocalAtRule(input, end, {
+									string: true,
+									identifier: true
+								});
 							} else if (name === "@property" && isLocalMode()) {
-								const ident = walkCssTokens.eatIdentSequence(input, end);
-								if (!ident) return end;
-								let name = input.slice(ident[0], ident[1]);
-								if (!name.startsWith("--") || name.length < 3) return end;
-								name = unescapeIdentifier(name.slice(2));
-								declaredCssVariables.add(name);
-								const { line: sl, column: sc } = locConverter.get(ident[0]);
-								const { line: el, column: ec } = locConverter.get(ident[1]);
-								const dep = new CssLocalIdentifierDependency(
-									name,
-									[ident[0], ident[1]],
-									"--"
-								);
-								dep.setLoc(sl, sc, el, ec);
-								module.addDependency(dep);
-								return ident[1];
+								return processLocalAtRule(input, end, {
+									identifier: true,
+									dashed: true,
+									validate: (name) => name.startsWith("--") && name.length >= 3
+								});
 							} else if (name === "@scope") {
 								isNextRulePrelude = true;
 								return end;
@@ -1074,11 +1799,6 @@ class CssParser extends Parser {
 			},
 			semicolon: (input, start, end) => {
 				if (isModules && scope === CSS_MODE_IN_BLOCK) {
-					if (isLocalMode()) {
-						processDeclarationValueDone(input);
-						inAnimationProperty = false;
-					}
-
 					isNextRulePrelude = isNextNestedSyntax(input, end);
 				}
 				return end;
@@ -1088,50 +1808,14 @@ class CssParser extends Parser {
 					const name = input.slice(start, end);
 
 					if (icssDefinitions.has(name)) {
-						let { path, value } =
-							/** @type {IcssDefinition} */
-							(icssDefinitions.get(name));
-
-						if (path) {
-							if (icssDefinitions.has(path)) {
-								const definition =
-									/** @type {IcssDefinition} */
-									(icssDefinitions.get(path));
-
-								path = definition.value.slice(1, -1);
-							}
-
-							const dep = new CssIcssImportDependency(path, value, [
-								start,
-								end - 1
-							]);
-							const { line: sl, column: sc } = locConverter.get(start);
-							const { line: el, column: ec } = locConverter.get(end - 1);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
-						} else {
-							const { line: sl, column: sc } = locConverter.get(start);
-							const { line: el, column: ec } = locConverter.get(end);
-							const dep = new CssIcssSymbolDependency(name, value, [
-								start,
-								end
-							]);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
-						}
-
-						return end;
+						return processICSSSymbol(name, start, end);
 					}
 
 					switch (scope) {
 						case CSS_MODE_IN_BLOCK: {
 							if (isLocalMode()) {
 								// Handle only top level values and not inside functions
-								if (inAnimationProperty && balanced.length === 0) {
-									lastIdentifier = [start, end, true];
-								} else {
-									return processLocalDeclaration(input, start, end);
-								}
+								return processLocalDeclaration(input, start, end);
 							}
 							break;
 						}
@@ -1148,7 +1832,8 @@ class CssParser extends Parser {
 					);
 					if (!ident) return end;
 					const name = unescapeIdentifier(input.slice(ident[0], ident[1]));
-					const dep = new CssLocalIdentifierDependency(name, [
+					lastLocalIdentifiers.push(name);
+					const dep = new CssIcssLocalIdentifierDependency(name, [
 						ident[0],
 						ident[1]
 					]);
@@ -1163,13 +1848,7 @@ class CssParser extends Parser {
 			},
 			hash: (input, start, end, isID) => {
 				if (isNextRulePrelude && isLocalMode() && isID) {
-					const valueStart = start + 1;
-					const name = unescapeIdentifier(input.slice(valueStart, end));
-					const dep = new CssLocalIdentifierDependency(name, [valueStart, 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);
+					return processHashID(input, start, end);
 				}
 
 				return end;
@@ -1186,12 +1865,12 @@ class CssParser extends Parser {
 					switch (scope) {
 						case CSS_MODE_TOP_LEVEL: {
 							if (name === "import") {
-								const pos = parseImportOrExport(0, input, ident[1]);
+								const pos = processImportOrExport(0, input, ident[1]);
 								const dep = new ConstDependency("", [start, pos]);
 								module.addPresentationalDependency(dep);
 								return pos;
 							} else if (name === "export") {
-								const pos = parseImportOrExport(1, input, ident[1]);
+								const pos = processImportOrExport(1, input, ident[1]);
 								const dep = new ConstDependency("", [start, pos]);
 								module.addPresentationalDependency(dep);
 								return pos;
@@ -1203,7 +1882,8 @@ class CssParser extends Parser {
 								const isFn = input.charCodeAt(ident[1]) === CC_LEFT_PARENTHESIS;
 
 								if (isFn && name === "local") {
-									const end = ident[1] + 1;
+									// Eat extra whitespace
+									const end = walkCssTokens.eatWhitespace(input, ident[1] + 1);
 									modeData = "local";
 									const dep = new ConstDependency("", [start, end]);
 									module.addPresentationalDependency(dep);
@@ -1231,7 +1911,8 @@ class CssParser extends Parser {
 									module.addPresentationalDependency(dep);
 									return end;
 								} else if (isFn && name === "global") {
-									const end = ident[1] + 1;
+									// Eat extra whitespace
+									const end = walkCssTokens.eatWhitespace(input, ident[1] + 1);
 									modeData = "global";
 									const dep = new ConstDependency("", [start, end]);
 									module.addPresentationalDependency(dep);
@@ -1283,208 +1964,13 @@ class CssParser extends Parser {
 							return end;
 						}
 
-						const string = walkCssTokens.eatString(input, end);
-						if (!string) return end;
-						const { options, errors: commentErrors } = this.parseCommentOptions(
-							[lastTokenEndForComments, end]
-						);
-						if (commentErrors) {
-							for (const e of commentErrors) {
-								const { comment } = e;
-								state.module.addWarning(
-									new CommentCompilationWarning(
-										`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
-										comment.loc
-									)
-								);
-							}
-						}
-						if (options && options.webpackIgnore !== undefined) {
-							if (typeof options.webpackIgnore !== "boolean") {
-								const { line: sl, column: sc } = locConverter.get(string[0]);
-								const { line: el, column: ec } = locConverter.get(string[1]);
-
-								state.module.addWarning(
-									new UnsupportedFeatureWarning(
-										`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
-										{
-											start: { line: sl, column: sc },
-											end: { line: el, column: ec }
-										}
-									)
-								);
-							} else if (options.webpackIgnore) {
-								return end;
-							}
-						}
-						const value = normalizeUrl(
-							input.slice(string[0] + 1, string[1] - 1),
-							true
-						);
-						// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
-						if (value.length === 0) return end;
-						const isUrl = name === "url" || name === "src";
-						const dep = new CssUrlDependency(
-							value,
-							[string[0], string[1]],
-							isUrl ? "string" : "url"
-						);
-						const { line: sl, column: sc } = locConverter.get(string[0]);
-						const { line: el, column: ec } = locConverter.get(string[1]);
-						dep.setLoc(sl, sc, el, ec);
-						module.addDependency(dep);
-						module.addCodeGenerationDependency(dep);
-						return string[1];
+						return processURLFunction(input, end, name);
 					}
 					default: {
 						if (this.url && IMAGE_SET_FUNCTION.test(name)) {
-							lastTokenEndForComments = end;
-							const values = walkCssTokens.eatImageSetStrings(input, end, {
-								comment
-							});
-							if (values.length === 0) return end;
-							for (const [index, string] of values.entries()) {
-								const value = normalizeUrl(
-									input.slice(string[0] + 1, string[1] - 1),
-									true
-								);
-								if (value.length === 0) return end;
-								const { options, errors: commentErrors } =
-									this.parseCommentOptions([
-										index === 0 ? start : values[index - 1][1],
-										string[1]
-									]);
-								if (commentErrors) {
-									for (const e of commentErrors) {
-										const { comment } = e;
-										state.module.addWarning(
-											new CommentCompilationWarning(
-												`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
-												comment.loc
-											)
-										);
-									}
-								}
-								if (options && options.webpackIgnore !== undefined) {
-									if (typeof options.webpackIgnore !== "boolean") {
-										const { line: sl, column: sc } = locConverter.get(
-											string[0]
-										);
-										const { line: el, column: ec } = locConverter.get(
-											string[1]
-										);
-
-										state.module.addWarning(
-											new UnsupportedFeatureWarning(
-												`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
-												{
-													start: { line: sl, column: sc },
-													end: { line: el, column: ec }
-												}
-											)
-										);
-									} else if (options.webpackIgnore) {
-										continue;
-									}
-								}
-								const dep = new CssUrlDependency(
-									value,
-									[string[0], string[1]],
-									"url"
-								);
-								const { line: sl, column: sc } = locConverter.get(string[0]);
-								const { line: el, column: ec } = locConverter.get(string[1]);
-								dep.setLoc(sl, sc, el, ec);
-								module.addDependency(dep);
-								module.addCodeGenerationDependency(dep);
-							}
-							// Can contain `url()` inside, so let's return end to allow parse them
-							return end;
-						} else if (isLocalMode()) {
-							// Don't rename animation name when we have `var()` function
-							if (inAnimationProperty && balanced.length === 1) {
-								lastIdentifier = undefined;
-							}
-
-							if (name === "var") {
-								const customIdent = walkCssTokens.eatIdentSequence(input, end);
-								if (!customIdent) return end;
-								let name = input.slice(customIdent[0], customIdent[1]);
-								// A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo.
-								// The <custom-property-name> production corresponds to this:
-								// it’s defined as any <dashed-ident> (a valid identifier that starts with two dashes),
-								// except -- itself, which is reserved for future use by CSS.
-								if (!name.startsWith("--") || name.length < 3) return end;
-								name = unescapeIdentifier(
-									input.slice(customIdent[0] + 2, customIdent[1])
-								);
-								const afterCustomIdent = walkCssTokens.eatWhitespaceAndComments(
-									input,
-									customIdent[1]
-								);
-								if (
-									input.charCodeAt(afterCustomIdent) === CC_LOWER_F ||
-									input.charCodeAt(afterCustomIdent) === CC_UPPER_F
-								) {
-									const fromWord = walkCssTokens.eatIdentSequence(
-										input,
-										afterCustomIdent
-									);
-									if (
-										!fromWord ||
-										input.slice(fromWord[0], fromWord[1]).toLowerCase() !==
-											"from"
-									) {
-										return end;
-									}
-									const from = walkCssTokens.eatIdentSequenceOrString(
-										input,
-										walkCssTokens.eatWhitespaceAndComments(input, fromWord[1])
-									);
-									if (!from) {
-										return end;
-									}
-									const path = input.slice(from[0], from[1]);
-									if (from[2] === true && path === "global") {
-										const dep = new ConstDependency("", [
-											customIdent[1],
-											from[1]
-										]);
-										module.addPresentationalDependency(dep);
-										return end;
-									} else if (from[2] === false) {
-										const dep = new CssIcssImportDependency(
-											path.slice(1, -1),
-											name,
-											[customIdent[0], from[1] - 1]
-										);
-										const { line: sl, column: sc } = locConverter.get(
-											customIdent[0]
-										);
-										const { line: el, column: ec } = locConverter.get(
-											from[1] - 1
-										);
-										dep.setLoc(sl, sc, el, ec);
-										module.addDependency(dep);
-									}
-								} else {
-									const { line: sl, column: sc } = locConverter.get(
-										customIdent[0]
-									);
-									const { line: el, column: ec } = locConverter.get(
-										customIdent[1]
-									);
-									const dep = new CssSelfLocalIdentifierDependency(
-										name,
-										[customIdent[0], customIdent[1]],
-										"--",
-										declaredCssVariables
-									);
-									dep.setLoc(sl, sc, el, ec);
-									module.addDependency(dep);
-									return end;
-								}
-							}
+							return processImageSetFunction(input, start, end);
+						} else if (isLocalMode() && name === "var") {
+							return processVarFunction(input, end);
 						}
 					}
 				}
@@ -1516,11 +2002,11 @@ class CssParser extends Parser {
 			},
 			comma: (input, start, end) => {
 				if (isModules) {
-					// Reset stack for `:global .class :local .class-other` selector after
-					modeData = undefined;
+					const popped = balanced.pop();
 
-					if (scope === CSS_MODE_IN_BLOCK && isLocalMode()) {
-						processDeclarationValueDone(input);
+					if (!popped) {
+						// Reset stack for `:global .class :local .class-other` selector after
+						modeData = undefined;
 					}
 				}
 
@@ -1532,17 +2018,38 @@ class CssParser extends Parser {
 
 		/** @type {BuildInfo} */
 		(module.buildInfo).strict = true;
-		/** @type {BuildMeta} */
-		(module.buildMeta).exportsType = this.namedExports
-			? "namespace"
-			: "default";
 
-		if (!this.namedExports) {
-			/** @type {BuildMeta} */
-			(module.buildMeta).defaultObject = "redirect";
+		const buildMeta = /** @type {BuildMeta} */ (state.module.buildMeta);
+
+		buildMeta.exportsType = this.namedExports ? "namespace" : "default";
+		buildMeta.defaultObject = this.namedExports ? false : "redirect-warn";
+		buildMeta.exportType = this.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;
+			}
+		}
+
+		// TODO this.namedExports?
+		if (
+			buildMeta.exportType === "text" ||
+			buildMeta.exportType === "css-style-sheet"
+		) {
+			module.addDependency(new StaticExportsDependency(["default"], true));
+		} else {
+			module.addDependency(new StaticExportsDependency([], true));
 		}
 
-		module.addDependency(new StaticExportsDependency([], true));
 		return state;
 	}