@tamagui/static 3.0.0-beta.765.1 → 3.0.0-beta.804.1

package/dist/esm/compilerHost.mjs

@@ -1,4 +1,4 @@
-import { zeroRuleMessage, zeroThemeBoundaryMessage } from "@tamagui/compiler-core";
+import { collectLeaves, zeroRuleMessage, zeroThemeBoundaryMessage } from "@tamagui/compiler-core";
 import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectRules, StyleObjectValue, stylePropsAll, stylePropsText, validStyles } from "@tamagui/helpers";
 import { ATTRIBUTES, DISPLAY_WEB_RESET, EVENTS, NATIVE_BACKING, NATIVE_BLOCK_DEFAULTS, NATIVE_ELEMENT_DEFAULTS, NATIVE_FLEX_DEFAULTS, NATIVE_INPUT_TYPES, NATIVE_PRIMITIVE_MODULE, TAGS, TAG_WEB_DEFAULTS } from "@tamagui/dom";
 import { createModifierRegistry, parseTransition, parseValue } from "@tamagui/style-grammar/tooling";
@@ -80,7 +80,9 @@ function extractedStyleArtifacts(split, props, config, includeRuntimeBase = true
 		media: []
 	};
 	const classKeys = /* @__PURE__ */ new Map();
-	for (const [key, identifier] of Object.entries(split.classNames ?? {})) if (typeof identifier === "string") classKeys.set(identifier, key);
+	for (const [key, identifier] of Object.entries(split.classNames ?? {})) {
+		if (typeof identifier === "string") classKeys.set(identifier, key);
+	}
 	const identifiers = /* @__PURE__ */ new Set([...classKeys.keys(), ...Object.values(rules).flatMap((styleObject) => {
 		const identifier = styleObject?.[StyleObjectIdentifier];
 		return typeof identifier === "string" ? [identifier] : [];
@@ -88,11 +90,17 @@ function extractedStyleArtifacts(split, props, config, includeRuntimeBase = true
 	for (const identifier of identifiers) {
 		const key = classKeys.get(identifier) ?? "";
 		const css2 = cssFromRules(Object.fromEntries(Object.entries(rules).filter(([, styleObject]) => styleObject?.[StyleObjectIdentifier] === identifier))).join("");
-		if (identifier.startsWith("t_group_")) buckets.group.push(identifier);
-		else if (pseudoNames.some((name) => key.endsWith(`-${name}`))) buckets.pseudo.push(identifier);
-		else if (css2.includes(".t_")) buckets.theme.push(identifier);
-		else if ([...mediaNames].some((name) => key.endsWith(`-${name}`))) buckets.media.push(identifier);
-		else buckets.normal.push(identifier);
+		if (identifier.startsWith("t_group_")) {
+			buckets.group.push(identifier);
+		} else if (pseudoNames.some((name) => key.endsWith(`-${name}`))) {
+			buckets.pseudo.push(identifier);
+		} else if (css2.includes(".t_")) {
+			buckets.theme.push(identifier);
+		} else if ([...mediaNames].some((name) => key.endsWith(`-${name}`))) {
+			buckets.media.push(identifier);
+		} else {
+			buckets.normal.push(identifier);
+		}
 	}
 	const orderedIdentifiers = [
 		...buckets.group,
@@ -112,17 +120,28 @@ function extractedStyleArtifacts(split, props, config, includeRuntimeBase = true
 		css
 	};
 }
-function compiledPropsEdits(input, styleEntries, replacement) {
+function spreadNonStyleReplacement(form, entry, isPropIgnored, rewriteProp) {
+	if (entry.kind !== "spread" || entry.value.kind !== "static" || !staticObject(entry.value.value)) {
+		return "";
+	}
+	const nonStyleEntries = Object.entries(entry.value.value).filter(([key]) => !isPropIgnored(key)).map(([key, value]) => rewriteProp(key, value));
+	if (nonStyleEntries.length === 0) return "";
+	const objectSource = `{ ${nonStyleEntries.map(([key, value]) => `${JSON.stringify(key)}: ${JSON.stringify(value)}`).join(", ")} }`;
+	return form === "jsx" ? `{...${objectSource}}` : `...${objectSource}`;
+}
+function compiledPropsEdits(input, styleEntries, replacement, spreadReplacement) {
 	const propsSpan = input.element.propsSpan;
 	if (!propsSpan) return null;
 	const original = input.source.slice(propsSpan.start, propsSpan.end);
 	const trimmed = original.trim();
-	if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) return [{
-		start: propsSpan.start,
-		end: propsSpan.end,
-		content: `{ ${replacement} }`,
-		origin: propsSpan
-	}];
+	if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) {
+		return [{
+			start: propsSpan.start,
+			end: propsSpan.end,
+			content: `{ ${replacement} }`,
+			origin: propsSpan
+		}];
+	}
 	if (styleEntries.length === 0) {
 		const close = original.lastIndexOf("}");
 		const separator = original.slice(1, close).trim() ? ", " : " ";
@@ -138,19 +157,22 @@ function compiledPropsEdits(input, styleEntries, replacement) {
 	for (const [index, entry] of styleEntries.entries()) {
 		let start = entry.span.start;
 		let end = entry.span.end;
+		const nonStyle = spreadReplacement?.(entry) ?? "";
 		if (index === 0) {
+			const content = [replacement, nonStyle].filter(Boolean).join(", ");
 			edits.push({
 				start,
 				end,
-				content: replacement,
+				content,
 				origin: entry.span
 			});
 			continue;
 		}
 		let cursor = end - propsSpan.start;
 		while (cursor < original.length - 1 && /\s/.test(original[cursor])) cursor++;
-		if (original[cursor] === ",") end = propsSpan.start + cursor + 1;
-		else {
+		if (original[cursor] === ",") {
+			end = propsSpan.start + cursor + 1;
+		} else {
 			cursor = start - propsSpan.start - 1;
 			while (cursor > 0 && /\s/.test(original[cursor])) cursor--;
 			if (original[cursor] === ",") start = propsSpan.start + cursor;
@@ -158,15 +180,18 @@ function compiledPropsEdits(input, styleEntries, replacement) {
 		edits.push({
 			start,
 			end,
-			content: "",
+			content: nonStyle,
 			origin: entry.span
 		});
 	}
 	const merged = [];
 	for (const edit of edits.sort((left, right) => left.start - right.start)) {
 		const previous = merged.at(-1);
-		if (previous && edit.start <= previous.end && !previous.content && !edit.content) previous.end = Math.max(previous.end, edit.end);
-		else merged.push(edit);
+		if (previous && edit.start <= previous.end && !previous.content && !edit.content) {
+			previous.end = Math.max(previous.end, edit.end);
+		} else {
+			merged.push(edit);
+		}
 	}
 	return merged;
 }
@@ -421,7 +446,13 @@ const cssConflictFamilies = [
 	])
 ];
 function cssOwnersConflict(left, right) {
-	for (const leftOwner of left) for (const rightOwner of right) if (leftOwner === rightOwner || cssShorthandConflicts[leftOwner]?.includes(rightOwner) || cssShorthandConflicts[rightOwner]?.includes(leftOwner) || cssConflictFamilies.some((family) => family.has(leftOwner) && family.has(rightOwner))) return true;
+	for (const leftOwner of left) {
+		for (const rightOwner of right) {
+			if (leftOwner === rightOwner || cssShorthandConflicts[leftOwner]?.includes(rightOwner) || cssShorthandConflicts[rightOwner]?.includes(leftOwner) || cssConflictFamilies.some((family) => family.has(leftOwner) && family.has(rightOwner))) {
+				return true;
+			}
+		}
+	}
 	return false;
 }
 const runtimeEventProps = /* @__PURE__ */ new Set([
@@ -442,7 +473,9 @@ const nativePointerEventProps = /* @__PURE__ */ new Set([
 	"onPointerUp"
 ]);
 function isSerializableNativeStyle(value) {
-	if (value == null || typeof value === "number" || typeof value === "boolean") return true;
+	if (value == null || typeof value === "number" || typeof value === "boolean") {
+		return true;
+	}
 	if (typeof value === "string") return true;
 	if (Array.isArray(value)) return value.every(isSerializableNativeStyle);
 	if (!staticObject(value)) return false;
@@ -453,7 +486,9 @@ function isSerializableNativeStyle(value) {
 function unusedIdentifier(source, base) {
 	let candidate = base;
 	let suffix = 0;
-	while (new RegExp(`\\b${candidate}\\b`).test(source)) candidate = `${base}${++suffix}`;
+	while (new RegExp(`\\b${candidate}\\b`).test(source)) {
+		candidate = `${base}${++suffix}`;
+	}
 	return candidate;
 }
 const VIEW_WRAPPER_PROPS = /^(aria-|accessibilityState$|accessibilityValue$|id$|tabIndex$|nativeID$)/;
@@ -487,7 +522,9 @@ function nativeDOMProps(input, tag) {
 	const entries = input.element.entries.filter((entry) => entry.kind === "prop");
 	const names = new Set(entries.map((entry) => entry.name));
 	if (names.has("ref") || tag === "br") additions.push(["__tag", JSON.stringify(tag)]);
-	if (TAGS[tag].backing === "text" || TAGS[tag].backing === "textinput") additions.push(["__inherit", "true"]);
+	if (TAGS[tag].backing === "text" || TAGS[tag].backing === "textinput") {
+		additions.push(["__inherit", "true"]);
+	}
 	const add = (name, value) => additions.push([name, value]);
 	const consume = (entry) => consumed.push(entry);
 	for (const entry of entries) {
@@ -495,20 +532,24 @@ function nativeDOMProps(input, tag) {
 		const attribute = (Object.hasOwn(ATTRIBUTES, entry.name) ? ATTRIBUTES[entry.name] : void 0) ?? (entry.name.startsWith("data-") ? ATTRIBUTES["data-*"] : void 0);
 		const event = Object.hasOwn(EVENTS, entry.name) ? EVENTS[entry.name] : void 0;
 		if (event) {
-			if (event.native === "none") return {
-				consumed,
-				edits,
-				additions,
-				diagnostic: `${entry.name} has no native DOM event equivalent`,
-				diagnosticSpan: entry.span
-			};
-			if (entry.name === "onKeyDown" && tag !== "input" && tag !== "textarea") return {
-				consumed,
-				edits,
-				additions,
-				diagnostic: `onKeyDown requires a native text-entry control`,
-				diagnosticSpan: entry.span
-			};
+			if (event.native === "none") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `${entry.name} has no native DOM event equivalent`,
+					diagnosticSpan: entry.span
+				};
+			}
+			if (entry.name === "onKeyDown" && tag !== "input" && tag !== "textarea") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `onKeyDown requires a native text-entry control`,
+					diagnosticSpan: entry.span
+				};
+			}
 			if ([
 				"onClick",
 				"onLoad",
@@ -516,7 +557,9 @@ function nativeDOMProps(input, tag) {
 				"onChange",
 				"onInput",
 				"onKeyDown"
-			].includes(entry.name)) continue;
+			].includes(entry.name)) {
+				continue;
+			}
 			if (event.nativeProp) {
 				const edit2 = renamedPropEdit(input, entry, event.nativeProp);
 				if (edit2) edits.push(edit2);
@@ -525,24 +568,28 @@ function nativeDOMProps(input, tag) {
 		}
 		if (!attribute || attribute.native === "none" || entry.name === "style") continue;
 		if (DOM_STYLE_ATTRIBUTES.has(entry.name)) {
-			if (entry.value.kind !== "static") return {
-				consumed,
-				edits,
-				additions,
-				diagnostic: `html.${tag} ${entry.name} must be statically known for native lowering`,
-				diagnosticSpan: entry.span
-			};
+			if (entry.value.kind !== "static") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `html.${tag} ${entry.name} must be statically known for native lowering`,
+					diagnosticSpan: entry.span
+				};
+			}
 			consume(entry);
 			continue;
 		}
 		if (entry.name === "hidden") {
-			if (entry.value.kind !== "static") return {
-				consumed,
-				edits,
-				additions,
-				diagnostic: `html.${tag} hidden must be statically known for native lowering`,
-				diagnosticSpan: entry.span
-			};
+			if (entry.value.kind !== "static") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `html.${tag} hidden must be statically known for native lowering`,
+					diagnosticSpan: entry.span
+				};
+			}
 			consume(entry);
 			continue;
 		}
@@ -568,18 +615,22 @@ function nativeDOMProps(input, tag) {
 		}
 		if (entry.name === "type") {
 			consume(entry);
-			if (tag === "input" && entry.value.kind !== "static") return {
-				consumed,
-				edits,
-				additions,
-				diagnostic: `html.input type must be statically known for native lowering`,
-				diagnosticSpan: entry.span
-			};
+			if (tag === "input" && entry.value.kind !== "static") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `html.input type must be statically known for native lowering`,
+					diagnosticSpan: entry.span
+				};
+			}
 			if (tag === "input" && entry.value.kind === "static") {
 				const type = entry.value.value;
 				if (type === "password") add("secureTextEntry", "true");
 				else if (typeof type === "string" && type !== "text" && NATIVE_INPUT_TYPES.includes(type)) {
-					if (!names.has("inputMode")) add("inputMode", JSON.stringify(type === "number" ? "numeric" : type));
+					if (!names.has("inputMode")) {
+						add("inputMode", JSON.stringify(type === "number" ? "numeric" : type));
+					}
 				}
 			}
 			continue;
@@ -608,7 +659,9 @@ function nativeDOMProps(input, tag) {
 		const edit = renamedPropEdit(input, entry, nativeProp);
 		if (edit) edits.push(edit);
 	}
-	for (const [name, values] of nested) add(name, `{ ${values.map(([key, value]) => `${key}: ${value}`).join(", ")} }`);
+	for (const [name, values] of nested) {
+		add(name, `{ ${values.map(([key, value]) => `${key}: ${value}`).join(", ")} }`);
+	}
 	if (!names.has("role") && TAGS[tag].role) add("role", JSON.stringify(TAGS[tag].role));
 	if (tag === "textarea") add("multiline", "true");
 	return {
@@ -627,15 +680,19 @@ function webDOMProps(input, tag) {
 			const edit = renamedPropEdit(input, entry, "htmlFor");
 			if (edit) edits.push(edit);
 		}
-		if (entry.name === "role" && entry.value.kind === "static" && entry.value.value === "none") edits.push({
-			start: entry.value.span.start,
-			end: entry.value.span.end,
-			content: JSON.stringify("presentation"),
-			origin: entry.value.span
-		});
+		if (entry.name === "role" && entry.value.kind === "static" && entry.value.value === "none") {
+			edits.push({
+				start: entry.value.span.start,
+				end: entry.value.span.end,
+				content: JSON.stringify("presentation"),
+				origin: entry.value.span
+			});
+		}
 	}
 	if (tag === "button" && !names.has("type")) additions.push(["type", "\"button\""]);
-	if ((tag === "input" || tag === "textarea") && !names.has("dir")) additions.push(["dir", "\"auto\""]);
+	if ((tag === "input" || tag === "textarea") && !names.has("dir")) {
+		additions.push(["dir", "\"auto\""]);
+	}
 	return {
 		edits,
 		additions
@@ -645,7 +702,8 @@ function createTamaguiCompilerHost(options) {
 	const platform = options.target === "native" ? "native" : "web";
 	const core = requireTamaguiCore(platform);
 	const firstThemeName = Object.keys(options.tamaguiConfig.themes ?? {})[0] ?? "";
-	const theme = options.tamaguiConfig.themes?.[firstThemeName] ?? {};
+	const firstTheme = options.tamaguiConfig.themes?.[firstThemeName] ?? {};
+	const theme = firstTheme;
 	const modifierRegistry = createModifierRegistry({
 		mediaNames: options.tamaguiConfig.media ?? {},
 		themeNames: options.tamaguiConfig.themes ?? {}
@@ -682,17 +740,25 @@ function createTamaguiCompilerHost(options) {
 				resolvedPayloads.push(payload);
 				continue;
 			}
-			if (transition.value.entries.length !== 1 || transition.value.entries[0].timing.type !== "preset") return null;
+			if (transition.value.entries.length !== 1 || transition.value.entries[0].timing.type !== "preset") {
+				return null;
+			}
 			const preset = transitionPresets[transition.value.entries[0].timing.name];
 			if (typeof preset !== "string") return null;
 			const parsedPreset = parseTransition(preset);
-			if (!parsedPreset.ok || parsedPreset.value.kind !== "transition" || parsedPreset.value.entries.length !== 1 || parsedPreset.value.entries[0].property !== "all" || parsedPreset.value.entries[0].timing.type !== "css") return null;
+			if (!parsedPreset.ok || parsedPreset.value.kind !== "transition" || parsedPreset.value.entries.length !== 1 || parsedPreset.value.entries[0].property !== "all" || parsedPreset.value.entries[0].timing.type !== "css") {
+				return null;
+			}
 			resolvedPayloads.push(`all ${preset}`);
 		}
 		let payloadIndex = 0;
 		const resolved = [];
-		if (program.value.base !== null) resolved.push(resolvedPayloads[payloadIndex++]);
-		for (const clause of program.value.clauses) resolved.push(`${clause.modifiers.join(":")}:${resolvedPayloads[payloadIndex++]}`);
+		if (program.value.base !== null) {
+			resolved.push(resolvedPayloads[payloadIndex++]);
+		}
+		for (const clause of program.value.clauses) {
+			resolved.push(`${clause.modifiers.join(":")}:${resolvedPayloads[payloadIndex++]}`);
+		}
 		return resolved.join(" ");
 	};
 	const modulesById = new Map(options.componentModules.map((module) => [module.resolvedId, module.moduleName]));
@@ -702,7 +768,8 @@ function createTamaguiCompilerHost(options) {
 		const identity = element.component.provenance;
 		if (!identity) return null;
 		const moduleName = modulesById.get(identity.resolvedId);
-		const info = (moduleName ? componentsByModule.get(moduleName) : void 0)?.nameToInfo[identity.importedName];
+		const component = moduleName ? componentsByModule.get(moduleName) : void 0;
+		const info = component?.nameToInfo[identity.importedName];
 		return info ? {
 			key: componentKey(identity.resolvedId, identity.importedName),
 			staticConfig: normalizeStaticConfig(info.staticConfig),
@@ -712,9 +779,12 @@ function createTamaguiCompilerHost(options) {
 	const domStaticConfig = (element) => {
 		const identity = element.component.provenance;
 		const tag = element.component.name;
-		if (identity?.importedName !== "html" || !DOM_FRONTENDS.has(identity.specifier) || !Object.hasOwn(TAGS, tag)) return null;
+		if (identity?.importedName !== "html" || !DOM_FRONTENDS.has(identity.specifier) || !Object.hasOwn(TAGS, tag)) {
+			return null;
+		}
 		const row = TAGS[tag];
-		const base = (row.backing === "text" || row.backing === "textinput" ? core.Text : core.View)?.staticConfig;
+		const textLike = row.backing === "text" || row.backing === "textinput";
+		const base = (textLike ? core.Text : core.View)?.staticConfig;
 		if (!base) return null;
 		const platformDefaults = platform === "web" ? {
 			...DISPLAY_WEB_RESET[row.display],
@@ -818,7 +888,9 @@ function createTamaguiCompilerHost(options) {
 		return name in stylePropsAll && !isValidStyleKey(name, validStyles$1, staticConfig.accept);
 	};
 	const directStyleName = (name, component) => {
-		if (compilerStyleProps.has(name) || name === "style") return null;
+		if (compilerStyleProps.has(name) || name === "style") {
+			return null;
+		}
 		const staticConfig = component.staticConfig;
 		if (staticConfig.variants?.[name]) return null;
 		const expanded = options.tamaguiConfig.shorthands?.[name] ?? name;
@@ -826,11 +898,15 @@ function createTamaguiCompilerHost(options) {
 	};
 	const resolveSplitStyles = (props, staticConfig, animationDriver, displayName) => {
 		const previousStatic = process.env.IS_STATIC;
-		const previousTarget = "web";
-		if (platform === "native") process.env.IS_STATIC = "is_static";
-		else delete process.env.IS_STATIC;
+		const previousTarget = process.env.TAMAGUI_TARGET;
+		if (platform === "native") {
+			process.env.IS_STATIC = "is_static";
+		} else {
+			delete process.env.IS_STATIC;
+		}
 		process.env.TAMAGUI_TARGET = platform;
 		try {
+			core.prepareStyleStaticConfig(staticConfig);
 			return core.getSplitStyles(props, staticConfig, theme, firstThemeName, componentState, {
 				resolveValues: platform === "native" ? "except-theme" : "variable",
 				noClass: platform === "native",
@@ -840,7 +916,8 @@ function createTamaguiCompilerHost(options) {
 		} finally {
 			if (previousStatic === void 0) delete process.env.IS_STATIC;
 			else process.env.IS_STATIC = previousStatic;
-			process.env.TAMAGUI_TARGET = previousTarget;
+			if (previousTarget === void 0) delete process.env.TAMAGUI_TARGET;
+			else process.env.TAMAGUI_TARGET = previousTarget;
 		}
 	};
 	const partialStaticConfig = (staticConfig) => ({
@@ -855,7 +932,9 @@ function createTamaguiCompilerHost(options) {
 		const split = resolveSplitStyles({ [name]: value }, partialStaticConfig(staticConfig));
 		if (!split) return null;
 		const inlineStyle = split.viewProps?.style;
-		if (staticObject(inlineStyle) && !inlineStyle["$$css"] && Object.keys(inlineStyle).length > 0) return null;
+		if (staticObject(inlineStyle) && Object.keys(inlineStyle).length > 0) {
+			return null;
+		}
 		const owners = new Set(Object.keys(split.classNames ?? {}));
 		for (const styleObject of Object.values(split.rulesToInsert ?? {})) {
 			const property = styleObject?.[StyleObjectProperty];
@@ -864,7 +943,7 @@ function createTamaguiCompilerHost(options) {
 		return owners.size > 0 ? owners : null;
 	};
 	const dynamicStyleOwners = (name, staticConfig) => {
-		const owners = styleOwners(name, name === "transform" ? [{ scale: 1 }] : name === "transformMatrix" ? [
+		const probeValue = name === "transform" ? [{ scale: 1 }] : name === "transformMatrix" ? [
 			1,
 			0,
 			0,
@@ -874,7 +953,8 @@ function createTamaguiCompilerHost(options) {
 		] : name === "shadowOffset" ? {
 			width: 0,
 			height: 0
-		} : name === "shadowColor" ? "black" : name === "border" || name === "outline" ? "0 solid transparent" : name === "position" ? "relative" : name === "objectFit" ? "contain" : 0, staticConfig);
+		} : name === "shadowColor" ? "black" : name === "border" || name === "outline" ? "0 solid transparent" : name === "position" ? "relative" : name === "objectFit" ? "contain" : 0;
+		const owners = styleOwners(name, probeValue, staticConfig);
 		if (!owners || name !== "flex") return owners;
 		const shorthandOwners = styleOwners(name, "0 1 auto", staticConfig);
 		if (!shorthandOwners) return null;
@@ -895,28 +975,35 @@ function createTamaguiCompilerHost(options) {
 		] : ["bailed"];
 		const why = result.ok ? flattened ? "Static styles were lowered and the component was flattened to a host element." : "Static styles were lowered while the Tamagui component remained at runtime." : result.bailout.message;
 		const styles = styleEntries.map((entry) => {
-			if (!result.ok) return {
-				prop: entry.name,
-				tier: "bailed",
-				runtime: true,
-				why: `${result.bailout.message}. The Tamagui runtime resolved this prop.`
-			};
+			if (!result.ok) {
+				return {
+					prop: entry.name,
+					tier: "bailed",
+					runtime: true,
+					why: `${result.bailout.message}. The Tamagui runtime resolved this prop.`
+				};
+			}
 			const edited = result.edits.some((edit) => edit.start < entry.span.end && edit.end > entry.span.start);
-			if (!flattened && !edited) return {
-				prop: entry.name,
-				tier: "bailed",
-				runtime: true,
-				why: "This prop remained for Tamagui runtime resolution."
-			};
-			if (entry.value.kind === "static") {
-				const split = resolveSplitStyles({ [entry.name]: entry.value.value }, partialStaticConfig(component.staticConfig));
-				if (!Boolean(split && (Object.keys(split.classNames ?? {}).length > 0 || Object.keys(split.rulesToInsert ?? {}).length > 0 || staticObject(split.style) && Object.keys(split.style).length > 0 || staticObject(split.viewProps?.style) && Object.keys(split.viewProps.style).length > 0))) return {
+			if (!flattened && !edited) {
+				return {
 					prop: entry.name,
-					tier: flattened ? "flattened" : "lowered",
-					dropped: true,
-					why: `No ${platform} style output was produced for this prop.`
+					tier: "bailed",
+					runtime: true,
+					why: "This prop remained for Tamagui runtime resolution."
 				};
 			}
+			if (entry.value.kind === "static") {
+				const split = resolveSplitStyles({ [entry.name]: entry.value.value }, partialStaticConfig(component.staticConfig));
+				const hasOutput = Boolean(split && (Object.keys(split.classNames ?? {}).length > 0 || Object.keys(split.rulesToInsert ?? {}).length > 0 || staticObject(split.style) && Object.keys(split.style).length > 0 || staticObject(split.viewProps?.style) && Object.keys(split.viewProps.style).length > 0));
+				if (!hasOutput) {
+					return {
+						prop: entry.name,
+						tier: flattened ? "flattened" : "lowered",
+						dropped: true,
+						why: `No ${platform} style output was produced for this prop.`
+					};
+				}
+			}
 			return {
 				prop: entry.name,
 				tier: flattened ? "flattened" : "lowered",
@@ -941,68 +1028,94 @@ function createTamaguiCompilerHost(options) {
 		resolveComponent: resolve,
 		isStyleProp,
 		canLowerDynamicStyleProp(name, component, valueKind) {
-			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) return true;
+			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) {
+				return true;
+			}
 			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
 		},
 		developmentDebugInstrumentation,
 		lowerCandidate(input) {
 			const component = input.component;
-			if (!component.canFlatten) return bailout(input, "local/unsupported-target", component.staticConfig.acceptsClassName === false ? `${component.key} does not accept className` : component.staticConfig.neverFlatten ? `${component.key} is never flattened (behavior HOC)` : `${component.key} provides a styled context`, input.element.span, { rule: 6 });
+			if (!component.canFlatten) {
+				const reason = component.staticConfig.acceptsClassName === false ? `${component.key} does not accept className` : component.staticConfig.neverFlatten ? `${component.key} is never flattened (behavior HOC)` : `${component.key} provides a styled context`;
+				return bailout(input, "local/unsupported-target", reason, input.element.span, { rule: 6 });
+			}
 			if (options.zeroRuntime) {
 				const spread = input.element.entries.find((entry) => entry.kind === "spread");
-				if (spread) return bailout(input, "local/unsafe-style-spread", "Zero-runtime rejects prop spreads", spread.span, {
-					rule: 1,
-					message: zeroRuleMessage(1, { component: input.element.component.name })
-				});
+				if (spread) {
+					return bailout(input, "local/unsafe-style-spread", "Zero-runtime rejects prop spreads", spread.span, {
+						rule: 1,
+						message: zeroRuleMessage(1, { component: input.element.component.name })
+					});
+				}
 			}
 			const props = {};
 			for (const entry of input.element.entries) {
 				if (entry.kind === "child" || entry.value.kind !== "static") continue;
 				if (entry.kind === "spread") {
-					if (!staticObject(entry.value.value)) return bailout(input, "local/unsafe-style-spread", "Static spread did not materialize to an object", entry.span);
+					if (!staticObject(entry.value.value)) {
+						return bailout(input, "local/unsafe-style-spread", "Static spread did not materialize to an object", entry.span);
+					}
 					Object.assign(props, entry.value.value);
-				} else props[entry.name] = entry.value.value;
+				} else {
+					props[entry.name] = entry.value.value;
+				}
 			}
 			const disableOptimizationEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "disableOptimization");
-			if (disableOptimizationEntry || Object.hasOwn(props, "disableOptimization")) return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimizationEntry?.span);
+			if (disableOptimizationEntry || Object.hasOwn(props, "disableOptimization")) {
+				return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimizationEntry?.span);
+			}
 			if (component.domTag && props.hidden) props.display = "none";
 			if (component.domTag && platform === "native") {
-				for (const [name, styleKey] of DOM_STYLE_ATTRIBUTES) if (name in props) {
-					props[styleKey] = props[name];
-					delete props[name];
+				for (const [name, styleKey] of DOM_STYLE_ATTRIBUTES) {
+					if (name in props) {
+						props[styleKey] = props[name];
+						delete props[name];
+					}
 				}
 			}
-			if (platform === "native" && component.domTag === "input" && typeof props.type === "string" && !NATIVE_INPUT_TYPES.includes(props.type)) return bailout(input, "local/unsupported-target", `input type ${props.type} has no native text-entry control`);
+			if (platform === "native" && component.domTag === "input" && typeof props.type === "string" && !NATIVE_INPUT_TYPES.includes(props.type)) {
+				return bailout(input, "local/unsupported-target", `input type ${props.type} has no native text-entry control`);
+			}
 			const dynamicStyleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && (entry.value.kind === "bailout" || entry.value.kind === "conditional") && isStyleProp(entry.name, component));
 			{
 				const needsRuntimeMapping = (name) => runtimeEventProps.has(name) || platform === "native" && !component.domTag && nativePointerEventProps.has(name);
 				const directRuntimeEvent = input.element.entries.find((entry) => entry.kind === "prop" && needsRuntimeMapping(entry.name));
 				const runtimeEvent = directRuntimeEvent?.kind === "prop" ? directRuntimeEvent.name : Object.keys(props).find(needsRuntimeMapping);
-				if (runtimeEvent) return bailout(input, "local/unsupported-target", `${runtimeEvent} requires Tamagui runtime event mapping`);
+				if (runtimeEvent) {
+					return bailout(input, "local/unsupported-target", `${runtimeEvent} requires Tamagui runtime event mapping`);
+				}
 			}
 			const animationDefaultProps = core.getDefaultProps(component.staticConfig) ?? {};
 			const animationProps = core.mergeProps(animationDefaultProps, props);
 			const animationNames = /* @__PURE__ */ new Set([...input.element.entries.flatMap((entry) => entry.kind === "prop" && runtimeAnimationProps.has(entry.name) ? [entry.name] : []), ...Object.keys(animationProps).filter((name) => runtimeAnimationProps.has(name) && animationProps[name] !== void 0)]);
 			const animateOnlyEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "animateOnly");
-			if (animationNames.has("animateOnly")) return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", animateOnlyEntry?.span, {
-				rule: 5,
-				message: zeroRuleMessage(5, { detail: animateOnlyEntry ? `animateOnly on ${input.element.component.name}` : `animateOnly in the styled() definition of ${input.element.component.name}` })
-			});
+			if (animationNames.has("animateOnly")) {
+				return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", animateOnlyEntry?.span, {
+					rule: 5,
+					message: zeroRuleMessage(5, { detail: animateOnlyEntry ? `animateOnly on ${input.element.component.name}` : `animateOnly in the styled() definition of ${input.element.component.name}` })
+				});
+			}
 			const transitionEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "transition");
 			const animatedBy = typeof animationProps.animatedBy === "string" ? animationProps.animatedBy.trim() : null;
 			const namedAnimationDriver = animatedBy === null ? null : options.tamaguiConfig.animationDrivers?.[animatedBy];
-			const cssAnimationDriver = (platform === "web" && namedAnimationDriver?.outputStyle === "css" ? namedAnimationDriver : null) ?? (animatedBy === null || animatedBy === "default" ? configuredCssAnimationDriver : null);
+			const namedCssAnimationDriver = platform === "web" && namedAnimationDriver && !namedAnimationDriver.isStub && namedAnimationDriver.outputStyle === "css" ? namedAnimationDriver : null;
+			const cssAnimationDriver = namedCssAnimationDriver ?? (animatedBy === null || animatedBy === "default" ? configuredCssAnimationDriver : null);
 			const resolvedCssTransition = animationNames.has("transition") && cssAnimationDriver ? resolveStaticCssTransition(animationProps.transition, cssAnimationDriver.animations ?? {}) : null;
-			if (resolvedCssTransition !== null) props.transition = resolvedCssTransition;
+			if (resolvedCssTransition !== null) {
+				props.transition = resolvedCssTransition;
+			}
 			const animatedByNeedsRuntime = animationNames.has("animatedBy") && !animationNames.has("transition") && (dynamicStyleEntries.length > 0 || Object.keys(animationProps).some((name) => name !== "animatedBy" && (isStyleProp(name, component) && typeof animationProps[name] === "string" && animationProps[name].includes(":") || name === "animationConfig" || name === "forceStyle" || name === "onTransition")));
 			const runtimeAnimationRequired = animationNames.has("transition") && resolvedCssTransition === null || [...animationNames].some((name) => name !== "transition" && name !== "animatedBy" && name !== "animateOnly") || animatedByNeedsRuntime;
 			let dynamicHostStyleProperties = null;
-			if (platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicStyleEntries.length > 0 && !input.element.entries.some((entry) => entry.kind === "spread")) {
+			if (platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicStyleEntries.length > 0 && !input.element.entries.some((entry) => entry.kind === "spread" && entry.value.kind !== "static")) {
 				const seen = /* @__PURE__ */ new Set();
 				const properties = [];
 				const dynamicOwners = /* @__PURE__ */ new Set();
 				for (const entry of dynamicStyleEntries) {
-					if (entry.kind !== "prop" || entry.value.kind !== "bailout" && entry.value.kind !== "conditional") continue;
+					if (entry.kind !== "prop" || entry.value.kind !== "bailout" && entry.value.kind !== "conditional") {
+						continue;
+					}
 					const name = directStyleName(entry.name, component);
 					if (!name || seen.has(name)) {
 						properties.length = 0;
@@ -1015,11 +1128,13 @@ function createTamaguiCompilerHost(options) {
 					}
 					let property = null;
 					const expression = input.source.slice(entry.value.span.start, entry.value.span.end);
-					if (resolvedCssTransition !== null && (name === "opacity" || name === "scale")) property = name === "opacity" ? `opacity: (${expression})` : `transform: "scale(" + (${expression}) + ")"`;
-					else if (entry.value.kind === "bailout" && owners.size === 1 && owners.has(name)) {
+					if (resolvedCssTransition !== null && (name === "opacity" || name === "scale")) {
+						property = name === "opacity" ? `opacity: (${expression})` : `transform: "scale(" + (${expression}) + ")"`;
+					} else if (entry.value.kind === "bailout" && owners.size === 1 && owners.has(name)) {
 						const dynamic = entry.value.dynamic;
-						if (dynamic?.type === "number") property = `${JSON.stringify(name)}: (${expression})`;
-						else if (dynamic?.type === "string" && dynamic.values?.length) {
+						if (dynamic?.type === "number") {
+							property = `${JSON.stringify(name)}: (${expression})`;
+						} else if (dynamic?.type === "string" && dynamic.values?.length) {
 							let valuesStayLiteral = true;
 							for (const value of dynamic.values) {
 								const split2 = resolveSplitStyles({ [entry.name]: value }, partialStaticConfig(component.staticConfig));
@@ -1029,7 +1144,9 @@ function createTamaguiCompilerHost(options) {
 									break;
 								}
 							}
-							if (valuesStayLiteral) property = `${JSON.stringify(name)}: (${expression})`;
+							if (valuesStayLiteral) {
+								property = `${JSON.stringify(name)}: (${expression})`;
+							}
 						}
 					}
 					if (!property) {
@@ -1046,9 +1163,11 @@ function createTamaguiCompilerHost(options) {
 					if (!name) return false;
 					const owners = styleOwners(name, entry.value.value, component.staticConfig);
 					return !!owners && cssOwnersConflict(owners, dynamicOwners);
-				})) dynamicHostStyleProperties = properties;
+				})) {
+					dynamicHostStyleProperties = properties;
+				}
 			}
-			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicHostStyleProperties === null && dynamicStyleEntries.length === 1 && dynamicStyleEntries.every((entry) => entry.kind === "prop" && entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component));
+			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicHostStyleProperties === null && dynamicStyleEntries.length > 0 && dynamicStyleEntries.every((entry) => entry.kind === "prop" && entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component));
 			if ("theme" in props || "themeInverse" in props) {
 				const themeProp = "theme" in props ? "theme" : "themeInverse";
 				return bailout(input, "local/unsupported-target", "Theme boundary candidates remain on the runtime path", input.element.span, {
@@ -1057,14 +1176,20 @@ function createTamaguiCompilerHost(options) {
 				});
 			}
 			const asChildEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "asChild");
-			if (asChildEntry || Object.hasOwn(props, "asChild")) return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChildEntry?.span);
-			if (platform === "native" && ("group" in props || "container" in props || "containerName" in props || "containerType" in props)) return bailout(input, "local/unsupported-target", "Native group containers remain on the runtime path");
-			if (runtimeAnimationRequired && !cssAnimationDriver) return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", transitionEntry?.span, {
-				rule: 5,
-				message: zeroRuleMessage(5, { detail: `the animation configured on ${input.element.component.name}` })
-			});
+			if (asChildEntry || Object.hasOwn(props, "asChild")) {
+				return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChildEntry?.span);
+			}
+			if (platform === "native" && ("group" in props || "container" in props || "containerName" in props || "containerType" in props)) {
+				return bailout(input, "local/unsupported-target", "Native group and container providers remain on the runtime path");
+			}
+			if (runtimeAnimationRequired && !cssAnimationDriver) {
+				return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", transitionEntry?.span, {
+					rule: 5,
+					message: zeroRuleMessage(5, { detail: `the animation configured on ${input.element.component.name}` })
+				});
+			}
 			if (platform === "web" && (dynamicStyleEntries.length > 0 || runtimeAnimationRequired) && dynamicHostStyleProperties === null && !supportsWebConditionalClasses && component.partialRuntimeSafe) {
-				const hasSpread = input.element.entries.some((entry) => entry.kind === "spread");
+				const hasSpread = input.element.entries.some((entry) => entry.kind === "spread" && entry.value.kind !== "static");
 				const unsupportedRuntimeStyle = input.element.entries.find((entry) => entry.kind === "prop" && isStyleProp(entry.name, component) && !runtimeAnimationProps.has(entry.name) && !directStyleName(entry.name, component));
 				if (!hasSpread && !unsupportedRuntimeStyle) {
 					const dynamicOwners = /* @__PURE__ */ new Set();
@@ -1093,49 +1218,59 @@ function createTamaguiCompilerHost(options) {
 					}) : [];
 					if (staticStyleEntries.length > 0) {
 						const partialProps = {};
-						for (const entry of staticStyleEntries) if (entry.kind === "prop" && entry.value.kind === "static") partialProps[entry.name] = entry.value.value;
+						for (const entry of staticStyleEntries) {
+							if (entry.kind === "prop" && entry.value.kind === "static") {
+								partialProps[entry.name] = entry.value.value;
+							}
+						}
 						const partialSplit = resolveSplitStyles(partialProps, partialStaticConfig(component.staticConfig));
 						const partialInlineStyle = partialSplit?.viewProps?.style;
-						const hasPartialInlineStyle = staticObject(partialInlineStyle) && !partialInlineStyle["$$css"] && Object.keys(partialInlineStyle).length > 0;
+						const hasPartialInlineStyle = staticObject(partialInlineStyle) && Object.keys(partialInlineStyle).length > 0;
 						if (partialSplit && !hasPartialInlineStyle) {
 							const artifacts2 = extractedStyleArtifacts(partialSplit, partialProps, options.tamaguiConfig, false);
-							if (artifacts2.className) if (input.element.form !== "jsx") {
-								const propsEdits = compiledPropsEdits(input, staticStyleEntries, objectClassName(artifacts2.className));
-								if (propsEdits) return {
-									ok: true,
-									edits: propsEdits,
-									css: artifacts2.css,
-									imports: [],
-									flattened: false
-								};
-							} else {
-								const [first2, ...rest2] = staticStyleEntries;
-								return {
-									ok: true,
-									edits: [{
-										start: first2.span.start,
-										end: first2.span.end,
-										content: jsxClassName(artifacts2.className),
-										origin: first2.span
-									}, ...rest2.map((entry) => ({
-										start: entry.span.start,
-										end: entry.span.end,
-										content: "",
-										origin: entry.span
-									}))],
-									css: artifacts2.css,
-									imports: [],
-									flattened: false
-								};
+							if (artifacts2.className) {
+								if (input.element.form !== "jsx") {
+									const propsEdits = compiledPropsEdits(input, staticStyleEntries, objectClassName(artifacts2.className));
+									if (propsEdits) {
+										return {
+											ok: true,
+											edits: propsEdits,
+											css: artifacts2.css,
+											imports: [],
+											flattened: false
+										};
+									}
+								} else {
+									const [first2, ...rest2] = staticStyleEntries;
+									return {
+										ok: true,
+										edits: [{
+											start: first2.span.start,
+											end: first2.span.end,
+											content: jsxClassName(artifacts2.className),
+											origin: first2.span
+										}, ...rest2.map((entry) => ({
+											start: entry.span.start,
+											end: entry.span.end,
+											content: "",
+											origin: entry.span
+										}))],
+										css: artifacts2.css,
+										imports: [],
+										flattened: false
+									};
+								}
 							}
 						}
 					}
 				}
 			}
-			if (runtimeAnimationRequired) return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", transitionEntry?.span, {
-				rule: 5,
-				message: zeroRuleMessage(5, { detail: `the animation configured on ${input.element.component.name}` })
-			});
+			if (runtimeAnimationRequired) {
+				return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", transitionEntry?.span, {
+					rule: 5,
+					message: zeroRuleMessage(5, { detail: `the animation configured on ${input.element.component.name}` })
+				});
+			}
 			const supportsNativeDynamicStyles = platform === "native" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicStyleEntries.every((entry) => entry.kind === "prop" && (directStyleName(entry.name, component) === "opacity" || entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component)));
 			if (dynamicStyleEntries.length > 0 && dynamicHostStyleProperties === null && !supportsNativeDynamicStyles && !supportsWebConditionalClasses) {
 				const entry = dynamicStyleEntries[0];
@@ -1144,18 +1279,59 @@ function createTamaguiCompilerHost(options) {
 			const staticDefaultProps = core.getDefaultProps(component.staticConfig) ?? {};
 			const defaultProps = platform === "web" && !component.staticConfig.isText && options.tamaguiConfig.settings.defaultPosition === "relative" && staticDefaultProps.position === void 0 ? core.mergeProps({ position: "relative" }, staticDefaultProps) : staticDefaultProps;
 			let completeProps = core.mergeProps(defaultProps, props);
-			if (platform === "native" && component.domTag && props.display === "flex") completeProps = core.mergeProps(core.mergeProps(defaultProps, NATIVE_FLEX_DEFAULTS), props);
+			if (platform === "native" && component.domTag && props.display === "flex") {
+				completeProps = core.mergeProps(core.mergeProps(defaultProps, NATIVE_FLEX_DEFAULTS), props);
+			}
+			const propsForConditional = (target, value) => {
+				const branchProps = {};
+				for (const entry of input.element.entries) {
+					if (entry === target) {
+						branchProps[target.name] = value;
+						continue;
+					}
+					if (entry.kind === "child" || entry.value.kind !== "static") continue;
+					if (entry.kind === "spread") {
+						if (staticObject(entry.value.value)) Object.assign(branchProps, entry.value.value);
+					} else {
+						branchProps[entry.name] = entry.value.value;
+					}
+				}
+				if (component.domTag && branchProps.hidden) branchProps.display = "none";
+				if (resolvedCssTransition !== null) {
+					branchProps.transition = resolvedCssTransition;
+				}
+				if (component.domTag && platform === "native") {
+					for (const [name, styleKey] of DOM_STYLE_ATTRIBUTES) {
+						if (name in branchProps) {
+							branchProps[styleKey] = branchProps[name];
+							delete branchProps[name];
+						}
+					}
+				}
+				const branchCompleteProps = platform === "native" && component.domTag && branchProps.display === "flex" ? core.mergeProps(core.mergeProps(defaultProps, NATIVE_FLEX_DEFAULTS), branchProps) : core.mergeProps(defaultProps, branchProps);
+				return {
+					branchProps,
+					branchCompleteProps
+				};
+			};
 			if (platform === "native") {
 				const isClauseValue = (name, value) => isStyleProp(name, component) && (typeof value === "string" && flatClausePattern.test(value) || isClauseObjectValue(value));
 				const defaultVariants = component.staticConfig.defaultVariants ?? {};
-				if (Object.entries(completeProps).some(([name, value]) => isClauseValue(name, value)) || Object.entries(component.staticConfig.variants ?? {}).some(([variantName, definitions]) => (completeProps[variantName] !== void 0 || defaultVariants[variantName] !== void 0) && staticObject(definitions) && Object.values(definitions).some((definition) => staticObject(definition) && Object.entries(definition).some(([name, value]) => isClauseValue(name, value)))) || (component.staticConfig.compoundVariants ?? []).some((compound) => staticObject(compound) && staticObject(compound.style) && Object.entries(compound.style).some(([name, value]) => isClauseValue(name, value)))) return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+				const carriesClause = Object.entries(completeProps).some(([name, value]) => isClauseValue(name, value)) || Object.entries(component.staticConfig.variants ?? {}).some(([variantName, definitions]) => (completeProps[variantName] !== void 0 || defaultVariants[variantName] !== void 0) && staticObject(definitions) && Object.values(definitions).some((definition) => staticObject(definition) && Object.entries(definition).some(([name, value]) => isClauseValue(name, value)))) || (component.staticConfig.compoundVariants ?? []).some((compound) => staticObject(compound) && staticObject(compound.style) && Object.entries(compound.style).some(([name, value]) => isClauseValue(name, value)));
+				if (carriesClause) {
+					return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+				}
 			}
 			const split = resolveSplitStyles(completeProps, component.staticConfig, cssAnimationDriver, component.displayName);
-			if (!split) return bailout(input, "local/style-resolution-failed", "getSplitStyles returned no static result");
-			if (split.programLifecycleStyleKeys?.enter?.size || split.programLifecycleStyleKeys?.exit?.size) return bailout(input, "local/unsupported-target", "Lifecycle value programs remain on the runtime path", input.element.span, {
-				rule: 5,
-				message: zeroRuleMessage(5, { detail: `an enter or exit style program on ${input.element.component.name}` })
-			});
+			if (!split) {
+				return bailout(input, "local/style-resolution-failed", "getSplitStyles returned no static result");
+			}
+			if (split.programLifecycleStyleKeys?.enter?.size || split.programLifecycleStyleKeys?.exit?.size) {
+				return bailout(input, "local/unsupported-target", "Lifecycle value programs remain on the runtime path", input.element.span, {
+					rule: 5,
+					message: zeroRuleMessage(5, { detail: `an enter or exit style program on ${input.element.component.name}` })
+				});
+			}
 			const domStyleProgram = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "style" && entry.value.kind === "dom-style");
 			const flatTag = component.domTag ?? (typeof props.render === "string" ? props.render : typeof defaultProps.render === "string" ? defaultProps.render : component.staticConfig.isText ? "span" : "div");
 			const tagEdits = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
@@ -1164,7 +1340,17 @@ function createTamaguiCompilerHost(options) {
 				content: input.element.form === "jsx" ? flatTag : JSON.stringify(flatTag),
 				origin: span
 			}));
-			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && (isStyleProp(entry.name, component) || isInvalidHostStyleProp(entry.name, component)) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).every((name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component)));
+			const isPropIgnored = (name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component);
+			const spreadReplacement = (form, entry) => spreadNonStyleReplacement(form, entry, isPropIgnored, (name, value) => {
+				if (platform !== "web") return [name, value];
+				if (name === "testID") return ["data-testid", value];
+				if (component.domTag && name === "for") return ["htmlFor", value];
+				if (component.domTag && name === "role" && value === "none") {
+					return ["role", "presentation"];
+				}
+				return [name, value];
+			});
+			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && (isStyleProp(entry.name, component) || isInvalidHostStyleProp(entry.name, component)) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some((name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component)));
 			let invalidHostStyle;
 			for (const entry of input.element.entries) {
 				if (entry.kind === "prop") {
@@ -1188,7 +1374,15 @@ function createTamaguiCompilerHost(options) {
 					}
 				}
 			}
-			if (invalidHostStyle) return bailout(input, "local/unsupported-target", `"${invalidHostStyle.name}" is a text style prop and this component is not text. Use a Text-based component, or html.* for raw web elements.`, invalidHostStyle.entry.span);
+			if (invalidHostStyle) {
+				return bailout(input, "local/unsupported-target", `"${invalidHostStyle.name}" is a text style prop and this component is not text. Use a Text-based component, or html.* for raw web elements.`, invalidHostStyle.entry.span);
+			}
+			if (platform === "native" && component.domTag) {
+				const mixedSpread = styleEntries.find((entry) => entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some((name) => !isPropIgnored(name)));
+				if (mixedSpread) {
+					return bailout(input, "local/unsafe-style-spread", "Native DOM prop mapping requires non-style spread props to remain on the runtime path", mixedSpread.span);
+				}
+			}
 			const webPropEdits = platform === "web" ? input.element.entries.flatMap((entry) => {
 				if (entry.kind !== "prop" || entry.name !== "testID") return [];
 				const content = input.source.slice(entry.span.start, entry.span.end);
@@ -1197,7 +1391,7 @@ function createTamaguiCompilerHost(options) {
 				const alreadyQuoted = content[nameOffset - 1] === "\"" || content[nameOffset - 1] === "'";
 				return [{
 					start: entry.span.start + nameOffset,
-					end: entry.span.start + nameOffset + 6,
+					end: entry.span.start + nameOffset + "testID".length,
 					content: input.element.form === "jsx" || alreadyQuoted ? "data-testid" : `'data-testid'`,
 					origin: entry.span
 				}];
@@ -1207,8 +1401,6 @@ function createTamaguiCompilerHost(options) {
 				additions: []
 			};
 			webPropEdits.push(...webDOMResult.edits);
-			const unsafeSpread = input.element.entries.find((entry) => entry.kind === "spread" && !styleEntries.includes(entry) && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some((name) => isStyleProp(name, component)));
-			if (unsafeSpread) return bailout(input, "local/unsafe-style-spread", "A mixed style/non-style spread cannot be removed transactionally", unsafeSpread.span);
 			if (platform === "native") {
 				const nativeStyleResolved = split.viewProps?.style;
 				let themedStyleKeys = null;
@@ -1217,16 +1409,25 @@ function createTamaguiCompilerHost(options) {
 					for (const [styleKey, styleValue] of Object.entries(nativeStyleResolved)) {
 						if (!core.containsThemeRef(styleValue)) continue;
 						const themeKey = core.themeRefKey(styleValue);
-						if (!themeKey) return bailout(input, "local/dynamic-style-value", `Style ${styleKey} uses a theme value in a compound or modified position that compiled output cannot represent`);
+						if (!themeKey) {
+							return bailout(input, "local/dynamic-style-value", `Style ${styleKey} uses a theme value in a compound or modified position that compiled output cannot represent`);
+						}
+						;
 						(themedStyleKeys ||= {})[styleKey] = themeKey;
 					}
 					if (themedStyleKeys) {
 						const plain = {};
-						for (const [styleKey, styleValue] of Object.entries(nativeStyleResolved)) if (!(styleKey in themedStyleKeys)) plain[styleKey] = styleValue;
+						for (const [styleKey, styleValue] of Object.entries(nativeStyleResolved)) {
+							if (!(styleKey in themedStyleKeys)) plain[styleKey] = styleValue;
+						}
 						nativeStyle = plain;
 					}
-				} else if (core.containsThemeRef(nativeStyleResolved)) return bailout(input, "local/dynamic-style-value", "Theme values inside non-object native style output stay on the runtime path");
-				if (!isSerializableNativeStyle(nativeStyle)) return bailout(input, "local/unsupported-target", "Native style output is not a static serializable value");
+				} else if (core.containsThemeRef(nativeStyleResolved)) {
+					return bailout(input, "local/dynamic-style-value", "Theme values inside non-object native style output stay on the runtime path");
+				}
+				if (!isSerializableNativeStyle(nativeStyle)) {
+					return bailout(input, "local/unsupported-target", "Native style output is not a static serializable value");
+				}
 				const nativeStyleLocal = unusedIdentifier(input.source, `__TamaguiNativeStyle${input.element.span.start}`);
 				const nativeStyleImports = [{
 					content: `
@@ -1247,12 +1448,16 @@ const ${mappingLocal} = ${JSON.stringify(themedStyleKeys)};`,
 					};
 				}
 				if (component.domTag) {
-					if (themedStyleKeys) return bailout(input, "local/unsupported-target", "Theme values on DOM-tag native output stay on the runtime path");
+					if (themedStyleKeys) {
+						return bailout(input, "local/unsupported-target", "Theme values on DOM-tag native output stay on the runtime path");
+					}
 					const row = TAGS[component.domTag];
 					const basePrimitive = NATIVE_BACKING[row.backing].primitive;
 					let primitive = basePrimitive;
 					const propsResult = nativeDOMProps(input, component.domTag);
-					if (propsResult.diagnostic) return bailout(input, "local/unsupported-target", propsResult.diagnostic, propsResult.diagnosticSpan);
+					if (propsResult.diagnostic) {
+						return bailout(input, "local/unsupported-target", propsResult.diagnostic, propsResult.diagnosticSpan);
+					}
 					styleEntries = [.../* @__PURE__ */ new Set([...styleEntries, ...propsResult.consumed])];
 					let nativeDOMStyleSource = nativeStyleSource;
 					let runtimeStyleSource = null;
@@ -1260,22 +1465,32 @@ const ${mappingLocal} = ${JSON.stringify(themedStyleKeys)};`,
 						const needsRuntime = domStyleProgram.value.items.some((item) => item.value.kind === "static" && staticObject(item.value.value) && (Object.keys(item.value.value).some((property) => nativeRuntimeOnlyStyleProperties.has(property)) || Object.values(item.value.value).some((value) => typeof value === "string" && (flatClausePattern.test(value) || nativeInheritedKeywordPattern.test(value)) || isClauseObjectValue(value))));
 						const itemSources = [];
 						for (const item of domStyleProgram.value.items) {
-							if (item.value.kind !== "static" || !staticObject(item.value.value)) return bailout(input, "local/dynamic-style-value", "Every style() handle in a style array must be statically evaluable", item.value.span);
-							if (Object.values(item.value.value).some((value2) => typeof value2 === "string" && nativeInitialKeywordPattern.test(value2))) return bailout(input, "local/unsupported-target", "Native DOM style() does not support the CSS initial keyword, matching the pinned upstream limitation", item.value.span);
+							if (item.value.kind !== "static" || !staticObject(item.value.value)) {
+								return bailout(input, "local/dynamic-style-value", "Every style() handle in a style array must be statically evaluable", item.value.span);
+							}
+							if (Object.values(item.value.value).some((value2) => typeof value2 === "string" && nativeInitialKeywordPattern.test(value2))) {
+								return bailout(input, "local/unsupported-target", "Native DOM style() does not support the CSS initial keyword, matching the pinned upstream limitation", item.value.span);
+							}
 							let value;
-							if (needsRuntime) value = JSON.stringify(item.value.value);
-							else {
-								const itemStyle = resolveSplitStyles(item.value.value, partialStaticConfig(component.staticConfig))?.viewProps?.style;
-								if (!isSerializableNativeStyle(itemStyle) || core.containsThemeRef(itemStyle)) return bailout(input, "local/unsupported-target", "Native style() output is not serializable", item.value.span);
+							if (needsRuntime) {
+								value = JSON.stringify(item.value.value);
+							} else {
+								const itemSplit = resolveSplitStyles(item.value.value, partialStaticConfig(component.staticConfig));
+								const itemStyle = itemSplit?.viewProps?.style;
+								if (!isSerializableNativeStyle(itemStyle) || core.containsThemeRef(itemStyle)) {
+									return bailout(input, "local/unsupported-target", "Native style() output is not serializable", item.value.span);
+								}
 								value = JSON.stringify(itemStyle ?? {});
 							}
 							const condition = item.condition ? input.source.slice(item.condition.start, item.condition.end) : null;
 							itemSources.push(condition ? `(${condition}) && ${value}` : value);
 						}
 						if (needsRuntime) {
-							primitive = `DOMRuntime${basePrimitive.slice(3)}`;
+							primitive = `DOMRuntime${basePrimitive.slice("DOM".length)}`;
 							runtimeStyleSource = `[${itemSources.join(", ")}]`;
-						} else nativeDOMStyleSource = `[${[nativeDOMStyleSource, ...itemSources].join(", ")}]`;
+						} else {
+							nativeDOMStyleSource = `[${[nativeDOMStyleSource, ...itemSources].join(", ")}]`;
+						}
 					}
 					const nativeLocal2 = unusedIdentifier(input.source, `__Tamagui${primitive}`);
 					const propertyContent = [
@@ -1303,17 +1518,22 @@ import { ${primitive} as ${nativeLocal2} } from ${JSON.stringify(NATIVE_PRIMITIV
 						let needsCreateElement = false;
 						for (const entry of input.element.entries) {
 							if (entry.kind !== "child") continue;
-							if (entry.value.kind === "empty" || entry.value.kind === "element" || entry.value.kind === "static" && (entry.value.value === null || typeof entry.value.value === "boolean")) continue;
-							if (entry.value.kind !== "static" || entry.value.literalOrigin !== true || typeof entry.value.value !== "string" && typeof entry.value.value !== "number") return bailout(input, "local/unsupported-child", `html.${component.domTag} has a direct child that may render unwrapped native text; write a literal as JSX text or wrap the child in html.span`, entry.span);
+							if (entry.value.kind === "empty" || entry.value.kind === "element" || entry.value.kind === "static" && (entry.value.value === null || typeof entry.value.value === "boolean")) {
+								continue;
+							}
+							if (entry.value.kind !== "static" || entry.value.literalOrigin !== true || typeof entry.value.value !== "string" && typeof entry.value.value !== "number") {
+								return bailout(input, "local/unsupported-child", `html.${component.domTag} has a direct child that may render unwrapped native text; write a literal as JSX text or wrap the child in html.span`, entry.span);
+							}
 							needsText = true;
 							const child = input.source.slice(entry.span.start, entry.span.end);
-							if (input.element.form === "jsx") literalEdits.push({
-								start: entry.span.start,
-								end: entry.span.end,
-								content: `<${textLocal} __inherit>${child}</${textLocal}>`,
-								origin: entry.span
-							});
-							else {
+							if (input.element.form === "jsx") {
+								literalEdits.push({
+									start: entry.span.start,
+									end: entry.span.end,
+									content: `<${textLocal} __inherit>${child}</${textLocal}>`,
+									origin: entry.span
+								});
+							} else {
 								needsCreateElement = true;
 								literalEdits.push({
 									start: entry.span.start,
@@ -1323,36 +1543,44 @@ import { ${primitive} as ${nativeLocal2} } from ${JSON.stringify(NATIVE_PRIMITIV
 								});
 							}
 						}
-						if (needsText) imports.push({
-							content: `
+						if (needsText) {
+							imports.push({
+								content: `
 import { DOMText as ${textLocal} } from ${JSON.stringify(NATIVE_PRIMITIVE_MODULE)}
 `,
-							origin: input.element.component.span
-						});
-						if (needsCreateElement) imports.push({
-							content: `
+								origin: input.element.component.span
+							});
+						}
+						if (needsCreateElement) {
+							imports.push({
+								content: `
 import { createElement as ${createElementLocal} } from "react"
 `,
-							origin: input.element.component.span
-						});
+								origin: input.element.component.span
+							});
+						}
 					}
+					const [first3, ...rest3] = styleEntries;
+					const firstNonStyle3 = first3 ? spreadReplacement("jsx", first3) : "";
 					const propsEdits = input.element.form === "jsx" ? styleEntries.length === 0 ? [{
 						start: input.element.component.span.end,
 						end: input.element.component.span.end,
 						content: ` ${propertyContent}`,
 						origin: input.element.component.span
 					}] : [{
-						start: styleEntries[0].span.start,
-						end: styleEntries[0].span.end,
-						content: propertyContent,
-						origin: styleEntries[0].span
-					}, ...styleEntries.slice(1).map((entry) => ({
+						start: first3.span.start,
+						end: first3.span.end,
+						content: [propertyContent, firstNonStyle3].filter(Boolean).join(" "),
+						origin: first3.span
+					}, ...rest3.map((entry) => ({
 						start: entry.span.start,
 						end: entry.span.end,
-						content: "",
+						content: spreadReplacement("jsx", entry),
 						origin: entry.span
-					}))] : compiledPropsEdits(input, styleEntries, propertyContent);
-					if (!propsEdits) return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}))] : compiledPropsEdits(input, styleEntries, propertyContent, (entry) => spreadReplacement(input.element.form, entry));
+					if (!propsEdits) {
+						return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}
 					return {
 						ok: true,
 						edits: [
@@ -1370,7 +1598,9 @@ import { createElement as ${createElementLocal} } from "react"
 				const useHostView = options.experimentalNativeFastPath && nativeName === "View" && isBareHostView(input.element);
 				const nativeExport = useHostView ? "unstable_NativeView" : nativeName;
 				const nativeLocal = unusedIdentifier(input.source, `__TamaguiNative${useHostView ? "HostView" : nativeName}`);
-				if (themedStyleKeys && options.disablePartialExtraction) return bailout(input, "local/dynamic-style-value", "Theme values require partial extraction, which is disabled");
+				if (themedStyleKeys && options.disablePartialExtraction) {
+					return bailout(input, "local/dynamic-style-value", "Theme values require partial extraction, which is disabled");
+				}
 				if (dynamicStyleEntries.length > 0 || themedStyleKeys) {
 					if (nativeFastPath) {
 						const fastLocal = `__TamaguiNativeFast${nativeName}${input.element.span.start}`;
@@ -1392,7 +1622,9 @@ import { createElement as ${createElementLocal} } from "react"
 							content: "",
 							origin: entry.span
 						}))] : compiledPropsEdits(input, styleEntries, `_expressions: []`);
-						if (!styleEdits) return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+						if (!styleEdits) {
+							return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+						}
 						return {
 							ok: true,
 							edits: [...tagEdits4, ...styleEdits],
@@ -1420,34 +1652,63 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 					const conditionalParts = [];
 					const conditionalKeys = /* @__PURE__ */ new Set();
 					const baseStyleForDiff = staticObject(nativeStyleResolved) ? nativeStyleResolved : {};
-					for (const entry of dynamicStyleEntries) if (entry.value.kind === "conditional" && directStyleName(entry.name, component) !== "opacity") {
-						const branchDiffs = [];
-						for (const branchValue of [entry.value.whenTrue, entry.value.whenFalse]) {
-							const branchSplit = resolveSplitStyles({
-								...completeProps,
-								[entry.name]: branchValue
-							}, component.staticConfig, cssAnimationDriver, component.displayName);
-							const branchStyle = branchSplit?.viewProps?.style;
-							if (!staticObject(branchStyle)) return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch did not resolve to a static native style`, entry.value.span);
-							for (const viewPropsKey of /* @__PURE__ */ new Set([...Object.keys(branchSplit?.viewProps ?? {}), ...Object.keys(split.viewProps ?? {})])) {
-								if (viewPropsKey === "style") continue;
-								if (JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !== JSON.stringify(split.viewProps?.[viewPropsKey])) return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch changes ${viewPropsKey}, which the compiled style array cannot express`, entry.value.span);
+					for (const entry of dynamicStyleEntries) {
+						if (entry.value.kind === "conditional" && directStyleName(entry.name, component) !== "opacity") {
+							let serializeNativeTree = function(node) {
+								if (node.kind === "leaf") {
+									const diff = leafDiffs.get(node) ?? {};
+									return JSON.stringify(diff);
+								}
+								const index = expressions.length;
+								expressions.push(input.source.slice(node.test.start, node.test.end));
+								return `expressions[${index}] ? ${serializeNativeTree(node.whenTrue)} : ${serializeNativeTree(node.whenFalse)}`;
+							};
+							const tree = entry.value.tree;
+							const leaves = collectLeaves(tree);
+							const leafDiffs = /* @__PURE__ */ new Map();
+							for (const leaf of leaves) {
+								const { branchCompleteProps } = propsForConditional(entry, leaf.value);
+								const branchSplit = resolveSplitStyles(branchCompleteProps, component.staticConfig, cssAnimationDriver, component.displayName);
+								const branchStyle = branchSplit?.viewProps?.style ?? {};
+								if (!staticObject(branchStyle)) {
+									return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch did not resolve to a static native style`, entry.value.span);
+								}
+								for (const viewPropsKey of /* @__PURE__ */ new Set([...Object.keys(branchSplit?.viewProps ?? {}), ...Object.keys(split.viewProps ?? {})])) {
+									if (viewPropsKey === "style") continue;
+									if (JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !== JSON.stringify(split.viewProps?.[viewPropsKey])) {
+										return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch changes ${viewPropsKey}, which the compiled style array cannot express`, entry.value.span);
+									}
+								}
+								for (const key of Object.keys(baseStyleForDiff)) {
+									if (!(key in branchStyle)) {
+										return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch removes ${key}, which an additive style array cannot express`, entry.value.span);
+									}
+								}
+								const diff = {};
+								for (const [key, value] of Object.entries(branchStyle)) {
+									if (JSON.stringify(baseStyleForDiff[key]) !== JSON.stringify(value)) {
+										diff[key] = value;
+									}
+								}
+								if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
+									return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch style is not statically representable`, entry.value.span);
+								}
+								for (const key of Object.keys(diff)) {
+									if (conditionalKeys.has(key)) {
+										return bailout(input, "local/dynamic-style-value", `Multiple conditionals contribute ${key}; their interaction cannot be resolved per-branch`, entry.value.span);
+									}
+								}
+								leafDiffs.set(leaf, diff);
+							}
+							for (const diff of leafDiffs.values()) {
+								for (const key of Object.keys(diff)) conditionalKeys.add(key);
 							}
-							for (const key of Object.keys(baseStyleForDiff)) if (!(key in branchStyle)) return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch removes ${key}, which an additive style array cannot express`, entry.value.span);
-							const diff = {};
-							for (const [key, value] of Object.entries(branchStyle)) if (JSON.stringify(baseStyleForDiff[key]) !== JSON.stringify(value)) diff[key] = value;
-							if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch style is not statically representable`, entry.value.span);
-							for (const key of Object.keys(diff)) if (conditionalKeys.has(key)) return bailout(input, "local/dynamic-style-value", `Multiple conditionals contribute ${key}; their interaction cannot be resolved per-branch`, entry.value.span);
-							branchDiffs.push(diff);
+							conditionalParts.push(serializeNativeTree(tree));
+						} else {
+							const index = expressions.length;
+							expressions.push(input.source.slice(entry.value.span.start, entry.value.span.end));
+							plainDynamicParts.push(`${JSON.stringify(directStyleName(entry.name, component))}: expressions[${index}]`);
 						}
-						for (const diff of branchDiffs) for (const key of Object.keys(diff)) conditionalKeys.add(key);
-						const index = expressions.length;
-						expressions.push(input.source.slice(entry.value.test.start, entry.value.test.end));
-						conditionalParts.push(`expressions[${index}] ? ${JSON.stringify(branchDiffs[0])} : ${JSON.stringify(branchDiffs[1])}`);
-					} else {
-						const index = expressions.length;
-						expressions.push(input.source.slice(entry.value.span.start, entry.value.span.end));
-						plainDynamicParts.push(`${JSON.stringify(directStyleName(entry.name, component))}: expressions[${index}]`);
 					}
 					const dynamicStyle = plainDynamicParts.join(", ");
 					const themedStyle = themedStyleKeys ? Object.entries(themedStyleKeys).map(([styleKey, themeKey]) => `${JSON.stringify(styleKey)}: _theme[${JSON.stringify(themeKey)}]?.get()`).join(", ") : null;
@@ -1464,18 +1725,21 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 						origin: span
 					}));
 					const [first3, ...rest3] = styleEntries;
+					const firstNonStyle3 = first3 ? spreadReplacement("jsx", first3) : "";
 					const expressionEdits = styleEntries.length === 0 ? [] : input.element.form === "jsx" ? [{
 						start: first3.span.start,
 						end: first3.span.end,
-						content: expressions.length > 0 ? `_expressions={[${expressions.join(", ")}]}` : "",
+						content: [expressions.length > 0 ? `_expressions={[${expressions.join(", ")}]}` : "", firstNonStyle3].filter(Boolean).join(" "),
 						origin: first3.span
 					}, ...rest3.map((entry) => ({
 						start: entry.span.start,
 						end: entry.span.end,
-						content: "",
+						content: spreadReplacement("jsx", entry),
 						origin: entry.span
-					}))] : compiledPropsEdits(input, styleEntries, `_expressions: [${expressions.join(", ")}]`);
-					if (!expressionEdits) return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}))] : compiledPropsEdits(input, styleEntries, `_expressions: [${expressions.join(", ")}]`, (entry) => spreadReplacement(input.element.form, entry));
+					if (!expressionEdits) {
+						return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}
 					return {
 						ok: true,
 						edits: [...tagEdits3, ...expressionEdits],
@@ -1504,8 +1768,10 @@ const ${stableLocal} = require('@tamagui/core')._withStableStyle(${nativeLocal},
 					origin: span
 				}));
 				if (input.element.form !== "jsx") {
-					const propsEdits = compiledPropsEdits(input, styleEntries, styleContent);
-					if (!propsEdits) return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					const propsEdits = compiledPropsEdits(input, styleEntries, styleContent, (entry) => spreadReplacement(input.element.form, entry));
+					if (!propsEdits) {
+						return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}
 					return {
 						ok: true,
 						edits: [...tagEdits2, ...propsEdits],
@@ -1518,23 +1784,26 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 						flattened: true
 					};
 				}
-				if (styleEntries.length === 0) return {
-					ok: true,
-					edits: [...tagEdits2, {
-						start: input.element.component.span.end,
-						end: input.element.component.span.end,
-						content: ` style={${nativeStyleSource}}`,
-						origin: input.element.component.span
-					}],
-					css: [],
-					imports: [...nativeStyleImports, {
-						content: `
+				if (styleEntries.length === 0) {
+					return {
+						ok: true,
+						edits: [...tagEdits2, {
+							start: input.element.component.span.end,
+							end: input.element.component.span.end,
+							content: ` style={${nativeStyleSource}}`,
+							origin: input.element.component.span
+						}],
+						css: [],
+						imports: [...nativeStyleImports, {
+							content: `
 const ${nativeLocal} = require('react-native').${nativeExport};`,
-						origin: input.element.component.span
-					}],
-					flattened: true
-				};
+							origin: input.element.component.span
+						}],
+						flattened: true
+					};
+				}
 				const [first2, ...rest2] = styleEntries;
+				const firstNonStyle2 = first2 ? spreadReplacement("jsx", first2) : "";
 				return {
 					ok: true,
 					edits: [
@@ -1543,13 +1812,13 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 						{
 							start: first2.span.start,
 							end: first2.span.end,
-							content: `style={${nativeStyleSource}}`,
+							content: [`style={${nativeStyleSource}}`, firstNonStyle2].filter(Boolean).join(" "),
 							origin: first2.span
 						},
 						...rest2.map((entry) => ({
 							start: entry.span.start,
 							end: entry.span.end,
-							content: "",
+							content: spreadReplacement("jsx", entry),
 							origin: entry.span
 						}))
 					],
@@ -1565,60 +1834,112 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 			const artifacts = extractedStyleArtifacts(split, props, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
 			const className = artifacts.className;
 			const rawInlineStyle = split.viewProps?.style;
-			const inlineStyle = staticObject(rawInlineStyle) && !rawInlineStyle["$$css"] && Object.keys(rawInlineStyle).length > 0 ? rawInlineStyle : null;
-			if (rawInlineStyle && !inlineStyle && !isSerializableNativeStyle(rawInlineStyle)) return bailout(input, "local/unsupported-target", "Web inline style output is not a static serializable value");
+			const inlineStyle = staticObject(rawInlineStyle) && Object.keys(rawInlineStyle).length > 0 ? rawInlineStyle : null;
+			if (rawInlineStyle && !inlineStyle && !isSerializableNativeStyle(rawInlineStyle)) {
+				return bailout(input, "local/unsupported-target", "Web inline style output is not a static serializable value");
+			}
 			const programCSS = [];
 			const programClassSources = [];
-			if (domStyleProgram?.kind === "prop" && domStyleProgram.value.kind === "dom-style") for (const item of domStyleProgram.value.items) {
-				if (item.value.kind !== "static" || !staticObject(item.value.value)) return bailout(input, "local/dynamic-style-value", "Every style() handle in a style array must be statically evaluable", item.value.span);
-				const itemSplit = resolveSplitStyles(item.value.value, partialStaticConfig(component.staticConfig));
-				if (!itemSplit) return bailout(input, "local/style-resolution-failed", "A style() handle could not be resolved", item.value.span);
-				const itemInline = itemSplit.viewProps?.style;
-				if (staticObject(itemInline) && !itemInline["$$css"] && Object.keys(itemInline).length > 0) return bailout(input, "local/unsupported-target", "Conditional web style() handles must lower to CSS classes", item.value.span);
-				const itemArtifacts = extractedStyleArtifacts(itemSplit, item.value.value, options.tamaguiConfig, false);
-				programCSS.push(...itemArtifacts.css);
-				if (itemArtifacts.className) {
-					const condition = item.condition ? input.source.slice(item.condition.start, item.condition.end) : null;
-					programClassSources.push(condition ? `(${condition}) && ${JSON.stringify(itemArtifacts.className)}` : JSON.stringify(itemArtifacts.className));
+			if (domStyleProgram?.kind === "prop" && domStyleProgram.value.kind === "dom-style") {
+				for (const item of domStyleProgram.value.items) {
+					if (item.value.kind !== "static" || !staticObject(item.value.value)) {
+						return bailout(input, "local/dynamic-style-value", "Every style() handle in a style array must be statically evaluable", item.value.span);
+					}
+					const itemSplit = resolveSplitStyles(item.value.value, partialStaticConfig(component.staticConfig));
+					if (!itemSplit) {
+						return bailout(input, "local/style-resolution-failed", "A style() handle could not be resolved", item.value.span);
+					}
+					const itemInline = itemSplit.viewProps?.style;
+					if (staticObject(itemInline) && Object.keys(itemInline).length > 0) {
+						return bailout(input, "local/unsupported-target", "Conditional web style() handles must lower to CSS classes", item.value.span);
+					}
+					const itemArtifacts = extractedStyleArtifacts(itemSplit, item.value.value, options.tamaguiConfig, false);
+					programCSS.push(...itemArtifacts.css);
+					if (itemArtifacts.className) {
+						const condition = item.condition ? input.source.slice(item.condition.start, item.condition.end) : null;
+						programClassSources.push(condition ? `(${condition}) && ${JSON.stringify(itemArtifacts.className)}` : JSON.stringify(itemArtifacts.className));
+					}
 				}
 			}
-			let webClassName = className;
+			const baseStaticClasses = new Set(className.split(" ").filter(Boolean));
+			const staticClasses = new Set(baseStaticClasses);
 			const webConditionalCSS = [];
+			const webConditionalKeys = /* @__PURE__ */ new Set();
 			const webConditionalEntries = supportsWebConditionalClasses ? dynamicStyleEntries.filter((entry) => entry.value.kind === "conditional") : [];
 			for (const entry of webConditionalEntries) {
+				let serializeWebTree = function(node) {
+					if (node.kind === "leaf") {
+						const artifacts2 = leafArtifactsMap.get(node);
+						const only = artifacts2 ? artifacts2.classes.filter((item) => !sharedInConditional.has(item)) : [];
+						return JSON.stringify(only.join(" "));
+					}
+					const test = input.source.slice(node.test.start, node.test.end);
+					const truePart = serializeWebTree(node.whenTrue);
+					const falsePart = serializeWebTree(node.whenFalse);
+					return `(${test}) ? ${truePart} : ${falsePart}`;
+				};
 				if (entry.value.kind !== "conditional") continue;
-				const branches = [];
-				for (const branchValue of [entry.value.whenTrue, entry.value.whenFalse]) {
-					const branchSplit = resolveSplitStyles({
-						...completeProps,
-						[entry.name]: branchValue
-					}, component.staticConfig, cssAnimationDriver, component.displayName);
-					if (!branchSplit) return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch could not be resolved`, entry.value.span);
+				const tree = entry.value.tree;
+				const leaves = collectLeaves(tree);
+				const leafArtifactsMap = /* @__PURE__ */ new Map();
+				const entryConditionalKeys = /* @__PURE__ */ new Set();
+				for (const leaf of leaves) {
+					const { branchProps, branchCompleteProps } = propsForConditional(entry, leaf.value);
+					const branchSplit = resolveSplitStyles(branchCompleteProps, component.staticConfig, cssAnimationDriver, component.displayName);
+					if (!branchSplit) {
+						return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch could not be resolved`, entry.value.span);
+					}
 					for (const viewPropsKey of /* @__PURE__ */ new Set([...Object.keys(branchSplit.viewProps ?? {}), ...Object.keys(split.viewProps ?? {})])) {
 						if (viewPropsKey === "className") continue;
-						if (JSON.stringify(branchSplit.viewProps?.[viewPropsKey]) !== JSON.stringify(split.viewProps?.[viewPropsKey])) return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch changes ${viewPropsKey}, which conditional classes cannot express`, entry.value.span);
+						if (JSON.stringify(branchSplit.viewProps?.[viewPropsKey]) !== JSON.stringify(split.viewProps?.[viewPropsKey])) {
+							return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch changes ${viewPropsKey}, which conditional classes cannot express`, entry.value.span);
+						}
 					}
-					const branchArtifacts = extractedStyleArtifacts(branchSplit, {
-						...props,
-						[entry.name]: branchValue
-					}, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
-					branches.push({
+					const changedKeys = /* @__PURE__ */ new Set();
+					for (const key of /* @__PURE__ */ new Set([...Object.keys(branchSplit.classNames ?? {}), ...Object.keys(split.classNames ?? {})])) {
+						if (JSON.stringify(branchSplit.classNames?.[key]) !== JSON.stringify(split.classNames?.[key])) {
+							changedKeys.add(key);
+						}
+					}
+					const branchStyle = branchSplit.viewProps?.style;
+					const baseStyle = split.viewProps?.style;
+					if (staticObject(branchStyle) || staticObject(baseStyle)) {
+						for (const key of /* @__PURE__ */ new Set([...Object.keys(staticObject(branchStyle) ? branchStyle : {}), ...Object.keys(staticObject(baseStyle) ? baseStyle : {})])) {
+							if (JSON.stringify(staticObject(branchStyle) ? branchStyle[key] : void 0) !== JSON.stringify(staticObject(baseStyle) ? baseStyle[key] : void 0)) {
+								changedKeys.add(key);
+							}
+						}
+					}
+					for (const key of changedKeys) {
+						if (webConditionalKeys.has(key)) {
+							return bailout(input, "local/dynamic-style-value", `Multiple conditionals contribute ${key}; their interaction cannot be resolved per-branch`, entry.value.span);
+						}
+						entryConditionalKeys.add(key);
+					}
+					const branchArtifacts = extractedStyleArtifacts(branchSplit, branchProps, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
+					leafArtifactsMap.set(leaf, {
 						classes: branchArtifacts.className.split(" ").filter(Boolean),
 						css: branchArtifacts.css
 					});
 				}
-				const [whenTrue, whenFalse] = branches;
-				const shared = new Set(whenTrue.classes.filter((item) => whenFalse.classes.includes(item)));
-				const trueOnly = whenTrue.classes.filter((item) => !shared.has(item));
-				const falseOnly = whenFalse.classes.filter((item) => !shared.has(item));
-				webClassName = [...shared].join(" ");
-				webConditionalCSS.push(...whenTrue.css, ...whenFalse.css);
-				if (trueOnly.length > 0 || falseOnly.length > 0) {
-					const test = input.source.slice(entry.value.test.start, entry.value.test.end);
-					programClassSources.push(`(${test}) ? ${JSON.stringify(trueOnly.join(" "))} : ${JSON.stringify(falseOnly.join(" "))}`);
+				for (const key of entryConditionalKeys) webConditionalKeys.add(key);
+				for (const artifacts2 of leafArtifactsMap.values()) {
+					webConditionalCSS.push(...artifacts2.css);
 				}
+				const allLeafArtifacts = leaves.map((l) => leafArtifactsMap.get(l));
+				const sharedInConditional = new Set(allLeafArtifacts[0]?.classes.filter((c) => allLeafArtifacts.every((a) => a.classes.includes(c))) ?? []);
+				for (const cls of baseStaticClasses) {
+					if (!sharedInConditional.has(cls)) staticClasses.delete(cls);
+				}
+				for (const cls of sharedInConditional) {
+					if (!baseStaticClasses.has(cls)) staticClasses.add(cls);
+				}
+				const classExpr = serializeWebTree(tree);
+				programClassSources.push(classExpr);
 			}
-			const classNameExpression = programClassSources.length > 0 ? `[${[JSON.stringify(webClassName), ...programClassSources].join(", ")}].filter(Boolean).join(" ")` : null;
+			const webClassName = [...staticClasses].join(" ");
+			const hasStyleProgram = programClassSources.length > 0;
+			const classNameExpression = hasStyleProgram ? `[${[JSON.stringify(webClassName), ...programClassSources].join(", ")}].filter(Boolean).join(" ")` : null;
 			const serializedInlineStyle = serializedStyle(inlineStyle, dynamicHostStyleProperties ?? []);
 			const jsxWebStyle = classNameExpression ? [`className={${classNameExpression}}`, serializedInlineStyle ? `style={${serializedInlineStyle}}` : ""].filter(Boolean).join(" ") : jsxStyleAttributes(webClassName, inlineStyle, dynamicHostStyleProperties ?? []);
 			const objectWebStyle = classNameExpression ? [`className: ${classNameExpression}`, serializedInlineStyle ? `style: ${serializedInlineStyle}` : ""].filter(Boolean).join(", ") : objectStyleProperties(webClassName, inlineStyle, dynamicHostStyleProperties ?? []);
@@ -1630,8 +1951,10 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 			const webExtraProps = serializedProps(input.element.form, webDOMResult.additions);
 			if (input.element.form !== "jsx") {
 				const replacement = [objectWebStyle, webExtraProps].filter(Boolean).join(", ");
-				const propsEdits = compiledPropsEdits(input, styleEntries, replacement);
-				if (!propsEdits) return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+				const propsEdits = compiledPropsEdits(input, styleEntries, replacement, (entry) => spreadReplacement(input.element.form, entry));
+				if (!propsEdits) {
+					return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+				}
 				return {
 					ok: true,
 					edits: [
@@ -1664,7 +1987,12 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 				};
 			}
 			const [first, ...rest] = styleEntries;
-			const attributes = [jsxWebStyle, webExtraProps].filter(Boolean).join(" ");
+			const firstNonStyle = first ? spreadReplacement("jsx", first) : "";
+			const attributes = [
+				jsxWebStyle,
+				webExtraProps,
+				firstNonStyle
+			].filter(Boolean).join(" ");
 			return {
 				ok: true,
 				edits: [
@@ -1679,7 +2007,7 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 					...rest.map((entry) => ({
 						start: entry.span.start,
 						end: entry.span.end,
-						content: "",
+						content: spreadReplacement("jsx", entry),
 						origin: entry.span
 					}))
 				],