webpack 5.82.0 → 5.82.1

package/lib/css/CssParser.js

@@ -120,21 +120,15 @@ class LocConverter {
 }
 
 const CSS_MODE_TOP_LEVEL = 0;
-const CSS_MODE_IN_RULE = 1;
-const CSS_MODE_IN_LOCAL_RULE = 2;
-const CSS_MODE_AT_IMPORT_EXPECT_URL = 3;
-const CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA = 4;
-const CSS_MODE_AT_IMPORT_INVALID = 5;
-const CSS_MODE_AT_NAMESPACE_INVALID = 6;
+const CSS_MODE_IN_BLOCK = 1;
+const CSS_MODE_AT_IMPORT_EXPECT_URL = 2;
+const CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA = 3;
+const CSS_MODE_AT_IMPORT_INVALID = 4;
+const CSS_MODE_AT_NAMESPACE_INVALID = 5;
 
 class CssParser extends Parser {
-	constructor({
-		allowPseudoBlocks = true,
-		allowModeSwitch = true,
-		defaultMode = "global"
-	} = {}) {
+	constructor({ allowModeSwitch = true, defaultMode = "global" } = {}) {
 		super();
-		this.allowPseudoBlocks = allowPseudoBlocks;
 		this.allowModeSwitch = allowModeSwitch;
 		this.defaultMode = defaultMode;
 	}
@@ -174,30 +168,57 @@ class CssParser extends Parser {
 		}
 
 		const module = state.module;
-
-		const declaredCssVariables = new Set();
-
 		const locConverter = new LocConverter(source);
+		/** @type {Set<string>}*/
+		const declaredCssVariables = new Set();
 		/** @type {number} */
-		let mode = CSS_MODE_TOP_LEVEL;
+		let scope = CSS_MODE_TOP_LEVEL;
 		/** @type {number} */
-		let modeNestingLevel = 0;
+		let blockNestingLevel = 0;
 		/** @type {boolean} */
 		let allowImportAtRule = true;
+		/** @type {"local" | "global" | undefined} */
 		let modeData = undefined;
-		/** @type {string | boolean | undefined} */
-		let singleClassSelector = undefined;
 		/** @type {[number, number] | undefined} */
 		let lastIdentifier = undefined;
-		/** @type {boolean} */
-		let awaitRightParenthesis = false;
 		/** @type [string, number, number][] */
 		let balanced = [];
-		const modeStack = [];
+		/** @type {undefined | { start: number, end: number, url?: string, media?: string, supports?: string, layer?: string  }} */
+		let importData = undefined;
+		/** @type {boolean} */
+		let inAnimationProperty = false;
+		/** @type {boolean} */
+		let isNextRulePrelude = true;
+
+		/**
+		 * @param {string} input input
+		 * @param {number} pos position
+		 * @returns {boolean} true, when next is nested syntax
+		 */
+		const isNextNestedSyntax = (input, pos) => {
+			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 
-		const isTopLevelLocal = () =>
+			if (input[pos] === "}") {
+				return false;
+			}
+
+			// According spec only identifier can be used as a property name
+			const isIdentifier = walkCssTokens.isIdentStartCodePoint(
+				input.charCodeAt(pos)
+			);
+
+			return !isIdentifier;
+		};
+		/**
+		 * @returns {boolean} true, when in local scope
+		 */
+		const isLocalMode = () =>
 			modeData === "local" ||
 			(this.defaultMode === "local" && modeData === undefined);
+		/**
+		 * @param {string} chars characters
+		 * @returns {(input: string, pos: number) => number} function to eat characters
+		 */
 		const eatUntil = chars => {
 			const charCodes = Array.from({ length: chars.length }, (_, i) =>
 				chars.charCodeAt(i)
@@ -218,6 +239,12 @@ class CssParser extends Parser {
 				}
 			};
 		};
+		/**
+		 * @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 (;;) {
@@ -245,6 +272,11 @@ class CssParser extends Parser {
 		};
 		const eatExportName = eatUntil(":};/");
 		const eatExportValue = eatUntil("};/");
+		/**
+		 * @param {string} input input
+		 * @param {number} pos start position
+		 * @returns {number} position after parse
+		 */
 		const parseExports = (input, pos) => {
 			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 			const cc = input.charCodeAt(pos);
@@ -313,9 +345,14 @@ class CssParser extends Parser {
 			return pos;
 		};
 		const eatPropertyName = eatUntil(":{};");
-		const processLocalDeclaration = (input, pos) => {
+		/**
+		 * @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;
-			const start = pos;
 			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 			const propertyNameStart = pos;
 			const [propertyNameEnd, propertyName] = eatText(
@@ -323,7 +360,7 @@ class CssParser extends Parser {
 				pos,
 				eatPropertyName
 			);
-			if (input.charCodeAt(propertyNameEnd) !== CC_COLON) return start;
+			if (input.charCodeAt(propertyNameEnd) !== CC_COLON) return end;
 			pos = propertyNameEnd + 1;
 			if (propertyName.startsWith("--")) {
 				// CSS Variable
@@ -339,44 +376,40 @@ class CssParser extends Parser {
 				module.addDependency(dep);
 				declaredCssVariables.add(name);
 			} else if (
+				!propertyName.startsWith("--") &&
 				OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
 			) {
-				modeData = "animation";
-				lastIdentifier = undefined;
+				inAnimationProperty = true;
 			}
 			return pos;
 		};
-		const processDeclarationValueDone = (input, pos) => {
-			if (modeData === "animation" && lastIdentifier) {
+		/**
+		 * @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 = input.slice(lastIdentifier[0], lastIdentifier[1]);
 				const dep = new CssSelfLocalIdentifierDependency(name, lastIdentifier);
 				dep.setLoc(sl, sc, el, ec);
 				module.addDependency(dep);
+				lastIdentifier = undefined;
 			}
 		};
-		const eatAtRuleNested = eatUntil("{};/");
 		const eatKeyframes = eatUntil("{};/");
 		const eatNameInVar = eatUntil(",)};/");
 		walkCssTokens(source, {
 			isSelector: () => {
-				return (
-					mode !== CSS_MODE_IN_RULE &&
-					mode !== CSS_MODE_IN_LOCAL_RULE &&
-					mode !== CSS_MODE_AT_IMPORT_EXPECT_URL &&
-					mode !== CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA &&
-					mode !== CSS_MODE_AT_IMPORT_INVALID &&
-					mode !== CSS_MODE_AT_NAMESPACE_INVALID
-				);
+				return isNextRulePrelude;
 			},
 			url: (input, start, end, contentStart, contentEnd) => {
 				let value = normalizeUrl(input.slice(contentStart, contentEnd), false);
-				switch (mode) {
+				switch (scope) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
-						modeData.url = value;
-						modeData.lastPos = end;
-						mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
+						importData.url = value;
+						importData.end = end;
+						scope = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
 						break;
 					}
 					// Do not parse URLs in `supports(...)`
@@ -388,7 +421,7 @@ class CssParser extends Parser {
 					case CSS_MODE_AT_IMPORT_INVALID: {
 						break;
 					}
-					default: {
+					case CSS_MODE_IN_BLOCK: {
 						// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
 						if (value.length === 0) {
 							break;
@@ -406,16 +439,19 @@ class CssParser extends Parser {
 				return end;
 			},
 			string: (input, start, end) => {
-				switch (mode) {
+				switch (scope) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
-						modeData.url = normalizeUrl(input.slice(start + 1, end - 1), true);
-						modeData.lastPos = end;
+						importData.url = normalizeUrl(
+							input.slice(start + 1, end - 1),
+							true
+						);
+						importData.end = end;
 						const insideURLFunction =
 							balanced[balanced.length - 1] &&
 							balanced[balanced.length - 1][0] === "url";
 
 						if (!insideURLFunction) {
-							mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
+							scope = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
 						}
 						break;
 					}
@@ -423,7 +459,7 @@ class CssParser extends Parser {
 					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
 						break;
 					}
-					default: {
+					case CSS_MODE_IN_BLOCK: {
 						// TODO move escaped parsing to tokenizer
 						const last = balanced[balanced.length - 1];
 
@@ -458,7 +494,7 @@ class CssParser extends Parser {
 			atKeyword: (input, start, end) => {
 				const name = input.slice(start, end).toLowerCase();
 				if (name === "@namespace") {
-					mode = CSS_MODE_AT_NAMESPACE_INVALID;
+					scope = CSS_MODE_AT_NAMESPACE_INVALID;
 					this._emitWarning(
 						state,
 						"@namespace is not supported in bundled CSS",
@@ -469,7 +505,7 @@ class CssParser extends Parser {
 					return end;
 				} else if (name === "@import") {
 					if (!allowImportAtRule) {
-						mode = CSS_MODE_AT_IMPORT_INVALID;
+						scope = CSS_MODE_AT_IMPORT_INVALID;
 						this._emitWarning(
 							state,
 							"Any @import rules must precede all other rules",
@@ -480,17 +516,10 @@ class CssParser extends Parser {
 						return end;
 					}
 
-					mode = CSS_MODE_AT_IMPORT_EXPECT_URL;
-					modeData = {
-						atRuleStart: start,
-						lastPos: end,
-						url: undefined,
-						layer: undefined,
-						supports: undefined,
-						media: undefined
-					};
+					scope = CSS_MODE_AT_IMPORT_EXPECT_URL;
+					importData = { start, end };
 				} else if (
-					isTopLevelLocal() &&
+					this.allowModeSwitch &&
 					OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)
 				) {
 					let pos = end;
@@ -515,31 +544,60 @@ class CssParser extends Parser {
 					dep.setLoc(sl, sc, el, ec);
 					module.addDependency(dep);
 					pos = newPos;
-					mode = CSS_MODE_IN_LOCAL_RULE;
-					modeNestingLevel = 1;
 					return pos + 1;
-				} else if (name === "@media" || name === "@supports") {
-					// TODO handle nested CSS syntax
+				} else if (this.allowModeSwitch && name === "@property") {
 					let pos = end;
-					const [newPos] = eatText(input, pos, eatAtRuleNested);
-					pos = newPos;
+					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 					if (pos === input.length) return pos;
-					if (input.charCodeAt(pos) !== CC_LEFT_CURLY) {
+					const propertyNameStart = pos;
+					const [propertyNameEnd, propertyName] = eatText(
+						input,
+						pos,
+						eatKeyframes
+					);
+					if (propertyNameEnd === input.length) return propertyNameEnd;
+					if (!propertyName.startsWith("--")) return propertyNameEnd;
+					if (input.charCodeAt(propertyNameEnd) !== CC_LEFT_CURLY) {
 						this._emitWarning(
 							state,
-							`Unexpected ${input[pos]} at ${pos} during parsing of @media or @supports (expected '{')`,
+							`Unexpected '${input[propertyNameEnd]}' at ${propertyNameEnd} during parsing of @property (expected '{')`,
 							locConverter,
 							start,
-							pos
+							end
 						);
-						return pos;
+
+						return propertyNameEnd;
 					}
+					const { line: sl, column: sc } = locConverter.get(pos);
+					const { line: el, column: ec } = locConverter.get(propertyNameEnd);
+					const name = propertyName.slice(2);
+					const dep = new CssLocalIdentifierDependency(
+						name,
+						[propertyNameStart, propertyNameEnd],
+						"--"
+					);
+					dep.setLoc(sl, sc, el, ec);
+					module.addDependency(dep);
+					declaredCssVariables.add(name);
+					pos = propertyNameEnd;
 					return pos + 1;
+				} else if (
+					name === "@media" ||
+					name === "@supports" ||
+					name === "@layer" ||
+					name === "@container"
+				) {
+					modeData = isLocalMode() ? "local" : "global";
+					isNextRulePrelude = true;
+					return end;
+				} else if (this.allowModeSwitch) {
+					modeData = "global";
+					isNextRulePrelude = false;
 				}
 				return end;
 			},
 			semicolon: (input, start, end) => {
-				switch (mode) {
+				switch (scope) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
 						this._emitWarning(
 							state,
@@ -551,124 +609,119 @@ class CssParser extends Parser {
 						return end;
 					}
 					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
-						if (modeData.url === undefined) {
+						if (!importData.url === undefined) {
 							this._emitWarning(
 								state,
-								`Expected URL for @import at ${modeData.atRuleStart}`,
+								`Expected URL for @import at ${importData.start}`,
 								locConverter,
-								modeData.atRuleStart,
-								modeData.lastPos
+								importData.start,
+								importData.end
 							);
 							return end;
 						}
 						const semicolonPos = end;
 						end = walkCssTokens.eatWhiteLine(input, end + 1);
-						const { line: sl, column: sc } = locConverter.get(
-							modeData.atRuleStart
-						);
+						const { line: sl, column: sc } = locConverter.get(importData.start);
 						const { line: el, column: ec } = locConverter.get(end);
 						const pos = walkCssTokens.eatWhitespaceAndComments(
 							input,
-							modeData.lastPos
+							importData.end
 						);
 						// Prevent to consider comments as a part of media query
 						if (pos !== semicolonPos - 1) {
-							modeData.media = input
-								.slice(modeData.lastPos, semicolonPos - 1)
+							importData.media = input
+								.slice(importData.end, semicolonPos - 1)
 								.trim();
 						}
 						const dep = new CssImportDependency(
-							modeData.url.trim(),
-							[modeData.start, end],
-							modeData.layer,
-							modeData.supports,
-							modeData.media && modeData.media.length > 0
-								? modeData.media
+							importData.url.trim(),
+							[importData.start, end],
+							importData.layer,
+							importData.supports,
+							importData.media && importData.media.length > 0
+								? importData.media
 								: undefined
 						);
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);
-						modeData = undefined;
-						mode = CSS_MODE_TOP_LEVEL;
+						importData = undefined;
+						scope = CSS_MODE_TOP_LEVEL;
 						break;
 					}
-					case CSS_MODE_IN_LOCAL_RULE: {
-						processDeclarationValueDone(input, start);
-						return processLocalDeclaration(input, end);
-					}
-					case CSS_MODE_IN_RULE: {
-						return end;
+					case CSS_MODE_IN_BLOCK: {
+						if (this.allowModeSwitch) {
+							processDeclarationValueDone(input);
+							inAnimationProperty = false;
+							isNextRulePrelude = isNextNestedSyntax(input, end);
+						}
+						break;
 					}
 				}
-				mode = CSS_MODE_TOP_LEVEL;
-				modeData = undefined;
-				singleClassSelector = undefined;
 				return end;
 			},
 			leftCurlyBracket: (input, start, end) => {
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL:
+				switch (scope) {
+					case CSS_MODE_TOP_LEVEL: {
 						allowImportAtRule = false;
-						mode = isTopLevelLocal()
-							? CSS_MODE_IN_LOCAL_RULE
-							: CSS_MODE_IN_RULE;
-						modeNestingLevel = 1;
-						if (mode === CSS_MODE_IN_LOCAL_RULE)
-							return processLocalDeclaration(input, end);
+						scope = CSS_MODE_IN_BLOCK;
+						blockNestingLevel = 1;
+
+						if (this.allowModeSwitch) {
+							isNextRulePrelude = isNextNestedSyntax(input, end);
+						}
+
 						break;
-					case CSS_MODE_IN_RULE:
-					case CSS_MODE_IN_LOCAL_RULE:
-						modeNestingLevel++;
+					}
+					case CSS_MODE_IN_BLOCK: {
+						blockNestingLevel++;
+
+						if (this.allowModeSwitch) {
+							isNextRulePrelude = isNextNestedSyntax(input, end);
+						}
 						break;
+					}
 				}
 				return end;
 			},
 			rightCurlyBracket: (input, start, end) => {
-				switch (mode) {
-					case CSS_MODE_IN_LOCAL_RULE:
-						processDeclarationValueDone(input, start);
-					/* falls through */
-					case CSS_MODE_IN_RULE:
-						if (--modeNestingLevel === 0) {
-							mode = CSS_MODE_TOP_LEVEL;
-							modeData = undefined;
-							singleClassSelector = undefined;
+				switch (scope) {
+					case CSS_MODE_IN_BLOCK: {
+						if (isLocalMode()) {
+							processDeclarationValueDone(input);
+							inAnimationProperty = false;
 						}
-						break;
-				}
-				return end;
-			},
-			id: (input, start, end) => {
-				singleClassSelector = false;
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL:
-						if (isTopLevelLocal()) {
-							const name = input.slice(start + 1, end);
-							const dep = new CssLocalIdentifierDependency(name, [
-								start + 1,
-								end
-							]);
-							const { line: sl, column: sc } = locConverter.get(start);
-							const { line: el, column: ec } = locConverter.get(end);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
+						if (--blockNestingLevel === 0) {
+							scope = CSS_MODE_TOP_LEVEL;
+
+							if (this.allowModeSwitch) {
+								isNextRulePrelude = true;
+								modeData = undefined;
+							}
+						} else if (this.allowModeSwitch) {
+							isNextRulePrelude = isNextNestedSyntax(input, end);
 						}
 						break;
+					}
 				}
 				return end;
 			},
 			identifier: (input, start, end) => {
-				singleClassSelector = false;
-				switch (mode) {
-					case CSS_MODE_IN_LOCAL_RULE:
-						if (modeData === "animation") {
-							lastIdentifier = [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];
+							} else {
+								return processLocalDeclaration(input, start, end);
+							}
 						}
 						break;
+					}
 					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
 						if (input.slice(start, end).toLowerCase() === "layer") {
-							modeData.layer = "";
-							modeData.lastPos = end;
+							importData.layer = "";
+							importData.end = end;
 						}
 						break;
 					}
@@ -676,24 +729,25 @@ class CssParser extends Parser {
 				return end;
 			},
 			class: (input, start, end) => {
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL: {
-						if (isTopLevelLocal()) {
-							const name = input.slice(start + 1, end);
-							const dep = new CssLocalIdentifierDependency(name, [
-								start + 1,
-								end
-							]);
-							const { line: sl, column: sc } = locConverter.get(start);
-							const { line: el, column: ec } = locConverter.get(end);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
-							if (singleClassSelector === undefined) singleClassSelector = name;
-						} else {
-							singleClassSelector = false;
-						}
-						break;
-					}
+				if (isLocalMode()) {
+					const name = input.slice(start + 1, end);
+					const dep = new CssLocalIdentifierDependency(name, [start + 1, 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;
+			},
+			id: (input, start, end) => {
+				if (isLocalMode()) {
+					const name = input.slice(start + 1, end);
+					const dep = new CssLocalIdentifierDependency(name, [start + 1, 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;
 			},
@@ -702,75 +756,74 @@ class CssParser extends Parser {
 
 				balanced.push([name, start, end]);
 
-				switch (mode) {
-					case CSS_MODE_IN_LOCAL_RULE: {
-						name = name.toLowerCase();
-
-						if (name === "var") {
-							let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
-							if (pos === input.length) return pos;
-							const [newPos, name] = eatText(input, pos, eatNameInVar);
-							if (!name.startsWith("--")) return end;
-							const { line: sl, column: sc } = locConverter.get(pos);
-							const { line: el, column: ec } = locConverter.get(newPos);
-							const dep = new CssSelfLocalIdentifierDependency(
-								name.slice(2),
-								[pos, newPos],
-								"--",
-								declaredCssVariables
-							);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
-							return newPos;
-						}
-						break;
+				if (isLocalMode()) {
+					name = name.toLowerCase();
+
+					// Don't rename animation name when we have `var()` function
+					if (inAnimationProperty && balanced.length === 1) {
+						lastIdentifier = undefined;
+					}
+
+					if (name === "var") {
+						let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
+						if (pos === input.length) return pos;
+						const [newPos, name] = eatText(input, pos, eatNameInVar);
+						if (!name.startsWith("--")) return end;
+						const { line: sl, column: sc } = locConverter.get(pos);
+						const { line: el, column: ec } = locConverter.get(newPos);
+						const dep = new CssSelfLocalIdentifierDependency(
+							name.slice(2),
+							[pos, newPos],
+							"--",
+							declaredCssVariables
+						);
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+						return newPos;
 					}
 				}
+
 				return end;
 			},
 			leftParenthesis: (input, start, end) => {
 				balanced.push(["(", start, end]);
 
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL: {
-						modeStack.push(false);
-						break;
-					}
-				}
 				return end;
 			},
 			rightParenthesis: (input, start, end) => {
 				const last = balanced[balanced.length - 1];
+				const popped = balanced.pop();
 
-				balanced.pop();
+				if (
+					this.allowModeSwitch &&
+					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);
 
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL: {
-						if (awaitRightParenthesis) {
-							awaitRightParenthesis = false;
-						}
-						const newModeData = modeStack.pop();
-						if (newModeData !== false) {
-							modeData = newModeData;
-							const dep = new ConstDependency("", [start, end]);
-							module.addPresentationalDependency(dep);
-						}
-						break;
-					}
+					return end;
+				}
+
+				switch (scope) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
 						if (last && last[0] === "url") {
-							modeData.lastPos = end;
-							mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
+							importData.end = end;
+							scope = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
 						}
 						break;
 					}
 					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
 						if (last && last[0].toLowerCase() === "layer") {
-							modeData.layer = input.slice(last[2], end - 1).trim();
-							modeData.lastPos = end;
+							importData.layer = input.slice(last[2], end - 1).trim();
+							importData.end = end;
 						} else if (last && last[0].toLowerCase() === "supports") {
-							modeData.supports = input.slice(last[2], end - 1).trim();
-							modeData.lastPos = end;
+							importData.supports = input.slice(last[2], end - 1).trim();
+							importData.end = end;
 						}
 						break;
 					}
@@ -779,27 +832,38 @@ class CssParser extends Parser {
 				return end;
 			},
 			pseudoClass: (input, start, end) => {
-				singleClassSelector = false;
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL: {
-						const name = input.slice(start, end).toLowerCase();
-						if (this.allowModeSwitch && name === ":global") {
-							modeData = "global";
-							const dep = new ConstDependency("", [start, end]);
-							module.addPresentationalDependency(dep);
-						} else if (this.allowModeSwitch && name === ":local") {
-							modeData = "local";
-							const dep = new ConstDependency("", [start, end]);
-							module.addPresentationalDependency(dep);
-						} else if (this.allowPseudoBlocks && name === ":export") {
-							const pos = parseExports(input, end);
-							const dep = new ConstDependency("", [start, pos]);
-							module.addPresentationalDependency(dep);
-							return pos;
+				if (this.allowModeSwitch) {
+					const name = input.slice(start, end).toLowerCase();
+
+					if (name === ":global") {
+						modeData = "global";
+						// Eat extra whitespace and comments
+						end = walkCssTokens.eatWhitespace(input, end);
+						const dep = new ConstDependency("", [start, end]);
+						module.addPresentationalDependency(dep);
+						return end;
+					} else if (name === ":local") {
+						modeData = "local";
+						// Eat extra whitespace and comments
+						end = walkCssTokens.eatWhitespace(input, end);
+						const dep = new ConstDependency("", [start, end]);
+						module.addPresentationalDependency(dep);
+						return end;
+					}
+
+					switch (scope) {
+						case CSS_MODE_TOP_LEVEL: {
+							if (name === ":export") {
+								const pos = parseExports(input, end);
+								const dep = new ConstDependency("", [start, pos]);
+								module.addPresentationalDependency(dep);
+								return pos;
+							}
+							break;
 						}
-						break;
 					}
 				}
+
 				return end;
 			},
 			pseudoFunction: (input, start, end) => {
@@ -807,40 +871,36 @@ class CssParser extends Parser {
 
 				balanced.push([name, start, end]);
 
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL: {
-						name = name.toLowerCase();
-
-						if (this.allowModeSwitch && name === ":global") {
-							modeStack.push(modeData);
-							modeData = "global";
-							const dep = new ConstDependency("", [start, end]);
-							module.addPresentationalDependency(dep);
-						} else if (this.allowModeSwitch && name === ":local") {
-							modeStack.push(modeData);
-							modeData = "local";
-							const dep = new ConstDependency("", [start, end]);
-							module.addPresentationalDependency(dep);
-						} else {
-							awaitRightParenthesis = true;
-							modeStack.push(false);
-						}
-						break;
+				if (this.allowModeSwitch) {
+					name = name.toLowerCase();
+
+					if (name === ":global") {
+						modeData = "global";
+						const dep = new ConstDependency("", [start, end]);
+						module.addPresentationalDependency(dep);
+					} else if (name === ":local") {
+						modeData = "local";
+						const dep = new ConstDependency("", [start, end]);
+						module.addPresentationalDependency(dep);
 					}
 				}
+
 				return end;
 			},
 			comma: (input, start, end) => {
-				switch (mode) {
-					case CSS_MODE_TOP_LEVEL:
-						if (!awaitRightParenthesis) {
-							modeData = undefined;
-							modeStack.length = 0;
+				if (this.allowModeSwitch) {
+					// Reset stack for `:global .class :local .class-other` selector after
+					modeData = undefined;
+
+					switch (scope) {
+						case CSS_MODE_IN_BLOCK: {
+							if (isLocalMode()) {
+								processDeclarationValueDone(input);
+							}
+
+							break;
 						}
-						break;
-					case CSS_MODE_IN_LOCAL_RULE:
-						processDeclarationValueDone(input, start);
-						break;
+					}
 				}
 				return end;
 			}