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

package/dist/browser.d.ts

@@ -2,7 +2,6 @@ import init from "lightningcss-wasm";
 import { MasterCSSManifest } from "@master/css-schema/manifest";
 import { CompileCSSOptions, CompileCSSResult } from "./core.js";
 export type * from "./core.js";
-
 //#region src/browser.d.ts
 type CompileCSSManifestSourceOptions = CompileCSSOptions & {
   baseManifest?: MasterCSSManifest;
@@ -15,12 +14,12 @@ declare function initCSSCompiler(input?: Parameters<typeof init>[0]): Promise<vo
 declare function compileCSS(source: string, options?: CompileCSSOptions): Promise<CompileCSSResult>;
 declare function compileCSSManifest(source: string, options?: CompileCSSManifestSourceOptions): Promise<CompileCSSManifestResult>;
 declare function parseDirectives(source: string, options?: CompileCSSOptions): Promise<{
-  styleDefinitions?: import("@master/css-schema/css-directives").CSSDirectiveStyleDefinition[] | undefined;
-  manifestInput: import("@master/css-schema/css-directives").CSSDirectiveManifestInput;
-  extractionPolicy: import("@master/css-schema/css-directives").CSSDirectiveExtractionPolicy;
+  manifestInput: import("~/packages/schema/src/css-directives").CSSDirectiveManifestInput;
+  extractionPolicy: import("~/packages/schema/src/css-directives").CSSDirectiveExtractionPolicy;
   classNames: string[];
   nativeClassNames: string[];
   warnings: string[];
+  styleDefinitions?: import("~/packages/schema/src/css-directives").CSSDirectiveStyleDefinition[] | undefined;
 }>;
 //#endregion
 export { CompileCSSManifestResult, CompileCSSManifestSourceOptions, compileCSS, compileCSSManifest, initCSSCompiler, parseDirectives };

package/dist/core.d.ts

@@ -2,7 +2,6 @@ import { CSSDirectiveManifestInput, CSSDirectiveReference, CSSDirectiveResult, C
 import { CSSDirectiveRuleRange, createSourceLocationResolver } from "@master/css-lexer";
 import { CSSTransform, setCSSTransform } from "./css-transform.js";
 import { StandaloneCSSDirectiveStatement, StandaloneMasterDirectiveStatement, collectStandaloneCSSDirectiveExtractionPolicy, createCSSDirectiveExtractionPolicy, findStandaloneCSSDirectiveStatements, findStandaloneMasterDirectiveStatements, mergeCSSDirectiveExtractionPolicy, removeStandaloneCSSDirectives, removeStandaloneMasterDirectives } from "./lexer/standalone-master.js";
-
 //#region src/core.d.ts
 interface CompileCSSOptions {
   classes?: string[];
@@ -39,12 +38,12 @@ declare function removeCSSReferenceStatements(source: string, filename?: string)
 declare function maskManagedPatternEntryNames(source: string): string;
 declare function compileCSS(source: string, options?: CompileCSSOptions): CompileCSSResult;
 declare function parseDirectives(source: string, options?: CompileCSSOptions): {
-  styleDefinitions?: CSSDirectiveStyleDefinition[] | undefined;
   manifestInput: CSSDirectiveManifestInput;
   extractionPolicy: import("@master/css-schema/css-directives").CSSDirectiveExtractionPolicy;
   classNames: string[];
   nativeClassNames: string[];
   warnings: string[];
+  styleDefinitions?: CSSDirectiveStyleDefinition[] | undefined;
 };
 //#endregion
 export { CSSReferenceStatement, type CSSTransform, CompileCSSFileOptions, CompileCSSOptions, CompileCSSResult, ParsedDirectives, ResolvedCSSImportGraph, type StandaloneCSSDirectiveStatement, type StandaloneMasterDirectiveStatement, collectStandaloneCSSDirectiveExtractionPolicy, compileCSS, createCSSDirectiveExtractionPolicy, findCSSReferenceStatements, findStandaloneCSSDirectiveStatements, findStandaloneMasterDirectiveStatements, maskManagedPatternEntryNames, mergeCSSDirectiveExtractionPolicy, parseDirectives, removeCSSReferenceStatements, removeStandaloneCSSDirectives, removeStandaloneMasterDirectives, setCSSTransform };

package/dist/core.js

@@ -1,9 +1,33 @@
 import { decodeCSS, encodeCSS, getCSSTransform, setCSSTransform } from "./css-transform.js";
 import { collectStandaloneCSSDirectiveExtractionPolicy, createCSSDirectiveExtractionPolicy, findStandaloneCSSDirectiveStatements, findStandaloneMasterDirectiveStatements, mergeCSSDirectiveExtractionPolicy, removeStandaloneCSSDirectives, removeStandaloneMasterDirectives } from "./lexer/standalone-master.js";
 import { combineSelectorLists } from "./utils/selectors.js";
-import { CSSDirectiveError, createCSSDirectiveSourceReference, createCSSDirectiveVariantReference } from "@master/css-schema/css-directives";
+import { normalizeStylesheetValue } from "./stylesheet-value.js";
+import { CSSDirectiveError, createCSSDirectiveSourceReference } from "@master/css-schema/css-directives";
 import { collectCSSDirectiveRanges, collectMasterCSSClassListTokenRanges, createSourceLocationResolver, findCSSBlockEnd, findCSSClosingQuote, findCSSStatementEnd, removeSourceRanges, replaceSourceRanges, skipCSSWhitespace } from "@master/css-lexer";
 //#region src/core.ts
+function conditionEntry(value) {
+	return {
+		type: "condition",
+		value
+	};
+}
+function variantEntry(token) {
+	return {
+		type: "variant",
+		token
+	};
+}
+function cloneConditionPath(conditionPath) {
+	return conditionPath?.map((entry) => ({ ...entry }));
+}
+function createConditionPathProperties(conditionPath) {
+	if (!conditionPath?.length) return {};
+	const conditions = conditionPath.every((entry) => entry.type === "condition") ? conditionPath.map((entry) => entry.value) : void 0;
+	return {
+		...conditions?.length ? { conditions } : {},
+		conditionPath: cloneConditionPath(conditionPath)
+	};
+}
 const MASTER_CUSTOM_AT_RULES = {
 	settings: {
 		prelude: "*",
@@ -147,7 +171,7 @@ function normalizeThemeTokenName(property) {
 }
 function defineThemeVariable(manifestInput, property, rawValue, mode, inline, isStatic) {
 	const name = normalizeThemeTokenName(property);
-	const value = parseVariableValue(rawValue);
+	const value = parseVariableValue(normalizeStylesheetValue(rawValue, { replacePipes: true }).value);
 	if (mode) addThemeMode(manifestInput, mode);
 	manifestInput.variables ??= [];
 	const definition = {
@@ -302,6 +326,9 @@ function formatDeclarationValue(declaration) {
 	const colonIndex = declarationText.indexOf(":");
 	return formatCSSNumberLiterals(declarationText.slice(colonIndex + 1).trim());
 }
+function normalizeDeclarationValue(value) {
+	return normalizeStylesheetValue(value).value;
+}
 function normalizeNumberText(value) {
 	const [rawMantissa, rawExponent] = value.toLowerCase().replace("e+", "e").split("e");
 	let mantissa = rawMantissa.replace(/^\+/, "");
@@ -636,8 +663,8 @@ function getDeclarationName(declaration) {
 }
 function collectDeclarations(block) {
 	const declarations = {};
-	for (const declaration of block.declarations || []) declarations[getDeclarationName(declaration)] = formatDeclarationValue(declaration);
-	for (const declaration of block.importantDeclarations || []) declarations[getDeclarationName(declaration)] = `${formatDeclarationValue(declaration)} !important`;
+	for (const declaration of block.declarations || []) declarations[getDeclarationName(declaration)] = normalizeDeclarationValue(formatDeclarationValue(declaration));
+	for (const declaration of block.importantDeclarations || []) declarations[getDeclarationName(declaration)] = `${normalizeDeclarationValue(formatDeclarationValue(declaration))} !important`;
 	return declarations;
 }
 const WEBKIT_PAIRED_DECLARATIONS = {
@@ -719,9 +746,11 @@ function parseThemeDeclarations(block, manifestInput, mode, inline, isStatic) {
 }
 function parseCustomVariantPrelude(prelude) {
 	const trimmed = prelude.trim();
-	const tokenMatch = /^(:{1,2}[-_a-zA-Z][-_a-zA-Z0-9]*|@[-_a-zA-Z][-_a-zA-Z0-9]*)$/.exec(trimmed);
+	if (trimmed.startsWith("::") || trimmed.startsWith(":")) throw new Error("@custom-variant only defines condition variants. Use nested selectors directly for selector behavior.");
+	if (trimmed.startsWith("@")) throw new Error(`@custom-variant uses bare condition variant names: write "@custom-variant ${trimmed.slice(1)}"`);
+	const tokenMatch = /^[-_a-zA-Z][-_a-zA-Z0-9]*$/.exec(trimmed);
 	if (!tokenMatch) return;
-	return { token: tokenMatch[1] };
+	return { token: `@${tokenMatch[0]}` };
 }
 function defineVariant(manifestInput, variant) {
 	manifestInput.variants ??= [];
@@ -743,13 +772,13 @@ function createVariantTemplateBranch(path) {
 	const selector = path.selectors.reduce((current, selectorTemplate) => selectorTemplate.replace(/&/g, current), "&");
 	return {
 		...selector !== "&" ? { selector } : {},
-		...path.atRules.length ? { atRules: [...path.atRules] } : {},
+		...path.conditions.length ? { conditions: [...path.conditions] } : {},
 		...path.layer ? { layer: path.layer } : {}
 	};
 }
 function collectVariantTemplateBranches(rules, token, path = {
 	selectors: [],
-	atRules: []
+	conditions: []
 }) {
 	const branches = [];
 	for (const child of rules) {
@@ -786,7 +815,7 @@ function collectVariantTemplateBranches(rules, token, path = {
 			if (!atRule) throw new Error(`Unsupported nested at-rule in @custom-variant ${token}`);
 			branches.push(...collectVariantTemplateBranches(nestedAtRuleChildren, token, {
 				...path,
-				atRules: [...path.atRules, atRule]
+				conditions: [...path.conditions, atRule]
 			}));
 			continue;
 		}
@@ -916,11 +945,15 @@ function parseMasterVariantBlock(rule) {
 	if (shorthandToken && prelude) throw new Error(`@${rule.value.name} does not accept a prelude`);
 	const token = shorthandToken || prelude;
 	if (!token) throw new Error("@variant requires a Master CSS variant");
-	if (!/^(?::{1,2}[^\s:]\S*|@\S+)$/.test(token)) throw new Error("@variant requires a full variant token");
+	if (!shorthandToken) {
+		if (token.startsWith("@")) throw new Error(`@variant uses bare condition variant names: write "@variant ${token.slice(1)}"`);
+		if (token.startsWith("::") || token.startsWith(":")) throw new Error("@variant only applies condition variants. Use nested selectors directly for selector behavior.");
+		if (!/^\S+$/.test(token)) throw new Error("@variant requires a full condition variant token");
+	}
 	const rules = rule.value.body?.value;
 	if (!Array.isArray(rules)) throw new Error("@variant requires a style block");
 	return {
-		token,
+		token: shorthandToken || (token.startsWith(":") ? token : `@${token}`),
 		rules
 	};
 }
@@ -974,7 +1007,7 @@ const EMPTY_DECLARATION_BLOCK = {
 	declarations: [],
 	importantDeclarations: []
 };
-function parseStyleDefinitionBody(parsed, selectorDefinition, items, atRules = [], layer, name = selectorDefinition.name) {
+function parseStyleDefinitionBody(parsed, selectorDefinition, items, conditionPath = [], layer, name = selectorDefinition.name) {
 	const definitions = getParsedStyleDefinitions(parsed);
 	for (const item of items) {
 		if (item.type === "compose") {
@@ -987,7 +1020,7 @@ function parseStyleDefinitionBody(parsed, selectorDefinition, items, atRules = [
 				...item.directiveSource ? { directiveSource: item.directiveSource } : {},
 				...selectorDefinition.source ? { selectorSource: selectorDefinition.source } : {},
 				...name ? { name } : {},
-				...atRules.length ? { atRules: [...atRules] } : {},
+				...createConditionPathProperties(conditionPath),
 				...layer ? { layer } : {}
 			})));
 			continue;
@@ -1001,41 +1034,41 @@ function parseStyleDefinitionBody(parsed, selectorDefinition, items, atRules = [
 				...selectorDefinition.source ? { selectorSource: selectorDefinition.source } : {},
 				...name ? { name } : {},
 				declarations: item.declarations,
-				...atRules.length ? { atRules: [...atRules] } : {},
+				...createConditionPathProperties(conditionPath),
 				...layer ? { layer } : {}
 			});
 			continue;
 		}
-		if (name) parseNestedManagedStyleChildRule(item.rule, parsed, selectorDefinition, atRules, layer);
-		else parseNestedNativeStyleChildRule(item.rule, parsed, selectorDefinition, atRules);
+		if (name) parseNestedManagedStyleChildRule(item.rule, parsed, selectorDefinition, conditionPath, layer);
+		else parseNestedNativeStyleChildRule(item.rule, parsed, selectorDefinition, conditionPath);
 	}
 	if (name && !parsed.classNames.includes(name)) parsed.classNames.push(name);
 }
-function parseStyleRuleBody(rules, parsed, selectorDefinition, atRules = [], layer, name = selectorDefinition.name) {
-	parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRuleBody(EMPTY_DECLARATION_BLOCK, rules, parsed), atRules, layer, name);
+function parseStyleRuleBody(rules, parsed, selectorDefinition, conditionPath = [], layer, name = selectorDefinition.name) {
+	parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRuleBody(EMPTY_DECLARATION_BLOCK, rules, parsed), conditionPath, layer, name);
 }
-function parseNestedManagedStyleChildRule(child, parsed, parentSelectorDefinition, atRules, layer) {
+function parseNestedManagedStyleChildRule(child, parsed, parentSelectorDefinition, conditionPath, layer) {
 	assertNotSlotRule(child);
 	if (child.type === "layer-block") throw new Error("Nested @layer blocks are not allowed inside managed style definitions");
 	const masterVariantBlock = parseMasterVariantBlock(child);
 	if (masterVariantBlock) {
-		parseStyleRuleBody(masterVariantBlock.rules, parsed, parentSelectorDefinition, [...atRules, createCSSDirectiveVariantReference(masterVariantBlock.token)], layer);
+		parseStyleRuleBody(masterVariantBlock.rules, parsed, parentSelectorDefinition, [...conditionPath, variantEntry(masterVariantBlock.token)], layer);
 		return;
 	}
 	const nestedAtRuleChildren = getNestedAtRuleChildren(child);
 	if (nestedAtRuleChildren) {
 		const atRule = formatNestedAtRule(child);
 		if (!atRule) throw new Error("Unsupported nested at-rule in @master");
-		parseStyleRuleBody(nestedAtRuleChildren, parsed, parentSelectorDefinition, [...atRules, atRule], layer);
+		parseStyleRuleBody(nestedAtRuleChildren, parsed, parentSelectorDefinition, [...conditionPath, conditionEntry(atRule)], layer);
 		return;
 	}
 	if (child.type === "style") {
-		parseManagedStyleRule(child, parsed, atRules, layer, parentSelectorDefinition);
+		parseManagedStyleRule(child, parsed, conditionPath, layer, parentSelectorDefinition);
 		return;
 	}
 	throw new Error("Style definitions only accept declarations, @compose, nested selectors, and nested at-rules");
 }
-function parseManagedStyleRule(rule, parsed, atRules = [], layer, parentSelectorDefinition) {
+function parseManagedStyleRule(rule, parsed, conditionPath = [], layer, parentSelectorDefinition) {
 	const selectorDefinition = parentSelectorDefinition ? (() => {
 		const selectors = combineStyleSelectorLists(parentSelectorDefinition.selectors, rule.value.selectors);
 		return {
@@ -1047,7 +1080,7 @@ function parseManagedStyleRule(rule, parsed, atRules = [], layer, parentSelector
 	})() : parseManagedStyleDefinitionSelector(rule.value.selectors);
 	if (!selectorDefinition) throw new Error("Managed style definition selector must start with a single class selector");
 	selectorDefinition.source ||= createSelectorSourceReference(parsed, rule);
-	parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRule(rule, parsed), atRules, layer);
+	parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRule(rule, parsed), conditionPath, layer);
 }
 function parseNativeSelectorDefinition(selectors, parentSelectorDefinition) {
 	const selectorTexts = parentSelectorDefinition ? combineStyleSelectorLists(parentSelectorDefinition.selectors, selectors) : selectors.map((selector) => formatSelectors([selector]));
@@ -1056,7 +1089,7 @@ function parseNativeSelectorDefinition(selectors, parentSelectorDefinition) {
 		selector: selectorTexts.join(",")
 	};
 }
-function parseNativeRuleBody(rules, parsed, atRules = [], parentSelectorDefinition) {
+function parseNativeRuleBody(rules, parsed, conditionPath = [], parentSelectorDefinition) {
 	for (const child of rules) {
 		assertNotSlotRule(child);
 		const compose = parseComposeRule(child, parsed);
@@ -1065,7 +1098,7 @@ function parseNativeRuleBody(rules, parsed, atRules = [], parentSelectorDefiniti
 				type: "compose",
 				classNames: compose.classNames,
 				...compose.directiveSource ? { directiveSource: compose.directiveSource } : {}
-			}], atRules, void 0, void 0);
+			}], conditionPath, void 0, void 0);
 			continue;
 		}
 		if (child.type === "nested-declarations" && parentSelectorDefinition) {
@@ -1073,23 +1106,23 @@ function parseNativeRuleBody(rules, parsed, atRules = [], parentSelectorDefiniti
 			if (Object.keys(declarations).length) parseStyleDefinitionBody(parsed, parentSelectorDefinition, [{
 				type: "declarations",
 				declarations
-			}], atRules, void 0, void 0);
+			}], conditionPath, void 0, void 0);
 			continue;
 		}
 		const masterVariantBlock = parseMasterVariantBlock(child);
 		if (masterVariantBlock) {
-			parseNativeRuleBody(masterVariantBlock.rules, parsed, [...atRules, createCSSDirectiveVariantReference(masterVariantBlock.token)], parentSelectorDefinition);
+			parseNativeRuleBody(masterVariantBlock.rules, parsed, [...conditionPath, variantEntry(masterVariantBlock.token)], parentSelectorDefinition);
 			continue;
 		}
 		const nestedAtRuleChildren = getNestedAtRuleChildren(child);
 		if (nestedAtRuleChildren) {
 			const atRule = formatNestedAtRule(child);
 			if (!atRule) throw new Error("Unsupported nested at-rule in native CSS");
-			parseNativeRuleBody(nestedAtRuleChildren, parsed, [...atRules, atRule], parentSelectorDefinition);
+			parseNativeRuleBody(nestedAtRuleChildren, parsed, [...conditionPath, conditionEntry(atRule)], parentSelectorDefinition);
 			continue;
 		}
 		if (child.type === "style") {
-			parseNativeStyleRule(child, parsed, atRules, parentSelectorDefinition);
+			parseNativeStyleRule(child, parsed, conditionPath, parentSelectorDefinition);
 			continue;
 		}
 		if (child.type === "keyframes") throw new Error("@keyframes is not allowed inside @variant. Move managed animation definitions to top-level @theme.");
@@ -1097,30 +1130,30 @@ function parseNativeRuleBody(rules, parsed, atRules = [], parentSelectorDefiniti
 		if (child.type === "nested-declarations") throw new Error("Native @variant blocks only accept style rules, declarations, @compose, and nested at-rules");
 	}
 }
-function parseNestedNativeStyleChildRule(child, parsed, parentSelectorDefinition, atRules) {
+function parseNestedNativeStyleChildRule(child, parsed, parentSelectorDefinition, conditionPath) {
 	assertNotSlotRule(child);
 	const masterVariantBlock = parseMasterVariantBlock(child);
 	if (masterVariantBlock) {
-		parseNativeRuleBody(masterVariantBlock.rules, parsed, [...atRules, createCSSDirectiveVariantReference(masterVariantBlock.token)], parentSelectorDefinition);
+		parseNativeRuleBody(masterVariantBlock.rules, parsed, [...conditionPath, variantEntry(masterVariantBlock.token)], parentSelectorDefinition);
 		return;
 	}
 	const nestedAtRuleChildren = getNestedAtRuleChildren(child);
 	if (nestedAtRuleChildren) {
 		const atRule = formatNestedAtRule(child);
 		if (!atRule) throw new Error("Unsupported nested at-rule in native CSS");
-		parseNativeRuleBody(nestedAtRuleChildren, parsed, [...atRules, atRule], parentSelectorDefinition);
+		parseNativeRuleBody(nestedAtRuleChildren, parsed, [...conditionPath, conditionEntry(atRule)], parentSelectorDefinition);
 		return;
 	}
 	if (child.type === "style") {
-		parseNativeStyleRule(child, parsed, atRules, parentSelectorDefinition);
+		parseNativeStyleRule(child, parsed, conditionPath, parentSelectorDefinition);
 		return;
 	}
 	throw new Error("Native CSS rules only accept declarations, @compose, nested selectors, and nested at-rules");
 }
-function parseNativeStyleRule(rule, parsed, atRules = [], parentSelectorDefinition) {
+function parseNativeStyleRule(rule, parsed, conditionPath = [], parentSelectorDefinition) {
 	const selectorDefinition = parseNativeSelectorDefinition(rule.value.selectors, parentSelectorDefinition);
 	selectorDefinition.source = createSelectorSourceReference(parsed, rule) || parentSelectorDefinition?.source;
-	parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRule(rule, parsed), atRules, void 0, void 0);
+	parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRule(rule, parsed), conditionPath, void 0, void 0);
 }
 function formatKeyframeSelector(selector) {
 	switch (selector.type) {
@@ -1234,6 +1267,8 @@ const MANAGED_DYNAMIC_SOURCE_KINDS = /* @__PURE__ */ new Set([
 	"image"
 ]);
 const MANAGED_DYNAMIC_RAW_ANY_SOURCE = "*";
+const MANAGED_ENUM_PATTERN_TOKEN = /^-?[_a-zA-Z0-9][-_a-zA-Z0-9]*$/;
+const MANAGED_ENUM_PATTERN_VALUE = /^-?[_a-zA-Z0-9][-_a-zA-Z0-9]*$/;
 function parseManagedPatternSegments(pattern) {
 	const segments = [...pattern.matchAll(/<([^<>]*)>/g)];
 	if (segments.length !== 1) throw new Error("Managed pattern must contain exactly one <...> segment");
@@ -1257,15 +1292,31 @@ function parseManagedEnumPatternName(source) {
 	if (!prefix || suffix) throw new Error("Managed enum pattern must use a prefix before <...> and no suffix");
 	if (!rawValues) throw new Error("Managed enum pattern cannot be empty");
 	if (rawValues.includes(",")) throw new Error("Managed enum pattern values must use \"|\" separators like text-<left|right>");
-	const values = rawValues.split("|").map((value) => value.trim());
-	if (values.length < 2 || values.some((value) => !value)) throw new Error("Managed enum pattern requires at least two values separated by \"|\"");
-	for (const value of values) if (!/^-?[_a-zA-Z0-9][-_a-zA-Z0-9]*$/.test(value)) throw new Error(`Invalid managed enum value: ${value}`);
+	const entries = rawValues.split("|").map((value) => value.trim());
+	if (entries.length < 2 || entries.some((value) => !value)) throw new Error("Managed enum pattern requires at least two values separated by \"|\"");
+	const values = [];
+	const valueMap = {};
+	let hasMappedValue = false;
+	const canonicalValues = [];
+	for (const entry of entries) {
+		const equalsIndex = entry.indexOf("=");
+		const classValue = equalsIndex === -1 ? entry : entry.slice(0, equalsIndex).trim();
+		const emittedValue = equalsIndex === -1 ? classValue : entry.slice(equalsIndex + 1).trim();
+		if (!classValue || !emittedValue || entry.indexOf("=", equalsIndex + 1) !== -1) throw new Error(`Invalid managed enum mapping: ${entry}`);
+		if (!MANAGED_ENUM_PATTERN_TOKEN.test(classValue)) throw new Error(`Invalid managed enum value: ${classValue}`);
+		if (!MANAGED_ENUM_PATTERN_VALUE.test(emittedValue)) throw new Error(`Invalid managed enum mapped value: ${emittedValue}`);
+		values.push(classValue);
+		valueMap[classValue] = emittedValue;
+		if (equalsIndex !== -1) hasMappedValue = true;
+		canonicalValues.push(equalsIndex === -1 ? classValue : `${classValue}=${emittedValue}`);
+	}
 	return {
 		kind: "pattern",
-		name: `${prefix}<${values.join("|")}>`,
+		name: `${prefix}<${canonicalValues.join("|")}>`,
 		pattern: {
 			prefix,
-			values
+			values,
+			...hasMappedValue ? { valueMap } : {}
 		}
 	};
 }
@@ -1347,22 +1398,24 @@ function ensureUtilityDefinitionRules(definition) {
 	if (!definition.declarations) return;
 	const declarations = definition.declarations;
 	delete definition.declarations;
-	const atRules = definition.atRules;
-	delete definition.atRules;
+	const conditions = definition.conditions;
+	delete definition.conditions;
+	const conditionPath = definition.conditionPath;
+	delete definition.conditionPath;
 	definition.rules ??= [];
 	definition.rules.push({
 		declarations,
-		...atRules?.length ? { atRules: [...atRules] } : {}
+		...conditionPath?.length ? createConditionPathProperties(conditionPath) : conditions?.length ? { conditions: [...conditions] } : {}
 	});
 }
-function pushUtilityDefinitionRule(definition, declarations, selector = "&", atRules = []) {
+function pushUtilityDefinitionRule(definition, declarations, selector = "&", conditionPath = []) {
 	if (!Object.keys(declarations).length) return;
 	const rule = {
 		declarations,
 		...selector !== "&" ? { selector } : {},
-		...atRules.length ? { atRules: [...atRules] } : {}
+		...createConditionPathProperties(conditionPath)
 	};
-	if (!definition.declarations && !definition.rules?.length && !rule.selector && !rule.atRules) {
+	if (!definition.declarations && !definition.rules?.length && !rule.selector && !rule.conditions && !rule.conditionPath) {
 		definition.declarations = declarations;
 		return;
 	}
@@ -1370,33 +1423,33 @@ function pushUtilityDefinitionRule(definition, declarations, selector = "&", atR
 	definition.rules ??= [];
 	definition.rules.push(rule);
 }
-function parseManagedPatternStyleDefinitionBody(parsed, definition, items, directiveName, selectors = ["&"], atRules = []) {
+function parseManagedPatternStyleDefinitionBody(parsed, definition, items, directiveName, selectors = ["&"], conditionPath = []) {
 	for (const item of items) {
 		if (item.type === "declarations") {
-			for (const selector of selectors) pushUtilityDefinitionRule(definition, item.declarations, selector, atRules);
+			for (const selector of selectors) pushUtilityDefinitionRule(definition, item.declarations, selector, conditionPath);
 			continue;
 		}
 		if (item.type === "compose") throw new CSSDirectiveError("compose-placement", `@compose is not supported inside managed pattern definitions`, item.directiveSource);
-		parseManagedPatternChildRule(item.rule, parsed, definition, directiveName, selectors, atRules);
+		parseManagedPatternChildRule(item.rule, parsed, definition, directiveName, selectors, conditionPath);
 	}
 }
-function parseManagedPatternChildRule(child, parsed, definition, directiveName, selectors = ["&"], atRules = []) {
+function parseManagedPatternChildRule(child, parsed, definition, directiveName, selectors = ["&"], conditionPath = []) {
 	if (child.type === "layer-block") throw new Error(`Nested @layer blocks are not allowed inside @${directiveName}`);
 	assertNotSlotRule(child);
 	const masterVariantBlock = parseMasterVariantBlock(child);
 	if (masterVariantBlock) {
-		parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRuleBody(EMPTY_DECLARATION_BLOCK, masterVariantBlock.rules, parsed), directiveName, selectors, [...atRules, createCSSDirectiveVariantReference(masterVariantBlock.token)]);
+		parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRuleBody(EMPTY_DECLARATION_BLOCK, masterVariantBlock.rules, parsed), directiveName, selectors, [...conditionPath, variantEntry(masterVariantBlock.token)]);
 		return;
 	}
 	const nestedAtRuleChildren = getNestedAtRuleChildren(child);
 	if (nestedAtRuleChildren) {
 		const atRule = formatNestedAtRule(child);
 		if (!atRule) throw new Error(`Unsupported nested at-rule inside @${directiveName}`);
-		parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRuleBody(EMPTY_DECLARATION_BLOCK, nestedAtRuleChildren, parsed), directiveName, selectors, [...atRules, atRule]);
+		parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRuleBody(EMPTY_DECLARATION_BLOCK, nestedAtRuleChildren, parsed), directiveName, selectors, [...conditionPath, conditionEntry(atRule)]);
 		return;
 	}
 	if (child.type === "style") {
-		parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRule(child, parsed), directiveName, combineStyleSelectorLists(selectors, child.value.selectors), atRules);
+		parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRule(child, parsed), directiveName, combineStyleSelectorLists(selectors, child.value.selectors), conditionPath);
 		return;
 	}
 	const compose = parseComposeRule(child, parsed);
@@ -1404,14 +1457,14 @@ function parseManagedPatternChildRule(child, parsed, definition, directiveName,
 	if (child.type === "keyframes") throw new Error(`@keyframes is not allowed inside @${directiveName}. Move managed animation definitions to top-level @theme.`);
 	throw new Error(`Managed pattern definitions only accept declarations, nested selectors, and nested at-rules`);
 }
-function parseManagedPatternDefinitionRule(child, parsed, parsedPattern, atRules, layer, directiveName) {
+function parseManagedPatternDefinitionRule(child, parsed, parsedPattern, conditionPath, layer, directiveName) {
 	const definition = {
 		name: parsedPattern.name,
 		type: parsedPattern.kind === "pattern" ? "pattern" : "dynamic",
 		layer,
 		...parsedPattern.kind === "pattern" ? { pattern: parsedPattern.pattern } : { dynamic: parsedPattern.dynamic }
 	};
-	parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRule(child, parsed), directiveName, ["&"], atRules);
+	parseManagedPatternStyleDefinitionBody(parsed, definition, collectDirectiveStyleRule(child, parsed), directiveName, ["&"], conditionPath);
 	parsed.manifestInput.utilities ??= [];
 	parsed.manifestInput.utilities.push(definition);
 }
@@ -1425,18 +1478,18 @@ function containsNativeStyleDirective(rule) {
 function createManagedDefinitionNameError(rule) {
 	return /* @__PURE__ */ new Error(`Managed definition names must be bare identifiers: ${formatSelectors(rule.value.selectors)}`);
 }
-function parseManagedDefinitionDirectiveChildRule(child, parsed, atRules, layer, directiveName) {
+function parseManagedDefinitionDirectiveChildRule(child, parsed, conditionPath, layer, directiveName) {
 	if (child.type === "layer-block") throw new Error(`Nested @layer blocks are not allowed inside @${directiveName}`);
 	const masterVariantBlock = parseMasterVariantBlock(child);
 	if (masterVariantBlock) {
-		for (const nestedChild of masterVariantBlock.rules) parseManagedDefinitionDirectiveChildRule(nestedChild, parsed, [...atRules, createCSSDirectiveVariantReference(masterVariantBlock.token)], layer, directiveName);
+		for (const nestedChild of masterVariantBlock.rules) parseManagedDefinitionDirectiveChildRule(nestedChild, parsed, [...conditionPath, variantEntry(masterVariantBlock.token)], layer, directiveName);
 		return;
 	}
 	const nestedAtRuleChildren = getNestedAtRuleChildren(child);
 	if (nestedAtRuleChildren) {
 		const atRule = formatNestedAtRule(child);
 		if (!atRule) throw new Error(`Unsupported nested at-rule inside @${directiveName}`);
-		for (const nestedChild of nestedAtRuleChildren) parseManagedDefinitionDirectiveChildRule(nestedChild, parsed, [...atRules, atRule], layer, directiveName);
+		for (const nestedChild of nestedAtRuleChildren) parseManagedDefinitionDirectiveChildRule(nestedChild, parsed, [...conditionPath, conditionEntry(atRule)], layer, directiveName);
 		return;
 	}
 	if (child.type === "nested-declarations") throw new Error(`@${directiveName} only accepts bare managed names and nested at-rules`);
@@ -1447,11 +1500,11 @@ function parseManagedDefinitionDirectiveChildRule(child, parsed, atRules, layer,
 		const selectorDefinition = parseManagedDefinitionNameSelector(child.value.selectors);
 		if (!selectorDefinition) throw createManagedDefinitionNameError(child);
 		if (parsedPattern) {
-			parseManagedPatternDefinitionRule(child, parsed, parsedPattern, atRules, layer, directiveName);
+			parseManagedPatternDefinitionRule(child, parsed, parsedPattern, conditionPath, layer, directiveName);
 			return;
 		}
 		selectorDefinition.source = selectorSource;
-		parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRule(child, parsed), atRules, layer);
+		parseStyleDefinitionBody(parsed, selectorDefinition, collectDirectiveStyleRule(child, parsed), conditionPath, layer);
 		return;
 	}
 	if ((child.type === "unknown" || child.type === "custom") && child.value?.name === "compose") throw createComposePlacementError(parsed);
@@ -1563,14 +1616,14 @@ function compileCSS(source, options = {}) {
 					}
 					const masterVariantBlock = parseMasterVariantBlock(rule);
 					if (masterVariantBlock) {
-						parseNativeRuleBody(masterVariantBlock.rules, parsed, [createCSSDirectiveVariantReference(masterVariantBlock.token)]);
+						parseNativeRuleBody(masterVariantBlock.rules, parsed, [variantEntry(masterVariantBlock.token)]);
 						return [];
 					}
 					const nestedAtRuleChildren = getNestedAtRuleChildren(rule);
 					if (nestedAtRuleChildren && containsNativeStyleDirective(rule)) {
 						const atRule = formatNestedAtRule(rule);
 						if (!atRule) throw new Error("Unsupported nested at-rule in native CSS");
-						parseNativeRuleBody(nestedAtRuleChildren, parsed, [atRule]);
+						parseNativeRuleBody(nestedAtRuleChildren, parsed, [conditionEntry(atRule)]);
 						return [];
 					}
 					if (rule.type === "style" && containsNativeStyleDirective(rule)) {
@@ -1608,7 +1661,7 @@ function compileCSS(source, options = {}) {
 	let remainingCSS = "";
 	if (options.preserveNativeCSS !== false) {
 		const filteredCode = filterNativeCSS(transformed.code, filename, parsed, classFilter);
-		remainingCSS = decodeCSS(classFilter ? pruneEmptyRuleBlocks(filteredCode, filename) : filteredCode).trim();
+		remainingCSS = normalizeStylesheetValue(decodeCSS(classFilter ? pruneEmptyRuleBlocks(filteredCode, filename) : filteredCode).trim()).value;
 	}
 	return {
 		manifestInput: parsed.manifestInput,

package/dist/css-transform.d.ts

@@ -1,5 +1,4 @@
 import * as LightningCSS from "lightningcss";
-
 //#region src/css-transform.d.ts
 type CSSTransform = typeof LightningCSS.transform;
 declare function setCSSTransform(transformer: CSSTransform): void;

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { MasterCSSManifest } from "@master/css-schema/manifest";
 import { CSSReferenceStatement, CSSReferenceStatement as CSSReferenceStatement$1, CompileCSSFileOptions, CompileCSSFileOptions as CompileCSSFileOptions$1, CompileCSSOptions, CompileCSSOptions as CompileCSSOptions$1, CompileCSSResult, CompileCSSResult as CompileCSSResult$1, ResolvedCSSImportGraph, ResolvedCSSImportGraph as ResolvedCSSImportGraph$1, StandaloneCSSDirectiveStatement, StandaloneMasterDirectiveStatement } from "./core.js";
 export * from "./core.js";
-
 //#region src/index.d.ts
 interface InspectCSSResult {
   hasMasterEntryDirective: boolean;

package/dist/lexer/imports.d.ts

@@ -1,5 +1,4 @@
 import { Rule } from "lightningcss";
-
 //#region src/lexer/imports.d.ts
 interface CSSImportStatement {
   start: number;

package/dist/lexer/source.d.ts

@@ -1,5 +1,4 @@
 import { SourceRange, createSourceLocationResolver, removeSourceRanges, replaceSourceRanges } from "@master/css-lexer";
-
 //#region src/lexer/source.d.ts
 declare function findAtRuleStatementEnd(source: string, start: number): number;
 //#endregion

package/dist/lexer/standalone-master.d.ts

@@ -1,5 +1,4 @@
 import { CSSDirectiveExtractionPolicy } from "@master/css-schema/css-directives";
-
 //#region src/lexer/standalone-master.d.ts
 type StandaloneCSSDirectiveName = 'master' | 'source' | 'safelist' | 'blocklist' | 'preserve';
 interface StandaloneCSSDirectiveStatement {

package/dist/lower-css-directives.d.ts

@@ -1,7 +1,6 @@
 import { CSSDirectiveManifestInput, CSSDirectiveResult } from "@master/css-schema/css-directives";
 import { MasterCSSManifest } from "@master/css-schema/manifest";
 import { CompilerDiagnosticRecorder } from "./diagnostics.js";
-
 //#region src/lower-css-directives.d.ts
 interface LowerCSSDirectivesOptions {
   baseManifest?: MasterCSSManifest;