webpack 5.95.0 → 5.96.0

package/lib/css/CssParser.js

@@ -5,9 +5,12 @@
 
 "use strict";
 
+const vm = require("vm");
+const CommentCompilationWarning = require("../CommentCompilationWarning");
 const ModuleDependencyWarning = require("../ModuleDependencyWarning");
 const { CSS_MODULE_TYPE_AUTO } = require("../ModuleTypeConstants");
 const Parser = require("../Parser");
+const UnsupportedFeatureWarning = require("../UnsupportedFeatureWarning");
 const WebpackError = require("../WebpackError");
 const ConstDependency = require("../dependencies/ConstDependency");
 const CssExportDependency = require("../dependencies/CssExportDependency");
@@ -16,18 +19,29 @@ const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifier
 const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
+const binarySearchBounds = require("../util/binarySearchBounds");
 const { parseResource } = require("../util/identifier");
+const {
+	webpackCommentRegExp,
+	createMagicCommentContext
+} = require("../util/magicComment");
 const walkCssTokens = require("./walkCssTokens");
 
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */
 /** @typedef {import("../Parser").ParserState} ParserState */
 /** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
+
 /** @typedef {[number, number]} Range */
+/** @typedef {{ line: number, column: number }} Position */
+/** @typedef {{ value: string, range: Range, loc: { start: Position, end: Position } }} Comment */
 
 const CC_LEFT_CURLY = "{".charCodeAt(0);
 const CC_RIGHT_CURLY = "}".charCodeAt(0);
 const CC_COLON = ":".charCodeAt(0);
 const CC_SLASH = "/".charCodeAt(0);
 const CC_SEMICOLON = ";".charCodeAt(0);
+const CC_LEFT_PARENTHESIS = "(".charCodeAt(0);
 
 // https://www.w3.org/TR/css-syntax-3/#newline
 // We don't have `preprocessing` stage, so we need specify all of them
@@ -123,22 +137,27 @@ class LocConverter {
 	}
 }
 
+const EMPTY_COMMENT_OPTIONS = {
+	options: null,
+	errors: null
+};
+
 const CSS_MODE_TOP_LEVEL = 0;
 const CSS_MODE_IN_BLOCK = 1;
