@tamagui/static 3.0.0-beta.831.1 → 3.0.0-beta.881.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "3.0.0-beta.831.1",
+  "version": "3.0.0-beta.881.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "source": "src/index.ts",
@@ -45,21 +45,21 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/cli-color": "3.0.0-beta.831.1",
-    "@tamagui/compiler-core": "3.0.0-beta.831.1",
-    "@tamagui/config-default": "3.0.0-beta.831.1",
-    "@tamagui/core": "3.0.0-beta.831.1",
-    "@tamagui/dom": "3.0.0-beta.831.1",
-    "@tamagui/fake-react-native": "3.0.0-beta.831.1",
-    "@tamagui/generate-themes": "3.0.0-beta.831.1",
-    "@tamagui/helpers": "3.0.0-beta.831.1",
-    "@tamagui/helpers-node": "3.0.0-beta.831.1",
-    "@tamagui/react-native-web-internals": "3.0.0-beta.831.1",
-    "@tamagui/react-native-web-lite": "3.0.0-beta.831.1",
-    "@tamagui/shorthands": "3.0.0-beta.831.1",
-    "@tamagui/style-grammar": "3.0.0-beta.831.1",
-    "@tamagui/types": "3.0.0-beta.831.1",
-    "@tamagui/web": "3.0.0-beta.831.1",
+    "@tamagui/cli-color": "3.0.0-beta.881.1",
+    "@tamagui/compiler-core": "3.0.0-beta.881.1",
+    "@tamagui/config-default": "3.0.0-beta.881.1",
+    "@tamagui/core": "3.0.0-beta.881.1",
+    "@tamagui/dom": "3.0.0-beta.881.1",
+    "@tamagui/fake-react-native": "3.0.0-beta.881.1",
+    "@tamagui/generate-themes": "3.0.0-beta.881.1",
+    "@tamagui/helpers": "3.0.0-beta.881.1",
+    "@tamagui/helpers-node": "3.0.0-beta.881.1",
+    "@tamagui/react-native-web-internals": "3.0.0-beta.881.1",
+    "@tamagui/react-native-web-lite": "3.0.0-beta.881.1",
+    "@tamagui/shorthands": "3.0.0-beta.881.1",
+    "@tamagui/style-grammar": "3.0.0-beta.881.1",
+    "@tamagui/types": "3.0.0-beta.881.1",
+    "@tamagui/web": "3.0.0-beta.881.1",
     "browserslist": "^4.28.1",
     "check-dependency-version-consistency": "^4.1.0",
     "esbuild": "0.28.1",
@@ -71,7 +71,7 @@
     "react-native-web": "~0.21.0"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.831.1",
+    "@tamagui/build": "3.0.0-beta.881.1",
     "@types/find-root": "^1.1.2",
     "@types/node": "^22.1.0",
     "@types/webpack": "^4.41.26",

package/src/compiler.ts

