@master/css-compiler 2.0.0-rc.84 → 2.0.0-rc.86

package/dist/master-css-manifest.js

@@ -1,5 +1,6 @@
+import { normalizeStylesheetValue } from "./stylesheet-value.js";
 import { addCompilerDiagnosticCount, setCompilerDiagnosticCount, timeCompilerDiagnostic } from "./diagnostics.js";
-import { createCompilerCSS, parseAt, parseSelector } from "@master/css-engine/compiler";
+import { createCompilerCSS, parseCondition, parseSelector } from "@master/css-engine/compiler";
 import UtilityType from "@master/css-schema/utility-type";
 import { flattenMasterCSSManifestVariables, groupMasterCSSManifestVariables } from "@master/css-schema/manifest";
 import { builtinNamespaces } from "@master/css-engine";
@@ -92,12 +93,6 @@ function getVariableNumericValue(value, namespace) {
 		...match[2] ? { unit: match[2] } : {}
 	};
 }
-function collectVariableDependencies(value, dependencies = /* @__PURE__ */ new Set()) {
-	if (typeof value !== "string") return dependencies;
-	for (const match of value.matchAll(/\$(-?[_a-zA-Z0-9-]+)/g)) dependencies.add(match[1]);
-	for (const match of value.matchAll(/var\(\s*--(-?[_a-zA-Z0-9-]+)/g)) dependencies.add(match[1]);
-	return dependencies;
-}
 function variableSlot(variable) {
 	return variable.name || `${variable.namespace || ""}\0${variable.key}`;
 }
@@ -114,10 +109,15 @@ function compileVariables(input, resolveVariableName) {
 	for (const definition of input) {
 		const resolved = resolveVariableName(definition);
 		if (!resolved.name) continue;
-		const value = normalizeZero(definition.value);
+		const rawValue = normalizeZero(definition.value);
+		const normalized = typeof rawValue === "string" || typeof rawValue === "number" ? normalizeStylesheetValue(rawValue, { replacePipes: true }) : {
+			value: rawValue,
+			dependencies: /* @__PURE__ */ new Set()
+		};
+		const value = typeof rawValue === "number" ? rawValue : normalized.value;
 		const numeric = getVariableNumericValue(value, resolved.namespace);
 		const type = numeric ? "number" : getVariableType(value);
-		const dependencies = collectVariableDependencies(value);
+		const dependencies = normalized.dependencies;
 		if (definition.mode) {
 			let target = byName.get(resolved.name);
 			if (!target) {
@@ -161,7 +161,7 @@ function compileVariables(input, resolveVariableName) {
 	}
 	return variables.length ? variables : void 0;
 }
-function normalizeNumericAtRuleValue(variable, rootSize) {
+function normalizeNumericConditionValue(variable, rootSize) {
 	if (variable.key.startsWith("-")) return;
 	const numeric = variable.numeric || (typeof variable.value === "number" ? { value: variable.value } : void 0);
 	if (!numeric) return;
@@ -173,8 +173,8 @@ function normalizeNumericAtRuleValue(variable, rootSize) {
 		default: return;
 	}
 }
-function createVariableAtRule(variable, id, rootSize) {
-	const value = normalizeNumericAtRuleValue(variable, rootSize);
+function createVariableCondition(variable, id, rootSize) {
+	const value = normalizeNumericConditionValue(variable, rootSize);
 	if (value === void 0) return;
 	return {
 		id,
@@ -185,36 +185,36 @@ function createVariableAtRule(variable, id, rootSize) {
 		}]
 	};
 }
-function compileAtRules(variables, rootSize) {
-	const atRules = {};
-	const breakpointAtRules = {};
-	const containerAtRules = {};
+function compileConditions(variables, rootSize) {
+	const conditions = {};
+	const breakpointConditions = {};
+	const containerConditions = {};
 	for (const variable of variables || []) if (variable.namespace === "breakpoint") {
-		const atRule = createVariableAtRule(variable, "media", rootSize);
-		if (atRule) {
-			atRules[variable.key] = atRule;
-			breakpointAtRules[variable.key] = atRule;
+		const condition = createVariableCondition(variable, "media", rootSize);
+		if (condition) {
+			conditions[variable.key] = condition;
+			breakpointConditions[variable.key] = condition;
 		}
 	} else if (variable.namespace === "container") {
-		const atRule = createVariableAtRule(variable, "container", rootSize);
-		if (atRule) containerAtRules[variable.key] = atRule;
+		const condition = createVariableCondition(variable, "container", rootSize);
+		if (condition) containerConditions[variable.key] = condition;
 	}
 	return {
-		atRules: Object.keys(atRules).length ? atRules : void 0,
-		breakpointAtRules: Object.keys(breakpointAtRules).length ? breakpointAtRules : void 0,
-		containerAtRules: Object.keys(containerAtRules).length ? containerAtRules : void 0
+		conditions: Object.keys(conditions).length ? conditions : void 0,
+		breakpointConditions: Object.keys(breakpointConditions).length ? breakpointConditions : void 0,
+		containerConditions: Object.keys(containerConditions).length ? containerConditions : void 0
 	};
 }
-function cloneAtRuleNode(node) {
+function cloneConditionNode(node) {
 	return "children" in node ? {
 		...node,
-		children: node.children.map(cloneAtRuleNode)
+		children: node.children.map(cloneConditionNode)
 	} : { ...node };
 }
-function cloneAtRule(atRule) {
+function cloneCondition(condition) {
 	return {
-		id: atRule.id,
-		nodes: atRule.nodes.map(cloneAtRuleNode)
+		id: condition.id,
+		nodes: condition.nodes.map(cloneConditionNode)
 	};
 }
 function cloneSelectorNode(node) {
@@ -227,12 +227,12 @@ function compileVariantBranch(branch, css) {
 	const selector = branch.selector?.trim();
 	const bodylessSelector = selector ? selector.includes("&") ? selector.replace(/&/g, "") : selector : void 0;
 	const selectorNodes = branch.selectorNodes?.length ? branch.selectorNodes.map(cloneSelectorNode) : bodylessSelector ? parseSelector(bodylessSelector, css, false).map((node) => cloneSelectorNode(node)) : void 0;
-	const atRuleNodes = branch.atRuleNodes?.length ? branch.atRuleNodes.map(cloneAtRule) : branch.atRules?.length ? branch.atRules.map((atRule) => cloneAtRule(parseAt(atRule, css, false))) : void 0;
+	const conditionNodes = branch.conditionNodes?.length ? branch.conditionNodes.map(cloneCondition) : branch.conditions?.length ? branch.conditions.map((condition) => cloneCondition(parseCondition(condition, css, false))) : void 0;
 	return {
 		...branch,
 		...selectorNodes?.length ? { selectorNodes } : {},
-		...branch.atRules?.length ? { atRules: [...branch.atRules] } : {},
-		...atRuleNodes?.length ? { atRuleNodes } : {}
+		...branch.conditions?.length ? { conditions: [...branch.conditions] } : {},
+		...conditionNodes?.length ? { conditionNodes } : {}
 	};
 }
 function compileVariants(input, baseManifest) {
@@ -240,7 +240,7 @@ function compileVariants(input, baseManifest) {
 	const css = createCompilerCSS(baseManifest);
 	const variants = [];
 	const selectors = {};
-	const atRules = {};
+	const conditions = {};
 	for (const variant of input) {
 		const branches = variant.branches.map((branch) => compileVariantBranch(branch, css));
 		variants.push({
@@ -252,11 +252,11 @@ function compileVariants(input, baseManifest) {
 			if (firstSelectorNodes?.length) selectors[variant.token] = firstSelectorNodes.map(cloneSelectorNode);
 		}
 		if (variant.token.startsWith("@")) {
-			const firstAtRule = branches.find((branch) => branch.atRuleNodes?.length)?.atRuleNodes?.[0];
-			if (firstAtRule) atRules[variant.token.slice(1)] = cloneAtRule(firstAtRule);
+			const firstCondition = branches.find((branch) => branch.conditionNodes?.length)?.conditionNodes?.[0];
+			if (firstCondition) conditions[variant.token.slice(1)] = cloneCondition(firstCondition);
 			else {
 				const firstLayer = branches.find((branch) => branch.layer)?.layer;
-				if (firstLayer) atRules[variant.token.slice(1)] = {
+				if (firstLayer) conditions[variant.token.slice(1)] = {
 					id: "layer",
 					nodes: [{
 						type: "string",
@@ -269,39 +269,100 @@ function compileVariants(input, baseManifest) {
 	return {
 		variants,
 		...Object.keys(selectors).length ? { selectors } : {},
-		...Object.keys(atRules).length ? { atRules } : {}
+		...Object.keys(conditions).length ? { conditions } : {}
 	};
 }
 function cloneDeclarations(declarations) {
 	return Array.isArray(declarations) ? [...declarations] : { ...declarations };
 }
 function assertNoValuePlaceholder(declarations) {
-	for (const property in declarations) if (declarations[property].includes("--value")) throw new Error("--value() is only supported inside managed pattern declarations");
+	for (const property in declarations) if (containsValuePlaceholderReference(declarations[property])) throw new Error("--value() is only supported inside managed pattern declarations");
 }
 function compileUtilityRule(rule) {
 	assertNoValuePlaceholder(rule.declarations);
 	return {
 		declarations: cloneDeclarations(rule.declarations),
-		...rule.atRules?.length ? { atRules: [...rule.atRules] } : {},
+		...rule.conditions?.length ? { conditions: [...rule.conditions] } : {},
 		...rule.selector && rule.selector !== "&" ? { selector: rule.selector } : {}
 	};
 }
+const VALUE_PLACEHOLDER_NAME = "--value";
 const VALUE_PLACEHOLDER_FUNCTION = "--value()";
-const VALUE_PLACEHOLDER_CALL = /--value\s*\(([^)]*)\)/g;
+function isCSSIdentifierCharacter(value) {
+	return value !== void 0 && /[-_a-zA-Z0-9]/.test(value);
+}
+function skipQuotedText(value, index) {
+	const quote = value[index];
+	index++;
+	while (index < value.length) {
+		if (value[index] === "\\") {
+			index += 2;
+			continue;
+		}
+		if (value[index] === quote) return index + 1;
+		index++;
+	}
+	return index;
+}
+function skipComment(value, index) {
+	const end = value.indexOf("*/", index + 2);
+	return end === -1 ? value.length : end + 2;
+}
+function containsValuePlaceholderReference(value) {
+	if (!value.includes(VALUE_PLACEHOLDER_NAME)) return false;
+	for (let index = 0; index < value.length;) {
+		const character = value[index];
+		if (character === "\"" || character === "'") {
+			index = skipQuotedText(value, index);
+			continue;
+		}
+		if (character === "/" && value[index + 1] === "*") {
+			index = skipComment(value, index);
+			continue;
+		}
+		if (value.startsWith(VALUE_PLACEHOLDER_NAME, index)) return true;
+		index++;
+	}
+	return false;
+}
+function parseValuePlaceholderCall(value, index) {
+	if (isCSSIdentifierCharacter(value[index - 1])) throw new Error("--value() must be a standalone CSS value placeholder");
+	const openParenIndex = index + 7;
+	if (value[openParenIndex] !== "(") throw new Error("--value() must be called as --value()");
+	const closeParenIndex = value.indexOf(")", openParenIndex + 1);
+	if (closeParenIndex === -1) throw new Error("--value() must be called as --value()");
+	if (value.slice(openParenIndex + 1, closeParenIndex).trim()) throw new Error("--value() does not accept arguments");
+	const end = closeParenIndex + 1;
+	if (isCSSIdentifierCharacter(value[end])) throw new Error("--value() must be a standalone CSS value placeholder");
+	return end;
+}
 function compilePatternDeclarationValue(value) {
-	if (!value.includes("--value")) return value;
+	if (!value.includes(VALUE_PLACEHOLDER_NAME)) return value;
 	const parts = [];
 	let lastIndex = 0;
 	let matched = false;
-	VALUE_PLACEHOLDER_CALL.lastIndex = 0;
-	for (const match of value.matchAll(VALUE_PLACEHOLDER_CALL)) {
+	for (let index = 0; index < value.length;) {
+		const character = value[index];
+		if (character === "\"" || character === "'") {
+			index = skipQuotedText(value, index);
+			continue;
+		}
+		if (character === "/" && value[index + 1] === "*") {
+			index = skipComment(value, index);
+			continue;
+		}
+		if (!value.startsWith(VALUE_PLACEHOLDER_NAME, index)) {
+			index++;
+			continue;
+		}
+		const end = parseValuePlaceholderCall(value, index);
 		matched = true;
-		if (match[1].trim()) throw new Error("--value() does not accept arguments");
-		if (match.index > lastIndex) parts.push(value.slice(lastIndex, match.index));
+		if (index > lastIndex) parts.push(value.slice(lastIndex, index));
 		parts.push(null);
-		lastIndex = match.index + match[0].length;
+		lastIndex = end;
+		index = end;
 	}
-	if (!matched || value.slice(lastIndex).includes("--value")) throw new Error("--value() must be called as --value()");
+	if (!matched) return value;
 	if (lastIndex < value.length) parts.push(value.slice(lastIndex));
 	return value === VALUE_PLACEHOLDER_FUNCTION ? null : parts;
 }
@@ -313,7 +374,7 @@ function compilePatternDeclarations(declarations) {
 function compilePatternUtilityRule(rule) {
 	return {
 		declarations: compilePatternDeclarations(rule.declarations),
-		...rule.atRules?.length ? { atRules: [...rule.atRules] } : {},
+		...rule.conditions?.length ? { conditions: [...rule.conditions] } : {},
 		...rule.selector && rule.selector !== "&" ? { selector: rule.selector } : {}
 	};
 }
@@ -335,7 +396,8 @@ function getPatternMatcher(pattern) {
 	return {
 		type: "pattern",
 		prefix: pattern.prefix,
-		values: [...pattern.values]
+		values: [...pattern.values],
+		...pattern.valueMap ? { valueMap: { ...pattern.valueMap } } : {}
 	};
 }
 function getDynamicMatchers(dynamic) {
@@ -366,7 +428,7 @@ function compileUtility(definition, order) {
 		const rules = [];
 		if (definition.declarations) rules.push({
 			declarations: compilePatternDeclarations(definition.declarations),
-			...definition.atRules?.length ? { atRules: [...definition.atRules] } : {}
+			...definition.conditions?.length ? { conditions: [...definition.conditions] } : {}
 		});
 		if (definition.rules?.length) rules.push(...definition.rules.map(compilePatternUtilityRule));
 		return {
@@ -387,7 +449,7 @@ function compileUtility(definition, order) {
 		const rules = [];
 		if (definition.declarations) rules.push({
 			declarations: compilePatternDeclarations(definition.declarations),
-			...definition.atRules?.length ? { atRules: [...definition.atRules] } : {}
+			...definition.conditions?.length ? { conditions: [...definition.conditions] } : {}
 		});
 		if (definition.rules?.length) rules.push(...definition.rules.map(compilePatternUtilityRule));
 		return {
@@ -411,7 +473,7 @@ function compileUtility(definition, order) {
 		assertNoValuePlaceholder(definition.declarations);
 		rules.push({
 			declarations: cloneDeclarations(definition.declarations),
-			...definition.atRules?.length ? { atRules: [...definition.atRules] } : {}
+			...definition.conditions?.length ? { conditions: [...definition.conditions] } : {}
 		});
 	}
 	if (definition.rules?.length) rules.push(...definition.rules.map(compileUtilityRule));
@@ -478,9 +540,9 @@ function mergeManifest(baseManifest, fragment) {
 		animations: mergeRecords(baseManifest.animations, fragment.animations),
 		animationOptions: mergeAnimationOptions(baseManifest.animationOptions, fragment.animationOptions, fragment.animations),
 		variants: mergeBy(baseManifest.variants, fragment.variants, (variant) => variant.token),
-		atRules: mergeRecords(baseManifest.atRules, fragment.atRules),
-		breakpointAtRules: mergeRecords(baseManifest.breakpointAtRules, fragment.breakpointAtRules),
-		containerAtRules: mergeRecords(baseManifest.containerAtRules, fragment.containerAtRules),
+		conditions: mergeRecords(baseManifest.conditions, fragment.conditions),
+		breakpointConditions: mergeRecords(baseManifest.breakpointConditions, fragment.breakpointConditions),
+		containerConditions: mergeRecords(baseManifest.containerConditions, fragment.containerConditions),
 		selectors: mergeRecords(baseManifest.selectors, fragment.selectors),
 		utilities: mergeBy(baseManifest.utilities, fragment.utilities, (utility) => `${utility.id}\0${utility.layer || ""}`),
 		debug: mergeRecords(baseManifest.debug, fragment.debug)
@@ -498,7 +560,7 @@ function createMasterCSSManifest(input = {}, options = {}) {
 	const resolveVariableName = timeCompilerDiagnostic(diagnostics, "manifest-variable-name-resolver-ms", () => createVariableNameResolver(input, options));
 	const variableDefinitions = timeCompilerDiagnostic(diagnostics, "manifest-compile-variables-ms", () => compileVariables(input.variables, resolveVariableName));
 	const variables = timeCompilerDiagnostic(diagnostics, "manifest-group-variables-ms", () => groupMasterCSSManifestVariables(variableDefinitions));
-	const { atRules, breakpointAtRules, containerAtRules } = timeCompilerDiagnostic(diagnostics, "manifest-compile-at-rules-ms", () => compileAtRules(variableDefinitions, rootSize));
+	const { conditions, breakpointConditions, containerConditions } = timeCompilerDiagnostic(diagnostics, "manifest-compile-conditions-ms", () => compileConditions(variableDefinitions, rootSize));
 	const settings = {
 		...input.rootSize !== void 0 ? { rootSize: input.rootSize } : {},
 		...input.baseUnit !== void 0 ? { baseUnit: input.baseUnit } : {},
@@ -512,11 +574,11 @@ function createMasterCSSManifest(input = {}, options = {}) {
 		version: 1,
 		...Object.keys(settings).length ? { settings } : {},
 		...variables ? { variables } : {},
-		...atRules ? { atRules } : {},
-		...breakpointAtRules ? { breakpointAtRules } : {},
-		...containerAtRules ? { containerAtRules } : {}
+		...conditions ? { conditions } : {},
+		...breakpointConditions ? { breakpointConditions } : {},
+		...containerConditions ? { containerConditions } : {}
 	}));
-	const { variants, selectors, atRules: variantAtRules } = timeCompilerDiagnostic(diagnostics, "manifest-compile-variants-ms", () => compileVariants(input.variants, variantBaseManifest));
+	const { variants, selectors, conditions: variantConditions } = timeCompilerDiagnostic(diagnostics, "manifest-compile-variants-ms", () => compileVariants(input.variants, variantBaseManifest));
 	const utilities = timeCompilerDiagnostic(diagnostics, "manifest-compile-utilities-ms", () => compileUtilities(input.utilities));
 	const animations = timeCompilerDiagnostic(diagnostics, "manifest-compile-animations-ms", () => compileAnimations(input.animations));
 	const animationOptions = timeCompilerDiagnostic(diagnostics, "manifest-compile-animation-options-ms", () => compileAnimationOptions(input.animationOptions));
@@ -527,9 +589,9 @@ function createMasterCSSManifest(input = {}, options = {}) {
 		...animations ? { animations } : {},
 		...animationOptions ? { animationOptions } : {},
 		...variants?.length ? { variants } : {},
-		...atRules || variantAtRules ? { atRules: mergeRecords(atRules, variantAtRules) } : {},
-		...breakpointAtRules ? { breakpointAtRules } : {},
-		...containerAtRules ? { containerAtRules } : {},
+		...conditions || variantConditions ? { conditions: mergeRecords(conditions, variantConditions) } : {},
+		...breakpointConditions ? { breakpointConditions } : {},
+		...containerConditions ? { containerConditions } : {},
 		...selectors ? { selectors } : {},
 		...utilities?.length ? { utilities } : {}
 	};
@@ -538,7 +600,7 @@ function createMasterCSSManifest(input = {}, options = {}) {
 	setCompilerDiagnosticCount(diagnostics, "manifest-output-utility-count", manifest.utilities?.length || 0);
 	setCompilerDiagnosticCount(diagnostics, "manifest-output-variant-count", manifest.variants?.length || 0);
 	setCompilerDiagnosticCount(diagnostics, "manifest-output-selector-count", Object.keys(manifest.selectors || {}).length);
-	setCompilerDiagnosticCount(diagnostics, "manifest-output-at-rule-count", Object.keys(manifest.atRules || {}).length);
+	setCompilerDiagnosticCount(diagnostics, "manifest-output-condition-count", Object.keys(manifest.conditions || {}).length);
 	setCompilerDiagnosticCount(diagnostics, "manifest-output-animation-count", Object.keys(manifest.animations || {}).length);
 	return manifest;
 }

package/dist/native-declaration.d.ts

@@ -1,5 +1,4 @@
 import { NativeCSSDeclarationMatcher } from "@master/css-engine";
-
 //#region src/native-declaration.d.ts
 declare const cssTreeNativeDeclarationMatcher: NativeCSSDeclarationMatcher;
 //#endregion

package/dist/stylesheet-value.d.ts

@@ -0,0 +1,9 @@
+//#region src/stylesheet-value.d.ts
+declare function normalizeStylesheetValue(value: string | number, options?: {
+  replacePipes?: boolean;
+}): {
+  value: string;
+  dependencies: Set<string>;
+};
+//#endregion
+export { normalizeStylesheetValue };

package/dist/stylesheet-value.js

@@ -0,0 +1,141 @@
+import { collectCSSVariableReferences, findCSSClosingQuote, findCSSCommentEnd, readCSSFunction } from "@master/css-lexer";
+//#region src/stylesheet-value.ts
+const CSS_VARIABLE_ALIAS = /\$(-?[_a-zA-Z0-9-]+)\b/g;
+const CSS_NUMBER = /^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/;
+function collectUnquotedMatches(value, pattern) {
+	const matches = [];
+	for (let index = 0; index < value.length;) {
+		const char = value[index];
+		if (char === "\"" || char === "'") {
+			index = findCSSClosingQuote(value, index, char) + 1;
+			continue;
+		}
+		if (char === "/" && value[index + 1] === "*") {
+			index = findCSSCommentEnd(value, index);
+			continue;
+		}
+		pattern.lastIndex = index;
+		const match = pattern.exec(value);
+		if (!match || match.index !== index) {
+			index++;
+			continue;
+		}
+		matches.push(match);
+		index = pattern.lastIndex;
+	}
+	return matches;
+}
+function collectCSSVariableAliases(value) {
+	return collectUnquotedMatches(value, CSS_VARIABLE_ALIAS).filter((match) => value[match.index - 1] !== "\\");
+}
+function findTopLevelAlphaSeparator(value) {
+	let separatorIndex = -1;
+	let depth = 0;
+	for (let index = 0; index < value.length; index++) {
+		const char = value[index];
+		if (char === "\"" || char === "'") {
+			index = findCSSClosingQuote(value, index, char);
+			continue;
+		}
+		if (char === "/" && value[index + 1] === "*") {
+			index = findCSSCommentEnd(value, index) - 1;
+			continue;
+		}
+		if (char === "(") {
+			depth++;
+			continue;
+		}
+		if (char === ")") {
+			if (depth > 0) depth--;
+			continue;
+		}
+		if (char === "/" && depth === 0) {
+			if (separatorIndex !== -1) return;
+			separatorIndex = index;
+		}
+	}
+	return separatorIndex;
+}
+function isWholeCSSFunction(value, name) {
+	const trimmed = value.trim();
+	const fn = readCSSFunction(trimmed, 0, name);
+	return Boolean(fn && fn.end === trimmed.length);
+}
+function formatAlphaPercentage(value) {
+	return String(Object.is(value, -0) ? 0 : value).replace(/^(-?)0\./, "$1.") + "%";
+}
+function normalizeStylesheetAlpha(value) {
+	const trimmed = value.trim();
+	if (!trimmed) throw new Error("Invalid --alpha() function: alpha value cannot be empty");
+	if (CSS_NUMBER.test(trimmed)) {
+		const alpha = Number(trimmed);
+		if (alpha < 0 || alpha > 1) throw new Error(`Invalid --alpha() function: numeric alpha must be between 0 and 1: ${trimmed}`);
+		return formatAlphaPercentage(alpha * 100);
+	}
+	if (trimmed.endsWith("%") && CSS_NUMBER.test(trimmed.slice(0, -1))) {
+		const percentage = Number(trimmed.slice(0, -1));
+		if (percentage < 0 || percentage > 100) throw new Error(`Invalid --alpha() function: percentage alpha must be between 0% and 100%: ${trimmed}`);
+		return formatAlphaPercentage(percentage);
+	}
+	if (isWholeCSSFunction(trimmed, "var") || isWholeCSSFunction(trimmed, "calc")) return trimmed;
+	throw new Error(`Invalid --alpha() function: unsupported alpha value "${trimmed}"`);
+}
+function createStylesheetAlphaColorValue(value, alpha) {
+	return `color-mix(in oklab,${value} ${alpha},transparent)`;
+}
+function normalizeAlphaFunction(body) {
+	const separatorIndex = findTopLevelAlphaSeparator(body);
+	if (separatorIndex === void 0 || separatorIndex === -1) throw new Error("Invalid --alpha() function: expected \"<color> / <alpha>\"");
+	const color = body.slice(0, separatorIndex).trim();
+	const alpha = body.slice(separatorIndex + 1).trim();
+	if (!color) throw new Error("Invalid --alpha() function: color value cannot be empty");
+	return createStylesheetAlphaColorValue(color, normalizeStylesheetAlpha(alpha));
+}
+function normalizeStylesheetValue(value, options = {}) {
+	if (typeof value === "number") return {
+		value: String(value),
+		dependencies: /* @__PURE__ */ new Set()
+	};
+	const aliases = collectCSSVariableAliases(value);
+	if (aliases.length) {
+		const alias = aliases[0][1];
+		throw new Error(`Stylesheet values use native CSS variable references. Replace "$${alias}" with "var(--${alias})".`);
+	}
+	let result = "";
+	for (let index = 0; index < value.length;) {
+		const char = value[index];
+		if (char === "\"" || char === "'") {
+			const end = findCSSClosingQuote(value, index, char) + 1;
+			result += value.slice(index, end);
+			index = end;
+			continue;
+		}
+		if (char === "/" && value[index + 1] === "*") {
+			const end = findCSSCommentEnd(value, index);
+			result += value.slice(index, end);
+			index = end;
+			continue;
+		}
+		if (value.startsWith("--alpha(", index)) {
+			const alphaFunction = readCSSFunction(value, index, "--alpha");
+			if (alphaFunction) {
+				result += normalizeAlphaFunction(alphaFunction.body);
+				index = alphaFunction.end;
+				continue;
+			}
+		}
+		if (options.replacePipes && char === "|") {
+			result += " ";
+			index++;
+			continue;
+		}
+		result += char;
+		index++;
+	}
+	return {
+		value: result,
+		dependencies: collectCSSVariableReferences(result)
+	};
+}
+//#endregion
+export { normalizeStylesheetValue };

package/dist/utils/selectors.js

@@ -39,9 +39,14 @@ function splitSelectorList(selectorText) {
 }
 function combineSelectorLists(parentSelectors, childSelectors) {
 	const selectors = [];
-	for (const child of childSelectors) for (const parent of parentSelectors) selectors.push(child.includes("&") ? child.replace(/&/g, parent) : `${parent} ${child}`);
+	for (const child of childSelectors) for (const parent of parentSelectors) selectors.push(combineSelector(parent, child));
 	return selectors;
 }
+function combineSelector(parent, child) {
+	const trimmedChild = child.trim();
+	if (trimmedChild.includes("&")) return trimmedChild.replace(/&/g, parent);
+	return `${parent} ${child}`;
+}
 function combineStyleSelectors(parentSelector, childSelector) {
 	return combineSelectorLists(splitSelectorList(parentSelector), splitSelectorList(childSelector)).join(",");
 }

package/dist/utils/wrap-conditions.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/wrap-conditions.d.ts
+declare function wrapConditions(text: string, conditions?: string[]): string;
+//#endregion
+export { wrapConditions as default };

package/dist/utils/wrap-conditions.js

@@ -0,0 +1,11 @@
+//#region src/utils/wrap-conditions.ts
+function wrapConditions(text, conditions) {
+	if (!conditions?.length) return text;
+	for (let index = conditions.length - 1; index >= 0; index--) {
+		const condition = conditions[index]?.trim();
+		if (condition) text = `${condition}{${text}}`;
+	}
+	return text;
+}
+//#endregion
+export { wrapConditions as default };

package/package.json

@@ -50,15 +50,15 @@
     "csstype": "^3.2.3",
     "lightningcss": "^1.32.0",
     "lightningcss-wasm": "^1.32.0",
-    "@master/css-engine": "^2.0.0-rc.84",
-    "@master/css-lexer": "^2.0.0-rc.84",
-    "@master/css-schema": "^2.0.0-rc.84"
+    "@master/css-lexer": "^2.0.0-rc.86",
+    "@master/css-engine": "^2.0.0-rc.86",
+    "@master/css-schema": "^2.0.0-rc.86"
   },
   "devDependencies": {
     "@types/css-tree": "^2.3.11",
-    "@master/css-preset": "^2.0.0-rc.84"
+    "@master/css-preset": "^2.0.0-rc.86"
   },
-  "version": "2.0.0-rc.84",
+  "version": "2.0.0-rc.86",
   "scripts": {
     "build": "tsdown --config ../../shared/tsdown-package.config.ts",
     "dev": "tsdown --config ../../shared/tsdown-package.config.ts --watch",

package/dist/utils/wrap-at-rules.d.ts

@@ -1,4 +0,0 @@
-//#region src/utils/wrap-at-rules.d.ts
-declare function wrapAtRules(text: string, atRules?: string[]): string;
-//#endregion
-export { wrapAtRules as default };

package/dist/utils/wrap-at-rules.js

@@ -1,11 +0,0 @@
-//#region src/utils/wrap-at-rules.ts
-function wrapAtRules(text, atRules) {
-	if (!atRules?.length) return text;
-	for (let index = atRules.length - 1; index >= 0; index--) {
-		const atRule = atRules[index]?.trim();
-		if (atRule) text = `${atRule}{${text}}`;
-	}
-	return text;
-}
-//#endregion
-export { wrapAtRules as default };