-const CSS_MODE_IN_AT_IMPORT = 2;
-const CSS_MODE_AT_IMPORT_INVALID = 3;
-const CSS_MODE_AT_NAMESPACE_INVALID = 4;
 
 class CssParser extends Parser {
-	constructor({
-		allowModeSwitch = true,
-		defaultMode = "global",
-		namedExports = true
-	} = {}) {
+	/**
+	 * @param {object} options options
+	 * @param {("pure" | "global" | "local" | "auto")=} options.defaultMode default mode
+	 * @param {boolean=} options.namedExports is named exports
+	 */
+	constructor({ defaultMode = "pure", namedExports = true } = {}) {
 		super();
-		this.allowModeSwitch = allowModeSwitch;
 		this.defaultMode = defaultMode;
 		this.namedExports = namedExports;
+		/** @type {Comment[] | undefined} */
+		this.comments = undefined;
+		this.magicCommentContext = createMagicCommentContext();
 	}
 
 	/**
@@ -175,43 +194,44 @@ class CssParser extends Parser {
 			source = source.slice(1);
 		}
 
-		const module = state.module;
+		let mode = this.defaultMode;
 
-		/** @type {string | undefined} */
-		let oldDefaultMode;
+		const module = state.module;
 
 		if (
+			mode === "auto" &&
 			module.type === CSS_MODULE_TYPE_AUTO &&
 			IS_MODULES.test(
 				parseResource(module.matchResource || module.resource).path
 			)
 		) {
-			oldDefaultMode = this.defaultMode;
-
-			this.defaultMode = "local";
+			mode = "local";
 		}
 
+		const isModules = mode === "global" || mode === "local";
+
 		const locConverter = new LocConverter(source);
-		/** @type {Set<string>} */
-		const declaredCssVariables = new Set();
+
 		/** @type {number} */
 		let scope = CSS_MODE_TOP_LEVEL;
-		/** @type {number} */
-		let blockNestingLevel = 0;
 		/** @type {boolean} */
 		let allowImportAtRule = true;
-		/** @type {"local" | "global" | undefined} */
-		let modeData;
-		/** @type {[number, number] | undefined} */
-		let lastIdentifier;
 		/** @type [string, number, number][] */
 		const balanced = [];
-		/** @type {undefined | { start: number, url?: string, urlStart?: number, urlEnd?: number, layer?: string, layerStart?: number, layerEnd?: number, supports?: string, supportsStart?: number, supportsEnd?: number, inSupports?:boolean, media?: string  }} */
-		let importData;
+		let lastTokenEndForComments = 0;
+
 		/** @type {boolean} */
-		let inAnimationProperty = false;
+		let isNextRulePrelude = isModules;
+		/** @type {number} */
+		let blockNestingLevel = 0;
+		/** @type {"local" | "global" | undefined} */
+		let modeData;
 		/** @type {boolean} */
-		let isNextRulePrelude = true;
+		let inAnimationProperty = false;
+		/** @type {Set<string>} */
+		const declaredCssVariables = new Set();
+		/** @type {[number, number, boolean] | undefined} */
+		let lastIdentifier;
 
 		/**
 		 * @param {string} input input
@@ -236,34 +256,8 @@ class CssParser extends Parser {
 		 * @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)
-			);
-			const arr = Array.from(
-				{ length: charCodes.reduce((a, b) => Math.max(a, b), 0) + 1 },
-				() => false
-			);
-			for (const cc of charCodes) {
-				arr[cc] = true;
-			}
-			return (input, pos) => {
-				for (;;) {
-					const cc = input.charCodeAt(pos);
-					if (cc < arr.length && arr[cc]) {
-						return pos;
-					}
-					pos++;
-					if (pos === input.length) return pos;
-				}
-			};
-		};
+			modeData === "local" || (mode === "local" && modeData === undefined);
+
 		/**
 		 * @param {string} input input
 		 * @param {number} pos start position
@@ -295,8 +289,8 @@ class CssParser extends Parser {
 			}
 			return [pos, text.trimEnd()];
 		};
-		const eatExportName = eatUntil(":};/");
-		const eatExportValue = eatUntil("};/");
+		const eatExportName = walkCssTokens.eatUntil(":};/");
+		const eatExportValue = walkCssTokens.eatUntil("};/");
 		/**
 		 * @param {string} input input
 		 * @param {number} pos start position
@@ -369,7 +363,7 @@ class CssParser extends Parser {
 			pos = walkCssTokens.eatWhiteLine(input, pos);
 			return pos;
 		};
-		const eatPropertyName = eatUntil(":{};");
+		const eatPropertyName = walkCssTokens.eatUntil(":{};");
 		/**
 		 * @param {string} input input
 		 * @param {number} pos name start position
@@ -401,7 +395,6 @@ class CssParser extends Parser {
 				module.addDependency(dep);
 				declaredCssVariables.add(name);
 			} else if (
-				!propertyName.startsWith("--") &&
 				OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
 			) {
 				inAnimationProperty = true;
@@ -415,141 +408,149 @@ class CssParser extends Parser {
 			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);
+				const name = 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 eatKeyframes = eatUntil("{};/");
-		const eatNameInVar = eatUntil(",)};/");
-		walkCssTokens(source, {
-			isSelector: () => isNextRulePrelude,
-			url: (input, start, end, contentStart, contentEnd) => {
-				const value = normalizeUrl(
-					input.slice(contentStart, contentEnd),
-					false
-				);
 
-				switch (scope) {
-					case CSS_MODE_IN_AT_IMPORT: {
-						// Do not parse URLs in `supports(...)`
-						if (importData.inSupports) {
-							break;
-						}
+		const eatUntilSemi = walkCssTokens.eatUntil(";");
+		const eatUntilLeftCurly = walkCssTokens.eatUntil("{");
 
-						if (importData.url) {
-							this._emitWarning(
-								state,
-								`Duplicate of 'url(...)' in '${input.slice(
-									importData.start,
-									end
-								)}'`,
-								locConverter,
-								start,
-								end
-							);
+		/**
+		 * @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;
+		};
 
-							break;
+		walkCssTokens(source, {
+			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);
 						}
 
-						importData.url = value;
-						importData.urlStart = start;
-						importData.urlEnd = end;
-						break;
-					}
-					// Do not parse URLs in import between rules
-					case CSS_MODE_AT_NAMESPACE_INVALID:
-					case CSS_MODE_AT_IMPORT_INVALID: {
 						break;
 					}
 					case CSS_MODE_IN_BLOCK: {
-						// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
-						if (value.length === 0) {
-							break;
+						if (isModules) {
+							blockNestingLevel++;
+							isNextRulePrelude = isNextNestedSyntax(input, 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);
 						break;
 					}
 				}
 				return end;
 			},
-			string: (input, start, end) => {
+			rightCurlyBracket: (input, start, end) => {
 				switch (scope) {
-					case CSS_MODE_IN_AT_IMPORT: {
-						const insideURLFunction =
-							balanced[balanced.length - 1] &&
-							balanced[balanced.length - 1][0] === "url";
-
-						// Do not parse URLs in `supports(...)` and other strings if we already have a URL
-						if (
-							importData.inSupports ||
-							(!insideURLFunction && importData.url)
-						) {
-							break;
-						}
+					case CSS_MODE_IN_BLOCK: {
+						if (--blockNestingLevel === 0) {
+							scope = CSS_MODE_TOP_LEVEL;
 
-						if (insideURLFunction && importData.url) {
-							this._emitWarning(
-								state,
-								`Duplicate of 'url(...)' in '${input.slice(
-									importData.start,
-									end
-								)}'`,
-								locConverter,
-								start,
-								end
-							);
+							if (isModules) {
+								isNextRulePrelude = true;
+								modeData = undefined;
+							}
+						} else if (isModules) {
+							if (isLocalMode()) {
+								processDeclarationValueDone(input);
+								inAnimationProperty = false;
+							}
 
-							break;
+							isNextRulePrelude = isNextNestedSyntax(input, end);
 						}
-
-						importData.url = normalizeUrl(
-							input.slice(start + 1, end - 1),
-							true
+						break;
+					}
+				}
+				return end;
+			},
+			url: (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);
 
-						if (!insideURLFunction) {
-							importData.urlStart = start;
-							importData.urlEnd = end;
-						}
-
-						break;
+						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;
+			},
+			string: (_input, start, end) => {
+				switch (scope) {
 					case CSS_MODE_IN_BLOCK: {
-						// TODO move escaped parsing to tokenizer
-						const last = balanced[balanced.length - 1];
-
-						if (
-							last &&
-							(last[0].replace(/\\/g, "").toLowerCase() === "url" ||
-								IMAGE_SET_FUNCTION.test(last[0].replace(/\\/g, "")))
-						) {
-							const value = normalizeUrl(input.slice(start + 1, end - 1), true);
-
-							// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
-							if (value.length === 0) {
-								break;
-							}
-
-							const isUrl = last[0].replace(/\\/g, "").toLowerCase() === "url";
-							const dep = new CssUrlDependency(
-								value,
-								[start, end],
-								isUrl ? "string" : "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);
+						if (inAnimationProperty && balanced.length === 0) {
+							lastIdentifier = [start, end, false];
 						}
 					}
 				}
@@ -557,264 +558,196 @@ class CssParser extends Parser {
 			},
 			atKeyword: (input, start, end) => {
 				const name = input.slice(start, end).toLowerCase();
-				if (name === "@namespace") {
-					scope = CSS_MODE_AT_NAMESPACE_INVALID;
-					this._emitWarning(
-						state,
-						"'@namespace' is not supported in bundled CSS",
-						locConverter,
-						start,
-						end
-					);
-					return end;
-				} else if (name === "@import") {
-					if (!allowImportAtRule) {
-						scope = CSS_MODE_AT_IMPORT_INVALID;
-						this._emitWarning(
-							state,
-							"Any '@import' rules must precede all other rules",
-							locConverter,
-							start,
-							end
-						);
-						return end;
-					}
 
-					scope = CSS_MODE_IN_AT_IMPORT;
-					importData = { start };
-				} else if (
-					this.allowModeSwitch &&
-					OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)
-				) {
-					let pos = end;
-					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
-					if (pos === input.length) return pos;
-					const [newPos, name] = eatText(input, pos, eatKeyframes);
-					if (newPos === input.length) return newPos;
-					if (input.charCodeAt(newPos) !== CC_LEFT_CURLY) {
+				switch (name) {
+					case "@namespace": {
 						this._emitWarning(
 							state,
-							`Unexpected '${input[newPos]}' at ${newPos} during parsing of @keyframes (expected '{')`,
+							"'@namespace' is not supported in bundled CSS",
 							locConverter,
 							start,
 							end
 						);
 
-						return newPos;
+						return eatUntilSemi(input, start);
 					}
-					if (isLocalMode()) {
-						const { line: sl, column: sc } = locConverter.get(pos);
-						const { line: el, column: ec } = locConverter.get(newPos);
-						const dep = new CssLocalIdentifierDependency(name, [pos, newPos]);
-						dep.setLoc(sl, sc, el, ec);
-						module.addDependency(dep);
-					}
-					pos = newPos;
-					return pos + 1;
-				} else if (this.allowModeSwitch && name === "@property") {
-					let pos = end;
-					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
-					if (pos === input.length) return pos;
-					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[propertyNameEnd]}' at ${propertyNameEnd} during parsing of @property (expected '{')`,
-							locConverter,
-							start,
-							end
-						);
-
-						return propertyNameEnd;
-					}
-					const name = propertyName.slice(2);
-					declaredCssVariables.add(name);
-					if (isLocalMode()) {
-						const { line: sl, column: sc } = locConverter.get(pos);
-						const { line: el, column: ec } = locConverter.get(propertyNameEnd);
-						const dep = new CssLocalIdentifierDependency(
-							name,
-							[propertyNameStart, propertyNameEnd],
-							"--"
-						);
-						dep.setLoc(sl, sc, el, ec);
-						module.addDependency(dep);
-					}
-					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 (scope) {
-					case CSS_MODE_IN_AT_IMPORT: {
-						const { start } = importData;
-
-						if (importData.url === undefined) {
-							this._emitWarning(
-								state,
-								`Expected URL in '${input.slice(start, end)}'`,
-								locConverter,
-								start,
-								end
-							);
-							importData = undefined;
-							scope = CSS_MODE_TOP_LEVEL;
-							return end;
-						}
-						if (
-							importData.urlStart > importData.layerStart ||
-							importData.urlStart > importData.supportsStart
-						) {
+					case "@import": {
+						if (!allowImportAtRule) {
 							this._emitWarning(
 								state,
-								`An URL in '${input.slice(
-									start,
-									end
-								)}' should be before 'layer(...)' or 'supports(...)'`,
+								"Any '@import' rules must precede all other rules",
 								locConverter,
 								start,
 								end
 							);
-							importData = undefined;
-							scope = CSS_MODE_TOP_LEVEL;
 							return end;
 						}
-						if (importData.layerStart > importData.supportsStart) {
+
+						const tokens = walkCssTokens.eatImportTokens(input, end, {
+							comment
+						});
+						if (!tokens[3]) return end;
+						const semi = tokens[3][1];
+						if (!tokens[0]) {
 							this._emitWarning(
 								state,
-								`The 'layer(...)' in '${input.slice(
-									start,
-									end
-								)}' should be before 'supports(...)'`,
+								`Expected URL in '${input.slice(start, semi)}'`,
 								locConverter,
 								start,
-								end
+								semi
 							);
-							importData = undefined;
-							scope = CSS_MODE_TOP_LEVEL;
 							return end;
 						}
 
-						const semicolonPos = end;
-						end = walkCssTokens.eatWhiteLine(input, end);
-						const { line: sl, column: sc } = locConverter.get(start);
-						const { line: el, column: ec } = locConverter.get(end);
-						const lastEnd =
-							importData.supportsEnd ||
-							importData.layerEnd ||
-							importData.urlEnd ||
-							start;
-						const pos = walkCssTokens.eatWhitespaceAndComments(input, lastEnd);
-						// Prevent to consider comments as a part of media query
-						if (pos !== semicolonPos - 1) {
-							importData.media = input.slice(lastEnd, semicolonPos - 1).trim();
+						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;
+							}
 						}
-
-						const url = importData.url.trim();
-
 						if (url.length === 0) {
-							const dep = new ConstDependency("", [start, end]);
+							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);
-						} else {
-							const dep = new CssImportDependency(
-								url,
-								[start, end],
-								importData.layer,
-								importData.supports,
-								importData.media && importData.media.length > 0
-									? importData.media
-									: undefined
-							);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
+
+							return newline;
 						}
 
-						importData = undefined;
-						scope = CSS_MODE_TOP_LEVEL;
+						let layer;
 
-						break;
-					}
-					case CSS_MODE_AT_IMPORT_INVALID:
-					case CSS_MODE_AT_NAMESPACE_INVALID: {
-						scope = CSS_MODE_TOP_LEVEL;
+						if (tokens[1]) {
+							layer = input.slice(tokens[1][0] + 6, tokens[1][1] - 1).trim();
+						}
 
-						break;
-					}
-					case CSS_MODE_IN_BLOCK: {
-						if (this.allowModeSwitch) {
-							processDeclarationValueDone(input);
-							inAnimationProperty = false;
-							isNextRulePrelude = isNextNestedSyntax(input, end);
+						let supports;
+
+						if (tokens[2]) {
+							supports = input.slice(tokens[2][0] + 9, tokens[2][1] - 1).trim();
 						}
-						break;
-					}
-				}
-				return end;
-			},
-			leftCurlyBracket: (input, start, end) => {
-				switch (scope) {
-					case CSS_MODE_TOP_LEVEL: {
-						allowImportAtRule = false;
-						scope = CSS_MODE_IN_BLOCK;
-						blockNestingLevel = 1;
 
-						if (this.allowModeSwitch) {
-							isNextRulePrelude = isNextNestedSyntax(input, end);
+						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();
 						}
 
-						break;
+						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;
 					}
-					case CSS_MODE_IN_BLOCK: {
-						blockNestingLevel++;
+					default: {
+						if (isModules) {
+							if (OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)) {
+								const ident = walkCssTokens.eatIdentSequenceOrString(
+									input,
+									end
+								);
+								if (!ident) return end;
+								const name =
+									ident[2] === true
+										? input.slice(ident[0], ident[1])
+										: input.slice(ident[0] + 1, ident[1] - 1);
+								if (isLocalMode()) {
+									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];
+							} else if (name === "@property") {
+								const ident = walkCssTokens.eatIdentSequence(input, end);
+								if (!ident) return end;
+								let name = input.slice(ident[0], ident[1]);
+								if (!name.startsWith("--")) return end;
+								name = name.slice(2);
+								declaredCssVariables.add(name);
+								if (isLocalMode()) {
+									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];
+							} else if (isModules && name === "@scope") {
+								modeData = isLocalMode() ? "local" : "global";
+								isNextRulePrelude = true;
+								return end;
+							}
 
-						if (this.allowModeSwitch) {
-							isNextRulePrelude = isNextNestedSyntax(input, end);
+							isNextRulePrelude = false;
 						}
-						break;
 					}
 				}
+
 				return end;
 			},
-			rightCurlyBracket: (input, start, end) => {
-				switch (scope) {
-					case CSS_MODE_IN_BLOCK: {
-						if (isLocalMode()) {
-							processDeclarationValueDone(input);
-							inAnimationProperty = false;
-						}
-						if (--blockNestingLevel === 0) {
-							scope = CSS_MODE_TOP_LEVEL;
-
-							if (this.allowModeSwitch) {
-								isNextRulePrelude = true;
-								modeData = undefined;
-							}
-						} else if (this.allowModeSwitch) {
-							isNextRulePrelude = isNextNestedSyntax(input, end);
-						}
-						break;
+			semicolon: (input, start, end) => {
+				if (isModules && scope === CSS_MODE_IN_BLOCK) {
+					if (isLocalMode()) {
+						processDeclarationValueDone(input);
+						inAnimationProperty = false;
 					}
+
+					isNextRulePrelude = isNextNestedSyntax(input, end);
 				}
 				return end;
 			},
@@ -824,83 +757,291 @@ class CssParser extends Parser {
 						if (isLocalMode()) {
 							// Handle only top level values and not inside functions
 							if (inAnimationProperty && balanced.length === 0) {
-								lastIdentifier = [start, end];
+								lastIdentifier = [start, end, true];
 							} else {
 								return processLocalDeclaration(input, start, end);
 							}
 						}
 						break;
 					}
-					case CSS_MODE_IN_AT_IMPORT: {
-						if (input.slice(start, end).toLowerCase() === "layer") {
-							importData.layer = "";
-							importData.layerStart = start;
-							importData.layerEnd = end;
-						}
-						break;
-					}
 				}
 				return end;
 			},
-			class: (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);
+			delim: (input, start, end) => {
+				if (isNextRulePrelude && isLocalMode()) {
+					const ident = walkCssTokens.skipCommentsAndEatIdentSequence(
+						input,
+						end
+					);
+					if (!ident) return end;
+					const name = input.slice(ident[0], ident[1]);
+					const dep = new CssLocalIdentifierDependency(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 end;
 			},
-			id: (input, start, end) => {
-				if (isLocalMode()) {
-					const name = input.slice(start + 1, end);
-					const dep = new CssLocalIdentifierDependency(name, [start + 1, end]);
+			hash: (input, start, end, isID) => {
+				if (isNextRulePrelude && isLocalMode() && isID) {
+					const valueStart = start + 1;
+					const name = 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 end;
 			},
-			function: (input, start, end) => {
-				let name = input.slice(start, end - 1);
-
-				balanced.push([name, start, end]);
+			colon: (input, start, end) => {
+				if (isModules) {
+					const ident = walkCssTokens.skipCommentsAndEatIdentSequence(
+						input,
+						end
+					);
+					if (!ident) return end;
+					const name = input.slice(ident[0], ident[1]).toLowerCase();
 
-				if (
-					scope === CSS_MODE_IN_AT_IMPORT &&
-					name.toLowerCase() === "supports"
-				) {
-					importData.inSupports = true;
+					switch (scope) {
+						case CSS_MODE_TOP_LEVEL: {
+							if (name === "export") {
+								const pos = parseExports(input, ident[1]);
+								const dep = new ConstDependency("", [start, pos]);
+								module.addPresentationalDependency(dep);
+								return pos;
+							}
+						}
+						// falls through
+						default: {
+							if (isNextRulePrelude) {
+								const isFn = input.charCodeAt(ident[1]) === CC_LEFT_PARENTHESIS;
+
+								if (isFn && name === "local") {
+									const end = ident[1] + 1;
+									modeData = "local";
+									const dep = new ConstDependency("", [start, end]);
+									module.addPresentationalDependency(dep);
+									balanced.push([":local", start, end]);
+									return end;
+								} else if (name === "local") {
+									modeData = "local";
+									// Eat extra whitespace
+									end = walkCssTokens.eatWhitespace(input, ident[1]);
+
+									if (ident[1] === end) {
+										this._emitWarning(
+											state,
+											`Missing whitespace after ':local' in '${input.slice(
+												start,
+												eatUntilLeftCurly(input, end) + 1
+											)}'`,
+											locConverter,
+											start,
+											end
+										);
+									}
+
+									const dep = new ConstDependency("", [start, end]);
+									module.addPresentationalDependency(dep);
+									return end;
+								} else if (isFn && name === "global") {
+									const end = ident[1] + 1;
+									modeData = "global";
+									const dep = new ConstDependency("", [start, end]);
+									module.addPresentationalDependency(dep);
+									balanced.push([":global", start, end]);
+									return end;
+								} else if (name === "global") {
+									modeData = "global";
+									// Eat extra whitespace
+									end = walkCssTokens.eatWhitespace(input, ident[1]);
+
+									if (ident[1] === end) {
+										this._emitWarning(
+											state,
+											`Missing whitespace after ':global' in '${input.slice(
+												start,
+												eatUntilLeftCurly(input, end) + 1
+											)}'`,
+											locConverter,
+											start,
+											end
+										);
+									}
+
+									const dep = new ConstDependency("", [start, end]);
+									module.addPresentationalDependency(dep);
+									return end;
+								}
+							}
+						}
+					}
 				}
 
-				if (isLocalMode()) {
-					name = name.toLowerCase();
+				lastTokenEndForComments = end;
 
-					// Don't rename animation name when we have `var()` function
-					if (inAnimationProperty && balanced.length === 1) {
-						lastIdentifier = undefined;
-					}
+				return end;
+			},
+			function: (input, start, end) => {
+				const name = input
+					.slice(start, end - 1)
+					.replace(/\\/g, "")
+					.toLowerCase();
+
+				balanced.push([name, start, end]);
 
-					if (name === "var") {
-						const 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
+				switch (name) {
+					case "src":
+					case "url": {
+						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);
-						return newPos;
+						module.addCodeGenerationDependency(dep);
+						return string[1];
+					}
+					default: {
+						if (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 ident = walkCssTokens.eatIdentSequence(input, end);
+								if (!ident) return end;
+								const name = input.slice(ident[0], ident[1]);
+								if (!name.startsWith("--")) return end;
+								const { line: sl, column: sc } = locConverter.get(ident[0]);
+								const { line: el, column: ec } = locConverter.get(ident[1]);
+								const dep = new CssSelfLocalIdentifierDependency(
+									name.slice(2),
+									[ident[0], ident[1]],
+									"--",
+									declaredCssVariables
+								);
+								dep.setLoc(sl, sc, el, ec);
+								module.addDependency(dep);
+								return ident[1];
+							}
+						}
 					}
 				}
 
@@ -912,11 +1053,10 @@ class CssParser extends Parser {
 				return end;
 			},
 			rightParenthesis: (input, start, end) => {
-				const last = balanced[balanced.length - 1];
 				const popped = balanced.pop();
 
 				if (
-					this.allowModeSwitch &&
+					isModules &&
 					popped &&
 					(popped[0] === ":local" || popped[0] === ":global")
 				) {
@@ -926,124 +1066,113 @@ class CssParser extends Parser {
 						: undefined;
 					const dep = new ConstDependency("", [start, end]);
 					module.addPresentationalDependency(dep);
-
-					return end;
-				}
-
-				switch (scope) {
-					case CSS_MODE_IN_AT_IMPORT: {
-						if (last && last[0] === "url" && !importData.inSupports) {
-							importData.urlStart = last[1];
-							importData.urlEnd = end;
-						} else if (
-							last &&
-							last[0].toLowerCase() === "layer" &&
-							!importData.inSupports
-						) {
-							importData.layer = input.slice(last[2], end - 1).trim();
-							importData.layerStart = last[1];
-							importData.layerEnd = end;
-						} else if (last && last[0].toLowerCase() === "supports") {
-							importData.supports = input.slice(last[2], end - 1).trim();
-							importData.supportsStart = last[1];
-							importData.supportsEnd = end;
-							importData.inSupports = false;
-						}
-						break;
-					}
-				}
-
-				return end;
-			},
-			pseudoClass: (input, start, end) => {
-				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;
-						}
-					}
-				}
-
-				return end;
-			},
-			pseudoFunction: (input, start, end) => {
-				let name = input.slice(start, end - 1);
-
-				balanced.push([name, start, end]);
-
-				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) => {
-				if (this.allowModeSwitch) {
+				if (isModules) {
 					// Reset stack for `:global .class :local .class-other` selector after
 					modeData = undefined;
 
-					switch (scope) {
-						case CSS_MODE_IN_BLOCK: {
-							if (isLocalMode()) {
-								processDeclarationValueDone(input);
-							}
-
-							break;
-						}
+					if (scope === CSS_MODE_IN_BLOCK && isLocalMode()) {
+						processDeclarationValueDone(input);
 					}
 				}
+
+				lastTokenEndForComments = start;
+
 				return end;
 			}
 		});
 
-		if (oldDefaultMode) {
-			this.defaultMode = oldDefaultMode;
-		}
-
-		module.buildInfo.strict = true;
-		module.buildMeta.exportsType = this.namedExports ? "namespace" : "default";
+		/** @type {BuildInfo} */
+		(module.buildInfo).strict = true;
+		/** @type {BuildMeta} */
+		(module.buildMeta).exportsType = this.namedExports
+			? "namespace"
+			: "default";
 
 		if (!this.namedExports) {
-			module.buildMeta.defaultObject = "redirect";
+			/** @type {BuildMeta} */
+			(module.buildMeta).defaultObject = "redirect";
 		}
 
 		module.addDependency(new StaticExportsDependency([], true));
 		return state;
 	}
+
+	/**
+	 * @param {Range} range range
+	 * @returns {Comment[]} comments in the range
+	 */
+	getComments(range) {
+		if (!this.comments) return [];
+		const [rangeStart, rangeEnd] = range;
+		/**
+		 * @param {Comment} comment comment
+		 * @param {number} needle needle
+		 * @returns {number} compared
+		 */
+		const compare = (comment, needle) =>
+			/** @type {Range} */ (comment.range)[0] - needle;
+		const comments = /** @type {Comment[]} */ (this.comments);
+		let idx = binarySearchBounds.ge(comments, rangeStart, compare);
+		/** @type {Comment[]} */
+		const commentsInRange = [];
+		while (
+			comments[idx] &&
+			/** @type {Range} */ (comments[idx].range)[1] <= rangeEnd
+		) {
+			commentsInRange.push(comments[idx]);
+			idx++;
+		}
+
+		return commentsInRange;
+	}
+
+	/**
+	 * @param {Range} range range of the comment
+	 * @returns {{ options: Record<string, any> | null, errors: (Error & { comment: Comment })[] | null }} result
+	 */
+	parseCommentOptions(range) {
+		const comments = this.getComments(range);
+		if (comments.length === 0) {
+			return EMPTY_COMMENT_OPTIONS;
+		}
+		/** @type {Record<string, EXPECTED_ANY> } */
+		const options = {};
+		/** @type {(Error & { comment: Comment })[]} */
+		const errors = [];
+		for (const comment of comments) {
+			const { value } = comment;
+			if (value && webpackCommentRegExp.test(value)) {
+				// try compile only if webpack options comment is present
+				try {
+					for (let [key, val] of Object.entries(
+						vm.runInContext(
+							`(function(){return {${value}};})()`,
+							this.magicCommentContext
+						)
+					)) {
+						if (typeof val === "object" && val !== null) {
+							val =
+								val.constructor.name === "RegExp"
+									? new RegExp(val)
+									: JSON.parse(JSON.stringify(val));
+						}
+						options[key] = val;
+					}
+				} catch (err) {
+					const newErr = new Error(String(/** @type {Error} */ (err).message));
+					newErr.stack = String(/** @type {Error} */ (err).stack);
+					Object.assign(newErr, { comment });
+					errors.push(/** @type (Error & { comment: Comment }) */ (newErr));
+				}
+			}
+		}
+		return { options, errors };
+	}
 }
 
 module.exports = CssParser;