webpack 5.105.4 → 5.106.0

package/lib/css/CssParser.js

@@ -7,7 +7,6 @@
 
 const vm = require("vm");
 const CommentCompilationWarning = require("../CommentCompilationWarning");
-const CssModule = require("../CssModule");
 const ModuleDependencyWarning = require("../ModuleDependencyWarning");
 const { CSS_MODULE_TYPE_AUTO } = require("../ModuleTypeConstants");
 const Parser = require("../Parser");
@@ -34,6 +33,7 @@ const walkCssTokens = require("./walkCssTokens");
 /** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
 /** @typedef {import("./walkCssTokens").CssTokenCallbacks} CssTokenCallbacks */
 /** @typedef {import("../../declarations/WebpackOptions").CssModuleParserOptions} CssModuleParserOptions */
+/** @typedef {import("../CssModule")} CssModule */
 
 /** @typedef {[number, number]} Range */
 /** @typedef {{ line: number, column: number }} Position */
@@ -50,6 +50,7 @@ const CC_RIGHT_CURLY = "}".charCodeAt(0);
 const CC_HYPHEN_MINUS = "-".charCodeAt(0);
 const CC_TILDE = "~".charCodeAt(0);
 const CC_EQUAL = "=".charCodeAt(0);
+const CC_FULL_STOP = ".".charCodeAt(0);
 
 // https://www.w3.org/TR/css-syntax-3/#newline
 // We don't have `preprocessing` stage, so we need specify all of them
@@ -61,7 +62,7 @@ const IMAGE_SET_FUNCTION = /^(?:-\w+-)?image-set$/i;
 const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(?:-\w+-)?keyframes$/;
 const COMPOSES_PROPERTY = /^(?:composes|compose-with)$/i;
 const IS_MODULES = /\.modules?\.[^.]+$/i;
-const CSS_COMMENT = /\/\*((?!\*\/).*?)\*\//g;
+const CSS_COMMENT = /\/\*((?!\*\/)[\s\S]*?)\*\//g;
 
 /**
  * @param {RegExp} regexp a regexp
@@ -370,7 +371,7 @@ const GRID_AUTO_FLOW = {
 };
 
 /** @type {Record<string, number>} */
