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

package/dist/lower-css-directives.js

@@ -1,12 +1,12 @@
 import { combineStyleSelectors } from "./utils/selectors.js";
 import { addCompilerDiagnosticCount, setCompilerDiagnosticCount, timeCompilerDiagnostic } from "./diagnostics.js";
 import { createMasterCSSManifest, createVariableNameResolver } from "./master-css-manifest.js";
-import wrapAtRules from "./utils/wrap-at-rules.js";
+import wrapConditions from "./utils/wrap-conditions.js";
 import { cssTreeNativeDeclarationMatcher } from "./native-declaration.js";
-import { CSSDirectiveError, readCSSDirectiveVariantReference } from "@master/css-schema/css-directives";
-import { compareRulePriority, createCompilerCSS, generateAt, generateSelector, parseAt, parseSelector } from "@master/css-engine/compiler";
+import { CSSDirectiveError } from "@master/css-schema/css-directives";
+import { compareRulePriority, createCompilerCSS, generateCondition, generateSelector, parseCondition, parseSelector } from "@master/css-engine/compiler";
 //#region src/lower-css-directives.ts
-const STYLE_AT_FEATURE_REGEX = /\(\s*(width|height|resolution)\s*(>=|<=|>|<)\s*(-?(?:\d+(?:\.\d+)?|\.\d+))([a-z%]*)\s*\)/g;
+const STYLE_CONDITION_FEATURE_REGEX = /\(\s*(width|height|resolution)\s*(>=|<=|>|<)\s*(-?(?:\d+(?:\.\d+)?|\.\d+))([a-z%]*)\s*\)/g;
 const MEDIA_MODE_NAMES = /* @__PURE__ */ new Set(["light", "dark"]);
 const DEFAULT_MODE_NONE = "none";
 const CONDITION_VARIABLE_NAMESPACES = /* @__PURE__ */ new Set(["breakpoint", "container"]);
@@ -26,6 +26,21 @@ function warn(warnings, options, message) {
 	warnings.push(message);
 	options.onWarning?.(message);
 }
+function cloneConditionPath(conditionPath) {
+	return conditionPath?.map((entry) => ({ ...entry }));
+}
+function conditionPathFromConditions(conditions) {
+	return conditions?.length ? conditions.map((value) => ({
+		type: "condition",
+		value
+	})) : void 0;
+}
+function getConditionPath(definition) {
+	return cloneConditionPath(definition.conditionPath) || conditionPathFromConditions(definition.conditions);
+}
+function conditionPathHasVariants(conditionPath) {
+	return conditionPath?.some((entry) => entry.type === "variant") || false;
+}
 function isNamedDefaultMode(defaultMode) {
 	return typeof defaultMode === "string" && defaultMode !== DEFAULT_MODE_NONE;
 }
@@ -66,7 +81,8 @@ function cloneUtilityRule(rule) {
 	return {
 		declarations: { ...rule.declarations },
 		...rule.selector ? { selector: rule.selector } : {},
-		...rule.atRules?.length ? { atRules: [...rule.atRules] } : {}
+		...rule.conditions?.length ? { conditions: [...rule.conditions] } : {},
+		...rule.conditionPath?.length ? { conditionPath: cloneConditionPath(rule.conditionPath) } : {}
 	};
 }
 function cloneUtility(definition) {
@@ -75,7 +91,8 @@ function cloneUtility(definition) {
 		type: definition.type || "static",
 		...definition.pattern ? { pattern: {
 			prefix: definition.pattern.prefix,
-			values: [...definition.pattern.values]
+			values: [...definition.pattern.values],
+			...definition.pattern.valueMap ? { valueMap: { ...definition.pattern.valueMap } } : {}
 		} } : {},
 		...definition.dynamic ? { dynamic: {
 			key: definition.dynamic.key,
@@ -85,7 +102,8 @@ function cloneUtility(definition) {
 			...definition.dynamic.arbitrary ? { arbitrary: true } : {}
 		} } : {},
 		...definition.declarations ? { declarations: { ...definition.declarations } } : {},
-		...definition.atRules?.length ? { atRules: [...definition.atRules] } : {},
+		...definition.conditions?.length ? { conditions: [...definition.conditions] } : {},
+		...definition.conditionPath?.length ? { conditionPath: cloneConditionPath(definition.conditionPath) } : {},
 		...definition.rules?.length ? { rules: definition.rules.map(cloneUtilityRule) } : {}
 	};
 }
@@ -103,7 +121,7 @@ function normalizeDirectiveInput(input = {}, options = {}) {
 		token: variant.token,
 		branches: variant.branches.map((branch) => ({
 			...branch,
-			...branch.atRules?.length ? { atRules: [...branch.atRules] } : {}
+			...branch.conditions?.length ? { conditions: [...branch.conditions] } : {}
 		}))
 	}));
 	if (source.animations) normalized.animations = { ...source.animations };
