webpack 5.103.0 → 5.104.0

package/lib/css/CssParser.js

@@ -15,11 +15,7 @@ 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 CssUrlDependency = require("../dependencies/CssUrlDependency");
@@ -37,7 +33,7 @@ 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 {import("../../declarations/WebpackOptions").CssModuleParserOptions} CssModuleParserOptions */
 
 /** @typedef {[number, number]} Range */
 /** @typedef {{ line: number, column: number }} Position */
@@ -46,12 +42,14 @@ const walkCssTokens = require("./walkCssTokens");
 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);
+const CC_HYPHEN_MINUS = "-".charCodeAt(0);
+const CC_TILDE = "~".charCodeAt(0);
+const CC_EQUAL = "=".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,12 +59,30 @@ const TRIM_WHITE_SPACES = /(^[ \t\n\r\f]*|[ \t\n\r\f]*$)/g;
 const UNESCAPE = /\\([0-9a-fA-F]{1,6}[ \t\n\r\f]?|[\s\S])/g;
 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;
 
+/**
+ * @param {RegExp} regexp a regexp
+ * @param {string} str a string
+ * @returns {RegExpExecArray[]} matches
+ */
+const matchAll = (regexp, str) => {
+	/** @type {RegExpExecArray[]} */
+	const result = [];
+
+	let match;
+
+	// Use a while loop with exec() to find all matches
+	while ((match = regexp.exec(str)) !== null) {
+		result.push(match);
+	}
+	// Return an array to be easily iterable (note: a true spec-compliant polyfill
+	// returns an iterator object, but an array spread often suffices for basic use)
+	return result;
+};
+
 /**
  * @param {string} str url string
  * @param {boolean} isString is url wrapped in quotes
@@ -238,32 +254,90 @@ const unescapeIdentifier = (str) => {
 	return ret;
 };
 
+/**
+ * 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.
+ * @param {string} identifier identifier
+ * @returns {boolean} true when identifier is dashed, otherwise false
+ */
+const isDashedIdentifier = (identifier) =>
+	identifier.startsWith("--") && identifier.length >= 3;
+
+/** @type {Record<string, number>} */
+const PREDEFINED_COUNTER_STYLES = {
+	decimal: 1,
+	"decimal-leading-zero": 1,
+	"arabic-indic": 1,
+	armenian: 1,
+	"upper-armenian": 1,
+	"lower-armenian": 1,
+	bengali: 1,
+	cambodian: 1,
+	khmer: 1,
+	"cjk-decimal": 1,
+	devanagari: 1,
+	georgian: 1,
+	gujarati: 1,
+	/* cspell:disable-next-line */
+	gurmukhi: 1,
+	hebrew: 1,
+	kannada: 1,
+	lao: 1,
+	malayalam: 1,
+	mongolian: 1,
+	myanmar: 1,
+	oriya: 1,
+	persian: 1,
+	"lower-roman": 1,
+	"upper-roman": 1,
+	tamil: 1,
+	telugu: 1,
+	thai: 1,
+	tibetan: 1,
+
+	"lower-alpha": 1,
+	"lower-latin": 1,
+	"upper-alpha": 1,
+	"upper-latin": 1,
+	"lower-greek": 1,
+	hiragana: 1,
+	/* cspell:disable-next-line */
+	"hiragana-iroha": 1,
+	katakana: 1,
+	/* cspell:disable-next-line */
+	"katakana-iroha": 1,
+
+	disc: 1,
+	circle: 1,
+	square: 1,
+	"disclosure-open": 1,
+	"disclosure-closed": 1,
+
+	"cjk-earthly-branch": 1,
+	"cjk-heavenly-stem": 1,
+
+	"japanese-informal": 1,
+	"japanese-formal": 1,
+
+	"korean-hangul-formal": 1,
+	/* cspell:disable-next-line */
+	"korean-hanja-informal": 1,
+	/* cspell:disable-next-line */
+	"korean-hanja-formal": 1,
+
+	"simp-chinese-informal": 1,
+	"simp-chinese-formal": 1,
+	"trad-chinese-informal": 1,
+	"trad-chinese-formal": 1,
+	"cjk-ideographic": 1,
+
+	"ethiopic-numeric": 1
+};
+
 /** @type {Record<string, number>} */
