@tamagui/static 3.0.0-beta.1473.1 → 3.0.0-beta.1537.1

package/dist/cjs/compilerHost.cjs

@@ -515,6 +515,77 @@ const nativePointerEventProps = /* @__PURE__ */ new Set([
 	"onPointerMove",
 	"onPointerUp"
 ]);
+const nativeShorthandFamilies = [
+	[
+		"padding",
+		[
+			"paddingTop",
+			"paddingRight",
+			"paddingBottom",
+			"paddingLeft"
+		],
+		/^padding/
+	],
+	[
+		"margin",
+		[
+			"marginTop",
+			"marginRight",
+			"marginBottom",
+			"marginLeft"
+		],
+		/^margin/
+	],
+	[
+		"borderWidth",
+		[
+			"borderTopWidth",
+			"borderRightWidth",
+			"borderBottomWidth",
+			"borderLeftWidth"
+		],
+		/^border.*Width$/
+	],
+	[
+		"borderColor",
+		[
+			"borderTopColor",
+			"borderRightColor",
+			"borderBottomColor",
+			"borderLeftColor"
+		],
+		/^border.*Color$/
+	],
+	[
+		"borderRadius",
+		[
+			"borderTopLeftRadius",
+			"borderTopRightRadius",
+			"borderBottomRightRadius",
+			"borderBottomLeftRadius"
+		],
+		/^border.*Radius$/
+	]
+];
+function collapseNativeShorthands(style) {
+	if (!staticObject(style)) return style;
+	const keys = Object.keys(style);
+	const collapsed = /* @__PURE__ */ new Map();
+	for (const [shorthand, sides, family] of nativeShorthandFamilies) {
+		const value = style[sides[0]];
+		if (value !== void 0 && !(shorthand in style) && sides.every((side) => style[side] === value) && keys.filter((key) => family.test(key)).length === sides.length) {
+			for (const side of sides) collapsed.set(side, shorthand);
+		}
+	}
+	if (!collapsed.size) return style;
+	const out = {};
+	for (const key of keys) {
+		const shorthand = collapsed.get(key);
+		if (!shorthand) out[key] = style[key];
+		else if (!(shorthand in out)) out[shorthand] = style[key];
+	}
+	return out;
+}
 function isSerializableNativeStyle(value) {
 	if (value == null || typeof value === "number" || typeof value === "boolean") {
 		return true;
@@ -1002,6 +1073,12 @@ function createTamaguiCompilerHost(options) {
 		if (dynamic?.type !== "string" || !dynamic.values?.length) return null;
 		return dynamic.values.map(String);
 	};
+	const nativeDynamicShape = (name, component, dynamic) => {
+		if (!dynamic || !canLowerConditionalStyleProp(name, component)) return null;
+		if (dynamic.values?.length) return "domain";
+		if (dynamic.type === "number" && directStyleName(name, component)) return "number";
+		return null;
+	};
 	const conditionalClassEntry = (entry, component) => entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component) || frontendClassDomain(entry, component) !== null;
 	const isInvalidHostStyleProp = (name, component) => {
 		const staticConfig = component.staticConfig;
@@ -1147,7 +1224,7 @@ function createTamaguiCompilerHost(options) {
 	return {
 		resolveComponent: resolve,
 		isStyleProp,
-		canLowerDynamicStyleProp(name, component, valueKind) {
+		canLowerDynamicStyleProp(name, component, valueKind, dynamic) {
 			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) {
 				return true;
 			}
@@ -1157,7 +1234,7 @@ function createTamaguiCompilerHost(options) {
 			if (!options.disablePartialExtraction && platform === "web" && isFrontendClassName(name, component)) {
 				return true;
 			}
-			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
+			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && (directStyleName(name, component) === "opacity" || valueKind === "bailout" && nativeDynamicShape(name, component, dynamic) !== null));
 		},
 		developmentDebugInstrumentation,
 		lowerCandidate(input) {
@@ -1466,7 +1543,7 @@ function createTamaguiCompilerHost(options) {
 					message: (0, import_compiler_core.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)));
+			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) || entry.value.kind === "bailout" && nativeDynamicShape(entry.name, component, entry.value.dynamic) !== null));
 			if (dynamicStyleEntries.length > 0 && !laneACoversAll && !supportsNativeDynamicStyles && !supportsWebConditionalClasses) {
 				const entry = dynamicStyleEntries[0];
 				return bailout(input, "local/dynamic-style-value", `Style prop ${entry.kind === "prop" ? entry.name : "unknown"} could not be safely extracted`, entry.span);
@@ -1678,14 +1755,15 @@ function createTamaguiCompilerHost(options) {
 					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 usesNativeFastPath = !!themedStyleKeys && !!options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread");
 				const nativeStyleImports = [{
 					content: `
-function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(nativeStyle ?? {})}); } ${nativeStyleLocal}();`,
+function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify((usesNativeFastPath ? nativeStyle : collapseNativeShorthands(nativeStyle)) ?? {})}); } ${nativeStyleLocal}();`,
 					origin: input.element.component.span
 				}];
 				const nativeStyleSource = `${nativeStyleLocal}._ ?? ${nativeStyleLocal}()`;
 				let nativeFastPath;
-				if (themedStyleKeys && options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread")) {
+				if (usesNativeFastPath) {
 					const mappingLocal = unusedIdentifier(input.source, `__TamaguiNativeMapping${input.element.span.start}`);
 					nativeFastPath = {
 						mappingLocal,
@@ -1904,7 +1982,45 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 					const conditionalParts = [];
 					const conditionalKeys = /* @__PURE__ */ new Set();
 					const baseStyleForDiff = staticObject(nativeStyleResolved) ? nativeStyleResolved : {};
+					const valueDiff = (entry, value, what) => {
+						const { branchCompleteProps } = propsForConditional(entry, value);
+						const branchSplit = resolveSplitStyles(branchCompleteProps, component.staticConfig, cssAnimationDriver, component.displayName);
+						const branchStyle = branchSplit?.viewProps?.style ?? {};
+						if (!staticObject(branchStyle)) {
+							return `${what} did not resolve to a static native style`;
+						}
+						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 `${what} changes ${viewPropsKey}, which the compiled style array cannot express`;
+							}
+						}
+						for (const key of Object.keys(baseStyleForDiff)) {
+							if (!(key in branchStyle)) {
+								return `${what} removes ${key}, which an additive style array cannot express`;
+							}
+						}
+						const diff = {};
+						for (const [key, value2] of Object.entries(branchStyle)) {
+							if (JSON.stringify(baseStyleForDiff[key]) !== JSON.stringify(value2)) {
+								diff[key] = value2;
+							}
+						}
+						if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
+							return `${what} style is not statically representable`;
+						}
+						return diff;
+					};
+					const claimKeys = (entry, keys) => {
+						for (const key of keys) {
+							if (conditionalKeys.has(key)) {
+								return bailout(input, "local/dynamic-style-value", `Multiple dynamic props contribute ${key}; their interaction cannot be resolved at compile time`, entry.value.span);
+							}
+						}
+						return null;
+					};
 					for (const entry of dynamicStyleEntries) {
+						const shape = entry.value.kind === "bailout" ? nativeDynamicShape(entry.name, component, entry.value.dynamic) : null;
 						if (entry.value.kind === "conditional" && directStyleName(entry.name, component) !== "opacity") {
 							let serializeNativeTree = function(node) {
 								if (node.kind === "leaf") {
@@ -1919,47 +2035,54 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 							const leaves = (0, import_compiler_core.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);
-									}
+								const diff = valueDiff(entry, leaf.value, `Conditional ${entry.name} branch`);
+								if (typeof diff === "string") {
+									return bailout(input, "local/dynamic-style-value", diff, entry.value.span);
 								}
+								const conflict = claimKeys(entry, Object.keys(diff));
+								if (conflict) return conflict;
 								leafDiffs.set(leaf, diff);
 							}
 							for (const diff of leafDiffs.values()) {
 								for (const key of Object.keys(diff)) conditionalKeys.add(key);
 							}
 							conditionalParts.push(serializeNativeTree(tree));
+						} else if (shape === "domain" && entry.value.kind === "bailout") {
+							const lookup = [];
+							const keys = /* @__PURE__ */ new Set();
+							for (const value of entry.value.dynamic.values) {
+								const diff = valueDiff(entry, value, `${entry.name} value ${JSON.stringify(value)}`);
+								if (typeof diff === "string") {
+									return bailout(input, "local/dynamic-style-value", diff, entry.value.span);
+								}
+								for (const key of Object.keys(diff)) keys.add(key);
+								lookup.push(`${JSON.stringify(String(value))}: ${JSON.stringify(diff)}`);
+							}
+							const conflict = claimKeys(entry, keys);
+							if (conflict) return conflict;
+							for (const key of keys) conditionalKeys.add(key);
+							const index = expressions.length;
+							expressions.push(input.source.slice(entry.value.span.start, entry.value.span.end));
+							conditionalParts.push(`({ ${lookup.join(", ")} })[expressions[${index}]]`);
 						} else {
+							const key = directStyleName(entry.name, component);
+							if (shape === "number") {
+								for (const probe of [7.25, 1031]) {
+									const diff = valueDiff(entry, probe, `${entry.name} number`);
+									if (typeof diff === "string" || JSON.stringify(diff) !== JSON.stringify({ [key]: probe })) {
+										return bailout(input, "local/dynamic-style-value", `Style prop ${entry.name} transforms numbers on native, so its runtime value cannot pass through`, entry.value.span);
+									}
+								}
+								if (key in baseStyleForDiff) {
+									return bailout(input, "local/dynamic-style-value", `Style prop ${entry.name} overlaps a static ${key}`, entry.value.span);
+								}
+								const conflict = claimKeys(entry, [key]);
+								if (conflict) return conflict;
+								conditionalKeys.add(key);
+							}
 							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}]`);
+							plainDynamicParts.push(`${JSON.stringify(key)}: expressions[${index}]`);
 						}
 					}
 					const dynamicStyle = plainDynamicParts.join(", ");

package/dist/esm/compilerHost.mjs

@@ -490,6 +490,77 @@ const nativePointerEventProps = /* @__PURE__ */ new Set([
 	"onPointerMove",
 	"onPointerUp"
 ]);
+const nativeShorthandFamilies = [
+	[
+		"padding",
+		[
+			"paddingTop",
+			"paddingRight",
+			"paddingBottom",
+			"paddingLeft"
+		],
+		/^padding/
+	],
+	[
+		"margin",
+		[
+			"marginTop",
+			"marginRight",
+			"marginBottom",
+			"marginLeft"
+		],
+		/^margin/
+	],
+	[
+		"borderWidth",
+		[
+			"borderTopWidth",
+			"borderRightWidth",
+			"borderBottomWidth",
+			"borderLeftWidth"
+		],
+		/^border.*Width$/
+	],
+	[
+		"borderColor",
+		[
+			"borderTopColor",
+			"borderRightColor",
+			"borderBottomColor",
+			"borderLeftColor"
+		],
+		/^border.*Color$/
+	],
+	[
+		"borderRadius",
+		[
+			"borderTopLeftRadius",
+			"borderTopRightRadius",
+			"borderBottomRightRadius",
+			"borderBottomLeftRadius"
+		],
+		/^border.*Radius$/
+	]
+];
+function collapseNativeShorthands(style) {
+	if (!staticObject(style)) return style;
+	const keys = Object.keys(style);
+	const collapsed = /* @__PURE__ */ new Map();
+	for (const [shorthand, sides, family] of nativeShorthandFamilies) {
+		const value = style[sides[0]];
+		if (value !== void 0 && !(shorthand in style) && sides.every((side) => style[side] === value) && keys.filter((key) => family.test(key)).length === sides.length) {
+			for (const side of sides) collapsed.set(side, shorthand);
+		}
+	}
+	if (!collapsed.size) return style;
+	const out = {};
+	for (const key of keys) {
+		const shorthand = collapsed.get(key);
+		if (!shorthand) out[key] = style[key];
+		else if (!(shorthand in out)) out[shorthand] = style[key];
+	}
+	return out;
+}
 function isSerializableNativeStyle(value) {
 	if (value == null || typeof value === "number" || typeof value === "boolean") {
 		return true;
@@ -977,6 +1048,12 @@ function createTamaguiCompilerHost(options) {
 		if (dynamic?.type !== "string" || !dynamic.values?.length) return null;
 		return dynamic.values.map(String);
 	};
+	const nativeDynamicShape = (name, component, dynamic) => {
+		if (!dynamic || !canLowerConditionalStyleProp(name, component)) return null;
+		if (dynamic.values?.length) return "domain";
+		if (dynamic.type === "number" && directStyleName(name, component)) return "number";
+		return null;
+	};
 	const conditionalClassEntry = (entry, component) => entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component) || frontendClassDomain(entry, component) !== null;
 	const isInvalidHostStyleProp = (name, component) => {
 		const staticConfig = component.staticConfig;
@@ -1122,7 +1199,7 @@ function createTamaguiCompilerHost(options) {
 	return {
 		resolveComponent: resolve,
 		isStyleProp,
-		canLowerDynamicStyleProp(name, component, valueKind) {
+		canLowerDynamicStyleProp(name, component, valueKind, dynamic) {
 			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) {
 				return true;
 			}
@@ -1132,7 +1209,7 @@ function createTamaguiCompilerHost(options) {
 			if (!options.disablePartialExtraction && platform === "web" && isFrontendClassName(name, component)) {
 				return true;
 			}
-			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
+			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && (directStyleName(name, component) === "opacity" || valueKind === "bailout" && nativeDynamicShape(name, component, dynamic) !== null));
 		},
 		developmentDebugInstrumentation,
 		lowerCandidate(input) {
@@ -1441,7 +1518,7 @@ function createTamaguiCompilerHost(options) {
 					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)));
+			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) || entry.value.kind === "bailout" && nativeDynamicShape(entry.name, component, entry.value.dynamic) !== null));
 			if (dynamicStyleEntries.length > 0 && !laneACoversAll && !supportsNativeDynamicStyles && !supportsWebConditionalClasses) {
 				const entry = dynamicStyleEntries[0];
 				return bailout(input, "local/dynamic-style-value", `Style prop ${entry.kind === "prop" ? entry.name : "unknown"} could not be safely extracted`, entry.span);
@@ -1653,14 +1730,15 @@ function createTamaguiCompilerHost(options) {
 					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 usesNativeFastPath = !!themedStyleKeys && !!options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread");
 				const nativeStyleImports = [{
 					content: `
-function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(nativeStyle ?? {})}); } ${nativeStyleLocal}();`,
+function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify((usesNativeFastPath ? nativeStyle : collapseNativeShorthands(nativeStyle)) ?? {})}); } ${nativeStyleLocal}();`,
 					origin: input.element.component.span
 				}];
 				const nativeStyleSource = `${nativeStyleLocal}._ ?? ${nativeStyleLocal}()`;
 				let nativeFastPath;
-				if (themedStyleKeys && options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread")) {
+				if (usesNativeFastPath) {
 					const mappingLocal = unusedIdentifier(input.source, `__TamaguiNativeMapping${input.element.span.start}`);
 					nativeFastPath = {
 						mappingLocal,
@@ -1879,7 +1957,45 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 					const conditionalParts = [];
 					const conditionalKeys = /* @__PURE__ */ new Set();
 					const baseStyleForDiff = staticObject(nativeStyleResolved) ? nativeStyleResolved : {};
+					const valueDiff = (entry, value, what) => {
+						const { branchCompleteProps } = propsForConditional(entry, value);
+						const branchSplit = resolveSplitStyles(branchCompleteProps, component.staticConfig, cssAnimationDriver, component.displayName);
+						const branchStyle = branchSplit?.viewProps?.style ?? {};
+						if (!staticObject(branchStyle)) {
+							return `${what} did not resolve to a static native style`;
+						}
+						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 `${what} changes ${viewPropsKey}, which the compiled style array cannot express`;
+							}
+						}
+						for (const key of Object.keys(baseStyleForDiff)) {
+							if (!(key in branchStyle)) {
+								return `${what} removes ${key}, which an additive style array cannot express`;
+							}
+						}
+						const diff = {};
+						for (const [key, value2] of Object.entries(branchStyle)) {
+							if (JSON.stringify(baseStyleForDiff[key]) !== JSON.stringify(value2)) {
+								diff[key] = value2;
+							}
+						}
+						if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
+							return `${what} style is not statically representable`;
+						}
+						return diff;
+					};
+					const claimKeys = (entry, keys) => {
+						for (const key of keys) {
+							if (conditionalKeys.has(key)) {
+								return bailout(input, "local/dynamic-style-value", `Multiple dynamic props contribute ${key}; their interaction cannot be resolved at compile time`, entry.value.span);
+							}
+						}
+						return null;
+					};
 					for (const entry of dynamicStyleEntries) {
+						const shape = entry.value.kind === "bailout" ? nativeDynamicShape(entry.name, component, entry.value.dynamic) : null;
 						if (entry.value.kind === "conditional" && directStyleName(entry.name, component) !== "opacity") {
 							let serializeNativeTree = function(node) {
 								if (node.kind === "leaf") {
@@ -1894,47 +2010,54 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 							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);
-									}
+								const diff = valueDiff(entry, leaf.value, `Conditional ${entry.name} branch`);
+								if (typeof diff === "string") {
+									return bailout(input, "local/dynamic-style-value", diff, entry.value.span);
 								}
+								const conflict = claimKeys(entry, Object.keys(diff));
+								if (conflict) return conflict;
 								leafDiffs.set(leaf, diff);
 							}
 							for (const diff of leafDiffs.values()) {
 								for (const key of Object.keys(diff)) conditionalKeys.add(key);
 							}
 							conditionalParts.push(serializeNativeTree(tree));
+						} else if (shape === "domain" && entry.value.kind === "bailout") {
+							const lookup = [];
+							const keys = /* @__PURE__ */ new Set();
+							for (const value of entry.value.dynamic.values) {
+								const diff = valueDiff(entry, value, `${entry.name} value ${JSON.stringify(value)}`);
+								if (typeof diff === "string") {
+									return bailout(input, "local/dynamic-style-value", diff, entry.value.span);
+								}
+								for (const key of Object.keys(diff)) keys.add(key);
+								lookup.push(`${JSON.stringify(String(value))}: ${JSON.stringify(diff)}`);
+							}
+							const conflict = claimKeys(entry, keys);
+							if (conflict) return conflict;
+							for (const key of keys) conditionalKeys.add(key);
+							const index = expressions.length;
+							expressions.push(input.source.slice(entry.value.span.start, entry.value.span.end));
+							conditionalParts.push(`({ ${lookup.join(", ")} })[expressions[${index}]]`);
 						} else {
+							const key = directStyleName(entry.name, component);
+							if (shape === "number") {
+								for (const probe of [7.25, 1031]) {
+									const diff = valueDiff(entry, probe, `${entry.name} number`);
+									if (typeof diff === "string" || JSON.stringify(diff) !== JSON.stringify({ [key]: probe })) {
+										return bailout(input, "local/dynamic-style-value", `Style prop ${entry.name} transforms numbers on native, so its runtime value cannot pass through`, entry.value.span);
+									}
+								}
+								if (key in baseStyleForDiff) {
+									return bailout(input, "local/dynamic-style-value", `Style prop ${entry.name} overlaps a static ${key}`, entry.value.span);
+								}
+								const conflict = claimKeys(entry, [key]);
+								if (conflict) return conflict;
+								conditionalKeys.add(key);
+							}
 							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}]`);
+							plainDynamicParts.push(`${JSON.stringify(key)}: expressions[${index}]`);
 						}
 					}
 					const dynamicStyle = plainDynamicParts.join(", ");