@tamagui/tailwind 3.0.0-beta.924.1 → 3.0.0

package/dist/esm/candidate.mjs

@@ -1,7 +1,10 @@
 import { isWeb } from "@tamagui/constants";
-import { plainValueToPayload } from "@tamagui/core/internal-runtime";
+import { stylePropsUnitless } from "@tamagui/helpers";
+import { mergeFrontendCondition, plainValueToPayload } from "@tamagui/core/internal-runtime";
+import { noteBoxShadow, noteTailwindTransform, tryCompose } from "./compose.mjs";
+import { composedResolver } from "./composedResolver.mjs";
 import { borderSideSuffix, configRevisionSymbol, createGrammarConfigView, getSafeAreaEdge, getTokenCategory, insetAxisProps, percentUtilityProps, radiusCornerProps, sizeUtilityProps, splitColorOpacitySuffix } from "@tamagui/style-grammar/runtime";
-import { classifyCandidate, decodeArbitrary } from "@tamagui/style-grammar/tooling/candidate";
+import { classifyCandidate, decodeArbitrary, hasTokenName, resolveTokenName, tailwindLeadingRatios, tailwindTrackingEms } from "@tamagui/style-grammar/tooling/candidate";
 
 const styleGrammarConfigCache = /* @__PURE__ */ new WeakMap();
 function getStyleGrammarConfig(config) {
@@ -18,44 +21,36 @@ function getStyleGrammarConfig(config) {
 function isTokenValueProp(prop) {
 	return getTokenCategory(prop) !== null;
 }
-function arbitraryValue(inner) {
+function arbitraryValue(inner, prop) {
 	const px = /^(-?\d*\.?\d+)px$/.exec(inner);
-	if (px) return Number(px[1]);
+	if (px) return prop && stylePropsUnitless[prop] ? inner : Number(px[1]);
 	if (/^-?\d*\.?\d+$/.test(inner)) return Number(inner);
 	return inner;
 }
+function unwrapArbitraryValue(raw) {
+	return arbitraryValue(raw.length > 1 && raw[0] === "[" && raw[raw.length - 1] === "]" ? decodeArbitrary(raw.slice(1, -1)) : raw);
+}
 function tailwindSizingValue(prop, value) {
 	if (value === "full") return "100%";
 	if (value === "auto") return "auto";
-	if (value === "screen") return /[Hh]eight/.test(prop) ? "100vh" : "100vw";
+	if (value === "screen") return /[Hh]eight|[Bb]lock/.test(prop) ? "100vh" : "100vw";
+	if (/^[dls]v[hw]$/.test(value)) return `100${value}`;
 	if (value === "min") return "min-content";
 	if (value === "max") return "max-content";
 	if (value === "fit") return "fit-content";
 	const frac = /^(\d+)\/(\d+)$/.exec(value);
-	if (frac && Number(frac[2]) !== 0) {
-		return `${Number(frac[1]) / Number(frac[2]) * 100}%`;
-	}
+	if (frac && Number(frac[2]) !== 0) return `${Number(frac[1]) / Number(frac[2]) * 100}%`;
 	return null;
 }
-function borderDimValue(raw) {
-	let inner = raw;
-	if (raw.length > 1 && raw[0] === "[" && raw[raw.length - 1] === "]") {
-		inner = decodeArbitrary(raw.slice(1, -1));
-	}
-	const px = /^(-?\d*\.?\d+)px$/.exec(inner);
-	if (px) return Number.parseFloat(px[1]);
-	if (/^-?\d*\.?\d+$/.test(inner)) return Number(inner);
-	return inner;
-}
 function expansionProps(parsed) {
 	const prefix = parsed.prefix;
 	if (!prefix) return null;
 	if (prefix === "size") return sizeUtilityProps;
-	if (prefix === "inset-x" || prefix === "inset-y") {
-		return insetAxisProps[prefix.slice("inset-".length)];
-	}
+	if (prefix === "translate") return ["x", "y"];
+	if (prefix === "skew") return ["skewX", "skewY"];
+	if (prefix === "inset-x" || prefix === "inset-y") return insetAxisProps[prefix.slice(6)];
 	if (prefix.startsWith("rounded-")) {
-		const props = radiusCornerProps[prefix.slice("rounded-".length)];
+		const props = radiusCornerProps[prefix.slice(8)];
 		if (!props || props.length === 1) return null;
 		return props;
 	}
@@ -65,21 +60,64 @@ function expansionProps(parsed) {
 	const suffix = parsed.entry?.prop.endsWith("Width") ? "Width" : "Color";
 	return sides.map((side) => `border${side}${suffix}`);
 }
-function tailwindClassToFlatProp(parsed) {
-	if (parsed.kind !== "dynamic" || !parsed.entry || parsed.rawValue === void 0) {
-		return null;
-	}
+function tailwindClassToFlatProp(parsed, grammarConfig) {
+	if (parsed.kind !== "dynamic" || !parsed.entry || parsed.rawValue === void 0) return null;
 	const prop = parsed.entry.prop;
 	const category = parsed.entry.tokenCategory;
 	let value = parsed.rawValue;
+	if (parsed.negative && value === "0" && parsed.convenience !== "angle") return {
+		key: prop,
+		value: 0
+	};
+	if (parsed.convenience === "zero") return {
+		key: prop,
+		value: 0
+	};
+	if (parsed.convenience === "angle") return {
+		key: prop,
+		value: `${parsed.negative ? "-" : ""}${value}deg`
+	};
+	if ((prop === "x" || prop === "y") && parsed.valueKind !== "token") {
+		const sized = tailwindSizingValue(prop, value);
+		if (sized != null) return {
+			key: prop,
+			value: parsed.negative && sized[0] !== "-" ? `-${sized}` : sized
+		};
+	}
+	if (parsed.convenience === "leading-keyword") return {
+		key: prop,
+		value: tailwindLeadingRatios[value]
+	};
+	if (parsed.convenience === "tracking-keyword") return {
+		key: prop,
+		value: `${tailwindTrackingEms[value] * (parsed.negative ? -1 : 1)}em`
+	};
+	if (prop === "lineHeight" && /^\d+(?:\.\d+)?$/.test(value)) return {
+		key: prop,
+		value: `${Number(value) * 4}px`
+	};
+	if (prop === "gridTemplateColumns" && /^\d+$/.test(value)) return {
+		key: prop,
+		value: `repeat(${value}, minmax(0, 1fr))`
+	};
+	if (prop === "gridColumn" && /^\d+$/.test(value)) return {
+		key: prop,
+		value: `span ${value} / span ${value}`
+	};
+	if (prop === "gridRow" && /^\d+$/.test(value)) return {
+		key: prop,
+		value: `span ${value} / span ${value}`
+	};
+	if ((prop === "gridColumnStart" || prop === "gridColumnEnd" || prop === "gridRowStart" || prop === "gridRowEnd") && /^\d+$/.test(value)) return {
+		key: prop,
+		value: Number(value)
+	};
 	if (prop.endsWith("Width") && parsed.prefix?.startsWith("border")) {
 		if (parsed.valueKind === "token") {
 			value = `${parsed.negative ? "-" : ""}${value}`;
-		} else if (parsed.valueKind === "arbitrary") {
-			value = borderDimValue(value);
-		} else {
-			return null;
-		}
+			if (grammarConfig && parsed.entry?.tokenCategory) value = resolveTokenName(grammarConfig, parsed.entry.tokenCategory, value) ?? value;
+		} else if (parsed.valueKind === "arbitrary") value = unwrapArbitraryValue(value);
+		else return null;
 		return {
 			key: prop,
 			value
@@ -87,16 +125,12 @@ function tailwindClassToFlatProp(parsed) {
 	}
 	if (prop === "fontFamily") {
 		let famValue;
-		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") {
-			famValue = decodeArbitrary(value.slice(1, -1));
-		} else {
-			const generic = {
-				sans: "sans-serif",
-				serif: "serif",
-				mono: "monospace"
-			};
-			famValue = parsed.valueKind === "token" ? value : generic[value] || value;
-		}
+		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") famValue = decodeArbitrary(value.slice(1, -1));
+		else famValue = parsed.valueKind === "token" ? value : {
+			sans: "sans-serif",
+			serif: "serif",
+			mono: "monospace"
+		}[value] || value;
 		return {
 			key: "fontFamily",
 			value: famValue
@@ -104,11 +138,8 @@ function tailwindClassToFlatProp(parsed) {
 	}
 	if (prop === "fontSize") {
 		let fsValue;
-		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") {
-			fsValue = arbitraryValue(decodeArbitrary(value.slice(1, -1)));
-		} else {
-			fsValue = value;
-		}
+		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") fsValue = arbitraryValue(decodeArbitrary(value.slice(1, -1)));
+		else fsValue = value;
 		return {
 			key: "fontSize",
 			value: fsValue
@@ -116,12 +147,8 @@ function tailwindClassToFlatProp(parsed) {
 	}
 	if (prop === "lineHeight") {
 		let lhValue;
-		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") {
-			const inner = decodeArbitrary(value.slice(1, -1));
-			lhValue = /^-?\d*\.?\d+px$/.test(inner) ? Number.parseFloat(inner) : inner;
-		} else {
-			lhValue = value;
-		}
+		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") lhValue = decodeArbitrary(value.slice(1, -1));
+		else lhValue = value;
 		return {
 			key: "lineHeight",
 			value: lhValue
@@ -129,71 +156,60 @@ function tailwindClassToFlatProp(parsed) {
 	}
 	if (prop === "letterSpacing") {
 		let lsValue;
-		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") {
-			lsValue = arbitraryValue(decodeArbitrary(value.slice(1, -1)));
-		} else {
-			lsValue = value;
-		}
+		if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") lsValue = arbitraryValue(decodeArbitrary(value.slice(1, -1)));
+		else lsValue = value;
 		return {
 			key: "letterSpacing",
 			value: lsValue
 		};
 	}
-	if (prop === "boxShadow" && value[0] === "[" && value[value.length - 1] === "]") {
-		return {
-			key: "boxShadow",
-			value: decodeArbitrary(value.slice(1, -1))
-		};
-	}
+	if (prop === "boxShadow" && value[0] === "[" && value[value.length - 1] === "]") return {
+		key: "boxShadow",
+		value: decodeArbitrary(value.slice(1, -1))
+	};
 	if (value.length > 2 && value[0] === "[" && value[value.length - 1] === "]") {
 		const inner = decodeArbitrary(value.slice(1, -1));
 		if (inner === "") return null;
+		let resolved = arbitraryValue(inner, prop);
+		if ((prop === "rotate" || prop === "rotateX" || prop === "rotateY" || prop === "rotateZ" || prop === "skewX" || prop === "skewY") && typeof resolved === "number") resolved = `${resolved}deg`;
+		if (parsed.negative) {
+			if (typeof resolved === "number") resolved = -resolved;
+			else if (resolved[0] !== "-") resolved = `-${resolved}`;
+		}
 		return {
 			key: prop,
-			value: arbitraryValue(inner)
+			value: resolved
 		};
 	}
-	if (category === "size" && parsed.valueKind !== "token") {
+	if (parsed.valueKind !== "token" && (category === "size" || parsed.convenience === "sizing-keyword")) {
 		const sized = tailwindSizingValue(prop, value);
-		if (sized != null) {
-			return {
-				key: prop,
-				value: sized
-			};
-		}
+		if (sized != null) return {
+			key: prop,
+			value: parsed.negative && sized[0] !== "-" ? `-${sized}` : sized
+		};
 	}
 	let opacitySuffix = "";
 	if (category === "color" && typeof value === "string") {
 		const suffix = splitColorOpacitySuffix(value);
-		if (suffix.kind === "invalid") {
-			return {
-				key: prop,
-				value
-			};
-		}
+		if (suffix.kind === "invalid") return {
+			key: prop,
+			value
+		};
 		if (suffix.kind === "valid") {
 			opacitySuffix = value.slice(suffix.name.length);
 			value = suffix.name;
 		}
 	}
-	if (percentUtilityProps.has(prop) && /^\d+$/.test(value)) {
-		value = Number(value) / 100;
-	} else if (/^\d+(\.\d+)?$/.test(value)) {
-		if (category === "zIndex" && parsed.valueKind === "convenience") {
-			value = Number(value);
-		} else if (category) {
-			value = `${parsed.negative ? "-" : ""}${value}`;
-		} else {
-			value = Number(value);
-		}
-	} else if (typeof value === "string") {
-		if (category && !((category === "space" || category === "size" || category === "radius") && getSafeAreaEdge(value))) {
-			value = `${parsed.negative ? "-" : ""}${value}`;
-		}
-	}
-	if (opacitySuffix && typeof value === "string") {
-		value = `${value}${opacitySuffix}`;
+	if (percentUtilityProps.has(prop) && /^\d+$/.test(value)) value = Number(value) / 100;
+	else if (/^\d+(\.\d+)?$/.test(value)) if (category === "zIndex" && parsed.valueKind === "convenience") value = Number(value) * (parsed.negative ? -1 : 1);
+	else if (category) {
+		value = `${parsed.negative ? "-" : ""}${value}`;
+		if (grammarConfig) value = resolveTokenName(grammarConfig, category, value) ?? value;
+	} else value = Number(value);
+	else if (typeof value === "string") {
+		if (category && !((category === "space" || category === "size" || category === "radius") && getSafeAreaEdge(value))) value = `${parsed.negative ? "-" : ""}${value}`;
 	}
+	if (opacitySuffix && typeof value === "string") value = `${value}${opacitySuffix}`;
 	if (parsed.negative && !category) {
 		if (typeof value === "number") value = -value;
 		else if (typeof value === "string" && value[0] !== "-") value = `-${value}`;
@@ -204,6 +220,48 @@ function tailwindClassToFlatProp(parsed) {
 	};
 }
 const classPlanCache = /* @__PURE__ */ new WeakMap();
+const nativeTarget = !isWeb || false;
+const cssGridProps = /* @__PURE__ */ new Set([
+	"gridTemplateColumns",
+	"gridColumn",
+	"gridColumnStart",
+	"gridColumnEnd",
+	"gridRow",
+	"gridRowStart",
+	"gridRowEnd"
+]);
+const nativeUnsupportedProps = /* @__PURE__ */ new Set([
+	"objectFit",
+	"order",
+	"overflowX",
+	"overflowY",
+	"textOverflow",
+	"whiteSpace",
+	"visibility"
+]);
+const nativeUnsupportedSizingValues = /* @__PURE__ */ new Set([
+	"min",
+	"max",
+	"fit"
+]);
+const nativeUnsupportedValues = {
+	display: /* @__PURE__ */ new Set([
+		"block",
+		"inline",
+		"inline-flex"
+	]),
+	position: /* @__PURE__ */ new Set(["fixed", "sticky"])
+};
+function shouldGateNative(parsed) {
+	if (!nativeTarget) return false;
+	const properties = parsed.properties || {};
+	if (process.env.TAMAGUI_CSS_GRID !== "1" && (parsed.entry && cssGridProps.has(parsed.entry.prop) || properties.display === "grid" || Object.keys(properties).some((prop) => cssGridProps.has(prop)))) return true;
+	if (parsed.entry && nativeUnsupportedProps.has(parsed.entry.prop) || Object.keys(properties).some((prop) => nativeUnsupportedProps.has(prop))) return true;
+	if (parsed.convenience === "sizing-keyword" && nativeUnsupportedSizingValues.has(parsed.rawValue || "")) return true;
+	const entryProp = parsed.entry?.prop;
+	if (entryProp && nativeUnsupportedValues[entryProp]?.has(parsed.rawValue || "") || Object.keys(properties).some((prop) => nativeUnsupportedValues[prop]?.has(String(properties[prop])))) return true;
+	return properties.overflow === "auto" || properties.cursor !== void 0 && properties.cursor !== "auto" && properties.cursor !== "pointer";
+}
 function getClassPlanCache(grammarConfig) {
 	let cache = classPlanCache.get(grammarConfig);
 	if (!cache) {
@@ -228,38 +286,123 @@ function createPlanEntry(property, value, modifiers) {
 		modifiers
 	];
 }
+const shorthandResets = {
+	padding: [
+		"paddingTop",
+		"paddingRight",
+		"paddingBottom",
+		"paddingLeft",
+		"paddingStart",
+		"paddingEnd",
+		"paddingInlineStart",
+		"paddingInlineEnd",
+		"paddingBlockStart",
+		"paddingBlockEnd",
+		"paddingHorizontal",
+		"paddingVertical",
+		"paddingInline",
+		"paddingBlock"
+	],
+	margin: [
+		"marginTop",
+		"marginRight",
+		"marginBottom",
+		"marginLeft",
+		"marginStart",
+		"marginEnd",
+		"marginInlineStart",
+		"marginInlineEnd",
+		"marginBlockStart",
+		"marginBlockEnd",
+		"marginHorizontal",
+		"marginVertical",
+		"marginInline",
+		"marginBlock"
+	],
+	gap: ["rowGap", "columnGap"],
+	borderRadius: [
+		"borderTopLeftRadius",
+		"borderTopRightRadius",
+		"borderBottomLeftRadius",
+		"borderBottomRightRadius",
+		"borderTopStartRadius",
+		"borderTopEndRadius",
+		"borderBottomStartRadius",
+		"borderBottomEndRadius",
+		"borderStartStartRadius",
+		"borderStartEndRadius",
+		"borderEndStartRadius",
+		"borderEndEndRadius"
+	],
+	borderWidth: [
+		"borderTopWidth",
+		"borderRightWidth",
+		"borderBottomWidth",
+		"borderLeftWidth",
+		"borderStartWidth",
+		"borderEndWidth",
+		"borderInlineStartWidth",
+		"borderInlineEndWidth",
+		"borderBlockStartWidth",
+		"borderBlockEndWidth",
+		"borderInlineWidth",
+		"borderBlockWidth"
+	],
+	borderColor: [
+		"borderTopColor",
+		"borderRightColor",
+		"borderBottomColor",
+		"borderLeftColor",
+		"borderStartColor",
+		"borderEndColor",
+		"borderInlineStartColor",
+		"borderInlineEndColor",
+		"borderBlockStartColor",
+		"borderBlockEndColor",
+		"borderInlineColor",
+		"borderBlockColor"
+	]
+};
 function computeClassPlan(cls, grammarConfig) {
 	const groupMarker = /^group(?:\/([A-Za-z0-9_-]+))?$/.exec(cls);
-	if (groupMarker) {
-		return {
-			entries: [["group", groupMarker[1] || true]],
-			preserveRawClass: isWeb
-		};
-	}
+	if (groupMarker) return {
+		entries: [["group", groupMarker[1] || true]],
+		preserveRawClass: isWeb
+	};
 	const containerMarker = /^@container(-size)?(?:\/([A-Za-z0-9_-]+))?$/.exec(cls);
 	if (containerMarker) {
 		const isSize = containerMarker[1] !== void 0;
 		const name = containerMarker[2];
 		const entries = [];
 		entries.push(["container", name || true]);
-		if (isSize) {
-			entries.push(["containerType", "size"]);
-		}
+		if (isSize) entries.push(["containerType", "size"]);
 		return {
 			entries,
 			preserveRawClass: isWeb
 		};
 	}
 	const classification = classifyCandidate(cls, grammarConfig);
-	if (classification.kind === "passthrough") {
-		return isWeb ? "raw" : null;
-	}
+	if (classification.kind === "passthrough") return isWeb ? "raw" : null;
 	const parsed = classification.parsed;
+	if (!nativeTarget && parsed.entry?.prop === "perspective") return "raw";
+	if (shouldGateNative(parsed)) return null;
+	if (parsed.entry?.prop === "flex" && parsed.rawValue) {
+		const fraction = /^(\d+)\/(\d+)$/.exec(parsed.rawValue);
+		if (fraction && Number(fraction[2]) !== 0) {
+			const basis = `${Number(fraction[1]) / Number(fraction[2]) * 100}%`;
+			const entries = [
+				createPlanEntry("flexGrow", 1, parsed.modifiers),
+				createPlanEntry("flexShrink", 1, parsed.modifiers),
+				createPlanEntry("flexBasis", basis, parsed.modifiers)
+			];
+			return entries.every(Boolean) ? entries : "raw";
+		}
+	}
 	const util = parsed.kind === "utility" ? parsed.properties : null;
 	if (util) {
 		const entries = [];
 		for (const p in util) {
-			const entry = createPlanEntry(p, util[p], parsed.modifiers);
+			const entry = createPlanEntry(p, nativeTarget && p === "transform" && util[p] === "none" ? [] : util[p], parsed.modifiers);
 			if (!entry) return "raw";
 			entries.push(entry);
 		}
@@ -275,7 +418,7 @@ function computeClassPlan(cls, grammarConfig) {
 					...parsed.entry,
 					prop
 				} : parsed.entry
-			});
+			}, grammarConfig);
 			if (!flatProp2) return "raw";
 			const entry = createPlanEntry(flatProp2.key, flatProp2.value, parsed.modifiers);
 			if (!entry) return "raw";
@@ -283,7 +426,7 @@ function computeClassPlan(cls, grammarConfig) {
 		}
 		return entries;
 	}
-	const flatProp = tailwindClassToFlatProp(parsed);
+	const flatProp = tailwindClassToFlatProp(parsed, grammarConfig);
 	if (flatProp) {
 		const entry = createPlanEntry(flatProp.key, flatProp.value, parsed.modifiers);
 		return entry ? [entry] : "raw";
@@ -300,9 +443,61 @@ function getTailwindClassPlan(candidate, config) {
 	}
 	return plan;
 }
+function resolveTailwindCandidate(candidate, config, sink) {
+	const composed = tryCompose(candidate, getStyleGrammarConfig(config), sink);
+	if (composed !== void 0) return composed;
+	const plan = getTailwindClassPlan(candidate, config);
+	if (plan === "raw") return true;
+	if (plan === null) return null;
+	const parent = Array.isArray(plan) ? null : plan;
+	const entries = parent ? parent.entries : plan;
+	for (let index = 0; index < entries.length; index++) {
+		const entry = entries[index];
+		const transformTokenCategory = entry[0] === "x" || entry[0] === "y" ? "space" : entry[0] === "perspective" ? "perspective" : null;
+		const transformValue = transformTokenCategory && typeof entry[1] === "string" ? config.tokensParsed?.[transformTokenCategory]?.[entry[1]]?.val ?? entry[1] : entry[1];
+		if (noteTailwindTransform(sink, [
+			entry[0],
+			transformValue,
+			entry[2],
+			entry[3]
+		])) continue;
+		if (entry[0] === "lineHeight") {
+			sink([
+				"__leading",
+				entry[1],
+				entry[2],
+				entry[3]
+			]);
+			continue;
+		}
+		if (entry[0] === "fontSize" && typeof entry[1] === "string" && hasTokenName(getStyleGrammarConfig(config), "lineHeight", entry[1])) sink([
+			"__textLeading",
+			entry[1],
+			entry[2],
+			entry[3]
+		]);
+		if (entry[0] === "boxShadow" && typeof entry[1] === "string") noteBoxShadow(sink, config.tokensParsed?.boxShadow?.[entry[1]]?.val ?? entry[1], entry[3] || []);
+		sink(entry);
+	}
+	return parent?.preserveRawClass || false;
+}
 function resolveTailwindClassName(className, config) {
 	const result = {};
+	let composedProps = null;
 	let rawClassName = "";
+	const sink = (entry) => {
+		const [key, value, condition] = entry;
+		if (key.charCodeAt(0) === 95 && key.charCodeAt(1) === 95) {
+			composedProps ||= {};
+			composedProps[key] = mergeFrontendCondition(composedProps[key], value, condition);
+			return;
+		}
+		if (condition === void 0) {
+			const resets = shorthandResets[key];
+			if (resets) for (let i = 0; i < resets.length; i++) delete result[resets[i]];
+		}
+		setInAuthoredOrder(result, key, mergeFrontendCondition(result[key], value, condition));
+	};
 	let start = 0;
 	for (let index = 0; index <= className.length; index++) {
 		if (index !== className.length && className.charCodeAt(index) > 32) continue;
@@ -311,45 +506,24 @@ function resolveTailwindClassName(className, config) {
 			continue;
 		}
 		const candidate = className.slice(start, index);
-		const plan = getTailwindClassPlan(candidate, config);
-		if (plan === "raw") {
-			rawClassName = rawClassName ? `${rawClassName} ${candidate}` : candidate;
-		} else if (plan) {
-			const parentPlan = plan;
-			if (!Array.isArray(plan) && parentPlan.preserveRawClass) {
-				rawClassName = rawClassName ? `${rawClassName} ${candidate}` : candidate;
-			}
-			const entries = Array.isArray(plan) ? plan : parentPlan.entries;
-			for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
-				const [key, value, condition] = entries[entryIndex];
-				const previous = result[key];
-				let next = value;
-				if (condition !== void 0) {
-					next = previous && typeof previous === "object" && !Array.isArray(previous) ? {
-						...previous,
-						[condition]: value
-					} : previous === void 0 ? { [condition]: value } : {
-						default: previous,
-						[condition]: value
-					};
-				} else if (previous && typeof previous === "object" && !Array.isArray(previous)) {
-					next = {
-						...previous,
-						default: value
-					};
-				}
-				setInAuthoredOrder(result, key, next);
-			}
-		}
+		if (resolveTailwindCandidate(candidate, config, sink)) rawClassName = rawClassName ? `${rawClassName} ${candidate}` : candidate;
 		start = index + 1;
 	}
+	if (composedProps) {
+		const composed = composedResolver(composedProps);
+		for (const key in composed) setInAuthoredOrder(result, key, composed[key]);
+	}
 	if (rawClassName) result.className = rawClassName;
 	return result;
 }
 function setInAuthoredOrder(target, key, value) {
+	if (value === "unset") {
+		delete target[key];
+		return;
+	}
 	if (key in target) delete target[key];
 	target[key] = value;
 }
 
-export { getStyleGrammarConfig, getTailwindClassPlan, isTokenValueProp, resolveTailwindClassName, setInAuthoredOrder };
+export { getStyleGrammarConfig, getTailwindClassPlan, isTokenValueProp, resolveTailwindCandidate, resolveTailwindClassName, setInAuthoredOrder };
 //# sourceMappingURL=candidate.mjs.map