-const 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
+const GLOBAL_VALUES = {
 	// Global values
 	initial: Infinity,
 	inherit: Infinity,
@@ -272,6 +346,184 @@ const ANIMATION_KEYWORDS = {
 	"revert-layer": Infinity
 };
 
+/** @type {Record<string, number>} */
+const GRID_AREA_OR_COLUMN_OR_ROW = {
+	auto: Infinity,
+	span: Infinity,
+	...GLOBAL_VALUES
+};
+
+/** @type {Record<string, number>} */
+const GRID_AUTO_COLUMNS_OR_ROW = {
+	"min-content": Infinity,
+	"max-content": Infinity,
+	auto: Infinity,
+	...GLOBAL_VALUES
+};
+
+/** @type {Record<string, number>} */
+const GRID_AUTO_FLOW = {
+	row: 1,
+	column: 1,
+	dense: 1,
+	...GLOBAL_VALUES
+};
+
+/** @type {Record<string, number>} */
+const GRID_TEMPLATE_ARES = {
+	// Special
+	none: 1,
+	...GLOBAL_VALUES
+};
+
+/** @type {Record<string, number>} */
+const GRID_TEMPLATE_COLUMNS_OR_ROWS = {
+	none: 1,
+	subgrid: 1,
+	masonry: 1,
+	"max-content": Infinity,
+	"min-content": Infinity,
+	auto: Infinity,
+	...GLOBAL_VALUES
+};
+
+/** @type {Record<string, number>} */
+const GRID_TEMPLATE = {
+	...GRID_TEMPLATE_ARES,
+	...GRID_TEMPLATE_COLUMNS_OR_ROWS
+};
+
+/** @type {Record<string, number>} */
+const GRID = {
+	"auto-flow": 1,
+	dense: 1,
+	...GRID_AUTO_COLUMNS_OR_ROW,
+	...GRID_AUTO_FLOW,
+	...GRID_TEMPLATE_ARES,
+	...GRID_TEMPLATE_COLUMNS_OR_ROWS
+};
+
+/**
+ * @param {{ animation?: boolean, container?: boolean, customIdents?: boolean, grid?: boolean }=} options options
+ * @returns {Map<string, Record<string, number>>} list of known properties
+ */
+const getKnownProperties = (options = {}) => {
+	/** @type {Map<string, Record<string, number>>} */
+	const knownProperties = new Map();
+
+	if (options.animation) {
+		knownProperties.set("animation", {
+			// animation-direction
+			normal: 1,
+			reverse: 1,
+			alternate: 1,
+			"alternate-reverse": 1,
+			// animation-fill-mode
+			forwards: 1,
+			backwards: 1,
+			both: 1,
+			// animation-iteration-count
+			infinite: 1,
+			// animation-play-state
+			paused: 1,
+			running: 1,
+			// animation-timing-function
+			ease: 1,
+			"ease-in": 1,
+			"ease-out": 1,
+			"ease-in-out": 1,
+			linear: 1,
+			"step-end": 1,
+			"step-start": 1,
+			// Special
+			none: Infinity, // No matter how many times you write none, it will never be an animation name
+			...GLOBAL_VALUES
+		});
+		knownProperties.set("animation-name", {
+			// Special
+			none: Infinity, // No matter how many times you write none, it will never be an animation name
+			...GLOBAL_VALUES
+		});
+	}
+
+	if (options.container) {
+		knownProperties.set("container", {
+			// container-type
+			normal: 1,
+			size: 1,
+			"inline-size": 1,
+			"scroll-state": 1,
+			// Special
+			none: Infinity,
+			...GLOBAL_VALUES
+		});
+		knownProperties.set("container-name", {
+			// Special
+			none: Infinity,
+			...GLOBAL_VALUES
+		});
+	}
+
+	if (options.customIdents) {
+		knownProperties.set("list-style", {
+			// list-style-position
+			inside: 1,
+			outside: 1,
+			// list-style-type
+			...PREDEFINED_COUNTER_STYLES,
+			// Special
+			none: Infinity,
+			...GLOBAL_VALUES
+		});
+		knownProperties.set("list-style-type", {
+			// list-style-type
+			...PREDEFINED_COUNTER_STYLES,
+			// Special
+			none: Infinity,
+			...GLOBAL_VALUES
+		});
+		knownProperties.set("system", {
+			cyclic: 1,
+			numeric: 1,
+			alphabetic: 1,
+			symbolic: 1,
+			additive: 1,
+			fixed: 1,
+			extends: 1,
+			...PREDEFINED_COUNTER_STYLES
+		});
+		knownProperties.set("fallback", {
+			...PREDEFINED_COUNTER_STYLES
+		});
+		knownProperties.set("speak-as", {
+			auto: 1,
+			bullets: 1,
+			numbers: 1,
+			words: 1,
+			"spell-out": 1,
+			...PREDEFINED_COUNTER_STYLES
+		});
+	}
+
+	if (options.grid) {
+		knownProperties.set("grid", GRID);
+		knownProperties.set("grid-area", GRID_AREA_OR_COLUMN_OR_ROW);
+		knownProperties.set("grid-column", GRID_AREA_OR_COLUMN_OR_ROW);
+		knownProperties.set("grid-column-end", GRID_AREA_OR_COLUMN_OR_ROW);
+		knownProperties.set("grid-column-start", GRID_AREA_OR_COLUMN_OR_ROW);
+		knownProperties.set("grid-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-columns", GRID_TEMPLATE_COLUMNS_OR_ROWS);
+		knownProperties.set("grid-template-rows", GRID_TEMPLATE_COLUMNS_OR_ROWS);
+	}
+
+	return knownProperties;
+};
+
 class LocConverter {
 	/**
 	 * @param {string} input input
@@ -323,36 +575,39 @@ const EMPTY_COMMENT_OPTIONS = {
 const CSS_MODE_TOP_LEVEL = 0;
 const CSS_MODE_IN_BLOCK = 1;
 
+const LOCAL_MODE = 0;
+const GLOBAL_MODE = 1;
+
 const eatUntilSemi = walkCssTokens.eatUntil(";");
 const eatUntilLeftCurly = walkCssTokens.eatUntil("{");
-const eatSemi = walkCssTokens.eatUntil(";");
 
 /**
- * @typedef {object} CssParserOptions
- * @property {boolean=} importOption need handle `@import`
- * @property {boolean=} url need handle URLs
+ * @typedef {object} CssParserOwnOptions
  * @property {("pure" | "global" | "local" | "auto")=} defaultMode default mode
- * @property {boolean=} namedExports is named exports
- * @property {CssParserExportType=} exportType export type
  */
 
+/** @typedef {CssModuleParserOptions & CssParserOwnOptions} CssParserOptions */
+
 class CssParser extends Parser {
 	/**
 	 * @param {CssParserOptions=} options options
 	 */
-	constructor({
-		defaultMode = "pure",
-		importOption = true,
-		url = true,
-		namedExports = true,
-		exportType
-	} = {}) {
+	constructor(options = {}) {
 		super();
-		this.defaultMode = defaultMode;
-		this.import = importOption;
-		this.url = url;
-		this.namedExports = namedExports;
-		this.exportType = exportType;
+		this.defaultMode =
+			typeof options.defaultMode !== "undefined" ? options.defaultMode : "pure";
+		this.options = {
+			url: true,
+			import: true,
+			namedExports: true,
+			animation: true,
+			container: true,
+			customIdents: true,
+			dashedIdents: true,
+			function: true,
+			grid: true,
+			...options
+		};
 		/** @type {Comment[] | undefined} */
 		this.comments = undefined;
 		this.magicCommentContext = createMagicCommentContext();
@@ -400,6 +655,7 @@ class CssParser extends Parser {
 			mode === "auto" &&
 			module.type === CSS_MODULE_TYPE_AUTO &&
 			IS_MODULES.test(
+				// TODO matchResource
 				parseResource(/** @type {string} */ (module.getResource())).path
 			)
 		) {
@@ -407,6 +663,12 @@ class CssParser extends Parser {
 		}
 
 		const isModules = mode === "global" || mode === "local";
+		const knownProperties = getKnownProperties({
+			animation: this.options.animation,
+			container: this.options.container,
+			customIdents: this.options.customIdents,
+			grid: this.options.grid
+		});
 
 		/** @type {BuildMeta} */
 		(module.buildMeta).isCSSModule = isModules;
@@ -417,7 +679,7 @@ class CssParser extends Parser {
 		let scope = CSS_MODE_TOP_LEVEL;
 		/** @type {boolean} */
 		let allowImportAtRule = true;
-		/** @type {[string, number, number][]} */
+		/** @type {[string, number, number, boolean?][]} */
 		const balanced = [];
 		let lastTokenEndForComments = 0;
 
@@ -425,10 +687,8 @@ class CssParser extends Parser {
 		let isNextRulePrelude = isModules;
 		/** @type {number} */
 		let blockNestingLevel = 0;
-		/** @type {"local" | "global" | undefined} */
+		/** @type {0 | 1 | undefined} */
 		let modeData;
-		/** @type {Set<string>} */
-		const declaredCssVariables = new Set();
 
 		/** @type {string[]} */
 		let lastLocalIdentifiers = [];
@@ -443,58 +703,36 @@ class CssParser extends Parser {
 		 * @returns {boolean} true, when next is nested syntax
 		 */
 		const isNextNestedSyntax = (input, pos) => {
-			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+			pos = walkCssTokens.eatWhitespaceAndComments(input, pos)[0];
 
-			if (input[pos] === "}") {
+			if (
+				input.charCodeAt(pos) === CC_RIGHT_CURLY ||
+				(input.charCodeAt(pos) === CC_HYPHEN_MINUS &&
+					input.charCodeAt(pos + 1) === CC_HYPHEN_MINUS)
+			) {
 				return false;
 			}
 
-			// According spec only identifier can be used as a property name
-			const isIdentifier = walkCssTokens.isIdentStartCodePoint(
-				input.charCodeAt(pos)
-			);
+			const identifier = walkCssTokens.eatIdentSequence(input, pos);
+
+			if (!identifier) {
+				return true;
+			}
+
+			const leftCurly = eatUntilLeftCurly(input, pos);
+			const content = input.slice(identifier[0], leftCurly);
+
+			if (content.includes(";") || content.includes("}")) {
+				return false;
+			}
 
-			return !isIdentifier;
+			return true;
 		};
 		/**
 		 * @returns {boolean} true, when in local scope
 		 */
 		const isLocalMode = () =>
-			modeData === "local" || (mode === "local" && modeData === undefined);
-
-		/**
-		 * @param {string} input input
-		 * @param {number} pos start position
-		 * @param {(input: string, pos: number) => number} eater eater
-		 * @returns {[number,string]} new position and text
-		 */
-		const eatText = (input, pos, eater) => {
-			let text = "";
-			for (;;) {
-				if (input.charCodeAt(pos) === CC_SLASH) {
-					const newPos = walkCssTokens.eatComments(input, pos);
-					if (pos !== newPos) {
-						pos = newPos;
-						if (pos === input.length) break;
-					} else {
-						text += "/";
-						pos++;
-						if (pos === input.length) break;
-					}
-				}
-				const newPos = eater(input, pos);
-				if (pos !== newPos) {
-					text += input.slice(pos, newPos);
-					pos = newPos;
-				} else {
-					break;
-				}
-				if (pos === input.length) break;
-			}
-			return [pos, text.trimEnd()];
-		};
-
-		const eatPropertyName = walkCssTokens.eatUntil(":{};");
+			modeData === LOCAL_MODE || (mode === "local" && modeData === undefined);
 
 		/**
 		 * @param {string} input input
@@ -604,7 +842,10 @@ class CssParser extends Parser {
 			}
 
 			const last = tokens[2] || tokens[1] || tokens[0];
-			const mediaStart = walkCssTokens.eatWhitespaceAndComments(input, last[1]);
+			const mediaStart = walkCssTokens.eatWhitespaceAndComments(
+				input,
+				last[1]
+			)[0];
 
 			let media;
 
@@ -816,6 +1057,23 @@ class CssParser extends Parser {
 
 		// CSS modules stuff
 
+		/**
+		 * @param {string} value value to resolve
+		 * @returns {string | [string, string, boolean]} resolved reexport
+		 */
+		const getReexport = (value) => {
+			const reexport = icssDefinitions.get(value);
+
+			if (reexport) {
+				if (reexport.isReference) {
+					return [value, reexport.value, true];
+				}
+				return [value, reexport.value, false];
+			}
+
+			return value;
+		};
+
 		/**
 		 * @param {0 | 1} type import or export
 		 * @param {string} input input
@@ -823,7 +1081,7 @@ class CssParser extends Parser {
 		 * @returns {number} position after parse
 		 */
 		const processImportOrExport = (type, input, pos) => {
-			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+			pos = walkCssTokens.eatWhitespaceAndComments(input, pos)[0];
 			/** @type {string | undefined} */
 			let request;
 			if (type === 0) {
@@ -853,7 +1111,7 @@ class CssParser extends Parser {
 				}
 				request = input.slice(str[0] + 1, str[1] - 1);
 				pos = str[1];
-				pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+				pos = walkCssTokens.eatWhitespaceAndComments(input, pos)[0];
 				cc = input.charCodeAt(pos);
 				if (cc !== CC_RIGHT_PARENTHESIS) {
 					this._emitWarning(
@@ -866,7 +1124,7 @@ class CssParser extends Parser {
 					return pos;
 				}
 				pos++;
-				pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+				pos = walkCssTokens.eatWhitespaceAndComments(input, pos)[0];
 			}
 
 			/**
@@ -892,13 +1150,7 @@ class CssParser extends Parser {
 
 					icssDefinitions.set(name, { value, isReference: true });
 				} else if (type === 1) {
-					const reexport = icssDefinitions.get(value);
-					const dep = new CssIcssExportDependency(
-						name,
-						value,
-						reexport && reexport.isReference ? reexport.value : undefined,
-						undefined
-					);
+					const dep = new CssIcssExportDependency(name, getReexport(value));
 					const { line: sl, column: sc } = locConverter.get(start);
 					const { line: el, column: ec } = locConverter.get(end);
 					dep.setLoc(sl, sc, el, ec);
@@ -1044,27 +1296,13 @@ class CssParser extends Parser {
 						});
 					}
 
-					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
+							aliasName || name,
+							getReexport(aliasName || name),
+							undefined,
+							false,
+							CssIcssExportDependency.EXPORT_MODE.REPLACE
 						);
 						const { line: sl, column: sc } = locConverter.get(start);
 						const { line: el, column: ec } = locConverter.get(end);
@@ -1089,7 +1327,7 @@ class CssParser extends Parser {
 					return atRuleEnd;
 				}
 
-				const pos = walkCssTokens.eatWhitespaceAndComments(alias, ident[1]);
+				const pos = walkCssTokens.eatWhitespaceAndComments(alias, ident[1])[0];
 
 				const name = alias.slice(ident[0], ident[1]);
 				let value =
@@ -1164,23 +1402,36 @@ class CssParser extends Parser {
 			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);
+				{
+					identifier(input, start, end) {
+						if (type === 1) {
+							let identifier = unescapeIdentifier(input.slice(start, end));
+							const { line: sl, column: sc } = locConverter.get(start);
+							const { line: el, column: ec } = locConverter.get(end);
+							const isDashedIdent = isDashedIdentifier(identifier);
 
-								return end;
+							if (isDashedIdent) {
+								identifier = identifier.slice(2);
 							}
+
+							const dep = new CssIcssExportDependency(
+								identifier,
+								getReexport(identifier),
+								[start, end],
+								true,
+								CssIcssExportDependency.EXPORT_MODE.ONCE,
+								isDashedIdent
+									? CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
+									: CssIcssExportDependency.EXPORT_TYPE.NORMAL
+							);
+
+							dep.setLoc(sl, sc, el, ec);
+							module.addDependency(dep);
 						}
-					: {},
+
+						return end;
+					}
+				},
 				{},
 				{ onlyTopLevel: true, functionValue: true }
 			);
@@ -1197,35 +1448,69 @@ class CssParser extends Parser {
 		/**
 		 * @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
+		 * @param {{ string?: boolean, identifier?: boolean | RegExp }} 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(
+			return walkCssTokens.consumeUntil(
 				input,
 				end,
 				{
 					string(_input, start, end) {
 						if (!found && options.string) {
+							const value = unescapeIdentifier(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(
+								value,
+								value,
+								[start, end],
+								true,
+								CssIcssExportDependency.EXPORT_MODE.ONCE
+							);
+							dep.setLoc(sl, sc, el, ec);
+							module.addDependency(dep);
 							found = true;
-							value = [start, end, true];
 						}
 						return end;
 					},
-					identifier(_input, start, end) {
-						if (!found && options.identifier) {
-							found = true;
-							value = [start, end, false];
+					identifier(input, start, end) {
+						if (!found) {
+							const value = input.slice(start, end);
+
+							if (options.identifier) {
+								const identifier = unescapeIdentifier(value);
+
+								if (
+									options.identifier instanceof RegExp &&
+									options.identifier.test(identifier)
+								) {
+									return end;
+								}
+
+								const { line: sl, column: sc } = locConverter.get(start);
+								const { line: el, column: ec } = locConverter.get(end);
+
+								const dep = new CssIcssExportDependency(
+									identifier,
+									getReexport(identifier),
+									[start, end],
+									true,
+									CssIcssExportDependency.EXPORT_MODE.ONCE,
+									CssIcssExportDependency.EXPORT_TYPE.NORMAL
+								);
+								dep.setLoc(sl, sc, el, ec);
+								module.addDependency(dep);
+								found = true;
+							}
 						}
 						return end;
 					}
 				},
 				{
-					function(input, start, end) {
+					function: (input, start, end) => {
 						// No need to handle `:` (COLON), because it's always a function
 						const name = input
 							.slice(start, end - 1)
@@ -1240,53 +1525,36 @@ class CssParser extends Parser {
 							return processLocalOrGlobalFunction(input, type, start, end);
 						}
 
+						if (
+							this.options.dashedIdents &&
+							isLocalMode() &&
+							(name === "var" || name === "style")
+						) {
+							return processDashedIdent(input, end, 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} start start position
 		 * @param {number} end end position
 		 * @returns {number} position after handling
 		 */
-		const processVarFunction = (input, end) => {
-			const customIdent = walkCssTokens.eatIdentSequence(input, end);
+		const processDashedIdent = (input, start, end) => {
+			const customIdent = walkCssTokens.eatIdentSequence(input, start);
 			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(
+			const identifier = unescapeIdentifier(
 				input.slice(customIdent[0] + 2, customIdent[1])
 			);
 			const afterCustomIdent = walkCssTokens.eatWhitespaceAndComments(
 				input,
 				customIdent[1]
-			);
+			)[0];
 			if (
 				input.charCodeAt(afterCustomIdent) === CC_LOWER_F ||
 				input.charCodeAt(afterCustomIdent) === CC_UPPER_F
@@ -1303,7 +1571,7 @@ class CssParser extends Parser {
 				}
 				const from = walkCssTokens.eatIdentSequenceOrString(
 					input,
-					walkCssTokens.eatWhitespaceAndComments(input, fromWord[1])
+					walkCssTokens.eatWhitespaceAndComments(input, fromWord[1])[0]
 				);
 				if (!from) {
 					return end;
@@ -1316,14 +1584,15 @@ 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 CssIcssFromIdentifierDependency(
+					const dep = new CssIcssImportDependency(
 						path.slice(1, -1),
+						[customIdent[0], from[1] - 1],
 						/** @type {"local" | "global"} */
 						(mode),
-						[customIdent[0], from[1] - 1],
-						name,
-						name,
-						"--"
+						identifier,
+						identifier,
+						CssIcssExportDependency.EXPORT_MODE.NONE,
+						CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
 					);
 
 					dep.setLoc(sl, sc, el, ec);
@@ -1338,12 +1607,13 @@ class CssParser extends Parser {
 			} 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,
+				const dep = new CssIcssExportDependency(
+					identifier,
+					getReexport(identifier),
 					[customIdent[0], customIdent[1]],
-					"--",
-					declaredCssVariables
+					true,
+					CssIcssExportDependency.EXPORT_MODE.ONCE,
+					CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
 				);
 				dep.setLoc(sl, sc, el, ec);
 				module.addDependency(dep);
@@ -1359,81 +1629,131 @@ class CssParser extends Parser {
 		 * @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 = [];
+			pos = walkCssTokens.eatWhitespaceAndComments(input, pos)[0];
+			const identifier = walkCssTokens.eatIdentSequence(input, pos);
+
+			if (!identifier) {
+				return end;
+			}
+
+			const propertyNameStart = identifier[0];
+
+			pos = walkCssTokens.eatWhitespaceAndComments(input, identifier[1])[0];
+
+			if (input.charCodeAt(pos) !== CC_COLON) {
+				return end;
+			}
+
+			pos += 1;
+
+			// Remove prefix and lowercase
+			const propertyName = input
+				.slice(identifier[0], identifier[1])
+				.replace(/^(-\w+-)/, "")
+				.toLowerCase();
+
+			if (isLocalMode() && knownProperties.has(propertyName)) {
+				/** @type {[number, number, boolean?][]} */
+				const values = [];
 				/** @type {Record<string, number>} */
-				let parsedAnimationKeywords = Object.create(null);
+				let parsedKeywords = Object.create(null);
+
+				const isGridProperty = Boolean(propertyName.startsWith("grid"));
+				const isGridTemplate = isGridProperty
+					? Boolean(
+							propertyName === "grid" ||
+							propertyName === "grid-template" ||
+							propertyName === "grid-template-columns" ||
+							propertyName === "grid-template-rows"
+						)
+					: false;
 
 				const end = walkCssTokens.consumeUntil(
 					input,
 					pos,
 					{
+						leftSquareBracket(input, start, end) {
+							let i = end;
+
+							while (true) {
+								i = walkCssTokens.eatWhitespaceAndComments(input, i)[0];
+								const name = walkCssTokens.eatIdentSequence(input, i);
+
+								if (!name) {
+									break;
+								}
+
+								values.push(name);
+								i = name[1];
+							}
+
+							return end;
+						},
 						string(_input, start, end) {
-							animationNames.push([start, end, true]);
+							if (
+								propertyName === "animation" ||
+								propertyName === "animation-name"
+							) {
+								values.push([start, end, true]);
+							}
+
+							if (
+								propertyName === "grid" ||
+								propertyName === "grid-template" ||
+								propertyName === "grid-template-areas"
+							) {
+								const areas = unescapeIdentifier(
+									input.slice(start + 1, end - 1)
+								);
+								const matches = matchAll(/\b\w+\b/g, areas);
+
+								for (const match of matches) {
+									const areaStart = start + 1 + match.index;
+									values.push([areaStart, areaStart + match[0].length, false]);
+								}
+							}
 
 							return end;
 						},
 						identifier(input, start, end) {
-							const keyword = input.slice(start, end).toLowerCase();
+							if (isGridTemplate) {
+								return end;
+							}
+
+							const identifier = input.slice(start, end);
+							const keyword = identifier.toLowerCase();
 
-							parsedAnimationKeywords[keyword] =
-								typeof parsedAnimationKeywords[keyword] !== "undefined"
-									? parsedAnimationKeywords[keyword] + 1
+							parsedKeywords[keyword] =
+								typeof parsedKeywords[keyword] !== "undefined"
+									? parsedKeywords[keyword] + 1
 									: 0;
+							const keywords =
+								/** @type {Record<string, number>} */
+								(knownProperties.get(propertyName));
 
 							if (
-								ANIMATION_KEYWORDS[keyword] &&
-								parsedAnimationKeywords[keyword] < ANIMATION_KEYWORDS[keyword]
+								keywords[keyword] &&
+								parsedKeywords[keyword] < keywords[keyword]
 							) {
 								return end;
 							}
 
-							animationNames.push([start, end, false]);
+							values.push([start, end]);
 							return end;
 						},
 						comma(_input, _start, end) {
-							parsedAnimationKeywords = {};
+							parsedKeywords = {};
 
 							return end;
 						}
 					},
 					{
-						function(input, start, 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;
 
@@ -1441,26 +1761,50 @@ class CssParser extends Parser {
 								return processLocalOrGlobalFunction(input, type, start, end);
 							}
 
+							if (
+								this.options.dashedIdents &&
+								isLocalMode() &&
+								name === "var"
+							) {
+								return processDashedIdent(input, end, end);
+							}
+
+							if (this.options.url) {
+								if (name === "src" || name === "url") {
+									return processURLFunction(input, end, name);
+								} else if (IMAGE_SET_FUNCTION.test(name)) {
+									return processImageSetFunction(input, start, end);
+								}
+							}
+
 							return end;
 						}
 					},
-					{ onlyTopLevel: true, declarationValue: true }
+					{
+						onlyTopLevel: !isGridTemplate,
+						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;
+				if (values.length > 0) {
+					for (const value of values) {
+						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(
 							isString
 								? input.slice(start + 1, end - 1)
 								: input.slice(start, end)
 						);
-						const dep = new CssIcssSelfLocalIdentifierDependency(
+						const dep = new CssIcssExportDependency(
 							name,
-							undefined,
-							[start, end]
+							getReexport(name),
+							[start, end],
+							true,
+							CssIcssExportDependency.EXPORT_MODE.ONCE,
+							isGridProperty
+								? CssIcssExportDependency.EXPORT_TYPE.GRID_CUSTOM_IDENTIFIER
+								: CssIcssExportDependency.EXPORT_TYPE.NORMAL
 						);
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);
@@ -1491,7 +1835,7 @@ class CssParser extends Parser {
 				const classNames = new Set();
 
 				while (true) {
-					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+					pos = walkCssTokens.eatWhitespaceAndComments(input, pos)[0];
 
 					let className = walkCssTokens.eatIdentSequence(input, pos);
 
@@ -1509,14 +1853,20 @@ class CssParser extends Parser {
 						pos = walkCssTokens.eatWhitespaceAndComments(
 							input,
 							className[1] + 1
-						);
+						)[0];
 						className = walkCssTokens.eatIdentSequence(input, pos);
 						if (className) {
-							pos = walkCssTokens.eatWhitespaceAndComments(input, className[1]);
+							pos = walkCssTokens.eatWhitespaceAndComments(
+								input,
+								className[1]
+							)[0];
 							pos += 1;
 						}
 					} else if (className) {
-						pos = walkCssTokens.eatWhitespaceAndComments(input, className[1]);
+						pos = walkCssTokens.eatWhitespaceAndComments(
+							input,
+							className[1]
+						)[0];
 						pos = className[1];
 					}
 
@@ -1533,26 +1883,16 @@ class CssParser extends Parser {
 						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 resolvedClassName = getReexport(identifier);
+							const dep = new CssIcssExportDependency(
+								lastLocalIdentifier,
+								resolvedClassName,
+								[start, end],
+								isGlobalFunction ? false : !Array.isArray(resolvedClassName),
+								isGlobalFunction
+									? CssIcssExportDependency.EXPORT_MODE.APPEND
+									: CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE
+							);
 							const { line: sl, column: sc } = locConverter.get(start);
 							const { line: el, column: ec } = locConverter.get(end);
 							dep.setLoc(sl, sc, el, ec);
@@ -1582,14 +1922,15 @@ class CssParser extends Parser {
 							for (const className of classNames) {
 								const [start, end] = className;
 								const identifier = unescapeIdentifier(input.slice(start, end));
-								const dep = new CssIcssFromIdentifierDependency(
+								const dep = new CssIcssImportDependency(
 									request,
+									[start, end],
 									/** @type {"local" | "global"} */
 									(mode),
-									[start, end],
 									identifier,
 									/** @type {string} */
-									(lastLocalIdentifier)
+									(lastLocalIdentifier),
+									CssIcssExportDependency.EXPORT_MODE.APPEND
 								);
 								const { line: sl, column: sc } = locConverter.get(start);
 								const { line: el, column: ec } = locConverter.get(end);
@@ -1608,15 +1949,13 @@ class CssParser extends Parser {
 									const identifier = unescapeIdentifier(
 										input.slice(start, end)
 									);
-									const reexport = icssDefinitions.get(identifier);
-									const dep = new CssIcssGlobalIdentifierDependency(
+									const dep = new CssIcssExportDependency(
 										/** @type {string} */
 										(lastLocalIdentifier),
-										identifier,
-										reexport && reexport.isReference
-											? reexport.value
-											: undefined,
-										[start, end]
+										getReexport(identifier),
+										[start, end],
+										false,
+										CssIcssExportDependency.EXPORT_MODE.APPEND
 									);
 									const { line: sl, column: sc } = locConverter.get(start);
 									const { line: el, column: ec } = locConverter.get(end);
@@ -1657,6 +1996,7 @@ class CssParser extends Parser {
 				const dep = new ConstDependency("", [propertyNameStart, end]);
 				module.addPresentationalDependency(dep);
 			}
+
 			return pos;
 		};
 
@@ -1666,10 +2006,16 @@ class CssParser extends Parser {
 		 * @param {number} end end position
 		 * @returns {number} position after handling
 		 */
-		const processHashID = (input, start, end) => {
+		const processIdSelector = (input, start, end) => {
 			const valueStart = start + 1;
 			const name = unescapeIdentifier(input.slice(valueStart, end));
-			const dep = new CssIcssLocalIdentifierDependency(name, [valueStart, end]);
+			const dep = new CssIcssExportDependency(
+				name,
+				getReexport(name),
+				[valueStart, end],
+				true,
+				CssIcssExportDependency.EXPORT_MODE.ONCE
+			);
 			const { line: sl, column: sc } = locConverter.get(start);
 			const { line: el, column: ec } = locConverter.get(end);
 			dep.setLoc(sl, sc, el, ec);
@@ -1677,6 +2023,94 @@ class CssParser extends Parser {
 			return end;
 		};
 
+		/**
+		 * @param {string} input input
+		 * @param {number} start start position
+		 * @param {number} end end position
+		 * @returns {number} position after handling
+		 */
+		const processClassSelector = (input, start, end) => {
+			const ident = walkCssTokens.skipCommentsAndEatIdentSequence(input, end);
+			if (!ident) return end;
+			const name = unescapeIdentifier(input.slice(ident[0], ident[1]));
+			lastLocalIdentifiers.push(name);
+			const dep = new CssIcssExportDependency(
+				name,
+				getReexport(name),
+				[ident[0], ident[1]],
+				true,
+				CssIcssExportDependency.EXPORT_MODE.ONCE
+			);
+			const { line: sl, column: sc } = locConverter.get(ident[0]);
+			const { line: el, column: ec } = locConverter.get(ident[1]);
+			dep.setLoc(sl, sc, el, ec);
+			module.addDependency(dep);
+			return ident[1];
+		};
+
+		/**
+		 * @param {string} input input
+		 * @param {number} start start position
+		 * @param {number} end end position
+		 * @returns {number} position after handling
+		 */
+		const processAttributeSelector = (input, start, end) => {
+			end = walkCssTokens.eatWhitespaceAndComments(input, end)[0];
+			const identifier = walkCssTokens.eatIdentSequence(input, end);
+			if (!identifier) return end;
+			const name = unescapeIdentifier(
+				input.slice(identifier[0], identifier[1])
+			);
+			if (name.toLowerCase() !== "class") {
+				return end;
+			}
+			end = walkCssTokens.eatWhitespaceAndComments(input, identifier[1])[0];
+
+			const isTilde = input.charCodeAt(end) === CC_TILDE;
+
+			if (
+				input.charCodeAt(end) !== CC_EQUAL &&
+				input.charCodeAt(end) !== CC_TILDE
+			) {
+				return end;
+			}
+
+			end += 1;
+
+			if (isTilde) {
+				if (input.charCodeAt(end) !== CC_EQUAL) {
+					return end;
+				}
+
+				end += 1;
+			}
+
+			end = walkCssTokens.eatWhitespaceAndComments(input, end)[0];
+			const value = walkCssTokens.eatIdentSequenceOrString(input, end);
+
+			if (!value) {
+				return end;
+			}
+
+			const classNameStart = value[2] ? value[0] : value[0] + 1;
+			const classNameEnd = value[2] ? value[1] : value[1] - 1;
+			const className = unescapeIdentifier(
+				input.slice(classNameStart, classNameEnd)
+			);
+			const dep = new CssIcssExportDependency(
+				className,
+				getReexport(className),
+				[classNameStart, classNameEnd],
+				true,
+				CssIcssExportDependency.EXPORT_MODE.NONE
+			);
+			const { line: sl, column: sc } = locConverter.get(classNameStart);
+			const { line: el, column: ec } = locConverter.get(classNameEnd);
+			dep.setLoc(sl, sc, el, ec);
+			module.addDependency(dep);
+			return value[2] ? classNameEnd : classNameEnd + 1;
+		};
+
 		walkCssTokens(source, 0, {
 			comment,
 			leftCurlyBracket: (input, start, end) => {
@@ -1722,7 +2156,7 @@ class CssParser extends Parser {
 				return end;
 			},
 			url: (input, start, end, contentStart, contentEnd) => {
-				if (!this.url) {
+				if (!this.options.url) {
 					return end;
 				}
 
@@ -1750,8 +2184,8 @@ class CssParser extends Parser {
 						return eatUntilSemi(input, start);
 					}
 					case "@import": {
-						if (!this.import) {
-							return eatSemi(input, end);
+						if (!this.options.import) {
+							return eatUntilSemi(input, end);
 						}
 
 						if (!allowImportAtRule) {
@@ -1772,6 +2206,7 @@ class CssParser extends Parser {
 							if (name === "@value") {
 								return processAtValue(input, start, end);
 							} else if (
+								this.options.animation &&
 								OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name) &&
 								isLocalMode()
 							) {
@@ -1779,11 +2214,21 @@ class CssParser extends Parser {
 									string: true,
 									identifier: true
 								});
-							} else if (name === "@property" && isLocalMode()) {
+							} else if (
+								this.options.customIdents &&
+								name === "@counter-style" &&
+								isLocalMode()
+							) {
+								return processLocalAtRule(input, end, {
+									identifier: true
+								});
+							} else if (
+								this.options.container &&
+								name === "@container" &&
+								isLocalMode()
+							) {
 								return processLocalAtRule(input, end, {
-									identifier: true,
-									dashed: true,
-									validate: (name) => name.startsWith("--") && name.length >= 3
+									identifier: /^(none|and|or|not)$/
 								});
 							} else if (name === "@scope") {
 								isNextRulePrelude = true;
@@ -1805,15 +2250,23 @@ class CssParser extends Parser {
 			},
 			identifier: (input, start, end) => {
 				if (isModules) {
-					const name = input.slice(start, end);
+					const identifier = input.slice(start, end);
 
-					if (icssDefinitions.has(name)) {
-						return processICSSSymbol(name, start, end);
+					if (icssDefinitions.has(identifier)) {
+						return processICSSSymbol(identifier, start, end);
+					}
+
+					if (
+						this.options.dashedIdents &&
+						isLocalMode() &&
+						isDashedIdentifier(identifier)
+					) {
+						return processDashedIdent(input, start, end);
 					}
 
 					switch (scope) {
 						case CSS_MODE_IN_BLOCK: {
-							if (isLocalMode()) {
+							if (isModules && !isNextRulePrelude) {
 								// Handle only top level values and not inside functions
 								return processLocalDeclaration(input, start, end);
 							}
@@ -1826,29 +2279,14 @@ class CssParser extends Parser {
 			},
 			delim: (input, start, end) => {
 				if (isNextRulePrelude && isLocalMode()) {
-					const ident = walkCssTokens.skipCommentsAndEatIdentSequence(
-						input,
-						end
-					);
-					if (!ident) return end;
-					const name = unescapeIdentifier(input.slice(ident[0], ident[1]));
-					lastLocalIdentifiers.push(name);
-					const dep = new CssIcssLocalIdentifierDependency(name, [
-						ident[0],
-						ident[1]
-					]);
-					const { line: sl, column: sc } = locConverter.get(ident[0]);
-					const { line: el, column: ec } = locConverter.get(ident[1]);
-					dep.setLoc(sl, sc, el, ec);
-					module.addDependency(dep);
-					return ident[1];
+					return processClassSelector(input, start, end);
 				}
 
 				return end;
 			},
 			hash: (input, start, end, isID) => {
 				if (isNextRulePrelude && isLocalMode() && isID) {
-					return processHashID(input, start, end);
+					return processIdSelector(input, start, end);
 				}
 
 				return end;
@@ -1883,18 +2321,23 @@ class CssParser extends Parser {
 
 								if (isFn && name === "local") {
 									// Eat extra whitespace
-									const end = walkCssTokens.eatWhitespace(input, ident[1] + 1);
-									modeData = "local";
+									const end = walkCssTokens.eatWhitespaceAndComments(
+										input,
+										ident[1] + 1
+									)[0];
+									modeData = LOCAL_MODE;
 									const dep = new ConstDependency("", [start, end]);
 									module.addPresentationalDependency(dep);
-									balanced.push([":local", start, end]);
+									balanced.push([":local", start, end, true]);
 									return end;
 								} else if (name === "local") {
-									modeData = "local";
-									// Eat extra whitespace
-									end = walkCssTokens.eatWhitespace(input, ident[1]);
+									modeData = LOCAL_MODE;
+									const found = walkCssTokens.eatWhitespaceAndComments(
+										input,
+										ident[1]
+									);
 
-									if (ident[1] === end) {
+									if (!found[1]) {
 										this._emitWarning(
 											state,
 											`Missing whitespace after ':local' in '${input.slice(
@@ -1907,23 +2350,30 @@ class CssParser extends Parser {
 										);
 									}
 
+									end = walkCssTokens.eatWhitespace(input, ident[1]);
 									const dep = new ConstDependency("", [start, end]);
 									module.addPresentationalDependency(dep);
 									return end;
 								} else if (isFn && name === "global") {
 									// Eat extra whitespace
-									const end = walkCssTokens.eatWhitespace(input, ident[1] + 1);
-									modeData = "global";
+									const end = walkCssTokens.eatWhitespaceAndComments(
+										input,
+										ident[1] + 1
+									)[0];
+									modeData = GLOBAL_MODE;
 									const dep = new ConstDependency("", [start, end]);
 									module.addPresentationalDependency(dep);
-									balanced.push([":global", start, end]);
+									balanced.push([":global", start, end, true]);
 									return end;
 								} else if (name === "global") {
-									modeData = "global";
+									modeData = GLOBAL_MODE;
 									// Eat extra whitespace
-									end = walkCssTokens.eatWhitespace(input, ident[1]);
+									const found = walkCssTokens.eatWhitespaceAndComments(
+										input,
+										ident[1]
+									);
 
-									if (ident[1] === end) {
+									if (!found[1]) {
 										this._emitWarning(
 											state,
 											`Missing whitespace after ':global' in '${input.slice(
@@ -1936,6 +2386,7 @@ class CssParser extends Parser {
 										);
 									}
 
+									end = walkCssTokens.eatWhitespace(input, ident[1]);
 									const dep = new ConstDependency("", [start, end]);
 									module.addPresentationalDependency(dep);
 									return end;
@@ -1960,23 +2411,44 @@ class CssParser extends Parser {
 				switch (name) {
 					case "src":
 					case "url": {
-						if (!this.url) {
+						if (!this.options.url) {
 							return end;
 						}
 
 						return processURLFunction(input, end, name);
 					}
 					default: {
-						if (this.url && IMAGE_SET_FUNCTION.test(name)) {
+						if (this.options.url && IMAGE_SET_FUNCTION.test(name)) {
 							return processImageSetFunction(input, start, end);
-						} else if (isLocalMode() && name === "var") {
-							return processVarFunction(input, end);
+						}
+
+						if (isModules) {
+							if (
+								this.options.function &&
+								isLocalMode() &&
+								isDashedIdentifier(name)
+							) {
+								return processDashedIdent(input, start, end);
+							}
+
+							const type =
+								name === "local" ? 1 : name === "global" ? 2 : undefined;
+
+							if (type && !isNextRulePrelude) {
+								return processLocalOrGlobalFunction(input, type, start, end);
+							}
 						}
 					}
 				}
 
 				return end;
 			},
+			leftSquareBracket: (input, start, end) => {
+				if (isNextRulePrelude && isLocalMode()) {
+					return processAttributeSelector(input, start, end);
+				}
+				return end;
+			},
 			leftParenthesis: (input, start, end) => {
 				balanced.push(["(", start, end]);
 
@@ -1985,17 +2457,27 @@ class CssParser extends Parser {
 			rightParenthesis: (input, start, end) => {
 				const popped = balanced.pop();
 
-				if (
-					isModules &&
-					popped &&
-					(popped[0] === ":local" || popped[0] === ":global")
-				) {
-					modeData = balanced[balanced.length - 1]
-						? /** @type {"local" | "global"} */
-							(balanced[balanced.length - 1][0])
-						: undefined;
-					const dep = new ConstDependency("", [start, end]);
-					module.addPresentationalDependency(dep);
+				if (isModules && popped) {
+					const isLocal = popped[0] === ":local";
+					const isGlobal = popped[0] === ":global";
+					if (isLocal || isGlobal) {
+						modeData = balanced[balanced.length - 1]
+							? balanced[balanced.length - 1][0] === ":local"
+								? LOCAL_MODE
+								: balanced[balanced.length - 1][0] === ":global"
+									? GLOBAL_MODE
+									: undefined
+							: undefined;
+						if (popped[3] && isLocal) {
+							while (walkCssTokens.isWhiteSpace(input.charCodeAt(start - 1))) {
+								start -= 1;
+							}
+						}
+						const dep = new ConstDependency("", [start, end]);
+						module.addPresentationalDependency(dep);
+					} else if (isNextRulePrelude) {
+						modeData = undefined;
+					}
 				}
 
 				return end;
@@ -2021,9 +2503,11 @@ class CssParser extends Parser {
 
 		const buildMeta = /** @type {BuildMeta} */ (state.module.buildMeta);
 
-		buildMeta.exportsType = this.namedExports ? "namespace" : "default";
-		buildMeta.defaultObject = this.namedExports ? false : "redirect-warn";
-		buildMeta.exportType = this.exportType;
+		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.
@@ -2039,6 +2523,9 @@ class CssParser extends Parser {
 				).exportType;
 			}
 		}
+		if (!buildMeta.exportType) {
+			buildMeta.exportType = "link";
+		}
 
 		// TODO this.namedExports?
 		if (
@@ -2091,7 +2578,7 @@ class CssParser extends Parser {
 		if (comments.length === 0) {
 			return EMPTY_COMMENT_OPTIONS;
 		}
-		/** @type {Record<string, EXPECTED_ANY> } */
+		/** @type {Record<string, EXPECTED_ANY>} */
 		const options = {};
 		/** @type {(Error & { comment: Comment })[]} */
 		const errors = [];