@@ -152,24 +170,24 @@ function createDirectiveCSS(input, options) {
 	}));
 	return timeCompilerDiagnostic(options.diagnostics, "lower-create-compiler-css-ms", () => createCompilerCSS(manifest, void 0, { nativeDeclarationMatcher: cssTreeNativeDeclarationMatcher }));
 }
-function getUtilityAtRuleDefinitions(utility) {
-	const atRules = [];
-	if (utility.atRules) for (const id of [
+function getUtilityConditionDefinitions(utility) {
+	const conditions = [];
+	if (utility.conditions) for (const id of [
 		"container",
 		"starting-style",
 		"supports",
 		"media",
 		"layer"
 	]) {
-		const nodes = utility.atRules[id];
+		const nodes = utility.conditions[id];
 		if (!nodes) continue;
 		if (id === "layer" && utility.explicitLayerName) continue;
-		atRules.push(generateAt({
+		conditions.push(generateCondition({
 			id,
 			nodes
 		}));
 	}
-	return atRules;
+	return conditions;
 }
 function getComposedUtilitySelector(utility, css) {
 	let selector = utility.selectorTemplate ? "&" : utility.selectorNodes ? generateSelector(utility.selectorNodes, "&") : "&";
@@ -195,156 +213,148 @@ function createStyleDefinitionsFromCompose(definition, css) {
 	return utilities.flatMap((utility) => {
 		const selector = getComposedUtilitySelector(utility, css);
 		const layer = utility.explicitLayerName;
-		const utilityAtRules = getUtilityAtRuleDefinitions(utility);
-		return (utility.declarationRules || (utility.declarations ? [{ declarations: utility.declarations }] : [])).map(({ declarations, atRules, selector: ruleSelector }) => ({
+		const utilityConditions = getUtilityConditionDefinitions(utility);
+		return (utility.declarationRules || (utility.declarations ? [{ declarations: utility.declarations }] : [])).map(({ declarations, conditions, selector: ruleSelector }) => ({
 			utility,
 			selector: ruleSelector ? combineStyleSelectors(selector, ruleSelector) : selector,
 			declarations: cloneDeclarations(declarations, utility.important),
 			...layer ? { layer } : {},
-			...[...utilityAtRules, ...atRules || []].length ? { atRules: [...utilityAtRules, ...atRules || []] } : {}
+			...[...utilityConditions, ...conditions || []].length ? { conditions: [...utilityConditions, ...conditions || []] } : {}
 		}));
 	});
 }
 function combineSelectorWrapper(selector, wrapper) {
 	return wrapper.replace(/&/g, selector);
 }
-function mergeResolvedVariantReferenceBranch(branch, resolved, token) {
-	const nextLayer = resolved.layer || branch.layer;
-	if (branch.layer && resolved.layer && branch.layer !== resolved.layer) throw new Error(`@variant ${token} cannot assign multiple layers`);
-	return {
-		selector: resolved.selector ? combineSelectorWrapper(branch.selector || "&", resolved.selector) : branch.selector,
-		atRules: [...branch.atRules || [], ...resolved.atRules || []],
-		...nextLayer ? { layer: nextLayer } : {}
-	};
-}
-function cloneConfiguredVariantBranches(token, css) {
-	const configuredVariant = css.resolveVariant(token);
-	if (configuredVariant) return configuredVariant.map((branch) => ({
-		...branch.selector ? { selector: branch.selector } : {},
-		...branch.atRules?.length ? { atRules: [...branch.atRules] } : {},
-		...branch.layer ? { layer: branch.layer } : {}
-	}));
-}
-function findClosingParen(value, start) {
-	let depth = 0;
+function resolveSelectorAliases(selector, css) {
+	const selectorTokens = [...css.selectors.keys()].filter((token) => token.startsWith(":")).sort((a, b) => b.length - a.length);
+	if (!selectorTokens.length) return selector;
+	let result = "";
 	let quote = "";
-	for (let index = start; index < value.length; index++) {
-		const char = value[index];
+	let attributeDepth = 0;
+	for (let index = 0; index < selector.length;) {
+		const char = selector[index];
 		if (quote) {
-			if (char === "\\") index++;
+			result += char;
+			if (char === "\\") result += selector[++index] || "";
 			else if (char === quote) quote = "";
+			index++;
 			continue;
 		}
 		if (char === "\"" || char === "'") {
 			quote = char;
+			result += char;
+			index++;
 			continue;
 		}
-		if (char === "(") depth++;
-		if (char === ")") {
-			depth--;
-			if (depth === 0) return index;
-		}
-	}
-	return -1;
-}
-function resolveSelectorVariantStack(selectorStack, css, token) {
-	let branches = [{}];
-	const selectorVariantTokens = [...css.variants.keys()].filter((variantToken) => variantToken.startsWith(":")).sort((a, b) => b.length - a.length);
-	let index = 0;
-	let raw = "";
-	const flushRaw = () => {
-		if (!raw) return;
-		const selector = generateSelector(parseSelector(raw, css), "&");
-		branches = branches.map((branch) => mergeResolvedVariantReferenceBranch(branch, { selector }, token));
-		raw = "";
-	};
-	while (index < selectorStack.length) {
-		const matchedToken = selectorVariantTokens.find((variantToken) => {
-			if (!selectorStack.startsWith(variantToken, index)) return false;
-			const next = selectorStack[index + variantToken.length];
-			return next === void 0 || next === "(" || !/[-_a-zA-Z0-9]/.test(next);
-		});
-		if (!matchedToken) {
-			raw += selectorStack[index++];
+		if (char === "[") {
+			attributeDepth++;
+			result += char;
+			index++;
 			continue;
 		}
-		const configuredBranches = cloneConfiguredVariantBranches(matchedToken, css);
-		if (!configuredBranches) {
-			raw += selectorStack[index++];
+		if (char === "]") {
+			if (attributeDepth > 0) attributeDepth--;
+			result += char;
+			index++;
 			continue;
 		}
-		flushRaw();
-		index += matchedToken.length;
-		let suffix = "";
-		if (selectorStack[index] === "(") {
-			const end = findClosingParen(selectorStack, index);
-			if (end !== -1) {
-				suffix = selectorStack.slice(index, end + 1);
-				index = end + 1;
+		if (!attributeDepth) {
+			const matchedToken = selectorTokens.find((token) => {
+				if (!selector.startsWith(token, index)) return false;
+				const next = selector[index + token.length];
+				return next === void 0 || next === "(" || !/[-_a-zA-Z0-9]/.test(next);
+			});
+			if (matchedToken) {
+				const nodes = css.selectors.get(matchedToken);
+				if (nodes?.length) {
+					result += generateSelector(nodes, "");
+					index += matchedToken.length;
+					continue;
+				}
 			}
 		}
-		branches = branches.flatMap((branch) => configuredBranches.map((configuredBranch) => {
-			const selector = configuredBranch.selector && suffix ? configuredBranch.selector + suffix : configuredBranch.selector;
-			return mergeResolvedVariantReferenceBranch(branch, {
-				...configuredBranch,
-				...selector ? { selector } : {}
-			}, token);
-		}));
+		result += char;
+		index++;
 	}
-	flushRaw();
-	return branches;
+	return result;
+}
+function mergeResolvedVariantReferenceBranch(branch, resolved, token) {
+	const nextLayer = resolved.layer || branch.layer;
+	if (branch.layer && resolved.layer && branch.layer !== resolved.layer) throw new Error(`@variant ${token} cannot assign multiple layers`);
+	return {
+		selector: resolved.selector ? combineSelectorWrapper(branch.selector || "&", resolved.selector) : branch.selector,
+		conditions: [...branch.conditions || [], ...resolved.conditions || []],
+		...nextLayer ? { layer: nextLayer } : {}
+	};
 }
-function resolveAtVariantReference(token, css) {
+function cloneConfiguredVariantBranches(token, css) {
+	const configuredVariant = css.resolveVariant(token);
+	if (configuredVariant) return configuredVariant.map((branch) => ({
+		...branch.selector ? { selector: branch.selector } : {},
+		...branch.conditions?.length ? { conditions: [...branch.conditions] } : branch.conditionNodes?.length ? { conditions: branch.conditionNodes.map((condition) => generateCondition(condition)) } : {},
+		...branch.layer ? { layer: branch.layer } : {}
+	}));
+}
+function resolveSelectorVariantReference(token, css) {
+	const configuredVariant = cloneConfiguredVariantBranches(token, css);
+	if (configuredVariant) return configuredVariant;
+	return [{ selector: generateSelector(parseSelector(token, css), "&") }];
+}
+function resolveConditionVariantReference(token, css) {
 	const configuredVariant = cloneConfiguredVariantBranches(token, css);
 	if (configuredVariant) return configuredVariant;
-	const atToken = token.slice(1);
-	if (css.modes.includes(atToken)) {
-		const modeSelector = css.getModeSelector(atToken);
-		return modeSelector ? [{ selector: `${modeSelector} &` }] : [{ atRules: [`@media (prefers-color-scheme:${atToken})`] }];
+	const conditionToken = token.slice(1);
+	if (css.modes.includes(conditionToken)) {
+		const modeSelector = css.getModeSelector(conditionToken);
+		return modeSelector ? [{ selector: `${modeSelector} &` }] : [{ conditions: [`@media (prefers-color-scheme:${conditionToken})`] }];
 	}
-	if (/^-?[_a-zA-Z][-_a-zA-Z0-9]*$/.test(atToken) && !css.atRules.has(atToken)) throw new Error(`Unknown @variant token: ${token}`);
-	return [{ atRules: [generateAt(parseAt(atToken, css))] }];
+	if (/^-?[_a-zA-Z][-_a-zA-Z0-9]*$/.test(conditionToken) && !css.conditions.has(conditionToken)) throw new Error(`Unknown @variant token: ${token}`);
+	return [{ conditions: [generateCondition(parseCondition(conditionToken, css))] }];
 }
 function resolveMasterVariantReference(token, css) {
-	if (!token.startsWith(":") && !token.startsWith("@")) throw new Error(`@variant requires a full variant token: ${token}`);
-	const [selectorStack = "", ...conditionStacks] = token.split("@");
-	let branches = selectorStack ? resolveSelectorVariantStack(selectorStack, css, token) : [{}];
+	if (!token.startsWith("@")) throw new Error(`@variant requires a full variant token: ${token}`);
+	let branches = [{}];
+	const conditionStacks = token.slice(1).split("@");
 	for (const conditionStack of conditionStacks) {
 		if (!conditionStack) continue;
-		const resolvedBranches = resolveAtVariantReference(`@${conditionStack}`, css);
+		const resolvedBranches = resolveConditionVariantReference(`@${conditionStack}`, css);
 		branches = branches.flatMap((branch) => resolvedBranches.map((resolved) => mergeResolvedVariantReferenceBranch(branch, resolved, token)));
 	}
 	return branches;
 }
-function resolveConfiguredBranches(atRules, css, selector = "&", layer) {
+function resolveConfiguredBranches(conditionPath, css, selector = "&", layer) {
 	let branches = [{
 		selector,
 		...layer ? { layer } : {}
 	}];
-	if (!atRules?.length) return branches;
-	for (const atRule of atRules) {
-		const token = readCSSDirectiveVariantReference(atRule);
-		if (!token) {
+	if (!conditionPath?.length) return branches.map((branch) => ({
+		...branch,
+		selector: resolveSelectorAliases(branch.selector, css)
+	}));
+	for (const entry of conditionPath) {
+		if (entry.type === "condition") {
 			branches = branches.map((branch) => ({
 				...branch,
-				atRules: [...branch.atRules || [], atRule]
+				conditions: [...branch.conditions || [], entry.value]
 			}));
 			continue;
 		}
-		const resolvedBranches = resolveMasterVariantReference(token, css);
+		const token = entry.token;
+		const resolvedBranches = token.startsWith(":") ? resolveSelectorVariantReference(token, css) : resolveMasterVariantReference(token, css);
 		branches = branches.flatMap((branch) => resolvedBranches.map((resolved) => {
 			const nextLayer = resolved.layer || branch.layer;
 			if (branch.layer && resolved.layer && branch.layer !== resolved.layer) throw new Error(`@variant ${token} cannot assign multiple layers`);
 			return {
 				selector: resolved.selector ? combineSelectorWrapper(branch.selector, resolved.selector) : branch.selector,
-				atRules: [...branch.atRules || [], ...resolved.atRules || []],
+				conditions: [...branch.conditions || [], ...resolved.conditions || []],
 				...nextLayer ? { layer: nextLayer } : {}
 			};
 		}));
 	}
 	return branches.map((branch) => ({
-		selector: branch.selector,
-		...branch.atRules?.length ? { atRules: branch.atRules } : {},
+		selector: resolveSelectorAliases(branch.selector, css),
+		...branch.conditions?.length ? { conditions: branch.conditions } : {},
 		...branch.layer ? { layer: branch.layer } : {}
 	}));
 }
@@ -352,11 +362,13 @@ function ensureUtilityRules(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({
-		...atRules?.length ? { atRules: [...atRules] } : {},
+		...conditionPath?.length ? { conditionPath: cloneConditionPath(conditionPath) } : conditions?.length ? { conditions: [...conditions] } : {},
 		declarations
 	});
 }
@@ -366,41 +378,43 @@ function finalizeUtilityDefinitions(input, css, options) {
 	const diagnostics = options.diagnostics;
 	setCompilerDiagnosticCount(diagnostics, "lower-utility-definition-count", utilities.length);
 	for (const definition of utilities) {
-		if (definition.atRules?.some(readCSSDirectiveVariantReference)) {
-			const resolvedBranches = timeCompilerDiagnostic(diagnostics, "lower-utility-at-rule-resolution-ms", () => resolveConfiguredBranches(definition.atRules, css));
-			delete definition.atRules;
+		const definitionConditionPath = getConditionPath(definition);
+		if (conditionPathHasVariants(definitionConditionPath)) {
+			const resolvedBranches = timeCompilerDiagnostic(diagnostics, "lower-utility-condition-resolution-ms", () => resolveConfiguredBranches(definitionConditionPath, css));
+			delete definition.conditions;
+			delete definition.conditionPath;
 			if (definition.declarations) {
 				definition.rules ??= [];
 				for (const resolved of resolvedBranches) definition.rules.push({
 					declarations: definition.declarations,
 					...resolved.selector !== "&" ? { selector: resolved.selector } : {},
-					...resolved.atRules?.length ? { atRules: resolved.atRules } : {}
+					...resolved.conditions?.length ? { conditions: resolved.conditions } : {}
 				});
 				delete definition.declarations;
 			}
 		}
 		if (!definition.rules?.length) continue;
 		definition.rules = definition.rules.flatMap((rule) => {
-			return timeCompilerDiagnostic(diagnostics, "lower-utility-rule-resolution-ms", () => resolveConfiguredBranches(rule.atRules, css, rule.selector || "&")).map((resolved) => ({
+			return timeCompilerDiagnostic(diagnostics, "lower-utility-rule-resolution-ms", () => resolveConfiguredBranches(getConditionPath(rule), css, rule.selector || "&")).map((resolved) => ({
 				declarations: rule.declarations,
 				...resolved.selector !== "&" ? { selector: resolved.selector } : {},
-				...resolved.atRules?.length ? { atRules: resolved.atRules } : {}
+				...resolved.conditions?.length ? { conditions: resolved.conditions } : {}
 			}));
 		});
 	}
 }
-function getStyleMergeBucketKey(selector, atRules, layer) {
+function getStyleMergeBucketKey(selector, conditions, layer) {
 	return JSON.stringify([
 		layer || "",
 		selector,
-		atRules || []
+		conditions || []
 	]);
 }
-function pushStyleMergeEvent(buckets, selector, atRules, layer, event) {
-	const key = getStyleMergeBucketKey(selector, atRules, layer);
+function pushStyleMergeEvent(buckets, selector, conditions, layer, event) {
+	const key = getStyleMergeBucketKey(selector, conditions, layer);
 	const bucket = buckets.get(key) || {
 		selector,
-		...atRules?.length ? { atRules } : {},
+		...conditions?.length ? { conditions } : {},
 		...layer ? { layer } : {},
 		order: event.order,
 		events: []
@@ -443,19 +457,19 @@ function createMergedStyleDefinition(bucket) {
 	return {
 		selector: bucket.selector,
 		declarations,
-		...bucket.atRules?.length ? { atRules: bucket.atRules } : {},
+		...bucket.conditions?.length ? { conditions: bucket.conditions } : {},
 		...bucket.layer ? { layer: bucket.layer } : {}
 	};
 }
-function normalizeStyleAtFeatureValue(value, unit, rootSize) {
+function normalizeStyleConditionFeatureValue(value, unit, rootSize) {
 	if (unit === "px") return value / rootSize;
 	return value;
 }
-function getStyleAtRuleFeatures(atRules, rootSize) {
+function getStyleConditionFeatures(conditions, rootSize) {
 	const featureMap = /* @__PURE__ */ new Map();
-	for (const atRule of atRules || []) for (const match of atRule.matchAll(STYLE_AT_FEATURE_REGEX)) {
+	for (const condition of conditions || []) for (const match of condition.matchAll(STYLE_CONDITION_FEATURE_REGEX)) {
 		const [, name, operator, rawValue, unit] = match;
-		const value = normalizeStyleAtFeatureValue(Number(rawValue), unit, rootSize);
+		const value = normalizeStyleConditionFeatureValue(Number(rawValue), unit, rootSize);
 		const entry = featureMap.get(name) ?? {};
 		switch (operator) {
 			case ">":
@@ -479,7 +493,7 @@ function getStyleAtRuleFeatures(atRules, rootSize) {
 		entry.max ?? Number.MAX_SAFE_INTEGER
 	]).sort(([a], [b]) => a.localeCompare(b, void 0, { numeric: true }));
 }
-function compareStyleAtRuleFeatures(a, b) {
+function compareStyleConditionFeatures(a, b) {
 	const len = Math.max(a.length, b.length);
 	for (let index = 0; index < len; index++) {
 		const left = a[index];
@@ -500,14 +514,14 @@ function compareStyleAtRuleFeatures(a, b) {
 }
 function compareStyleMergeBuckets(a, b, rootSize) {
 	if ((a.layer || "components") === (b.layer || "components") && a.selector === b.selector) {
-		const atRuleStateA = a.atRules?.length ? 1 : 0;
-		const atRuleStateB = b.atRules?.length ? 1 : 0;
-		if (atRuleStateA !== atRuleStateB) return atRuleStateA - atRuleStateB;
-		if (atRuleStateA && atRuleStateB) {
-			const featuresA = getStyleAtRuleFeatures(a.atRules, rootSize);
-			const featuresB = getStyleAtRuleFeatures(b.atRules, rootSize);
+		const conditionStateA = a.conditions?.length ? 1 : 0;
+		const conditionStateB = b.conditions?.length ? 1 : 0;
+		if (conditionStateA !== conditionStateB) return conditionStateA - conditionStateB;
+		if (conditionStateA && conditionStateB) {
+			const featuresA = getStyleConditionFeatures(a.conditions, rootSize);
+			const featuresB = getStyleConditionFeatures(b.conditions, rootSize);
 			if (featuresA.length && featuresB.length) {
-				const featureCompare = compareStyleAtRuleFeatures(featuresA, featuresB);
+				const featureCompare = compareStyleConditionFeatures(featuresA, featuresB);
 				if (featureCompare !== 0) return featureCompare;
 			}
 		}
@@ -519,19 +533,19 @@ function createMergedStyleDefinitions(definitions, css, targetLayer) {
 	for (const definition of definitions) if (definition.type === "compose") {
 		const composedDefinitions = createStyleDefinitionsFromCompose(definition, css);
 		for (const composedDefinition of composedDefinitions) {
-			const { atRules: composedAtRules, ...composedDefinitionWithoutAtRules } = composedDefinition;
+			const { conditions: composedConditions, ...composedDefinitionWithoutConditions } = composedDefinition;
 			const selector = combineStyleSelectors(definition.selector, composedDefinition.selector);
-			const resolvedBranches = resolveConfiguredBranches([...definition.atRules || [], ...composedAtRules || []], css, selector, targetLayer || composedDefinitionWithoutAtRules.layer);
-			for (const resolved of resolvedBranches) pushStyleMergeEvent(buckets, resolved.selector, resolved.atRules, resolved.layer, {
+			const resolvedBranches = resolveConfiguredBranches([...getConditionPath(definition) || [], ...conditionPathFromConditions(composedConditions) || []], css, selector, targetLayer || composedDefinitionWithoutConditions.layer);
+			for (const resolved of resolvedBranches) pushStyleMergeEvent(buckets, resolved.selector, resolved.conditions, resolved.layer, {
 				type: "compose",
 				order: definition.order,
-				utility: composedDefinitionWithoutAtRules.utility,
-				declarations: composedDefinitionWithoutAtRules.declarations
+				utility: composedDefinitionWithoutConditions.utility,
+				declarations: composedDefinitionWithoutConditions.declarations
 			});
 		}
 	} else {
-		const resolvedBranches = resolveConfiguredBranches(definition.atRules, css, definition.selector, targetLayer || definition.layer);
-		for (const resolved of resolvedBranches) pushStyleMergeEvent(buckets, resolved.selector, resolved.atRules, resolved.layer, {
+		const resolvedBranches = resolveConfiguredBranches(getConditionPath(definition), css, definition.selector, targetLayer || definition.layer);
+		for (const resolved of resolvedBranches) pushStyleMergeEvent(buckets, resolved.selector, resolved.conditions, resolved.layer, {
 			type: "native",
 			order: definition.order,
 			declarations: definition.declarations
@@ -621,7 +635,7 @@ function createManagedStyleDefinitionPlan(groups, keysByName) {
 function renderStyleDefinitions(definitions) {
 	return definitions.map((definition) => {
 		const body = Object.entries(definition.declarations).map(([propertyName, value]) => `${propertyName}:${value}`).join(";");
-		return wrapAtRules(`${definition.selector}{${body}}`, definition.atRules);
+		return wrapConditions(`${definition.selector}{${body}}`, definition.conditions);
 	}).join("");
 }
 function getStaticUtilityDefinition(input, name, layer) {
@@ -644,9 +658,9 @@ function pushStaticUtilityStyleRule(definition, styleDefinition) {
 	const rule = {
 		declarations: styleDefinition.declarations,
 		...styleDefinition.selector !== "&" ? { selector: styleDefinition.selector } : {},
-		...styleDefinition.atRules?.length ? { atRules: styleDefinition.atRules } : {}
+		...styleDefinition.conditions?.length ? { conditions: styleDefinition.conditions } : {}
 	};
-	if (!definition.declarations && !definition.rules?.length && !rule.selector && !rule.atRules?.length) {
+	if (!definition.declarations && !definition.rules?.length && !rule.selector && !rule.conditions?.length) {
 		definition.declarations = rule.declarations;
 		return;
 	}

package/dist/master-css-manifest.d.ts

@@ -1,7 +1,6 @@
 import { CSSDirectiveManifestInput as CSSDirectiveManifestInput$1, CSSDirectiveVariableDefinition } from "@master/css-schema/css-directives";
 import { MasterCSSManifest } from "@master/css-schema/manifest";
 import { CompilerDiagnosticRecorder } from "./diagnostics.js";
-
 //#region src/master-css-manifest.d.ts
 type CSSDirectiveManifestInput = CSSDirectiveManifestInput$1;
 interface CreateMasterCSSManifestOptions {