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

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',
@@ -759,9 +798,9 @@ function nativeDOMProps(input: LoweringCandidateInput, tag: TagName) {
   for (const entry of entries) {
     const value = entrySource(input, entry)
     const attribute =
-      (Object.hasOwn(ATTRIBUTES, entry.name) ? ATTRIBUTES[entry.name] : undefined) ??
+      (entry.name in ATTRIBUTES ? ATTRIBUTES[entry.name] : undefined) ??
       (entry.name.startsWith('data-') ? ATTRIBUTES['data-*'] : undefined)
-    const event = Object.hasOwn(EVENTS, entry.name) ? EVENTS[entry.name] : undefined
+    const event = entry.name in EVENTS ? EVENTS[entry.name] : undefined
     if (event) {
       if (event.native === 'none') {
         return {
@@ -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,25 +1105,31 @@ 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
-  // resolve that syntax's static input (a class-string base, string variants, string
-  // compound variants) into styles. Regular Tamagui components carry no descriptor
+  // resolve that syntax's static input (a class-string base, string variants) into
+  // styles. Regular Tamagui components carry no descriptor
   // because their static config is already the renderer's input shape. The compiler
   // must never import a frontend package: `@tamagui/tailwind/vite` already depends on
   // the static compiler, so reaching the other way would be a cycle.
-  const normalizeStaticConfig = (staticConfig: StaticConfig): StaticConfig =>
-    (staticConfig as any).styleFrontend?.normalizeStaticConfig?.(
-      staticConfig,
-      options.tamaguiConfig
-    ) ?? staticConfig
+  const normalizedStyleConfigs = new WeakMap<StaticConfig, any>()
+  const normalizeStaticConfig = (staticConfig: StaticConfig): StaticConfig => {
+    if (!staticConfig.styleFrontend) return staticConfig
+    const normalized = core.getStyleStaticConfig(staticConfig, options.tamaguiConfig)
+    const result = {
+      ...staticConfig,
+      baseStyle: normalized.baseStyle,
+      defaultProps: normalized.defaultProps,
+      variants: normalized.variants,
+      passthroughClassName: normalized.passthroughClassName,
+    }
+    normalizedStyleConfigs.set(result, normalized)
+    return result
+  }
 
   const directStaticConfig = (
     element: MaterializedElement
@@ -1081,7 +1161,7 @@ export function createTamaguiCompilerHost(
     if (
       identity?.importedName !== 'html' ||
       !DOM_FRONTENDS.has(identity.specifier) ||
-      !Object.hasOwn(TAGS, tag)
+      !(tag in TAGS)
     ) {
       return null
     }
@@ -1113,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,
@@ -1141,7 +1224,6 @@ export function createTamaguiCompilerHost(
     const {
       variants,
       defaultVariants,
-      compoundVariants,
       displayName,
       context,
       contextProps,
@@ -1152,33 +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),
-        },
-        compoundVariants: [
-          ...(base.staticConfig.compoundVariants ?? []),
-          ...(compoundVariants ?? []),
-        ],
-        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),
     }
   }
 
@@ -1190,7 +1270,7 @@ export function createTamaguiCompilerHost(
     const resolved =
       dom ?? styledStaticConfig(styledDefinition) ?? directStaticConfig(element)
     if (!resolved) return null
-    const defaultProps = core.getDefaultProps(resolved.staticConfig) ?? {}
+    const defaultProps = resolved.staticConfig.defaultProps ?? {}
     return {
       key: resolved.key,
       canFlatten:
@@ -1209,8 +1289,7 @@ export function createTamaguiCompilerHost(
         Object.keys(defaultProps).length === 0 &&
         !resolved.staticConfig.defaultVariants &&
         !resolved.staticConfig.baseClassName &&
-        !resolved.staticConfig.baseStyle &&
-        (resolved.staticConfig.compoundVariants?.length ?? 0) === 0,
+        !resolved.staticConfig.baseStyle,
     }
   }
 
@@ -1251,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 => {
@@ -1282,7 +1363,6 @@ export function createTamaguiCompilerHost(
     }
     process.env.TAMAGUI_TARGET = platform
     try {
-      core.prepareStyleStaticConfig(staticConfig)
       return core.getSplitStyles(
         props,
         staticConfig,
@@ -1290,6 +1370,7 @@ export function createTamaguiCompilerHost(
         firstThemeName,
         componentState,
         {
+          isStatic: true,
           resolveValues: platform === 'native' ? 'except-theme' : 'variable',
           noClass: platform === 'native',
           isAnimated: false,
@@ -1301,7 +1382,8 @@ export function createTamaguiCompilerHost(
         undefined,
         undefined,
         undefined,
-        animationDriver
+        animationDriver,
+        normalizedStyleConfigs.get(staticConfig)
       )
     } finally {
       if (previousStatic === undefined) delete process.env.IS_STATIC
@@ -1316,7 +1398,6 @@ export function createTamaguiCompilerHost(
     baseStyle: undefined,
     defaultProps: {},
     defaultVariants: undefined,
-    compoundVariants: [],
     variants: {},
   })
 
@@ -1499,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)) ||
@@ -1554,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 || Object.hasOwn(props, 'disableOptimization')) {
+      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'
@@ -1628,7 +1756,7 @@ export function createTamaguiCompilerHost(
       // 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".
-      const animationDefaultProps = core.getDefaultProps(component.staticConfig) ?? {}
+      const animationDefaultProps = component.staticConfig.defaultProps ?? {}
       const animationProps = core.mergeProps(animationDefaultProps, props)
       const animationNames = new Set([
         ...input.element.entries.flatMap((entry) =>
@@ -1759,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})`
@@ -1829,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',
@@ -1846,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 || Object.hasOwn(props, 'asChild')) {
+      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:
@@ -2045,7 +2172,11 @@ export function createTamaguiCompilerHost(
           entry.span
         )
       }
-      const staticDefaultProps = core.getDefaultProps(component.staticConfig) ?? {}
+      const resolvedStyleStaticConfig = core.getStyleStaticConfig(
+        component.staticConfig,
+        core.getConfig()
+      )
+      const staticDefaultProps = resolvedStyleStaticConfig.defaultProps ?? {}
       const defaultProps =
         platform === 'web' &&
         !component.staticConfig.isText &&
@@ -2060,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
@@ -2097,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]) =>
@@ -2126,24 +2283,44 @@ export function createTamaguiCompilerHost(
                     isClauseValue(name, value)
                   )
               )
-          ) ||
-          // compound variant styles are contributed by resolveSplitStyles too,
-          // so a clause there would also freeze build-machine state if folded
-          (component.staticConfig.compoundVariants ?? []).some(
-            (compound) =>
-              staticObject(compound) &&
-              staticObject(compound.style) &&
-              Object.entries(compound.style).some(([name, value]) =>
-                isClauseValue(name, value)
-              )
           )
-        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,
@@ -2175,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'
@@ -2201,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]
@@ -2218,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 }
@@ -3369,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,
@@ -3379,6 +3547,7 @@ function bailout(
       message,
       span,
       component: input.element.component.name,
+      ...(prop && { prop }),
       ...(zero && { zeroRule: zero.rule, zeroMessage: zero.message }),
     },
   }