@tamagui/static 3.0.0-beta.924.1 → 3.0.1

package/src/compilerHost.ts

@@ -2,6 +2,7 @@ import type {
   BranchDecisionNode,
   CompilerLoweringHost,
   CompilerTarget,
+  DynamicEvaluation,
   LoweringCandidateInput,
   LoweringCandidateResult,
   LoweringComponent,
@@ -27,7 +28,6 @@ import {
 } from '@tamagui/helpers'
 import {
   ATTRIBUTES,
-  DISPLAY_WEB_RESET,
   EVENTS,
   NATIVE_BACKING,
   NATIVE_BLOCK_DEFAULTS,
@@ -39,6 +39,7 @@ import {
   TAG_WEB_DEFAULTS,
   type TagName,
 } from '@tamagui/dom'
+import { resolveTransition, toCSSTransition } from '@tamagui/animation-helpers'
 import {
   createModifierRegistry,
   parseTransition,
@@ -139,14 +140,6 @@ function componentKey(resolvedId: string, exportName: string): string {
   return `${resolvedId}#${exportName}`
 }
 
-function cssFromRules(rules: Record<string, any>): string[] {
-  return Object.values(rules).flatMap((styleObject: any) => {
-    const identifier = styleObject?.[StyleObjectIdentifier]
-    const styleRules = styleObject?.[StyleObjectRules]
-    return identifier && Array.isArray(styleRules) ? styleRules : []
-  })
-}
-
 function jsxClassName(value: string): string {
   return `className=${JSON.stringify(value)}`
 }
@@ -214,7 +207,16 @@ function extractedStyleArtifacts(
       ? viewClassName.slice(0, -callerClassName.length).trimEnd()
       : viewClassName
   const rules = split.rulesToInsert ?? {}
-  const mediaNames = new Set(Object.keys(config.media ?? {}))
+  const mediaNames = Object.keys(config.media ?? {})
+  const rulesByIdentifier = new Map<string, string[]>()
+  for (const styleObject of Object.values(rules) as any[]) {
+    const identifier = styleObject?.[StyleObjectIdentifier]
+    const styleRules = styleObject?.[StyleObjectRules]
+    if (typeof identifier !== 'string' || !Array.isArray(styleRules)) continue
+    const existing = rulesByIdentifier.get(identifier)
+    if (existing) existing.push(...styleRules)
+    else rulesByIdentifier.set(identifier, [...styleRules])
+  }
   const pseudoNames = [
     'hover',
     'press',
@@ -243,21 +245,14 @@ function extractedStyleArtifacts(
   ])
   for (const identifier of identifiers) {
     const key = classKeys.get(identifier) ?? ''
-    const css = cssFromRules(
-      Object.fromEntries(
-        Object.entries(rules).filter(
-          ([, styleObject]: [string, any]) =>
-            styleObject?.[StyleObjectIdentifier] === identifier
-        )
-      )
-    ).join('')
+    const css = (rulesByIdentifier.get(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 (css.includes('.t_')) {
       buckets.theme.push(identifier)
-    } else if ([...mediaNames].some((name) => key.endsWith(`-${name}`))) {
+    } else if (mediaNames.some((name) => key.endsWith(`-${name}`))) {
       buckets.media.push(identifier)
     } else {
       buckets.normal.push(identifier)
@@ -278,14 +273,7 @@ function extractedStyleArtifacts(
         .join(' ')
     : ''
   const css = orderedIdentifiers.flatMap((identifier) => {
-    const identifierRules = cssFromRules(
-      Object.fromEntries(
-        Object.entries(rules).filter(
-          ([, styleObject]: [string, any]) =>
-            styleObject?.[StyleObjectIdentifier] === identifier
-        )
-      )
-    )
+    const identifierRules = rulesByIdentifier.get(identifier) ?? []
     // The legacy static theme-block path adds one root specificity level after
     // resolving tokens. Keep that output contract until the legacy oracle is removed.
     return buckets.theme.includes(identifier)
@@ -403,7 +391,6 @@ const compilerStyleProps = new Set([
   'group',
   'transition',
   'animation',
-  'animateOnly',
   'animatePresence',
   'animatedBy',
   'fontFamily',
@@ -413,7 +400,6 @@ const compilerStyleProps = new Set([
 const runtimeAnimationProps = new Set([
   'transition',
   'animation',
-  'animateOnly',
   'animatePresence',
   'animatedBy',
 ])
@@ -701,6 +687,61 @@ const nativePointerEventProps = new Set([
   'onPointerUp',
 ])
 
+// expandStyle writes every shorthand as four longhands, and fabric pays per prop
+// on mount (200 views: 8.8ms as longhands, 5.7ms as shorthands). when a hoisted
+// static style holds all four sides equal and no other key of that family, the
+// shorthand resolves identically in yoga, and any longhand in a later style
+// object still overrides it
+const nativeShorthandFamilies: [string, string[], RegExp][] = [
+  ['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: unknown) {
+  if (!staticObject(style)) return style
+  const keys = Object.keys(style)
+  const collapsed = new Map<string, string>()
+  for (const [shorthand, sides, family] of nativeShorthandFamilies) {
+    const value = style[sides[0]]
+    if (
+      value !== undefined &&
+      !(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: Record<string, unknown> = {}
+  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: unknown): boolean {
   if (value == null || typeof value === 'number' || typeof value === 'boolean') {
     return true
@@ -713,6 +754,61 @@ function isSerializableNativeStyle(value: unknown): boolean {
   return Object.values(value).every(isSerializableNativeStyle)
 }
 
+/**
+ * native host styles contain only completed pixel metrics. this compact record
+ * retains the authored text metric long enough for a DOM primitive or runtime
+ * Text descendant to apply it against its effective font size.
+ */
+type NativeTextMetrics = {
+  fontSize?: number
+  lineHeight?: number | `${number}px` | 'normal'
+}
+
+function nativeTextMetrics(result: unknown): NativeTextMetrics | null {
+  const value = (result as { nativeTextMetrics?: unknown } | null)?.nativeTextMetrics
+  if (!staticObject(value)) return null
+  const { fontSize, lineHeight } = value
+  if (
+    (fontSize !== undefined && typeof fontSize !== 'number') ||
+    (lineHeight !== undefined &&
+      typeof lineHeight !== 'number' &&
+      typeof lineHeight !== 'string')
+  ) {
+    return null
+  }
+  return fontSize === undefined && lineHeight === undefined
+    ? null
+    : (value as NativeTextMetrics)
+}
+
+function mergeNativeTextMetrics(
+  current: NativeTextMetrics | null,
+  next: NativeTextMetrics | null
+): NativeTextMetrics | null {
+  if (!current) return next
+  if (!next) return current
+  return {
+    fontSize: next.fontSize ?? current.fontSize,
+    lineHeight: next.lineHeight ?? current.lineHeight,
+  }
+}
+
+function hasChildThatMayRenderReactNode(element: MaterializedElement): boolean {
+  return element.entries.some((entry) => {
+    if (entry.kind !== 'child' || entry.value.kind === 'empty') return false
+    if (entry.value.kind === 'element') return true
+    if (entry.value.kind === 'bailout') return entry.value.dynamic === null
+    if (entry.value.kind === 'conditional') {
+      return collectLeaves(entry.value.tree).some(
+        ({ value }) =>
+          value === undefined || (value !== null && typeof value === 'object')
+      )
+    }
+    if (entry.value.kind !== 'static') return true
+    return entry.value.value !== null && typeof entry.value.value === 'object'
+  })
+}
+
 function unusedIdentifier(source: string, base: string): string {
   let candidate = base
   let suffix = 0
@@ -1051,6 +1147,7 @@ export function createTamaguiCompilerHost(
     !options.tamaguiConfig.animationDrivers
       ? configuredAnimationDriver
       : null
+  const nativeTextMetricsByElement = new WeakMap<MaterializedElement, NativeTextMetrics>()
   const resolveStaticCssTransition = (
     value: unknown,
     transitionPresets: Record<string, unknown>
@@ -1068,32 +1165,23 @@ export function createTamaguiCompilerHost(
     for (const payload of payloads) {
       const transition = parseTransition(payload, transitionPresetNames)
       if (!transition.ok) return null
-      if (
-        transition.value.kind === 'global' ||
-        transition.value.entries.every((entry) => entry.timing.type === 'css')
-      ) {
+      if (transition.value.kind === 'global') {
         resolvedPayloads.push(payload)
         continue
       }
-      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
+      // the runtime's own resolver, so a preset lowers to exactly the css the
+      // css driver would have emitted. a preset of any shape works, springs
+      // included: they become a `linear()` easing here rather than forcing the
+      // element onto the runtime path.
+      const resolved = resolveTransition(payload, { animations: transitionPresets })
+      if (resolved.diagnostics.length > 0) return null
+      if (!resolved.fused) {
+        resolvedPayloads.push(payload)
+        continue
       }
-      resolvedPayloads.push(`all ${preset}`)
+      const css = toCSSTransition(resolved)
+      if (css === undefined) return null
+      resolvedPayloads.push(css)
     }
     let payloadIndex = 0
     const resolved: string[] = []
@@ -1171,10 +1259,13 @@ export function createTamaguiCompilerHost(
       | StaticConfig
       | undefined
     if (!base) return null
+    // Web keeps only the semantic defaults as atomic defaults. Undoing the
+    // browser stylesheet is the `:where(.is_DOM)` host reset, and the
+    // extracted className below keeps the runtime base so compiled hosts
+    // carry `is_DOM` for it to match.
     const platformDefaults =
       platform === 'web'
         ? {
-            ...DISPLAY_WEB_RESET[row.display],
             ...row.defaults,
             ...TAG_WEB_DEFAULTS[tag],
           }
@@ -1190,6 +1281,7 @@ export function createTamaguiCompilerHost(
       displayName: tag,
       staticConfig: normalizeStaticConfig({
         ...base,
+        isDOM: true,
         isInput: row.backing === 'textinput',
         // CSS text properties may be authored on any element and inherited by
         // descendant text, including from a View-backed tag on native.
@@ -1284,8 +1376,11 @@ export function createTamaguiCompilerHost(
     const defaultProps = resolved.staticConfig.defaultProps ?? {}
     return {
       key: resolved.key,
+      // a HOC (themed icons, createStyledHOC) renders a real component, so
+      // flattening it to a host element drops everything it renders
       canFlatten:
         resolved.staticConfig.acceptsClassName !== false &&
+        !resolved.staticConfig.isHOC &&
         !resolved.staticConfig.neverFlatten &&
         !resolved.staticConfig.context,
       staticConfig: resolved.staticConfig,
@@ -1324,7 +1419,6 @@ export function createTamaguiCompilerHost(
     'group',
     'transition',
     'animation',
-    'animateOnly',
     'animatePresence',
     'animatedBy',
     'render',
@@ -1357,6 +1451,21 @@ export function createTamaguiCompilerHost(
     if (dynamic?.type !== 'string' || !dynamic.values?.length) return null
     return dynamic.values.map(String)
   }
+  // an opaque native value the compiler can still lower: a finite domain
+  // (a static array member, a template over one) resolves each value like a
+  // conditional branch and selects it by the runtime value; an unbounded
+  // number passes straight into the style key once probing proves the prop
+  // maps numbers to that one key unchanged
+  const nativeDynamicShape = (
+    name: string,
+    component: LoweringComponent,
+    dynamic: DynamicEvaluation | null | undefined
+  ): 'domain' | 'number' | null => {
+    if (!dynamic || !canLowerConditionalStyleProp(name, component)) return null
+    if (dynamic.values?.length) return 'domain'
+    if (dynamic.type === 'number' && directStyleName(name, component)) return 'number'
+    return null
+  }
   type DynamicStyleEntry = Extract<
     MaterializedElement['entries'][number],
     { kind: 'prop' }
@@ -1373,11 +1482,17 @@ export function createTamaguiCompilerHost(
       canLowerConditionalStyleProp(entry.name, component)) ||
     frontendClassDomain(entry, component) !== null
 
+  const expandStyleShorthand = (name: string): string =>
+    options.tamaguiConfig.shorthands?.[name] ?? name
+
   const isInvalidHostStyleProp = (
     name: string,
     component: LoweringComponent
   ): boolean => {
+    const expanded = expandStyleShorthand(name)
     const staticConfig = component.staticConfig as StaticConfig
+    // explicit variants and inline props retain their component owners.
+    if (staticConfig.inlineProps?.has(name) || staticConfig.variants?.[name]) return false
     const validStyles =
       staticConfig.validStyles ||
       (staticConfig.isInput
@@ -1385,7 +1500,7 @@ export function createTamaguiCompilerHost(
         : staticConfig.isText
           ? stylePropsText
           : validStylesView)
-    return name in stylePropsAll && !isValidStyleKey(name, validStyles)
+    return expanded in stylePropsAll && !isValidStyleKey(expanded, validStyles)
   }
 
   const directStyleName = (name: string, component: LoweringComponent): string | null => {
@@ -1394,7 +1509,7 @@ export function createTamaguiCompilerHost(
     }
     const staticConfig = component.staticConfig as StaticConfig
     if (staticConfig.variants?.[name]) return null
-    const expanded = options.tamaguiConfig.shorthands?.[name] ?? name
+    const expanded = expandStyleShorthand(name)
     return staticConfig.validStyles?.[expanded] ? expanded : null
   }
 
@@ -1620,7 +1735,7 @@ export function createTamaguiCompilerHost(
   return {
     resolveComponent: resolve,
     isStyleProp,
-    canLowerDynamicStyleProp(name, component, valueKind) {
+    canLowerDynamicStyleProp(name, component, valueKind, dynamic) {
       // a conditional with static branches lowers per-branch on both
       // platforms: each side resolves at compile time, only the test survives
       if (
@@ -1646,7 +1761,10 @@ export function createTamaguiCompilerHost(
       return (
         !options.disablePartialExtraction &&
         ((platform === 'web' && !!directStyleName(name, component)) ||
-          (platform === 'native' && directStyleName(name, component) === 'opacity'))
+          (platform === 'native' &&
+            (directStyleName(name, component) === 'opacity' ||
+              (valueKind === 'bailout' &&
+                nativeDynamicShape(name, component, dynamic) !== null))))
       )
     },
     developmentDebugInstrumentation,
@@ -1825,8 +1943,12 @@ export function createTamaguiCompilerHost(
         // DOM primitives (html.*) keep their own event contract (see
         // @tamagui/dom events table) — only bail for tamagui components,
         // whose pointer handlers exist solely via usePointerEvents.
+        // onLayout on web exists only through the runtime's
+        // useElementLayout; a flattened div drops it. a flattened native
+        // view reports layout itself.
         const needsRuntimeMapping = (name: string) =>
           runtimeEventProps.has(name) ||
+          (platform === 'web' && name === 'onLayout') ||
           (platform === 'native' &&
             !component.domTag &&
             nativePointerEventProps.has(name))
@@ -1848,7 +1970,7 @@ export function createTamaguiCompilerHost(
       // A styled() definition's animation props decide the same things the call
       // site's do, so the lowering decision reads both. completeProps merges
       // them far below, long after this point, and reading only the call site
-      // here decided a definition's transition/animation/animateOnly as if it
+      // here decided a definition's transition/animation props as if they
       // had never been written: the element flattened and the prop was dropped
       // with no diagnostic. Same merge function and same precedence as
       // completeProps, so there is one answer to "what is this prop's value".
@@ -1864,27 +1986,6 @@ export function createTamaguiCompilerHost(
           (name) => runtimeAnimationProps.has(name) && animationProps[name] !== undefined
         ),
       ])
-      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, {
-              // without the origin an author reads this against JSX that does
-              // not carry the prop, because the styled() definition does
-              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'
       )
@@ -1936,8 +2037,7 @@ export function createTamaguiCompilerHost(
       const runtimeAnimationRequired =
         (animationNames.has('transition') && resolvedCssTransition === null) ||
         [...animationNames].some(
-          (name) =>
-            name !== 'transition' && name !== 'animatedBy' && name !== 'animateOnly'
+          (name) => name !== 'transition' && name !== 'animatedBy'
         ) ||
         animatedByNeedsRuntime
       let dynamicHostStyleProperties: string[] | null = null
@@ -2311,7 +2411,9 @@ export function createTamaguiCompilerHost(
             entry.kind === 'prop' &&
             (directStyleName(entry.name, component) === 'opacity' ||
               (entry.value.kind === 'conditional' &&
-                canLowerConditionalStyleProp(entry.name, component)))
+                canLowerConditionalStyleProp(entry.name, component)) ||
+              (entry.value.kind === 'bailout' &&
+                nativeDynamicShape(entry.name, component, entry.value.dynamic) !== null))
         )
       if (
         dynamicStyleEntries.length > 0 &&
@@ -2491,6 +2593,52 @@ export function createTamaguiCompilerHost(
           'getSplitStyles returned no static result'
         )
       }
+      const nativeMetrics = platform === 'native' ? nativeTextMetrics(split) : null
+      if (nativeMetrics) nativeTextMetricsByElement.set(input.element, nativeMetrics)
+      const hasDynamicFontSize = dynamicStyleEntries.some((entry) => {
+        const name = directStyleName(entry.name, component)
+        return name === 'fontFamily' || name === 'fontSize'
+      })
+      const hasUnresolvedNativeLineHeight =
+        typeof nativeMetrics?.lineHeight === 'number' &&
+        nativeMetrics.fontSize === undefined &&
+        !hasDynamicFontSize
+      const hasDynamicTextMetric = dynamicStyleEntries.some((entry) => {
+        const name = directStyleName(entry.name, component)
+        return (
+          name === 'fontFamily' ||
+          name === 'fontSize' ||
+          name === 'lineHeight' ||
+          (name === null && !!component.staticConfig.variants?.[entry.name])
+        )
+      })
+      const changesInheritedNativeFontSize =
+        nativeMetrics?.fontSize !== undefined && nativeMetrics.lineHeight === undefined
+      // flattened core Text goes straight to react-native Text, which cannot
+      // carry this semantic record to a runtime child. the component path
+      // completes it once through the shared metric context.
+      if (
+        platform === 'native' &&
+        component.staticConfig.isText &&
+        !component.domTag &&
+        (hasUnresolvedNativeLineHeight ||
+          changesInheritedNativeFontSize ||
+          (hasChildThatMayRenderReactNode(input.element) &&
+            (nativeMetrics !== null || hasDynamicTextMetric)) ||
+          input.module.elements.some(
+            (ancestor) =>
+              ancestor !== input.element &&
+              ancestor.span.start < input.element.span.start &&
+              ancestor.span.end > input.element.span.end &&
+              nativeTextMetricsByElement.has(ancestor)
+          ))
+      ) {
+        return bailout(
+          input,
+          'local/unsupported-target',
+          'Native text metrics need the runtime Text provider for this subtree'
+        )
+      }
       if (
         split.programLifecycleStyleKeys?.enter?.size ||
         split.programLifecycleStyleKeys?.exit?.size
@@ -2677,9 +2825,15 @@ export function createTamaguiCompilerHost(
           input.source,
           `__TamaguiNativeStyle${input.element.span.start}`
         )
+        // the native style engine pushes the runtime's exact keys, so its base keeps them
+        const usesNativeFastPath =
+          !!themedStyleKeys &&
+          !!options.experimentalNativeFastPath &&
+          dynamicStyleEntries.length === 0 &&
+          !input.element.entries.some((entry) => entry.kind === 'spread')
         const nativeStyleImports = [
           {
-            content: `\nfunction ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(nativeStyle ?? {})}); } ${nativeStyleLocal}();`,
+            content: `\nfunction ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify((usesNativeFastPath ? nativeStyle : collapseNativeShorthands(nativeStyle)) ?? {})}); } ${nativeStyleLocal}();`,
             origin: input.element.component.span,
           },
         ]
@@ -2690,12 +2844,7 @@ export function createTamaguiCompilerHost(
               mappingLocal: string
             }
           | undefined
-        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}`
@@ -2732,6 +2881,7 @@ export function createTamaguiCompilerHost(
           }
           styleEntries = [...new Set([...styleEntries, ...propsResult.consumed])]
           let nativeDOMStyleSource = nativeStyleSource
+          let nativeDOMMetrics = nativeMetrics
           let runtimeStyleSource: string | null = null
           if (
             domStyleProgram?.kind === 'prop' &&
@@ -2795,6 +2945,10 @@ export function createTamaguiCompilerHost(
                     item.value.span
                   )
                 }
+                nativeDOMMetrics = mergeNativeTextMetrics(
+                  nativeDOMMetrics,
+                  nativeTextMetrics(itemSplit)
+                )
                 value = JSON.stringify(itemStyle ?? {})
               }
               const condition = item.condition
@@ -2819,6 +2973,11 @@ export function createTamaguiCompilerHost(
                 ? `__styles={${runtimeStyleSource}}`
                 : `__styles: ${runtimeStyleSource}`
               : '',
+            nativeDOMMetrics
+              ? serializedProps(input.element.form, [
+                  ['__textMetrics', JSON.stringify(nativeDOMMetrics)],
+                ])
+              : '',
             serializedProps(input.element.form, propsResult.additions),
           ]
             .filter(Boolean)
@@ -3061,7 +3220,77 @@ export function createTamaguiCompilerHost(
           const baseStyleForDiff = staticObject(nativeStyleResolved)
             ? nativeStyleResolved
             : {}
+          // resolves the element with one value in place of the dynamic prop
+          // and returns what that value adds over the static style
+          const valueDiff = (
+            entry: DynamicStyleEntry,
+            value: unknown,
+            what: string
+          ): Record<string, unknown> | string => {
+            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`
+            }
+            // a value (e.g. through a variant) may change viewProps beyond
+            // style; the style array cannot express those, so any non-style
+            // difference sends the element to the runtime path
+            for (const viewPropsKey of new Set([
+              ...Object.keys(branchSplit?.viewProps ?? {}),
+              ...Object.keys(split.viewProps ?? {}),
+            ])) {
+              if (viewPropsKey === 'style') continue
+              if (
+                JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !==
+                JSON.stringify((split.viewProps as any)?.[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: Record<string, unknown> = {}
+            for (const [key, value] of Object.entries(branchStyle)) {
+              if (
+                JSON.stringify((baseStyleForDiff as any)[key]) !== JSON.stringify(value)
+              ) {
+                diff[key] = value
+              }
+            }
+            if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
+              return `${what} style is not statically representable`
+            }
+            return diff
+          }
+          // each dynamic prop owns the keys it contributes; two props writing
+          // one key would need their source order resolved at runtime
+          const claimKeys = (entry: DynamicStyleEntry, keys: Iterable<string>) => {
+            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
             // opacity keeps the leaner inline-expression form even for
             // ternaries; per-branch lowering is for props that form cannot carry
             if (
@@ -3075,79 +3304,21 @@ export function createTamaguiCompilerHost(
                 Record<string, unknown>
               >()
               for (const leaf of leaves) {
-                const { branchCompleteProps } = propsForConditional(entry, leaf.value)
-                const branchSplit = resolveSplitStyles(
-                  branchCompleteProps,
-                  component.staticConfig,
-                  cssAnimationDriver,
-                  component.displayName
+                const diff = valueDiff(
+                  entry,
+                  leaf.value,
+                  `Conditional ${entry.name} branch`
                 )
-                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
-                  )
-                }
-                // a branch (e.g. through a variant) may change viewProps
-                // beyond style; the style array cannot express those, so any
-                // non-style difference sends the element to the runtime path
-                for (const viewPropsKey of new Set([
-                  ...Object.keys(branchSplit?.viewProps ?? {}),
-                  ...Object.keys(split.viewProps ?? {}),
-                ])) {
-                  if (viewPropsKey === 'style') continue
-                  if (
-                    JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !==
-                    JSON.stringify((split.viewProps as any)?.[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: Record<string, unknown> = {}
-                for (const [key, value] of Object.entries(branchStyle)) {
-                  if (
-                    JSON.stringify((baseStyleForDiff as any)[key]) !==
-                    JSON.stringify(value)
-                  ) {
-                    diff[key] = value
-                  }
-                }
-                if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
+                if (typeof diff === 'string') {
                   return bailout(
                     input,
                     'local/dynamic-style-value',
-                    `Conditional ${entry.name} branch style is not statically representable`,
+                    diff,
                     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 conflict = claimKeys(entry, Object.keys(diff))
+                if (conflict) return conflict
                 leafDiffs.set(leaf, diff)
               }
               for (const diff of leafDiffs.values()) {
@@ -3165,14 +3336,70 @@ export function createTamaguiCompilerHost(
               }
 
               conditionalParts.push(serializeNativeTree(tree))
-            } else {
+            } else if (shape === 'domain' && entry.value.kind === 'bailout') {
+              // a finite domain is a lookup from each runtime value to its diff
+              const lookup: string[] = []
+              const keys = new Set<string>()
+              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)
               )
-              plainDynamicParts.push(
-                `${JSON.stringify(directStyleName(entry.name, component))}: expressions[${index}]`
+              conditionalParts.push(`({ ${lookup.join(', ')} })[expressions[${index}]]`)
+            } else {
+              const key = directStyleName(entry.name, component)!
+              if (shape === 'number') {
+                // two probes prove a number lands unchanged in exactly this key
+                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(key)}: expressions[${index}]`)
             }
           }
           const dynamicStyle = plainDynamicParts.join(', ')
@@ -3362,7 +3589,7 @@ export function createTamaguiCompilerHost(
         split,
         props,
         options.tamaguiConfig,
-        !component.domTag,
+        true,
         Boolean(component.staticConfig.styleFrontend)
       )
       const className = artifacts.className
@@ -3564,7 +3791,7 @@ export function createTamaguiCompilerHost(
             branchSplit,
             branchProps,
             options.tamaguiConfig,
-            !component.domTag,
+            true,
             Boolean(component.staticConfig.styleFrontend)
           )
           leafArtifactsMap.set(leaf, {