@@ -19,7 +19,8 @@ import { readFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import path from 'node:path'
 
-import { createTamaguiCompilerHost } from './compilerHost'
+import { ComponentDiscovery, type ComponentModuleEvaluator } from './componentDiscovery'
+import { createComponentRegistry, createTamaguiCompilerHost } from './compilerHost'
 import { domStructuralPass } from './domStructuralPass'
 import type { TamaguiProjectInfo } from './extractor/bundleConfig'
 import { loadTamagui } from './extractor/loadTamagui'
@@ -217,6 +218,15 @@ export interface CompilerInput {
   project: CompilerProject
   resolve(specifier: string, importer: string): Promise<CompilerResolution | null>
   load(id: string): Promise<string | null>
+  /**
+   * Evaluate a host-resolved module and return its exports. The frontend asks
+   * for every package a JSX element or styled() base imports from that is not
+   * in the configured `components` list, once per module per project, and
+   * lowers against the static configs it finds. Return null (or throw) when
+   * the host cannot evaluate the module; those elements stay on the runtime
+   * path exactly as before.
+   */
+  evaluate?: ComponentModuleEvaluator
 }
 
 export type CompilerUpdateInput = CompilerInput
@@ -257,6 +267,7 @@ export class CompilerFrontend {
   private readonly planCaches = new Map<string, ModulePlanCache>()
   private readonly moduleRecords = new Map<ResolvedModuleId, HostModuleInput>()
   private moduleContext: string | null = null
+  private readonly discovery = new ComponentDiscovery()
 
   /**
    * One cache per project root and platform. Absent when the project produced
@@ -358,14 +369,18 @@ export class CompilerFrontend {
     if (!projectInfo.tamaguiConfig || !projectInfo.components) {
       throw new Error('The compiler requires evaluated Tamagui config and components')
     }
+    const componentModules = input.project.componentModules.map((component) => ({
+      moduleName: component.moduleName,
+      resolvedId: cleanId(component.id),
+    }))
+    const registry = createComponentRegistry(projectInfo.components, componentModules)
+    this.discovery.seed(registry)
     const host = createTamaguiCompilerHost({
       target: input.target,
       tamaguiConfig: projectInfo.tamaguiConfig,
       components: projectInfo.components,
-      componentModules: input.project.componentModules.map((component) => ({
-        moduleName: component.moduleName,
-        resolvedId: cleanId(component.id),
-      })),
+      componentModules,
+      registry,
       disablePartialExtraction: input.project.disablePartialExtraction,
       experimentalNativeFastPath: input.project.experimentalNativeFastPath,
       zeroRuntime: input.project.zeroRuntime,
@@ -380,6 +395,7 @@ export class CompilerFrontend {
         async load(id) {
           return modules.get(id) ?? null
         },
+        prepare: (module) => this.discovery.prepare(module, registry, input.evaluate),
       },
       structuralPass: domStructuralPass,
     })
@@ -391,6 +407,11 @@ export class CompilerFrontend {
     }
   }
 
+  /** host-resolved ids of every module discovery found components in */
+  discoveredModuleIds(): string[] {
+    return this.discovery.ids()
+  }
+
   private async buildTree(input: CompilerUpdateInput): Promise<{
     rootModule: HostModuleInput
     modules: Map<ResolvedModuleId, HostModuleInput>
@@ -398,6 +419,7 @@ export class CompilerFrontend {
     const moduleContext = compilerContext(input)
     if (this.moduleContext !== moduleContext) {
       this.moduleRecords.clear()
+      this.discovery.clear()
       this.moduleContext = moduleContext
     }
 

package/src/compilerHost.ts

@@ -21,6 +21,7 @@ import {
   StyleObjectRules,
   StyleObjectValue,
   stylePropsAll,
+  stylePropsInput,
   stylePropsText,
   validStyles as validStylesView,
 } from '@tamagui/helpers'
@@ -55,11 +56,38 @@ export interface CompilerComponentModule {
   resolvedId: string
 }
 
+/**
+ * The components lowering can resolve, keyed the way element provenance names
+ * them. The frontend owns one per compile and grows it as it discovers component
+ * modules outside the configured `components` list.
+ */
+export interface CompilerComponentRegistry {
+  /** host-resolved module id -> the module name its components register under */
+  modulesById: Map<string, string>
+  componentsByModule: Map<string, LoadedComponents>
+}
+
+export function createComponentRegistry(
+  components: readonly LoadedComponents[],
+  componentModules: readonly CompilerComponentModule[]
+): CompilerComponentRegistry {
+  return {
+    modulesById: new Map(
+      componentModules.map((module) => [module.resolvedId, module.moduleName])
+    ),
+    componentsByModule: new Map(
+      components.map((component) => [component.moduleName, component])
+    ),
+  }
+}
+
 export interface TamaguiCompilerHostOptions {
   target: CompilerTarget
   tamaguiConfig: TamaguiInternalConfig
   components: LoadedComponents[]
   componentModules: CompilerComponentModule[]
+  /** shared with the frontend so discovery during `prepare` is visible to this host */
+  registry?: CompilerComponentRegistry
   /** Keep elements with dynamic style props fully on the runtime path. */
   disablePartialExtraction?: boolean
   /** emit native theme-token mappings for the native style engine */
@@ -390,6 +418,11 @@ const runtimeAnimationProps = new Set([
   'animatedBy',
 ])
 
+// createComponent reads these and never forwards them to the host element, so a
+// flattened element has to drop them instead of emitting an unknown attribute.
+// only the inert values reach the emit: an active one already bailed.
+const componentOnlyProps = new Set(['asChild', 'disableOptimization', 'themeInverse'])
+
 const cssShorthandConflicts: Record<string, readonly string[]> = {
   background: [
     'backgroundAttachment',
@@ -548,6 +581,12 @@ const cssShorthandConflicts: Record<string, readonly string[]> = {
 }
 
 const cssConflictFamilies = [
+  new Set(['width', 'inlineSize']),
+  new Set(['minWidth', 'minInlineSize']),
+  new Set(['maxWidth', 'maxInlineSize']),
+  new Set(['height', 'blockSize']),
+  new Set(['minHeight', 'minBlockSize']),
+  new Set(['maxHeight', 'maxBlockSize']),
   new Set([
     'marginInline',
     'marginInlineEnd',
@@ -943,6 +982,8 @@ export function createTamaguiCompilerHost(
 ): CompilerLoweringHost {
   const platform = options.target === 'native' ? 'native' : 'web'
   const core = requireTamaguiCore(platform) as any
+  const compilerVariantStyleResolver = core.styled(core.View, {}).staticConfig
+    .variantStyleResolver
   const firstThemeName = Object.keys(options.tamaguiConfig.themes ?? {})[0] ?? ''
   const firstTheme = options.tamaguiConfig.themes?.[firstThemeName] ?? {}
   const theme = firstTheme
@@ -968,6 +1009,39 @@ export function createTamaguiCompilerHost(
     }
     return false
   }
+  // A native bundle knows one thing about its platform: it is not web. So a
+  // `web:` clause can never match there and a bare `native:` clause always
+  // does, which makes a value built only from those two resolvable at compile
+  // time. Every other modifier is live at render: media and container queries
+  // measure, theme and group clauses read context, state and lifecycle clauses
+  // track the component, and the device platforms (ios, android, tv) are not
+  // known until the bundle runs. One of those anywhere in the value keeps the
+  // whole element on the runtime path.
+  const platformModifiersRegistered =
+    modifierRegistry.get('web') === 'platform' &&
+    modifierRegistry.get('native') === 'platform'
+  const nativeClauseValue = (
+    value: unknown
+  ): 'live' | { payload: unknown; matched: boolean } | null => {
+    if (typeof value !== 'string' || !flatClausePattern.test(value)) {
+      return isClauseObjectValue(value) ? 'live' : null
+    }
+    if (!platformModifiersRegistered) return 'live'
+    const parsed = parseValue(value, modifierRegistry)
+    if (!parsed.ok || parsed.value.clauses.length === 0) return 'live'
+    let payload: unknown = parsed.value.base
+    let matched = parsed.value.base !== null
+    for (const clause of parsed.value.clauses) {
+      // a chain containing `web` is dead here whatever else it names
+      if (clause.modifiers.includes('web')) continue
+      if (clause.modifiers.length !== 1 || clause.modifiers[0] !== 'native') return 'live'
+      // platform clauses all rank the same, so a later one wins and any of them
+      // beats the unconditional base
+      payload = clause.payload
+      matched = true
+    }
+    return { payload, matched }
+  }
   const configuredAnimationDriver = options.tamaguiConfig.animations as
     | AnimationDriver
     | undefined
@@ -1031,12 +1105,9 @@ export function createTamaguiCompilerHost(
     }
     return resolved.join(' ')
   }
-  const modulesById = new Map(
-    options.componentModules.map((module) => [module.resolvedId, module.moduleName])
-  )
-  const componentsByModule = new Map(
-    options.components.map((component) => [component.moduleName, component])
-  )
+  const { modulesById, componentsByModule } =
+    options.registry ??
+    createComponentRegistry(options.components, options.componentModules)
 
   // A component's import provenance chose its authoring syntax, and the frontend
   // descriptor frozen onto its static config is the only thing that knows how to
@@ -1122,7 +1193,10 @@ export function createTamaguiCompilerHost(
         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.
-        validStyles: { ...validStylesView, ...stylePropsText },
+        validStyles: {
+          ...validStylesView,
+          ...(row.backing === 'textinput' ? stylePropsInput : stylePropsText),
+        },
         defaultProps: {
           ...base.defaultProps,
           ...platformDefaults,
@@ -1160,29 +1234,31 @@ export function createTamaguiCompilerHost(
       typeof definition.baseClassName.value === 'string'
         ? definition.baseClassName.value
         : undefined
+    const localStaticConfig = {
+      ...base.staticConfig,
+      variants: {
+        ...base.staticConfig.variants,
+        ...(variants as object | undefined),
+      },
+      defaultProps: {
+        ...base.staticConfig.defaultProps,
+        ...defaultProps,
+        ...(defaultVariants as object | undefined),
+      },
+      defaultVariants,
+      baseClassName: [base.staticConfig.baseClassName, baseClassName]
+        .filter(Boolean)
+        .join(' '),
+      context: context ?? base.staticConfig.context,
+      contextProps: context
+        ? contextProps
+        : (contextProps ?? base.staticConfig.contextProps),
+    }
+    ;(localStaticConfig as any).variantStyleResolver = compilerVariantStyleResolver
     return {
       key: componentKey(definition.id, definition.name),
       displayName: displayName || base.displayName,
-      staticConfig: normalizeStaticConfig({
-        ...base.staticConfig,
-        variants: {
-          ...base.staticConfig.variants,
-          ...(variants as object | undefined),
-        },
-        defaultProps: {
-          ...base.staticConfig.defaultProps,
-          ...defaultProps,
-          ...(defaultVariants as object | undefined),
-        },
-        defaultVariants,
-        baseClassName: [base.staticConfig.baseClassName, baseClassName]
-          .filter(Boolean)
-          .join(' '),
-        context: context ?? base.staticConfig.context,
-        contextProps: context
-          ? contextProps
-          : (contextProps ?? base.staticConfig.contextProps),
-      }),
+      staticConfig: normalizeStaticConfig(localStaticConfig),
     }
   }
 
@@ -1254,10 +1330,12 @@ export function createTamaguiCompilerHost(
     const staticConfig = component.staticConfig as StaticConfig
     const validStyles =
       staticConfig.validStyles ||
-      (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView)
-    return (
-      name in stylePropsAll && !isValidStyleKey(name, validStyles, staticConfig.accept)
-    )
+      (staticConfig.isInput
+        ? stylePropsInput
+        : staticConfig.isText
+          ? stylePropsText
+          : validStylesView)
+    return name in stylePropsAll && !isValidStyleKey(name, validStyles)
   }
 
   const directStyleName = (name: string, component: LoweringComponent): string | null => {
@@ -1292,6 +1370,7 @@ export function createTamaguiCompilerHost(
         firstThemeName,
         componentState,
         {
+          isStatic: true,
           resolveValues: platform === 'native' ? 'except-theme' : 'variable',
           noClass: platform === 'native',
           isAnimated: false,
@@ -1501,6 +1580,12 @@ export function createTamaguiCompilerHost(
       ) {
         return true
       }
+      // A component resolver receives the complete props object. Without a
+      // compiler-derived read set, resolving an opaque dynamic callsite would
+      // execute the real resolver with an incomplete props snapshot.
+      if ((component.staticConfig as StaticConfig).resolvers?.length) {
+        return false
+      }
       return (
         !options.disablePartialExtraction &&
         ((platform === 'web' && !!directStyleName(name, component)) ||
@@ -1556,15 +1641,56 @@ export function createTamaguiCompilerHost(
           props[entry.name] = entry.value.value
         }
       }
-      const disableOptimizationEntry = input.element.entries.find(
-        (entry) => entry.kind === 'prop' && entry.name === 'disableOptimization'
-      )
-      if (disableOptimizationEntry || 'disableOptimization' in props) {
+      if (component.staticConfig.resolvers?.length) {
+        const unresolvedProps = input.element.entries.filter(
+          (entry) => entry.kind === 'prop' && entry.value.kind !== 'static'
+        )
+        // One conditional with static leaves is still a complete prop set:
+        // lowerCandidate evaluates the full resolver chain once per branch.
+        // Multiple unknown props would require a cross-product/read set, so
+        // they remain on the runtime path.
+        const onlyStaticBranchConditional =
+          unresolvedProps.length === 1 &&
+          unresolvedProps[0]?.kind === 'prop' &&
+          unresolvedProps[0].value.kind === 'conditional' &&
+          canLowerConditionalStyleProp(unresolvedProps[0].name, component)
+        const unresolvedProp = onlyStaticBranchConditional
+          ? undefined
+          : unresolvedProps[0]
+        if (unresolvedProp?.kind === 'prop') {
+          return bailout(
+            input,
+            'local/dynamic-style-value',
+            `Component resolver prop ${unresolvedProp.name} could not be evaluated`,
+            unresolvedProp.span,
+            undefined,
+            unresolvedProp.name
+          )
+        }
+      }
+      // asChild, disableOptimization and themeInverse each asked only whether the
+      // prop was PRESENT, so a false value retained a component that requested
+      // none of the runtime behavior the branch exists for. read the materialized
+      // value instead, and treat a prop the compiler could not evaluate as active.
+      // a later duplicate wins, so the last entry decides and any unevaluated
+      // entry for that name makes the answer unknown.
+      const componentOnlyProp = (name: string) => {
+        let span: MaterializedElement['entries'][number]['span'] | undefined
+        let unknown = false
+        for (const entry of input.element.entries) {
+          if (entry.kind !== 'prop' || entry.name !== name) continue
+          span = entry.span
+          if (entry.value.kind !== 'static') unknown = true
+        }
+        return { unknown, span }
+      }
+      const disableOptimization = componentOnlyProp('disableOptimization')
+      if (disableOptimization.unknown || props.disableOptimization) {
         return bailout(
           input,
           'local/unsupported-target',
           'disableOptimization keeps the component on the runtime path',
-          disableOptimizationEntry?.span
+          disableOptimization.span
         )
       }
       if (component.domTag && props.hidden) props.display = 'none'
@@ -1761,11 +1887,7 @@ export function createTamaguiCompilerHost(
               name === 'opacity'
                 ? `opacity: (${expression})`
                 : `transform: "scale(" + (${expression}) + ")"`
-          } else if (
-            entry.value.kind === 'bailout' &&
-            owners.size === 1 &&
-            owners.has(name)
-          ) {
+          } else if (entry.value.kind === 'bailout' && owners.has(name)) {
             const dynamic = entry.value.dynamic
             if (dynamic?.type === 'number') {
               property = `${JSON.stringify(name)}: (${expression})`
@@ -1831,8 +1953,13 @@ export function createTamaguiCompilerHost(
             entry.value.kind === 'conditional' &&
             canLowerConditionalStyleProp(entry.name, component)
         )
-      if ('theme' in props || 'themeInverse' in props) {
-        const themeProp = 'theme' in props ? 'theme' : 'themeInverse'
+      // a theme name of any value selects a theme, while themeInverse only opens a
+      // boundary when it is on
+      const themeEntry = componentOnlyProp('theme')
+      const themeInverseEntry = componentOnlyProp('themeInverse')
+      const themeBoundary = themeEntry.unknown || 'theme' in props
+      if (themeBoundary || themeInverseEntry.unknown || props.themeInverse) {
+        const themeProp = themeBoundary ? 'theme' : 'themeInverse'
         return bailout(
           input,
           'local/unsupported-target',
@@ -1848,15 +1975,13 @@ export function createTamaguiCompilerHost(
       // the single child and emits no element of its own. a flattened host view
       // would add a wrapper the runtime never renders, and the child would
       // never receive the merged props. both platforms.
-      const asChildEntry = input.element.entries.find(
-        (entry) => entry.kind === 'prop' && entry.name === 'asChild'
-      )
-      if (asChildEntry || 'asChild' in props) {
+      const asChild = componentOnlyProp('asChild')
+      if (asChild.unknown || props.asChild) {
         return bailout(
           input,
           'local/unsupported-target',
           'asChild renders a Slot, not a host view',
-          asChildEntry?.span
+          asChild.span
         )
       }
       // group and container props publish separate keys in the same context:
@@ -2047,7 +2172,11 @@ export function createTamaguiCompilerHost(
           entry.span
         )
       }
-      const staticDefaultProps = component.staticConfig.defaultProps ?? {}
+      const resolvedStyleStaticConfig = core.getStyleStaticConfig(
+        component.staticConfig,
+        core.getConfig()
+      )
+      const staticDefaultProps = resolvedStyleStaticConfig.defaultProps ?? {}
       const defaultProps =
         platform === 'web' &&
         !component.staticConfig.isText &&
@@ -2062,6 +2191,19 @@ export function createTamaguiCompilerHost(
           props
         )
       }
+      const domStyleProgram = input.element.entries.find(
+        (entry) =>
+          entry.kind === 'prop' &&
+          entry.name === 'style' &&
+          entry.value.kind === 'dom-style'
+      )
+      if (platform === 'native' && !component.domTag && domStyleProgram) {
+        return bailout(
+          input,
+          'local/unsupported-target',
+          'Native style() pieces remain on the runtime path'
+        )
+      }
       const propsForConditional = (
         target: Extract<MaterializedElement['entries'][number], { kind: 'prop' }>,
         value: unknown
@@ -2099,22 +2241,35 @@ export function createTamaguiCompilerHost(
                 branchProps
               )
             : core.mergeProps(defaultProps, branchProps)
+        // the same platform-clause reduction the unconditional props get: a
+        // branch resolves through the full pipeline, so a clause left standing
+        // here would be decided by the build machine instead of the bundle
+        if (platform === 'native') {
+          for (const [name, value] of Object.entries(branchCompleteProps)) {
+            const clause = isStyleProp(name, component) ? nativeClauseValue(value) : null
+            if (clause === null || clause === 'live') continue
+            if (clause.matched) branchCompleteProps[name] = clause.payload
+            else delete branchCompleteProps[name]
+          }
+        }
         return { branchProps, branchCompleteProps }
       }
-      // Against completeProps, not props: clauses also arrive from styled()
-      // defaults. Native resolution evaluates them against the build machine's
-      // current state, so folding would freeze that state into the bundle.
+      // native resolution evaluates clauses against the build machine's current
+      // state, so folding a call-site, styled base, or variant clause would freeze
+      // that state into the bundle.
       if (platform === 'native') {
         const isClauseValue = (name: string, value: unknown) =>
           isStyleProp(name, component) &&
           ((typeof value === 'string' && flatClausePattern.test(value)) ||
             isClauseObjectValue(value))
         // a clause can also sit inside a variant definition, where it never
-        // appears as a prop: variants: { big: { true: { width: 'gt-lg:999px' } } }
+        // appears as a prop: variants: { big: { true: { width: 'gt-lg:999px' } } }.
+        // those live in the styled definition, which this element cannot rewrite,
+        // so a clause there retains whatever kind it is.
         const defaultVariants = component.staticConfig.defaultVariants ?? {}
-        const carriesClause =
-          Object.entries(completeProps).some(([name, value]) =>
-            isClauseValue(name, value)
+        const definitionCarriesClause =
+          Object.entries(resolvedStyleStaticConfig.baseStyle ?? {}).some(
+            ([name, value]) => isClauseValue(name, value)
           ) ||
           Object.entries(component.staticConfig.variants ?? {}).some(
             ([variantName, definitions]) =>
@@ -2129,13 +2284,43 @@ export function createTamaguiCompilerHost(
                   )
               )
           )
-        if (carriesClause) {
+        if (definitionCarriesClause) {
           return bailout(
             input,
             'local/unsupported-target',
             'Native conditional value programs remain on the runtime path'
           )
         }
+        const reducedProps: Record<string, unknown> = {}
+        for (const [name, value] of Object.entries(completeProps)) {
+          const clause = isStyleProp(name, component) ? nativeClauseValue(value) : null
+          if (clause === 'live') {
+            return bailout(
+              input,
+              'local/unsupported-target',
+              'Native conditional value programs remain on the runtime path'
+            )
+          }
+          if (clause === null) {
+            reducedProps[name] = value
+            continue
+          }
+          if (clause.matched) reducedProps[name] = clause.payload
+        }
+        completeProps = reducedProps
+        // a conditional leaf is a clause program the same way a direct prop is,
+        // and propsForConditional reduces the ones that fold
+        for (const entry of dynamicStyleEntries) {
+          if (entry.value.kind !== 'conditional') continue
+          for (const leaf of collectLeaves(entry.value.tree)) {
+            if (nativeClauseValue(leaf.value) !== 'live') continue
+            return bailout(
+              input,
+              'local/unsupported-target',
+              'Native conditional value programs remain on the runtime path'
+            )
+          }
+        }
       }
       const split = resolveSplitStyles(
         completeProps,
@@ -2167,13 +2352,6 @@ export function createTamaguiCompilerHost(
           }
         )
       }
-      const domStyleProgram = input.element.entries.find(
-        (entry) =>
-          entry.kind === 'prop' &&
-          entry.name === 'style' &&
-          entry.value.kind === 'dom-style'
-      )
-
       const flatTag =
         component.domTag ??
         (typeof props.render === 'string'
@@ -2193,7 +2371,9 @@ export function createTamaguiCompilerHost(
         }))
 
       const isPropIgnored = (name: string) =>
-        isStyleProp(name, component) || isInvalidHostStyleProp(name, component)
+        isStyleProp(name, component) ||
+        isInvalidHostStyleProp(name, component) ||
+        componentOnlyProps.has(name)
       const spreadReplacement = (
         form: MaterializedElement['form'],
         entry: MaterializedElement['entries'][number]
@@ -2210,16 +2390,11 @@ export function createTamaguiCompilerHost(
 
       let styleEntries = input.element.entries.filter(
         (entry) =>
-          (entry.kind === 'prop' &&
-            (isStyleProp(entry.name, component) ||
-              isInvalidHostStyleProp(entry.name, component))) ||
+          (entry.kind === 'prop' && isPropIgnored(entry.name)) ||
           (entry.kind === 'spread' &&
             entry.value.kind === 'static' &&
             staticObject(entry.value.value) &&
-            Object.keys(entry.value.value).some(
-              (name) =>
-                isStyleProp(name, component) || isInvalidHostStyleProp(name, component)
-            ))
+            Object.keys(entry.value.value).some(isPropIgnored))
       )
       let invalidHostStyle:
         | { entry: MaterializedElement['entries'][number]; name: string }
@@ -3361,7 +3536,8 @@ function bailout(
     | 'local/unsupported-child',
   message: string,
   span = input.element.span,
-  zero?: { rule: ZeroRule; message?: string }
+  zero?: { rule: ZeroRule; message?: string },
+  prop?: string
 ): LoweringCandidateResult {
   return {
     ok: false,
@@ -3371,6 +3547,7 @@ function bailout(
       message,
       span,
       component: input.element.component.name,
+      ...(prop && { prop }),
       ...(zero && { zeroRule: zero.rule, zeroMessage: zero.message }),
     },
   }