-const GRID_TEMPLATE_ARES = {
+const GRID_TEMPLATE_AREAS = {
 	// Special
 	none: 1,
 	...GLOBAL_VALUES
@@ -389,7 +390,7 @@ const GRID_TEMPLATE_COLUMNS_OR_ROWS = {
 
 /** @type {Record<string, number>} */
 const GRID_TEMPLATE = {
-	...GRID_TEMPLATE_ARES,
+	...GRID_TEMPLATE_AREAS,
 	...GRID_TEMPLATE_COLUMNS_OR_ROWS
 };
 
@@ -399,7 +400,7 @@ const GRID = {
 	dense: 1,
 	...GRID_AUTO_COLUMNS_OR_ROW,
 	...GRID_AUTO_FLOW,
-	...GRID_TEMPLATE_ARES,
+	...GRID_TEMPLATE_AREAS,
 	...GRID_TEMPLATE_COLUMNS_OR_ROWS
 };
 
@@ -511,12 +512,11 @@ const getKnownProperties = (options = {}) => {
 		knownProperties.set("grid-column", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-column-end", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-column-start", GRID_AREA_OR_COLUMN_OR_ROW);
-		knownProperties.set("grid-column-start", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-row", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-row-end", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-row-start", GRID_AREA_OR_COLUMN_OR_ROW);
 		knownProperties.set("grid-template", GRID_TEMPLATE);
-		knownProperties.set("grid-template-areas", GRID_TEMPLATE_ARES);
+		knownProperties.set("grid-template-areas", GRID_TEMPLATE_AREAS);
 		knownProperties.set("grid-template-columns", GRID_TEMPLATE_COLUMNS_OR_ROWS);
 		knownProperties.set("grid-template-rows", GRID_TEMPLATE_COLUMNS_OR_ROWS);
 	}
@@ -655,7 +655,6 @@ class CssParser extends Parser {
 			mode === "auto" &&
 			module.type === CSS_MODULE_TYPE_AUTO &&
 			IS_MODULES.test(
-				// TODO matchResource
 				parseResource(/** @type {string} */ (module.getResource())).path
 			)
 		) {
@@ -689,11 +688,13 @@ class CssParser extends Parser {
 		let blockNestingLevel = 0;
 		/** @type {0 | 1 | undefined} */
 		let modeData;
+		/** @type {number} */
+		let counter = 0;
 
 		/** @type {string[]} */
 		let lastLocalIdentifiers = [];
 
-		/** @typedef {{ value: string, isReference?: boolean }} IcssDefinition */
+		/** @typedef {{ value?: string, importName?: string, localName?: string }} IcssDefinition */
 		/** @type {Map<string, IcssDefinition>} */
 		const icssDefinitions = new Map();
 
@@ -1062,16 +1063,32 @@ class CssParser extends Parser {
 
 		/**
 		 * @param {string} value value to resolve
-		 * @returns {string | [string, string, boolean]} resolved reexport
+		 * @param {string=} localName override local name
+		 * @param {boolean=} isCustomProperty true when it is custom property, otherwise false
+		 * @returns {string | [string, string]} resolved reexport (`localName` and `importName`)
 		 */
-		const getReexport = (value) => {
-			const reexport = icssDefinitions.get(value);
+		const getReexport = (value, localName, isCustomProperty) => {
+			const reexport = icssDefinitions.get(
+				isCustomProperty ? `--${value}` : value
+			);
 
 			if (reexport) {
-				if (reexport.isReference) {
-					return [value, reexport.value, true];
+				if (reexport.importName) {
+					return [
+						reexport.localName || (isCustomProperty ? `--${value}` : value),
+						reexport.importName
+					];
+				}
+
+				if (isCustomProperty) {
+					return /** @type {string} */ (reexport.value).slice(2);
 				}
-				return [value, reexport.value, false];
+
+				return /** @type {string} */ (reexport.value);
+			}
+
+			if (localName) {
+				return [localName, value];
 			}
 
 			return value;
@@ -1105,7 +1122,7 @@ class CssParser extends Parser {
 				if (!str) {
 					this._emitWarning(
 						state,
-						`Unexpected '${input[pos]}' at ${pos} during parsing of '${type ? ":import" : ":export"}' (expected string)`,
+						`Unexpected '${input[pos]}' at ${pos} during parsing of '${type === 0 ? ":import" : ":export"}' (expected string)`,
 						locConverter,
 						stringStart,
 						pos
@@ -1144,14 +1161,15 @@ class CssParser extends Parser {
 						[0, 0],
 						/** @type {"local" | "global"} */
 						(mode),
-						value
+						value,
+						name
 					);
 					const { line: sl, column: sc } = locConverter.get(start);
 					const { line: el, column: ec } = locConverter.get(end);
 					dep.setLoc(sl, sc, el, ec);
 					module.addDependency(dep);
 
-					icssDefinitions.set(name, { value, isReference: true });
+					icssDefinitions.set(name, { importName: value });
 				} else if (type === 1) {
 					const dep = new CssIcssExportDependency(name, getReexport(value));
 					const { line: sl, column: sc } = locConverter.get(start);
@@ -1244,6 +1262,76 @@ class CssParser extends Parser {
 			return pos;
 		};
 
+		/** @typedef {{ from: string, items: ({ localName: string, importName: string })[] }} ValueAtRuleImport */
+		/** @typedef {{ localName: string, value: string }} ValueAtRuleValue */
+		/**
+		 * @param {string} str value at-rule params
+		 * @returns {ValueAtRuleImport | ValueAtRuleValue} parsed result
+		 */
+		const parseValueAtRuleParams = (str) => {
+			if (/from(\/\*|\s)(?:[\s\S]+)$/i.test(str)) {
+				str = str.replace(CSS_COMMENT, " ").trim().replace(/;$/, "");
+				const fromIdx = str.lastIndexOf("from");
+				const path = str
+					.slice(fromIdx + 5)
+					.trim()
+					.replace(/['"]/g, "");
+				let content = str.slice(0, fromIdx).trim();
+
+				if (content.startsWith("(") && content.endsWith(")")) {
+					content = content.slice(1, -1);
+				}
+
+				return {
+					from: path,
+					items: content.split(",").map((item) => {
+						item = item.trim();
+
+						if (item.includes(":")) {
+							const [local, remote] = item.split(":");
+
+							return { localName: local.trim(), importName: remote.trim() };
+						}
+
+						const asParts = item.split(/\s+as\s+/);
+
+						if (asParts.length === 2) {
+							return {
+								localName: asParts[1].trim(),
+								importName: asParts[0].trim()
+							};
+						}
+
+						return { localName: item, importName: item };
+					})
+				};
+			}
+
+			/** @type {string} */
+			let localName;
+			/** @type {string} */
+			let value;
+
+			const idx = str.indexOf(":");
+
+			if (idx !== -1) {
+				localName = str.slice(0, idx).replace(CSS_COMMENT, "").trim();
+				value = str.slice(idx + 1);
+			} else {
+				const mask = str.replace(CSS_COMMENT, (m) => " ".repeat(m.length));
+				const idx = mask.search(/\S\s/) + 1;
+
+				localName = str.slice(0, idx).replace(CSS_COMMENT, "").trim();
+				value = str.slice(idx + (str[idx] === " " ? 1 : 0));
+			}
+
+			if (value.length > 0 && !/^\s+$/.test(value.replace(CSS_COMMENT, ""))) {
+				value = value.trim();
+			}
+
+			return { localName, value };
+		};
+
 		/**
 		 * @param {string} input input
 		 * @param {number} start name start position
@@ -1254,55 +1342,55 @@ class CssParser extends Parser {
 			const semi = eatUntilSemi(input, end);
 			const atRuleEnd = semi + 1;
 			const params = input.slice(end, semi);
-			let [alias, request] = params.split(/\s*from\s*/);
+			const parsed = parseValueAtRuleParams(params);
 
-			if (request) {
-				const aliases = alias
-					.replace(CSS_COMMENT, " ")
-					.trim()
-					.replace(/^\(\s*|\s*\)$/g, "")
-					.split(/\s*,\s*/);
-
-				request = request.replace(CSS_COMMENT, "").trim();
-
-				const isExplicitImport = request[0] === "'" || request[0] === '"';
+			if (
+				typeof (/** @type {ValueAtRuleImport} */ (parsed).from) !== "undefined"
+			) {
+				if (/** @type {ValueAtRuleImport} */ (parsed).from.length === 0) {
+					this._emitWarning(
+						state,
+						`Broken '@value' at-rule: ${input.slice(start, atRuleEnd)}'`,
+						locConverter,
+						start,
+						atRuleEnd
+					);
 
-				if (isExplicitImport) {
-					request = request.slice(1, -1);
+					const dep = new ConstDependency("", [start, atRuleEnd]);
+					module.addPresentationalDependency(dep);
+					return atRuleEnd;
 				}
 
-				for (const alias of aliases) {
-					const [name, aliasName] = alias.split(/\s+as\s+/);
+				let { from, items } = /** @type {ValueAtRuleImport} */ (parsed);
 
+				for (const { importName, localName } of items) {
 					{
-						const reexport = icssDefinitions.get(request);
+						const reexport = icssDefinitions.get(from);
 
-						if (reexport) {
-							request = reexport.value.slice(1, -1);
+						if (reexport && reexport.value) {
+							from = reexport.value.slice(1, -1);
 						}
 
 						const dep = new CssIcssImportDependency(
-							request,
+							from,
 							[0, 0],
 							/** @type {"local" | "global"} */
 							(mode),
-							name
+							importName,
+							localName
 						);
 						const { line: sl, column: sc } = locConverter.get(start);
 						const { line: el, column: ec } = locConverter.get(end);
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);
 
-						icssDefinitions.set(aliasName || name, {
-							value: name,
-							isReference: true
-						});
+						icssDefinitions.set(localName, { importName });
 					}
 
 					{
 						const dep = new CssIcssExportDependency(
-							aliasName || name,
-							getReexport(aliasName || name),
+							localName,
+							getReexport(localName),
 							undefined,
 							false,
 							CssIcssExportDependency.EXPORT_MODE.REPLACE
@@ -1314,9 +1402,7 @@ class CssParser extends Parser {
 					}
 				}
 			} else {
-				const ident = walkCssTokens.eatIdentSequence(alias, 0);
-
-				if (!ident) {
+				if (/** @type {ValueAtRuleValue} */ (parsed).localName.length === 0) {
 					this._emitWarning(
 						state,
 						`Broken '@value' at-rule: ${input.slice(start, atRuleEnd)}'`,
@@ -1330,33 +1416,32 @@ class CssParser extends Parser {
 					return atRuleEnd;
 				}
 
-				const pos = walkCssTokens.eatWhitespaceAndComments(alias, ident[1])[0];
-
-				const name = alias.slice(ident[0], ident[1]);
-				let value =
-					alias.charCodeAt(pos) === CC_COLON
-						? alias.slice(pos + 1)
-						: alias.slice(ident[1]);
-
-				if (value && !/^\s+$/.test(value.replace(CSS_COMMENT, ""))) {
-					value = value.trim();
-				}
+				const { localName, value } = /** @type {ValueAtRuleValue} */ (parsed);
+				const { line: sl, column: sc } = locConverter.get(start);
+				const { line: el, column: ec } = locConverter.get(end);
 
 				if (icssDefinitions.has(value)) {
 					const def =
 						/** @type {IcssDefinition} */
 						(icssDefinitions.get(value));
 
-					value = def.value;
-				}
+					def.localName = value;
 
-				icssDefinitions.set(name, { value });
+					icssDefinitions.set(localName, def);
 
-				const dep = new CssIcssExportDependency(name, value);
-				const { line: sl, column: sc } = locConverter.get(start);
-				const { line: el, column: ec } = locConverter.get(end);
-				dep.setLoc(sl, sc, el, ec);
-				module.addDependency(dep);
+					const dep = new CssIcssExportDependency(
+						localName,
+						getReexport(value)
+					);
+					dep.setLoc(sl, sc, el, ec);
+					module.addDependency(dep);
+				} else {
+					icssDefinitions.set(localName, { value });
+
+					const dep = new CssIcssExportDependency(localName, value);
+					dep.setLoc(sl, sc, el, ec);
+					module.addDependency(dep);
+				}
 			}
 
 			const dep = new ConstDependency("", [start, atRuleEnd]);
@@ -1371,16 +1456,16 @@ class CssParser extends Parser {
 		 * @returns {number} position after handling
 		 */
 		const processICSSSymbol = (name, start, end) => {
-			const { value, isReference } =
+			const def =
 				/** @type {IcssDefinition} */
 				(icssDefinitions.get(name));
 			const { line: sl, column: sc } = locConverter.get(start);
 			const { line: el, column: ec } = locConverter.get(end);
 			const dep = new CssIcssSymbolDependency(
-				name,
-				value,
+				def.localName || name,
 				[start, end],
-				isReference
+				def.value,
+				def.importName
 			);
 			dep.setLoc(sl, sc, el, ec);
 			module.addDependency(dep);
@@ -1587,19 +1672,35 @@ class CssParser extends Parser {
 				} else if (from[2] === false) {
 					const { line: sl, column: sc } = locConverter.get(customIdent[0]);
 					const { line: el, column: ec } = locConverter.get(from[1] - 1);
-					const dep = new CssIcssImportDependency(
-						path.slice(1, -1),
-						[customIdent[0], from[1] - 1],
-						/** @type {"local" | "global"} */
-						(mode),
-						identifier,
-						identifier,
-						CssIcssExportDependency.EXPORT_MODE.NONE,
-						CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
-					);
+					const localName = `__ICSS_IMPORT_${counter++}__`;
 
-					dep.setLoc(sl, sc, el, ec);
-					module.addDependency(dep);
+					{
+						const dep = new CssIcssImportDependency(
+							path.slice(1, -1),
+							[customIdent[0], from[1] - 1],
+							/** @type {"local" | "global"} */
+							(mode),
+							identifier,
+							localName
+						);
+
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
+
+					{
+						const dep = new CssIcssExportDependency(
+							identifier,
+							getReexport(identifier, localName, true),
+							[customIdent[0], from[1] - 1],
+							true,
+							CssIcssExportDependency.EXPORT_MODE.ONCE,
+							CssIcssExportDependency.EXPORT_TYPE.CUSTOM_VARIABLE
+						);
+
+						dep.setLoc(sl, sc, el, ec);
+						module.addDependency(dep);
+					}
 
 					{
 						const dep = new ConstDependency("", [fromWord[0], from[1]]);
@@ -1612,7 +1713,7 @@ class CssParser extends Parser {
 				const { line: el, column: ec } = locConverter.get(customIdent[1]);
 				const dep = new CssIcssExportDependency(
 					identifier,
-					getReexport(identifier),
+					getReexport(identifier, undefined, true),
 					[customIdent[0], customIdent[1]],
 					true,
 					CssIcssExportDependency.EXPORT_MODE.ONCE,
@@ -1886,15 +1987,15 @@ class CssParser extends Parser {
 						for (const className of classNames) {
 							const [start, end] = className;
 							const identifier = unescapeIdentifier(input.slice(start, end));
-							const resolvedClassName = getReexport(identifier);
 							const dep = new CssIcssExportDependency(
 								lastLocalIdentifier,
-								resolvedClassName,
+								getReexport(identifier),
 								[start, end],
-								isGlobalFunction ? false : !Array.isArray(resolvedClassName),
+								!isGlobalFunction,
 								isGlobalFunction
 									? CssIcssExportDependency.EXPORT_MODE.APPEND
-									: CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE
+									: CssIcssExportDependency.EXPORT_MODE.SELF_REFERENCE,
+								CssIcssExportDependency.EXPORT_TYPE.COMPOSES
 							);
 							const { line: sl, column: sc } = locConverter.get(start);
 							const { line: el, column: ec } = locConverter.get(end);
@@ -1925,20 +2026,35 @@ class CssParser extends Parser {
 							for (const className of classNames) {
 								const [start, end] = className;
 								const identifier = unescapeIdentifier(input.slice(start, end));
-								const dep = new CssIcssImportDependency(
-									request,
-									[start, end],
-									/** @type {"local" | "global"} */
-									(mode),
-									identifier,
-									/** @type {string} */
-									(lastLocalIdentifier),
-									CssIcssExportDependency.EXPORT_MODE.APPEND
-								);
 								const { line: sl, column: sc } = locConverter.get(start);
 								const { line: el, column: ec } = locConverter.get(end);
-								dep.setLoc(sl, sc, el, ec);
-								module.addDependency(dep);
+								const localName = `__ICSS_IMPORT_${counter++}__`;
+
+								{
+									const dep = new CssIcssImportDependency(
+										request,
+										[start, end],
+										/** @type {"local" | "global"} */
+										(mode),
+										identifier,
+										localName
+									);
+									dep.setLoc(sl, sc, el, ec);
+									module.addDependency(dep);
+								}
+
+								{
+									const dep = new CssIcssExportDependency(
+										lastLocalIdentifier,
+										getReexport(identifier, localName),
+										[start, end],
+										true,
+										CssIcssExportDependency.EXPORT_MODE.APPEND,
+										CssIcssExportDependency.EXPORT_TYPE.COMPOSES
+									);
+									dep.setLoc(sl, sc, el, ec);
+									module.addDependency(dep);
+								}
 							}
 
 							classNames.clear();
@@ -1958,7 +2074,8 @@ class CssParser extends Parser {
 										getReexport(identifier),
 										[start, end],
 										false,
-										CssIcssExportDependency.EXPORT_MODE.APPEND
+										CssIcssExportDependency.EXPORT_MODE.APPEND,
+										CssIcssExportDependency.EXPORT_TYPE.COMPOSES
 									);
 									const { line: sl, column: sc } = locConverter.get(start);
 									const { line: el, column: ec } = locConverter.get(end);
@@ -2255,10 +2372,6 @@ class CssParser extends Parser {
 				if (isModules) {
 					const identifier = input.slice(start, end);
 
-					if (icssDefinitions.has(identifier)) {
-						return processICSSSymbol(identifier, start, end);
-					}
-
 					if (
 						this.options.dashedIdents &&
 						isLocalMode() &&
@@ -2267,6 +2380,10 @@ class CssParser extends Parser {
 						return processDashedIdent(input, start, end);
 					}
 
+					if (icssDefinitions.has(identifier)) {
+						return processICSSSymbol(identifier, start, end);
+					}
+
 					switch (scope) {
 						case CSS_MODE_IN_BLOCK: {
 							if (isModules && !isNextRulePrelude) {
@@ -2281,7 +2398,11 @@ class CssParser extends Parser {
 				return end;
 			},
 			delim: (input, start, end) => {
-				if (isNextRulePrelude && isLocalMode()) {
+				if (
+					input.charCodeAt(start) === CC_FULL_STOP &&
+					isNextRulePrelude &&
+					isLocalMode()
+				) {
 					return processClassSelector(input, start, end);
 				}
 
@@ -2486,13 +2607,9 @@ class CssParser extends Parser {
 				return end;
 			},
 			comma: (input, start, end) => {
-				if (isModules) {
-					const popped = balanced.pop();
-
-					if (!popped) {
-						// Reset stack for `:global .class :local .class-other` selector after
-						modeData = undefined;
-					}
+				if (isModules && balanced.length === 0) {
+					// Reset stack for `:global .class :local .class-other` selector after
+					modeData = undefined;
 				}
 
 				lastTokenEndForComments = start;
@@ -2510,30 +2627,10 @@ class CssParser extends Parser {
 		buildMeta.defaultObject = this.options.namedExports
 			? false
 			: "redirect-warn";
-		buildMeta.exportType = this.options.exportType;
-
-		if (!buildMeta.exportType) {
-			// Inherit exportType from parent module to ensure consistency.
-			// When a CSS file is imported with syntax like `import "./basic.css" with { type: "css" }`,
-			// the parent module's exportType is set to "css-style-sheet".
-			// Child modules imported via @import should inherit this exportType
-			// instead of using the default "link", ensuring that the entire
-			// import chain uses the same export format.
-			const parent = state.compilation.moduleGraph.getIssuer(module);
-			if (parent instanceof CssModule) {
-				buildMeta.exportType = /** @type {BuildMeta} */ (
-					parent.buildMeta
-				).exportType;
-			}
-		}
-		if (!buildMeta.exportType) {
-			buildMeta.exportType = "link";
-		}
 
-		// TODO this.namedExports?
 		if (
-			buildMeta.exportType === "text" ||
-			buildMeta.exportType === "css-style-sheet"
+			/** @type {CssModule} */ (module).exportType === "text" ||
+			/** @type {CssModule} */ (module).exportType === "css-style-sheet"
 		) {
 			module.addDependency(new StaticExportsDependency(["default"], true));
 		} else {