webpack 5.80.0 → 5.82.0

package/lib/css/CssParser.js

@@ -5,7 +5,9 @@
 
 "use strict";
 
+const ModuleDependencyWarning = require("../ModuleDependencyWarning");
 const Parser = require("../Parser");
+const WebpackError = require("../WebpackError");
 const ConstDependency = require("../dependencies/ConstDependency");
 const CssExportDependency = require("../dependencies/CssExportDependency");
 const CssImportDependency = require("../dependencies/CssImportDependency");
@@ -30,7 +32,15 @@ const STRING_MULTILINE = /\\[\n\r\f]/g;
 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;
+
+/**
+ * @param {string} str url string
+ * @param {boolean} isString is url wrapped in quotes
+ * @returns {string} normalized url
+ */
 const normalizeUrl = (str, isString) => {
 	// Remove extra spaces and newlines:
 	// `url("im\
@@ -68,6 +78,9 @@ const normalizeUrl = (str, isString) => {
 };
 
 class LocConverter {
+	/**
+	 * @param {string} input input
+	 */
 	constructor(input) {
 		this._input = input;
 		this.line = 1;
@@ -75,6 +88,10 @@ class LocConverter {
 		this.pos = 0;
 	}
 
+	/**
+	 * @param {number} pos position
+	 * @returns {LocConverter} location converter
+	 */
 	get(pos) {
 		if (this.pos !== pos) {
 			if (this.pos < pos) {
@@ -106,31 +123,9 @@ 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;
-// TODO implement layer and supports for @import
-const CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS = 4;
-const CSS_MODE_AT_IMPORT_EXPECT_MEDIA = 5;
-const CSS_MODE_AT_OTHER = 6;
-
-const explainMode = mode => {
-	switch (mode) {
-		case CSS_MODE_TOP_LEVEL:
-			return "parsing top level css";
-		case CSS_MODE_IN_RULE:
-			return "parsing css rule content (global)";
-		case CSS_MODE_IN_LOCAL_RULE:
-			return "parsing css rule content (local)";
-		case CSS_MODE_AT_IMPORT_EXPECT_URL:
-			return "parsing @import (expecting url)";
-		case CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS:
-			return "parsing @import (expecting optionally supports or media query)";
-		case CSS_MODE_AT_IMPORT_EXPECT_MEDIA:
-			return "parsing @import (expecting optionally media query)";
-		case CSS_MODE_AT_OTHER:
-			return "parsing at-rule";
-		default:
-			return mode;
-	}
-};
+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;
 
 class CssParser extends Parser {
 	constructor({
@@ -144,6 +139,25 @@ class CssParser extends Parser {
 		this.defaultMode = defaultMode;
 	}
 
+	/**
+	 * @param {ParserState} state parser state
+	 * @param {string} message warning message
+	 * @param {LocConverter} locConverter location converter
+	 * @param {number} start start offset
+	 * @param {number} end end offset
+	 */
+	_emitWarning(state, message, locConverter, start, end) {
+		const { line: sl, column: sc } = locConverter.get(start);
+		const { line: el, column: ec } = locConverter.get(end);
+
+		state.current.addWarning(
+			new ModuleDependencyWarning(state.module, new WebpackError(message), {
+				start: { line: sl, column: sc },
+				end: { line: el, column: ec }
+			})
+		);
+	}
+
 	/**
 	 * @param {string | Buffer | PreparsedAst} source the source to parse
 	 * @param {ParserState} state the parser state
@@ -164,32 +178,26 @@ class CssParser extends Parser {
 		const declaredCssVariables = new Set();
 
 		const locConverter = new LocConverter(source);
+		/** @type {number} */
 		let mode = CSS_MODE_TOP_LEVEL;
-		let modePos = 0;
+		/** @type {number} */
 		let modeNestingLevel = 0;
+		/** @type {boolean} */
+		let allowImportAtRule = true;
 		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][] */
-		const functionStack = [];
+		let balanced = [];
 		const modeStack = [];
 
 		const isTopLevelLocal = () =>
 			modeData === "local" ||
 			(this.defaultMode === "local" && modeData === undefined);
-		const eatWhiteLine = (input, pos) => {
-			for (;;) {
-				const cc = input.charCodeAt(pos);
-				if (cc === 32 || cc === 9) {
-					pos++;
-					continue;
-				}
-				if (cc === 10) pos++;
-				break;
-			}
-			return pos;
-		};
 		const eatUntil = chars => {
 			const charCodes = Array.from({ length: chars.length }, (_, i) =>
 				chars.charCodeAt(i)
@@ -240,10 +248,16 @@ class CssParser extends Parser {
 		const parseExports = (input, pos) => {
 			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 			const cc = input.charCodeAt(pos);
-			if (cc !== CC_LEFT_CURLY)
-				throw new Error(
-					`Unexpected ${input[pos]} at ${pos} during parsing of ':export' (expected '{')`
+			if (cc !== CC_LEFT_CURLY) {
+				this._emitWarning(
+					state,
+					`Unexpected '${input[pos]}' at ${pos} during parsing of ':export' (expected '{')`,
+					locConverter,
+					pos,
+					pos
 				);
+				return pos;
+			}
 			pos++;
 			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 			for (;;) {
@@ -255,9 +269,14 @@ class CssParser extends Parser {
 				[pos, name] = eatText(input, pos, eatExportName);
 				if (pos === input.length) return pos;
 				if (input.charCodeAt(pos) !== CC_COLON) {
-					throw new Error(
-						`Unexpected ${input[pos]} at ${pos} during parsing of export name in ':export' (expected ':')`
+					this._emitWarning(
+						state,
+						`Unexpected '${input[pos]}' at ${pos} during parsing of export name in ':export' (expected ':')`,
+						locConverter,
+						start,
+						pos
 					);
+					return pos;
 				}
 				pos++;
 				if (pos === input.length) return pos;
@@ -273,9 +292,14 @@ class CssParser extends Parser {
 					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 					if (pos === input.length) return pos;
 				} else if (cc !== CC_RIGHT_CURLY) {
-					throw new Error(
-						`Unexpected ${input[pos]} at ${pos} during parsing of export value in ':export' (expected ';' or '}')`
+					this._emitWarning(
+						state,
+						`Unexpected '${input[pos]}' at ${pos} during parsing of export value in ':export' (expected ';' or '}')`,
+						locConverter,
+						start,
+						pos
 					);
+					return pos;
 				}
 				const dep = new CssExportDependency(name, value);
 				const { line: sl, column: sc } = locConverter.get(start);
@@ -285,7 +309,7 @@ class CssParser extends Parser {
 			}
 			pos++;
 			if (pos === input.length) return pos;
-			pos = eatWhiteLine(input, pos);
+			pos = walkCssTokens.eatWhiteLine(input, pos);
 			return pos;
 		};
 		const eatPropertyName = eatUntil(":{};");
@@ -315,8 +339,7 @@ class CssParser extends Parser {
 				module.addDependency(dep);
 				declaredCssVariables.add(name);
 			} else if (
-				propertyName.toLowerCase() === "animation-name" ||
-				propertyName.toLowerCase() === "animation"
+				OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
 			) {
 				modeData = "animation";
 				lastIdentifier = undefined;
@@ -338,34 +361,36 @@ class CssParser extends Parser {
 		const eatNameInVar = eatUntil(",)};/");
 		walkCssTokens(source, {
 			isSelector: () => {
-				return mode !== CSS_MODE_IN_RULE && mode !== CSS_MODE_IN_LOCAL_RULE;
-			},
-			url: (input, start, end, contentStart, contentEnd, isString) => {
-				let value = normalizeUrl(
-					input.slice(contentStart, contentEnd),
-					isString
+				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
 				);
+			},
+			url: (input, start, end, contentStart, contentEnd) => {
+				let value = normalizeUrl(input.slice(contentStart, contentEnd), false);
 				switch (mode) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
 						modeData.url = value;
-						mode = CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS;
+						modeData.lastPos = end;
+						mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
+						break;
+					}
+					// Do not parse URLs in `supports(...)`
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
+						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_AT_IMPORT_EXPECT_SUPPORTS:
-					case CSS_MODE_AT_IMPORT_EXPECT_MEDIA:
-						throw new Error(
-							`Unexpected ${input.slice(
-								start,
-								end
-							)} at ${start} during ${explainMode(mode)}`
-						);
 					default: {
-						if (
-							// Ignore `url(#highlight)` URLs
-							/^#/.test(value) ||
-							// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
-							value.length === 0
-						) {
+						// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+						if (value.length === 0) {
 							break;
 						}
 
@@ -384,31 +409,37 @@ class CssParser extends Parser {
 				switch (mode) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
 						modeData.url = normalizeUrl(input.slice(start + 1, end - 1), true);
-						mode = CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS;
+						modeData.lastPos = 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;
+						}
+						break;
+					}
+					// Do not parse URLs in `supports(...)`
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
 						break;
 					}
 					default: {
 						// TODO move escaped parsing to tokenizer
-						const lastFunction = functionStack[functionStack.length - 1];
+						const last = balanced[balanced.length - 1];
 
 						if (
-							lastFunction &&
-							(lastFunction[0].replace(/\\/g, "").toLowerCase() === "url" ||
-								IMAGE_SET_FUNCTION.test(lastFunction[0].replace(/\\/g, "")))
+							last &&
+							(last[0].replace(/\\/g, "").toLowerCase() === "url" ||
+								IMAGE_SET_FUNCTION.test(last[0].replace(/\\/g, "")))
 						) {
 							let value = normalizeUrl(input.slice(start + 1, end - 1), true);
 
-							if (
-								// Ignore `url(#highlight)` URLs
-								/^#/.test(value) ||
-								// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
-								value.length === 0
-							) {
+							// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+							if (value.length === 0) {
 								break;
 							}
 
-							const isUrl =
-								lastFunction[0].replace(/\\/g, "").toLowerCase() === "url";
+							const isUrl = last[0].replace(/\\/g, "").toLowerCase() === "url";
 							const dep = new CssUrlDependency(
 								value,
 								[start, end],
@@ -427,52 +458,81 @@ class CssParser extends Parser {
 			atKeyword: (input, start, end) => {
 				const name = input.slice(start, end).toLowerCase();
 				if (name === "@namespace") {
-					throw new Error("@namespace is not supported in bundled CSS");
-				}
-				if (name === "@import") {
-					if (mode !== CSS_MODE_TOP_LEVEL) {
-						throw new Error(
-							`Unexpected @import at ${start} during ${explainMode(mode)}`
+					mode = 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) {
+						mode = CSS_MODE_AT_IMPORT_INVALID;
+						this._emitWarning(
+							state,
+							"Any @import rules must precede all other rules",
+							locConverter,
+							start,
+							end
 						);
+						return end;
 					}
+
 					mode = CSS_MODE_AT_IMPORT_EXPECT_URL;
-					modePos = end;
 					modeData = {
-						start: start,
+						atRuleStart: start,
+						lastPos: end,
 						url: undefined,
-						supports: undefined
+						layer: undefined,
+						supports: undefined,
+						media: undefined
 					};
-				}
-				if (name === "@keyframes") {
+				} else if (
+					isTopLevelLocal() &&
+					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) {
+						this._emitWarning(
+							state,
+							`Unexpected '${input[newPos]}' at ${newPos} during parsing of @keyframes (expected '{')`,
+							locConverter,
+							start,
+							end
+						);
+
+						return newPos;
+					}
 					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;
-					if (pos === input.length) return pos;
-					if (input.charCodeAt(pos) !== CC_LEFT_CURLY) {
-						throw new Error(
-							`Unexpected ${input[pos]} at ${pos} during parsing of @keyframes (expected '{')`
-						);
-					}
 					mode = CSS_MODE_IN_LOCAL_RULE;
 					modeNestingLevel = 1;
 					return pos + 1;
-				}
-				if (name === "@media" || name === "@supports") {
+				} else if (name === "@media" || name === "@supports") {
+					// TODO handle nested CSS syntax
 					let pos = end;
 					const [newPos] = eatText(input, pos, eatAtRuleNested);
 					pos = newPos;
 					if (pos === input.length) return pos;
 					if (input.charCodeAt(pos) !== CC_LEFT_CURLY) {
-						throw new Error(
-							`Unexpected ${input[pos]} at ${pos} during parsing of @media or @supports (expected '{')`
+						this._emitWarning(
+							state,
+							`Unexpected ${input[pos]} at ${pos} during parsing of @media or @supports (expected '{')`,
+							locConverter,
+							start,
+							pos
 						);
+						return pos;
 					}
 					return pos + 1;
 				}
@@ -480,22 +540,56 @@ class CssParser extends Parser {
 			},
 			semicolon: (input, start, end) => {
 				switch (mode) {
-					case CSS_MODE_AT_IMPORT_EXPECT_URL:
-						throw new Error(`Expected URL for @import at ${start}`);
-					case CSS_MODE_AT_IMPORT_EXPECT_MEDIA:
-					case CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS: {
-						const { line: sl, column: sc } = locConverter.get(modeData.start);
+					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
+						this._emitWarning(
+							state,
+							`Expected URL for @import at ${start}`,
+							locConverter,
+							start,
+							end
+						);
+						return end;
+					}
+					case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
+						if (modeData.url === undefined) {
+							this._emitWarning(
+								state,
+								`Expected URL for @import at ${modeData.atRuleStart}`,
+								locConverter,
+								modeData.atRuleStart,
+								modeData.lastPos
+							);
+							return end;
+						}
+						const semicolonPos = end;
+						end = walkCssTokens.eatWhiteLine(input, end + 1);
+						const { line: sl, column: sc } = locConverter.get(
+							modeData.atRuleStart
+						);
 						const { line: el, column: ec } = locConverter.get(end);
-						end = eatWhiteLine(input, end);
-						const media = input.slice(modePos, start).trim();
+						const pos = walkCssTokens.eatWhitespaceAndComments(
+							input,
+							modeData.lastPos
+						);
+						// Prevent to consider comments as a part of media query
+						if (pos !== semicolonPos - 1) {
+							modeData.media = input
+								.slice(modeData.lastPos, semicolonPos - 1)
+								.trim();
+						}
 						const dep = new CssImportDependency(
-							modeData.url,
+							modeData.url.trim(),
 							[modeData.start, end],
+							modeData.layer,
 							modeData.supports,
-							media
+							modeData.media && modeData.media.length > 0
+								? modeData.media
+								: undefined
 						);
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);
+						modeData = undefined;
+						mode = CSS_MODE_TOP_LEVEL;
 						break;
 					}
 					case CSS_MODE_IN_LOCAL_RULE: {
@@ -514,6 +608,7 @@ class CssParser extends Parser {
 			leftCurlyBracket: (input, start, end) => {
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL:
+						allowImportAtRule = false;
 						mode = isTopLevelLocal()
 							? CSS_MODE_IN_LOCAL_RULE
 							: CSS_MODE_IN_RULE;
@@ -570,6 +665,13 @@ class CssParser extends Parser {
 							lastIdentifier = [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;
+						}
+						break;
+					}
 				}
 				return end;
 			},
@@ -595,7 +697,40 @@ class CssParser extends Parser {
 				}
 				return end;
 			},
+			function: (input, start, end) => {
+				let name = input.slice(start, end - 1);
+
+				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;
+					}
+				}
+				return end;
+			},
 			leftParenthesis: (input, start, end) => {
+				balanced.push(["(", start, end]);
+
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
 						modeStack.push(false);
@@ -605,7 +740,9 @@ class CssParser extends Parser {
 				return end;
 			},
 			rightParenthesis: (input, start, end) => {
-				functionStack.pop();
+				const last = balanced[balanced.length - 1];
+
+				balanced.pop();
 
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
@@ -620,6 +757,23 @@ class CssParser extends Parser {
 						}
 						break;
 					}
+					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;
+						}
+						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;
+						} else if (last && last[0].toLowerCase() === "supports") {
+							modeData.supports = input.slice(last[2], end - 1).trim();
+							modeData.lastPos = end;
+						}
+						break;
+					}
 				}
 
 				return end;
@@ -651,7 +805,7 @@ class CssParser extends Parser {
 			pseudoFunction: (input, start, end) => {
 				let name = input.slice(start, end - 1);
 
-				functionStack.push([name, start, end]);
+				balanced.push([name, start, end]);
 
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
@@ -676,37 +830,6 @@ class CssParser extends Parser {
 				}
 				return end;
 			},
-			function: (input, start, end) => {
-				let name = input.slice(start, end - 1);
-
-				functionStack.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;
-					}
-				}
-				return end;
-			},
 			comma: (input, start, end) => {
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: