@tamagui/static 3.0.0-beta.889.1 → 3.0.0-beta.901.1

package/dist/cjs/compilerHost.cjs

@@ -963,7 +963,17 @@ function createTamaguiCompilerHost(options) {
 		"animatedBy",
 		"render"
 	]);
-	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && !runtimeOnlyStyleProps.has(name);
+	const isFrontendClassName = (name, component) => name === "className" && !!component.staticConfig.styleFrontend;
+	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && (!runtimeOnlyStyleProps.has(name) || isFrontendClassName(name, component));
+	const frontendClassDomain = (entry, component) => {
+		if (entry.kind !== "prop" || entry.value.kind !== "bailout" || !isFrontendClassName(entry.name, component)) {
+			return null;
+		}
+		const dynamic = entry.value.dynamic;
+		if (dynamic?.type !== "string" || !dynamic.values?.length) return null;
+		return dynamic.values.map(String);
+	};
+	const conditionalClassEntry = (entry, component) => entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component) || frontendClassDomain(entry, component) !== null;
 	const isInvalidHostStyleProp = (name, component) => {
 		const staticConfig = component.staticConfig;
 		const validStyles = staticConfig.validStyles || (staticConfig.isInput ? import_helpers.stylePropsInput : staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles);
@@ -1115,6 +1125,9 @@ function createTamaguiCompilerHost(options) {
 			if (component.staticConfig.resolvers?.length) {
 				return false;
 			}
+			if (!options.disablePartialExtraction && platform === "web" && isFrontendClassName(name, component)) {
+				return true;
+			}
 			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
 		},
 		developmentDebugInstrumentation,
@@ -1182,7 +1195,33 @@ function createTamaguiCompilerHost(options) {
 			if (platform === "native" && component.domTag === "input" && typeof props.type === "string" && !import_dom.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));
+			let styleObjectStatic = null;
+			const styleMemberEntries = [];
+			for (const entry of input.element.entries) {
+				if (entry.kind !== "prop" || entry.name !== "style" || entry.value.kind !== "object") {
+					continue;
+				}
+				styleObjectStatic = {};
+				for (const member of entry.value.members) {
+					if (member.value.kind === "static") {
+						styleObjectStatic[member.name] = member.value.value;
+						continue;
+					}
+					if (!isStyleProp(member.name, component)) {
+						return bailout(input, "local/dynamic-style-value", `Style prop ${member.name} could not be evaluated`, member.span);
+					}
+					styleMemberEntries.push({
+						kind: "prop",
+						name: member.name,
+						span: member.span,
+						value: member.value,
+						styleMember: true
+					});
+				}
+				if (Object.keys(styleObjectStatic).length === 0) styleObjectStatic = null;
+			}
+			if (styleObjectStatic) props.style = styleObjectStatic;
+			const dynamicStyleEntries = [...input.element.entries.filter((entry) => entry.kind === "prop" && (entry.value.kind === "bailout" || entry.value.kind === "conditional") && isStyleProp(entry.name, component)), ...styleMemberEntries];
 			{
 				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));
@@ -1213,66 +1252,92 @@ function createTamaguiCompilerHost(options) {
 			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;
+			let laneAEntries = [];
+			const laneAOwners = /* @__PURE__ */ new Set();
+			const laneAMemberOwners = /* @__PURE__ */ new Set();
+			const conflictsWithInline = (owners, dynamicOwners, memberOwners) => [...owners].some((owner) => !memberOwners.has(owner) && cssOwnersConflict(/* @__PURE__ */ new Set([owner]), dynamicOwners));
+			const laneAAttempts = [dynamicStyleEntries];
+			{
+				const rest2 = dynamicStyleEntries.filter((entry) => !conditionalClassEntry(entry, component));
+				if (rest2.length > 0 && rest2.length < dynamicStyleEntries.length) {
+					laneAAttempts.push(rest2);
+				}
+			}
 			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;
-					}
-					const name = directStyleName(entry.name, component);
-					if (!name || seen.has(name)) {
-						properties.length = 0;
-						break;
-					}
-					const owners = dynamicStyleOwners(name, component.staticConfig);
-					if (!owners) {
-						properties.length = 0;
-						break;
-					}
-					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.has(name)) {
-						const dynamic = entry.value.dynamic;
-						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));
-								const atomics = Object.values(split2?.rulesToInsert ?? {});
-								if (atomics.length !== 1 || atomics[0]?.[import_helpers.StyleObjectProperty] !== name || atomics[0]?.[import_helpers.StyleObjectValue] !== value) {
-									valuesStayLiteral = false;
-									break;
-								}
-							}
-							if (valuesStayLiteral) {
+				for (const attempt of laneAAttempts) {
+					const seen = /* @__PURE__ */ new Set();
+					const properties = [];
+					const dynamicOwners = /* @__PURE__ */ new Set();
+					const memberOwners = /* @__PURE__ */ new Set();
+					for (const entry of attempt) {
+						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;
+							break;
+						}
+						const owners = dynamicStyleOwners(name, component.staticConfig);
+						if (!owners) {
+							properties.length = 0;
+							break;
+						}
+						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.has(name)) {
+							const dynamic = entry.value.dynamic;
+							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));
+									const atomics = Object.values(split2?.rulesToInsert ?? {});
+									if (atomics.length !== 1 || atomics[0]?.[import_helpers.StyleObjectProperty] !== name || atomics[0]?.[import_helpers.StyleObjectValue] !== value) {
+										valuesStayLiteral = false;
+										break;
+									}
+								}
+								if (valuesStayLiteral) {
+									property = `${JSON.stringify(name)}: (${expression})`;
+								}
 							}
 						}
+						if (!property) {
+							properties.length = 0;
+							break;
+						}
+						seen.add(name);
+						for (const owner of owners) {
+							dynamicOwners.add(owner);
+							if (entry.styleMember) memberOwners.add(owner);
+						}
+						properties.push(property);
 					}
-					if (!property) {
-						properties.length = 0;
+					if (properties.length === attempt.length && !input.element.entries.some((entry) => {
+						if (entry.kind !== "prop" || entry.value.kind !== "static") return false;
+						const name = directStyleName(entry.name, component);
+						if (!name) return false;
+						const owners = styleOwners(name, entry.value.value, component.staticConfig);
+						return !!owners && conflictsWithInline(owners, dynamicOwners, memberOwners);
+					}) && !Object.entries(staticObject(props.style) ? props.style : {}).some(([name, value]) => {
+						const owners = styleOwners(name, value, component.staticConfig);
+						return !!owners && cssOwnersConflict(owners, dynamicOwners);
+					})) {
+						dynamicHostStyleProperties = properties;
+						laneAEntries = attempt;
+						for (const owner of dynamicOwners) laneAOwners.add(owner);
+						for (const owner of memberOwners) laneAMemberOwners.add(owner);
 						break;
 					}
-					seen.add(name);
-					for (const owner of owners) dynamicOwners.add(owner);
-					properties.push(property);
-				}
-				if (properties.length === dynamicStyleEntries.length && !input.element.entries.some((entry) => {
-					if (entry.kind !== "prop" || entry.value.kind !== "static") return false;
-					const name = directStyleName(entry.name, component);
-					if (!name) return false;
-					const owners = styleOwners(name, entry.value.value, component.staticConfig);
-					return !!owners && cssOwnersConflict(owners, dynamicOwners);
-				})) {
-					dynamicHostStyleProperties = properties;
 				}
 			}
-			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));
+			const laneACoversAll = dynamicHostStyleProperties !== null && laneAEntries.length === dynamicStyleEntries.length;
+			const webClassEntries = dynamicHostStyleProperties === null ? dynamicStyleEntries : dynamicStyleEntries.filter((entry) => !laneAEntries.includes(entry));
+			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && !laneACoversAll && webClassEntries.length > 0 && webClassEntries.every((entry) => conditionalClassEntry(entry, component));
 			const themeEntry = componentOnlyProp("theme");
 			const themeInverseEntry = componentOnlyProp("themeInverse");
 			const themeBoundary = themeEntry.unknown || "theme" in props;
@@ -1296,7 +1361,7 @@ function createTamaguiCompilerHost(options) {
 					message: (0, import_compiler_core.zeroRuleMessage)(5, { detail: `the animation configured on ${input.element.component.name}` })
 				});
 			}
-			if (platform === "web" && (dynamicStyleEntries.length > 0 || runtimeAnimationRequired) && dynamicHostStyleProperties === null && !supportsWebConditionalClasses && component.partialRuntimeSafe) {
+			if (platform === "web" && (dynamicStyleEntries.length > 0 || runtimeAnimationRequired) && !laneACoversAll && !supportsWebConditionalClasses && component.partialRuntimeSafe) {
 				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) {
@@ -1380,7 +1445,7 @@ function createTamaguiCompilerHost(options) {
 				});
 			}
 			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) {
+			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);
 			}
@@ -1397,6 +1462,13 @@ function createTamaguiCompilerHost(options) {
 			}
 			const propsForConditional = (target, value) => {
 				const branchProps = {};
+				if (styleObjectStatic) branchProps.style = styleObjectStatic;
+				if (target.styleMember) {
+					branchProps.style = {
+						...styleObjectStatic,
+						[target.name]: value
+					};
+				}
 				for (const entry of input.element.entries) {
 					if (entry === target) {
 						branchProps[target.name] = value;
@@ -2005,22 +2077,22 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 			const staticClasses = new Set(baseStaticClasses);
 			const webConditionalCSS = [];
 			const webConditionalKeys = /* @__PURE__ */ new Set();
-			const webConditionalEntries = supportsWebConditionalClasses ? dynamicStyleEntries.filter((entry) => entry.value.kind === "conditional") : [];
+			const webConditionalEntries = supportsWebConditionalClasses ? webClassEntries : [];
 			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(" "));
-					}
+					if (node.kind === "leaf") return JSON.stringify(leafClasses(node));
 					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 tree = entry.value.tree;
-				const leaves = (0, import_compiler_core.collectLeaves)(tree);
+				const tree = entry.value.kind === "conditional" ? entry.value.tree : null;
+				const domain = frontendClassDomain(entry, component);
+				if (!tree && !domain) continue;
+				const leaves = tree ? (0, import_compiler_core.collectLeaves)(tree) : domain.map((value) => ({
+					value,
+					dependencies: []
+				}));
 				const leafArtifactsMap = /* @__PURE__ */ new Map();
 				const entryConditionalKeys = /* @__PURE__ */ new Set();
 				for (const leaf of leaves) {
@@ -2056,6 +2128,9 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 						}
 						entryConditionalKeys.add(key);
 					}
+					if (conflictsWithInline(changedKeys, laneAOwners, laneAMemberOwners)) {
+						return bailout(input, "local/dynamic-style-value", `${entry.name} and an inline dynamic style both contribute a CSS property; their precedence cannot be resolved per-branch`, entry.value.span);
+					}
 					const branchArtifacts = extractedStyleArtifacts(branchSplit, branchProps, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
 					leafArtifactsMap.set(leaf, {
 						classes: branchArtifacts.className.split(" ").filter(Boolean),
@@ -2074,8 +2149,18 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 				for (const cls of sharedInConditional) {
 					if (!baseStaticClasses.has(cls)) staticClasses.add(cls);
 				}
-				const classExpr = serializeWebTree(tree);
-				programClassSources.push(classExpr);
+				const leafClasses = (leaf) => {
+					const artifacts2 = leafArtifactsMap.get(leaf);
+					const only = artifacts2 ? artifacts2.classes.filter((item) => !sharedInConditional.has(item)) : [];
+					return only.join(" ");
+				};
+				if (tree) {
+					programClassSources.push(serializeWebTree(tree));
+				} else {
+					const table = Object.fromEntries(leaves.map((leaf) => [leaf.value, leafClasses(leaf)]));
+					const key = input.source.slice(entry.value.span.start, entry.value.span.end);
+					programClassSources.push(`(${JSON.stringify(table)})[${key}]`);
+				}
 			}
 			const webClassName = [...staticClasses].join(" ");
 			const hasStyleProgram = programClassSources.length > 0;

package/dist/esm/compilerHost.mjs

@@ -938,7 +938,17 @@ function createTamaguiCompilerHost(options) {
 		"animatedBy",
 		"render"
 	]);
-	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && !runtimeOnlyStyleProps.has(name);
+	const isFrontendClassName = (name, component) => name === "className" && !!component.staticConfig.styleFrontend;
+	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && (!runtimeOnlyStyleProps.has(name) || isFrontendClassName(name, component));
+	const frontendClassDomain = (entry, component) => {
+		if (entry.kind !== "prop" || entry.value.kind !== "bailout" || !isFrontendClassName(entry.name, component)) {
+			return null;
+		}
+		const dynamic = entry.value.dynamic;
+		if (dynamic?.type !== "string" || !dynamic.values?.length) return null;
+		return dynamic.values.map(String);
+	};
+	const conditionalClassEntry = (entry, component) => entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component) || frontendClassDomain(entry, component) !== null;
 	const isInvalidHostStyleProp = (name, component) => {
 		const staticConfig = component.staticConfig;
 		const validStyles$1 = staticConfig.validStyles || (staticConfig.isInput ? stylePropsInput : staticConfig.isText ? stylePropsText : validStyles);
@@ -1090,6 +1100,9 @@ function createTamaguiCompilerHost(options) {
 			if (component.staticConfig.resolvers?.length) {
 				return false;
 			}
+			if (!options.disablePartialExtraction && platform === "web" && isFrontendClassName(name, component)) {
+				return true;
+			}
 			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
 		},
 		developmentDebugInstrumentation,
@@ -1157,7 +1170,33 @@ function createTamaguiCompilerHost(options) {
 			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));
+			let styleObjectStatic = null;
+			const styleMemberEntries = [];
+			for (const entry of input.element.entries) {
+				if (entry.kind !== "prop" || entry.name !== "style" || entry.value.kind !== "object") {
+					continue;
+				}
+				styleObjectStatic = {};
+				for (const member of entry.value.members) {
+					if (member.value.kind === "static") {
+						styleObjectStatic[member.name] = member.value.value;
+						continue;
+					}
+					if (!isStyleProp(member.name, component)) {
+						return bailout(input, "local/dynamic-style-value", `Style prop ${member.name} could not be evaluated`, member.span);
+					}
+					styleMemberEntries.push({
+						kind: "prop",
+						name: member.name,
+						span: member.span,
+						value: member.value,
+						styleMember: true
+					});
+				}
+				if (Object.keys(styleObjectStatic).length === 0) styleObjectStatic = null;
+			}
+			if (styleObjectStatic) props.style = styleObjectStatic;
+			const dynamicStyleEntries = [...input.element.entries.filter((entry) => entry.kind === "prop" && (entry.value.kind === "bailout" || entry.value.kind === "conditional") && isStyleProp(entry.name, component)), ...styleMemberEntries];
 			{
 				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));
@@ -1188,66 +1227,92 @@ function createTamaguiCompilerHost(options) {
 			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;
+			let laneAEntries = [];
+			const laneAOwners = /* @__PURE__ */ new Set();
+			const laneAMemberOwners = /* @__PURE__ */ new Set();
+			const conflictsWithInline = (owners, dynamicOwners, memberOwners) => [...owners].some((owner) => !memberOwners.has(owner) && cssOwnersConflict(/* @__PURE__ */ new Set([owner]), dynamicOwners));
+			const laneAAttempts = [dynamicStyleEntries];
+			{
+				const rest2 = dynamicStyleEntries.filter((entry) => !conditionalClassEntry(entry, component));
+				if (rest2.length > 0 && rest2.length < dynamicStyleEntries.length) {
+					laneAAttempts.push(rest2);
+				}
+			}
 			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;
-					}
-					const name = directStyleName(entry.name, component);
-					if (!name || seen.has(name)) {
-						properties.length = 0;
-						break;
-					}
-					const owners = dynamicStyleOwners(name, component.staticConfig);
-					if (!owners) {
-						properties.length = 0;
-						break;
-					}
-					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.has(name)) {
-						const dynamic = entry.value.dynamic;
-						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));
-								const atomics = Object.values(split2?.rulesToInsert ?? {});
-								if (atomics.length !== 1 || atomics[0]?.[StyleObjectProperty] !== name || atomics[0]?.[StyleObjectValue] !== value) {
-									valuesStayLiteral = false;
-									break;
-								}
-							}
-							if (valuesStayLiteral) {
+				for (const attempt of laneAAttempts) {
+					const seen = /* @__PURE__ */ new Set();
+					const properties = [];
+					const dynamicOwners = /* @__PURE__ */ new Set();
+					const memberOwners = /* @__PURE__ */ new Set();
+					for (const entry of attempt) {
+						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;
+							break;
+						}
+						const owners = dynamicStyleOwners(name, component.staticConfig);
+						if (!owners) {
+							properties.length = 0;
+							break;
+						}
+						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.has(name)) {
+							const dynamic = entry.value.dynamic;
+							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));
+									const atomics = Object.values(split2?.rulesToInsert ?? {});
+									if (atomics.length !== 1 || atomics[0]?.[StyleObjectProperty] !== name || atomics[0]?.[StyleObjectValue] !== value) {
+										valuesStayLiteral = false;
+										break;
+									}
+								}
+								if (valuesStayLiteral) {
+									property = `${JSON.stringify(name)}: (${expression})`;
+								}
 							}
 						}
+						if (!property) {
+							properties.length = 0;
+							break;
+						}
+						seen.add(name);
+						for (const owner of owners) {
+							dynamicOwners.add(owner);
+							if (entry.styleMember) memberOwners.add(owner);
+						}
+						properties.push(property);
 					}
-					if (!property) {
-						properties.length = 0;
+					if (properties.length === attempt.length && !input.element.entries.some((entry) => {
+						if (entry.kind !== "prop" || entry.value.kind !== "static") return false;
+						const name = directStyleName(entry.name, component);
+						if (!name) return false;
+						const owners = styleOwners(name, entry.value.value, component.staticConfig);
+						return !!owners && conflictsWithInline(owners, dynamicOwners, memberOwners);
+					}) && !Object.entries(staticObject(props.style) ? props.style : {}).some(([name, value]) => {
+						const owners = styleOwners(name, value, component.staticConfig);
+						return !!owners && cssOwnersConflict(owners, dynamicOwners);
+					})) {
+						dynamicHostStyleProperties = properties;
+						laneAEntries = attempt;
+						for (const owner of dynamicOwners) laneAOwners.add(owner);
+						for (const owner of memberOwners) laneAMemberOwners.add(owner);
 						break;
 					}
-					seen.add(name);
-					for (const owner of owners) dynamicOwners.add(owner);
-					properties.push(property);
-				}
-				if (properties.length === dynamicStyleEntries.length && !input.element.entries.some((entry) => {
-					if (entry.kind !== "prop" || entry.value.kind !== "static") return false;
-					const name = directStyleName(entry.name, component);
-					if (!name) return false;
-					const owners = styleOwners(name, entry.value.value, component.staticConfig);
-					return !!owners && cssOwnersConflict(owners, dynamicOwners);
-				})) {
-					dynamicHostStyleProperties = properties;
 				}
 			}
-			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));
+			const laneACoversAll = dynamicHostStyleProperties !== null && laneAEntries.length === dynamicStyleEntries.length;
+			const webClassEntries = dynamicHostStyleProperties === null ? dynamicStyleEntries : dynamicStyleEntries.filter((entry) => !laneAEntries.includes(entry));
+			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && !laneACoversAll && webClassEntries.length > 0 && webClassEntries.every((entry) => conditionalClassEntry(entry, component));
 			const themeEntry = componentOnlyProp("theme");
 			const themeInverseEntry = componentOnlyProp("themeInverse");
 			const themeBoundary = themeEntry.unknown || "theme" in props;
@@ -1271,7 +1336,7 @@ function createTamaguiCompilerHost(options) {
 					message: zeroRuleMessage(5, { detail: `the animation configured on ${input.element.component.name}` })
 				});
 			}
-			if (platform === "web" && (dynamicStyleEntries.length > 0 || runtimeAnimationRequired) && dynamicHostStyleProperties === null && !supportsWebConditionalClasses && component.partialRuntimeSafe) {
+			if (platform === "web" && (dynamicStyleEntries.length > 0 || runtimeAnimationRequired) && !laneACoversAll && !supportsWebConditionalClasses && component.partialRuntimeSafe) {
 				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) {
@@ -1355,7 +1420,7 @@ function createTamaguiCompilerHost(options) {
 				});
 			}
 			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) {
+			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);
 			}
@@ -1372,6 +1437,13 @@ function createTamaguiCompilerHost(options) {
 			}
 			const propsForConditional = (target, value) => {
 				const branchProps = {};
+				if (styleObjectStatic) branchProps.style = styleObjectStatic;
+				if (target.styleMember) {
+					branchProps.style = {
+						...styleObjectStatic,
+						[target.name]: value
+					};
+				}
 				for (const entry of input.element.entries) {
 					if (entry === target) {
 						branchProps[target.name] = value;
@@ -1980,22 +2052,22 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 			const staticClasses = new Set(baseStaticClasses);
 			const webConditionalCSS = [];
 			const webConditionalKeys = /* @__PURE__ */ new Set();
-			const webConditionalEntries = supportsWebConditionalClasses ? dynamicStyleEntries.filter((entry) => entry.value.kind === "conditional") : [];
+			const webConditionalEntries = supportsWebConditionalClasses ? webClassEntries : [];
 			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(" "));
-					}
+					if (node.kind === "leaf") return JSON.stringify(leafClasses(node));
 					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 tree = entry.value.tree;
-				const leaves = collectLeaves(tree);
+				const tree = entry.value.kind === "conditional" ? entry.value.tree : null;
+				const domain = frontendClassDomain(entry, component);
+				if (!tree && !domain) continue;
+				const leaves = tree ? collectLeaves(tree) : domain.map((value) => ({
+					value,
+					dependencies: []
+				}));
 				const leafArtifactsMap = /* @__PURE__ */ new Map();
 				const entryConditionalKeys = /* @__PURE__ */ new Set();
 				for (const leaf of leaves) {
@@ -2031,6 +2103,9 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 						}
 						entryConditionalKeys.add(key);
 					}
+					if (conflictsWithInline(changedKeys, laneAOwners, laneAMemberOwners)) {
+						return bailout(input, "local/dynamic-style-value", `${entry.name} and an inline dynamic style both contribute a CSS property; their precedence cannot be resolved per-branch`, entry.value.span);
+					}
 					const branchArtifacts = extractedStyleArtifacts(branchSplit, branchProps, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
 					leafArtifactsMap.set(leaf, {
 						classes: branchArtifacts.className.split(" ").filter(Boolean),
@@ -2049,8 +2124,18 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 				for (const cls of sharedInConditional) {
 					if (!baseStaticClasses.has(cls)) staticClasses.add(cls);
 				}
-				const classExpr = serializeWebTree(tree);
-				programClassSources.push(classExpr);
+				const leafClasses = (leaf) => {
+					const artifacts2 = leafArtifactsMap.get(leaf);
+					const only = artifacts2 ? artifacts2.classes.filter((item) => !sharedInConditional.has(item)) : [];
+					return only.join(" ");
+				};
+				if (tree) {
+					programClassSources.push(serializeWebTree(tree));
+				} else {
+					const table = Object.fromEntries(leaves.map((leaf) => [leaf.value, leafClasses(leaf)]));
+					const key = input.source.slice(entry.value.span.start, entry.value.span.end);
+					programClassSources.push(`(${JSON.stringify(table)})[${key}]`);
+				}
 			}
 			const webClassName = [...staticClasses].join(" ");
 			const hasStyleProgram = programClassSources.length > 0;