@tamagui/static 2.7.7 → 3.0.0-beta.643.1

package/src/extractor/createExtractor.ts

@@ -1,2970 +0,0 @@
-import type { NodePath, TraverseOptions } from '@babel/traverse'
-import traverse from '@babel/traverse'
-import * as t from '@babel/types'
-import { Color, colorLog } from '@tamagui/cli-color'
-import * as reactNativeWebInternals from '@tamagui/react-native-web-internals'
-import {
-  StyleObjectIdentifier,
-  StyleObjectRules,
-  type GetStyleState,
-  type PseudoStyles,
-  type SplitStyleProps,
-  type StaticConfig,
-  type TamaguiComponentState,
-} from '@tamagui/web'
-import { existsSync, readFileSync } from 'node:fs'
-import { basename, dirname, resolve, relative } from 'node:path'
-import { nodeModuleNameResolver, sys } from 'typescript'
-import type { ViewStyle } from 'react-native'
-
-import { FAILED_EVAL } from '../constants'
-import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
-import type {
-  ExtractedAttr,
-  ExtractedAttrStyle,
-  ExtractorOptions,
-  ExtractorParseProps,
-  TamaguiOptions,
-  TamaguiOptionsWithFileInfo,
-  Ternary,
-} from '../types'
-import type { LoadedComponents, TamaguiProjectInfo } from './bundleConfig'
-import { createEvaluator, createSafeEvaluator } from './createEvaluator'
-import { evaluateAstNode } from './evaluateAstNode'
-import {
-  attrStr,
-  findComponentName,
-  getValidComponent,
-  getValidComponentsPaths,
-  getValidImport,
-  isPresent,
-  isValidImport,
-  objToStr,
-} from './extractHelpers'
-import { findTopmostFunction } from './findTopmostFunction'
-import { cleanupBeforeExit, getStaticBindingsForScope } from './getStaticBindingsForScope'
-import { literalToAst } from './literalToAst'
-import { loadTamagui, loadTamaguiSync } from './loadTamagui'
-import { logLines } from './logLines'
-import { getTernaryKey, normalizeTernaries } from './normalizeTernaries'
-import { setPropsToFontFamily } from './propsToFontFamilyCache'
-import { timer } from './timer'
-import { validHTMLAttributes } from './validHTMLAttributes'
-import { BailOptimizationError } from './errors'
-import { loadCompilerOptionsFromTsconfig } from './esbuildTsconfigPaths'
-
-const UNTOUCHED_PROPS = {
-  key: true,
-  style: true,
-  className: true,
-}
-
-// Platform variants that can't be resolved at compile time on native builds.
-// Defined at module level (not inside the loop) to avoid repeated Set allocations during compilation.
-// (requires runtime Platform.OS + Platform.isTV checks via react-native-tvos)
-const nativeOnlyPlatforms = new Set(['android', 'ios', 'tv', 'androidtv', 'tvos'])
-
-const createTernary = (x: Ternary) => x
-
-export type Extractor = ReturnType<typeof createExtractor>
-
-type FileOrPath = NodePath<t.Program> | t.File
-
-let hasLoggedBaseInfo = false
-
-function isFullyDisabled(props: TamaguiOptions) {
-  return props.disableExtraction && props.disableDebugAttr
-}
-
-// Walk up JSX ancestors looking for one that declares `group="<groupName>"` together
-// with the `untilMeasured` prop. Used to deopt children whose styles depend on a
-// parent that the runtime measures before emitting child styles (can't be modeled
-// in static CSS).
-function hasUntilMeasuredAncestor(path: NodePath<any>, groupName: string): boolean {
-  let current: NodePath<any> | null = path.parentPath
-  while (current) {
-    if (current.isJSXElement()) {
-      const opening = current.node.openingElement
-      let foundGroup = false
-      let foundUntilMeasured = false
-      for (const attr of opening.attributes) {
-        if (!t.isJSXAttribute(attr)) continue
-        if (!t.isJSXIdentifier(attr.name)) continue
-        const aName = attr.name.name
-        if (aName === 'group') {
-          // only literal string equality counts — dynamic group= is left to runtime
-          if (t.isStringLiteral(attr.value) && attr.value.value === groupName) {
-            foundGroup = true
-          } else if (
-            t.isJSXExpressionContainer(attr.value) &&
-            t.isStringLiteral(attr.value.expression) &&
-            attr.value.expression.value === groupName
-          ) {
-            foundGroup = true
-          }
-        } else if (aName === 'untilMeasured') {
-          foundUntilMeasured = true
-        }
-      }
-      if (foundGroup && foundUntilMeasured) return true
-    }
-    current = current.parentPath
-  }
-  return false
-}
-
-export function createExtractor(
-  { logger = console, platform = 'web' }: ExtractorOptions = { logger: console }
-) {
-  const INLINE_EXTRACTABLE = {
-    ref: 'ref',
-    key: 'key',
-    ...(platform === 'web' && {
-      onPress: 'onClick',
-      onHoverIn: 'onMouseEnter',
-      onHoverOut: 'onMouseLeave',
-      onPressIn: 'onMouseDown',
-      onPressOut: 'onMouseUp',
-    }),
-    ...(platform === 'native' && {
-      // native view props that should pass through without preventing flattening
-      testID: 'testID',
-      nativeID: 'nativeID',
-      accessibilityLabel: 'accessibilityLabel',
-      accessibilityHint: 'accessibilityHint',
-      accessibilityRole: 'accessibilityRole',
-      accessibilityState: 'accessibilityState',
-      accessibilityValue: 'accessibilityValue',
-      accessibilityActions: 'accessibilityActions',
-      accessibilityLabelledBy: 'accessibilityLabelledBy',
-      accessibilityLiveRegion: 'accessibilityLiveRegion',
-      accessibilityElementsHidden: 'accessibilityElementsHidden',
-      accessibilityViewIsModal: 'accessibilityViewIsModal',
-      importantForAccessibility: 'importantForAccessibility',
-      collapsable: 'collapsable',
-      needsOffscreenAlphaCompositing: 'needsOffscreenAlphaCompositing',
-      removeClippedSubviews: 'removeClippedSubviews',
-      renderToHardwareTextureAndroid: 'renderToHardwareTextureAndroid',
-      shouldRasterizeIOS: 'shouldRasterizeIOS',
-      hitSlop: 'hitSlop',
-      pointerEvents: 'pointerEvents',
-    }),
-  }
-
-  const componentState: TamaguiComponentState = {
-    focus: false,
-    focusVisible: false,
-    focusWithin: false,
-    hover: false,
-    unmounted: true,
-    press: false,
-    pressIn: false,
-    disabled: false,
-  } as const
-
-  const styleProps: SplitStyleProps = {
-    resolveValues: platform === 'native' ? 'value' : 'variable',
-    noClass: false,
-    isAnimated: false,
-  }
-
-  const shouldAddDebugProp =
-    // really basic disable this for next.js because it messes with ssr
-    !process.env.npm_package_dependencies_next &&
-    platform !== 'native' &&
-    process.env.IDENTIFY_TAGS !== 'false' &&
-    (process.env.NODE_ENV === 'development' || process.env.IDENTIFY_TAGS)
-
-  let projectInfo: TamaguiProjectInfo | null = null
-
-  // cache of dynamically discovered styled components, keyed by absolute file path
-  // persists across files within the same worker/extractor instance
-  const dynamicComponentCache = new Map<string, LoadedComponents>()
-  const dynamicLoadingInProgress = new Set<string>()
-
-  // lazily loaded tsconfig compiler options for path alias resolution
-  let _compilerOptions: any = null
-  function getCompilerOptions() {
-    if (!_compilerOptions) {
-      try {
-        _compilerOptions = loadCompilerOptionsFromTsconfig()
-      } catch {
-        _compilerOptions = {}
-      }
-    }
-    return _compilerOptions
-  }
-
-  function resolveImportPath(fromFile: string, importPath: string): string | null {
-    if (importPath.startsWith('.')) {
-      // relative path resolution
-      const dir = dirname(fromFile)
-      const base = resolve(dir, importPath)
-      const extensions = ['.tsx', '.ts', '.jsx', '.js']
-      for (const ext of extensions) {
-        const full = base + ext
-        if (existsSync(full)) return full
-      }
-      // try index files
-      for (const ext of extensions) {
-        const full = resolve(base, `index${ext}`)
-        if (existsSync(full)) return full
-      }
-      return null
-    }
-
-    // tsconfig path alias resolution (e.g. ~/foo, @/bar)
-    const compilerOptions = getCompilerOptions()
-    if (compilerOptions.paths) {
-      try {
-        const { resolvedModule } = nodeModuleNameResolver(
-          importPath,
-          fromFile,
-          compilerOptions,
-          sys
-        )
-        if (
-          resolvedModule &&
-          !resolvedModule.resolvedFileName.endsWith('.d.ts') &&
-          !resolvedModule.isExternalLibraryImport
-        ) {
-          return resolvedModule.resolvedFileName
-        }
-      } catch {
-        // fallback - tsconfig resolution failed
-      }
-    }
-
-    return null
-  }
-
-  const styledCheckCache = new Map<string, boolean>()
-
-  function mightHaveStyledComponents(filePath: string): boolean {
-    const cached = styledCheckCache.get(filePath)
-    if (cached !== undefined) return cached
-    try {
-      const content = readFileSync(filePath, 'utf-8')
-      const result = content.includes('styled(')
-      styledCheckCache.set(filePath, result)
-      return result
-    } catch {
-      styledCheckCache.set(filePath, false)
-      return false
-    }
-  }
-
-  // we load tamagui delayed because we need to set some global/env stuff before importing
-  // otherwise we'd import `rnw` and cause it to evaluate react-native-web which causes errors
-
-  function loadSync(props: TamaguiOptions) {
-    if (isFullyDisabled(props)) {
-      return null
-    }
-    return (projectInfo ||= loadTamaguiSync(props))
-  }
-
-  async function load(props: TamaguiOptions) {
-    if (isFullyDisabled(props)) {
-      return null
-    }
-    return (projectInfo ||= await loadTamagui(props))
-  }
-
-  return {
-    options: {
-      logger,
-    },
-    cleanupBeforeExit,
-    loadTamagui: load,
-    loadTamaguiSync: loadSync,
-    getTamagui() {
-      return projectInfo?.tamaguiConfig
-    },
-    parseSync: (f: FileOrPath, props: ExtractorParseProps) => {
-      globalThis.expo ||= {} // expo-modules-core checks this and avoids loading "native" modules if exists
-      const projectInfo = loadSync(props)
-      return parseWithConfig(projectInfo || {}, f, props)
-    },
-    parse: async (f: FileOrPath, props: ExtractorParseProps) => {
-      globalThis.expo ||= {} // expo-modules-core checks this and avoids loading "native" modules if exists
-      const projectInfo = await load(props)
-      return parseWithConfig(projectInfo || {}, f, props)
-    },
-  }
-
-  function parseWithConfig(
-    { components, tamaguiConfig }: TamaguiProjectInfo,
-    fileOrPath: FileOrPath,
-    options: ExtractorParseProps
-  ) {
-    const {
-      config = 'tamagui.config.ts',
-      importsWhitelist = ['constants.js'],
-      evaluateVars = true,
-      sourcePath = '',
-      onExtractTag,
-      onStyledDefinitionRule,
-      getFlattenedNode,
-      disable,
-      disableExtraction,
-      disableExtractVariables,
-      disableDebugAttr,
-      enableDynamicEvaluation = false,
-      includeExtensions = ['.ts', '.tsx', '.jsx'],
-      extractStyledDefinitions = false,
-      prefixLogs,
-      excludeProps,
-      platform,
-      ...restProps
-    } = options
-
-    // invalidate dynamic cache for this file on re-parse (HMR)
-    if (sourcePath && dynamicComponentCache.has(sourcePath)) {
-      dynamicComponentCache.delete(sourcePath)
-      styledCheckCache.delete(sourcePath)
-    }
-
-    if (sourcePath.includes('.tamagui-dynamic-eval')) {
-      return null
-    }
-
-    const {
-      normalizeStyle,
-      getSplitStyles,
-      mediaQueryConfig,
-      propMapper,
-      proxyThemeVariables,
-      getDefaultProps,
-      pseudoDescriptors,
-    } = requireTamaguiCore(platform)
-
-    let shouldPrintDebug = options.shouldPrintDebug || false
-
-    if (disable === true || (Array.isArray(disable) && disable.includes(sourcePath))) {
-      return null
-    }
-
-    if (!isFullyDisabled(options)) {
-      if (!components) {
-        throw new Error(`Must provide components`)
-      }
-    }
-
-    if (
-      sourcePath &&
-      includeExtensions &&
-      !includeExtensions.some((ext) => sourcePath.endsWith(ext))
-    ) {
-      if (shouldPrintDebug) {
-        logger.info(
-          `Ignoring file due to includeExtensions: ${sourcePath}, includeExtensions: ${includeExtensions.join(
-            ', '
-          )}`
-        )
-      }
-      return null
-    }
-
-    function isValidStyleKey(name: string, staticConfig: StaticConfig) {
-      if (!projectInfo) {
-        throw new Error(`Tamagui extractor not loaded yet`)
-      }
-      if (platform === 'native' && name[0] === '$' && mediaQueryConfig[name.slice(1)]) {
-        return false
-      }
-      // Check for $theme-, $platform-, $group- prefixed keys
-      if (name[0] === '$') {
-        const mediaName = name.slice(1)
-        if (
-          mediaName.startsWith('theme-') ||
-          mediaName.startsWith('platform-') ||
-          mediaName.startsWith('group-')
-        ) {
-          return true
-        }
-        if (mediaQueryConfig[mediaName]) {
-          return true
-        }
-      }
-      return !!(
-        staticConfig.validStyles?.[name] ||
-        pseudoDescriptors[name] ||
-        // don't disable variants or else you lose many things flattening
-        staticConfig.variants?.[name] ||
-        projectInfo?.tamaguiConfig?.shorthands[name]
-      )
-    }
-
-    function getGroupPseudo(name: string) {
-      const [_, groupName, a, b, c] = name.split('-')
-      if (!groupName) return
-      const m2 = a && b ? `${a}-${b}` : ''
-      const media = (m2 && mediaQueryConfig[m2] && m2) || (a && mediaQueryConfig[a] && a)
-      return media
-        ? media === m2
-          ? c
-          : b
-            ? `${b}${c ? `-${c}` : ''}`
-            : undefined
-        : a
-          ? `${a}${b ? `-${b}` : ''}${c ? `-${c}` : ''}`
-          : undefined
-    }
-
-    /**
-     * Step 1: Determine if importing any statically extractable components
-     */
-
-    const isTargetingHTML = platform === 'web'
-    const ogDebug = shouldPrintDebug
-    const tm = timer()
-    const propsWithFileInfo: TamaguiOptionsWithFileInfo = {
-      ...options,
-      sourcePath,
-      allLoadedComponents: components ? [...components] : [],
-    }
-
-    if (!hasLoggedBaseInfo) {
-      hasLoggedBaseInfo = true
-      if (shouldPrintDebug) {
-        logger.info(
-          [
-            'loaded components:',
-            propsWithFileInfo.allLoadedComponents
-              .map((comp) => Object.keys(comp.nameToInfo).join(', '))
-              .join(', '),
-          ].join(' ')
-        )
-      }
-      if (process.env.DEBUG?.startsWith('tamagui')) {
-        logger.info(
-          [
-            'loaded:',
-            propsWithFileInfo.allLoadedComponents.map((x) => x.moduleName),
-          ].join('\n')
-        )
-      }
-    }
-
-    tm.mark('load-tamagui', !!shouldPrintDebug)
-
-    if (!isFullyDisabled(options)) {
-      if (!tamaguiConfig?.themes) {
-        console.error(
-          `⛔️ Error: Missing "themes" in your tamagui.config file:
-
-            You may not need the compiler! Remember you can run Tamagui with no configuration at all.
-
-            You may have not "export default" your config (you can also "export const config").
-            
-            Or this may be due to duplicated dependency versions:
-              - try out https://github.com/bmish/check-dependency-version-consistency to see if there are mis-matches.
-              - or search your lockfile for mis-matches.
-          `
-        )
-        console.info(`  Got config:`, tamaguiConfig)
-        process.exit(0)
-      }
-    }
-
-    const firstThemeName = Object.keys(tamaguiConfig?.themes || {})[0]
-    const firstTheme = tamaguiConfig?.themes[firstThemeName] || {}
-
-    if (!firstTheme || typeof firstTheme !== 'object') {
-      const err = `Missing theme ${firstThemeName}, an error occurred when importing your config`
-      console.info(err, `Got config:`, tamaguiConfig)
-      console.info(`Looking for theme:`, firstThemeName)
-      throw new Error(err)
-    }
-
-    const proxiedTheme = proxyThemeVariables(firstTheme)
-    type AccessListener = (key: string) => void
-    const themeAccessListeners = new Set<AccessListener>()
-    const defaultTheme = new Proxy(proxiedTheme, {
-      get(target, key) {
-        if (Reflect.has(target, key)) {
-          themeAccessListeners.forEach((cb) => cb(String(key)))
-        }
-        return Reflect.get(target, key)
-      },
-    })
-
-    const body: t.Statement[] | NodePath<t.Statement>[] =
-      fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
-
-    if (!isFullyDisabled(options)) {
-      if (Object.keys(components || []).length === 0) {
-        console.warn(
-          `Warning: Tamagui didn't find any valid components (DEBUG=tamagui for more)`
-        )
-        if (process.env.DEBUG === 'tamagui') {
-          console.info(`components`, Object.keys(components || []), components)
-        }
-      }
-    }
-
-    if (shouldPrintDebug === 'verbose') {
-      logger.info(
-        `allLoadedComponent modules ${propsWithFileInfo.allLoadedComponents
-          .map((k) => k.moduleName)
-          .join(', ')}`
-      )
-      logger.info(
-        `valid import paths: ${JSON.stringify(
-          getValidComponentsPaths(propsWithFileInfo)
-        )}`
-      )
-    }
-
-    let doesUseValidImport = false
-    let hasImportedTheme = false
-
-    const importDeclarations: t.ImportDeclaration[] = []
-
-    for (const bodyPath of body) {
-      if (bodyPath.type !== 'ImportDeclaration') continue
-      const node = ('node' in bodyPath ? bodyPath.node : bodyPath) as t.ImportDeclaration
-      const moduleName = node.source.value
-
-      // if importing valid module
-      const valid = isValidImport(propsWithFileInfo, moduleName)
-
-      if (valid) {
-        importDeclarations.push(node)
-      }
-
-      if (shouldPrintDebug === 'verbose') {
-        logger.info(` - import via ${moduleName} ${valid}`)
-      }
-
-      if (extractStyledDefinitions && enableDynamicEvaluation) {
-        // check all imports for `styled`, not just valid packages
-        // styled( is basically guaranteed to be tamagui regardless of source
-        if (node.specifiers.some((specifier) => specifier.local.name === 'styled')) {
-          doesUseValidImport = true
-          // don't break - need to collect all import declarations for the styled() handler
-        }
-      }
-
-      if (valid) {
-        const names = node.specifiers.map((specifier) => specifier.local.name)
-        const isValidComponent = names.some((name) =>
-          Boolean(isValidImport(propsWithFileInfo, moduleName, name))
-        )
-        if (shouldPrintDebug === 'verbose') {
-          logger.info(
-            ` - import ${isValidComponent ? '✅' : '⇣'} - ${names.join(
-              ', '
-            )} via package '${moduleName}' - (valid: ${JSON.stringify(
-              getValidComponentsPaths(propsWithFileInfo)
-            )})`
-          )
-        }
-        if (isValidComponent) {
-          doesUseValidImport = true
-          if (!(extractStyledDefinitions && enableDynamicEvaluation)) break
-        }
-      }
-    }
-
-    if (shouldPrintDebug) {
-      logger.info(
-        `${JSON.stringify({ doesUseValidImport, hasImportedTheme }, null, 2)}\n`
-      )
-    }
-
-    if (
-      !doesUseValidImport &&
-      extractStyledDefinitions &&
-      enableDynamicEvaluation &&
-      sourcePath
-    ) {
-      // check if any local import is in the dynamic cache or has styled components
-      for (const bodyPath of body) {
-        if (bodyPath.type !== 'ImportDeclaration') continue
-        const node = (
-          'node' in bodyPath ? bodyPath.node : bodyPath
-        ) as t.ImportDeclaration
-        const moduleName = node.source.value
-
-        const resolved = resolveImportPath(sourcePath, moduleName)
-        if (!resolved) continue
-
-        if (dynamicComponentCache.has(resolved)) {
-          doesUseValidImport = true
-          break
-        }
-
-        if (mightHaveStyledComponents(resolved)) {
-          doesUseValidImport = true
-          break
-        }
-      }
-    }
-
-    if (!doesUseValidImport) {
-      return null
-    }
-
-    function getValidImportedComponent(componentName: string) {
-      const importDeclaration = importDeclarations.find((dec) =>
-        dec.specifiers.some((spec) => spec.local.name === componentName)
-      )
-      if (!importDeclaration) {
-        return null
-      }
-      return getValidImport(
-        propsWithFileInfo,
-        importDeclaration.source.value,
-        componentName
-      )
-    }
-
-    tm.mark('import-check', !!shouldPrintDebug)
-
-    let couldntParse = false
-    // evaluating the file resolves every styled() in it at once, so once is enough
-    let didDynamicLoad = false
-    const modifiedComponents = new Set<NodePath<any>>()
-
-    // only keeping a cache around per-file, reset it if it changes
-    const bindingCache: Record<string, string | null> = {}
-
-    const callTraverse = (a: TraverseOptions<any>) => {
-      // @ts-ignore
-      return fileOrPath.type === 'File' ? traverse(fileOrPath, a) : fileOrPath.traverse(a)
-    }
-
-    const shouldDisableExtraction =
-      disableExtraction === true ||
-      (Array.isArray(disableExtraction) && disableExtraction.includes(sourcePath))
-
-    /**
-     * Step 2: Statically extract from JSX < /> nodes
-     */
-    let programPath: NodePath<t.Program> | null = null
-
-    const res = {
-      styled: 0,
-      flattened: 0,
-      optimized: 0,
-      modified: 0,
-      found: 0,
-    }
-
-    const version = `${Math.random()}`
-
-    callTraverse({
-      // @ts-ignore
-      Program: {
-        enter(path) {
-          programPath = path
-        },
-      },
-
-      // styled() calls
-      CallExpression(path) {
-        if (disable || shouldDisableExtraction || extractStyledDefinitions === false) {
-          return
-        }
-
-        if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== 'styled') {
-          return
-        }
-
-        const variableName =
-          t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id)
-            ? path.parent.id.name
-            : 'unknown'
-
-        if (shouldPrintDebug) {
-          logger.info(` [styled] Found styled(${variableName})`)
-        }
-
-        const parentNode = path.node.arguments[0]
-
-        if (!t.isIdentifier(parentNode)) {
-          return
-        }
-        const parentName = parentNode.name
-        const definition = path.node.arguments[1]
-
-        if (!parentName || !definition || !t.isObjectExpression(definition)) {
-          return
-        }
-
-        // look up by parent first (e.g. View in `styled(View, {...})`), then by self
-        let Component =
-          getValidImportedComponent(parentName) || getValidImportedComponent(variableName)
-
-        // the parent's staticConfig knows nothing about the variants this call
-        // declares, so a JSX site passing one reads as an unknown prop and
-        // de-opts the whole element. evaluating the file gives us the real
-        // staticConfig, variants included.
-        const declaresVariants =
-          !didDynamicLoad &&
-          definition.properties.some(
-            (prop) =>
-              t.isObjectProperty(prop) &&
-              t.isIdentifier(prop.key) &&
-              prop.key.name === 'variants'
-          )
-
-        if ((!Component || declaresVariants) && enableDynamicEvaluation) {
-          didDynamicLoad = true
-          try {
-            if (shouldPrintDebug) {
-              logger.info(
-                `Unknown component: ${variableName} = styled(${parentName}) attempting dynamic load: ${sourcePath}`
-              )
-            }
-
-            const out = loadTamaguiSync({
-              forceExports: true,
-              components: [sourcePath],
-              cacheKey: version,
-            })
-
-            if (out?.components) {
-              propsWithFileInfo.allLoadedComponents = [
-                ...propsWithFileInfo.allLoadedComponents,
-                ...out.components,
-              ]
-
-              Component =
-                out.components.flatMap((x) => x.nameToInfo[variableName] ?? [])[0] ||
-                Component
-
-              if (!out.cached) {
-                const foundNames = out.components
-                  ?.map((x) => Object.keys(x.nameToInfo).join(', '))
-                  .join(', ')
-                  .trim()
-
-                if (foundNames) {
-                  colorLog(
-                    Color.FgYellow,
-                    `      | Tamagui found dynamic components: ${foundNames}`
-                  )
-                }
-              }
-            } else if (shouldPrintDebug) {
-              logger.info(`Couldn't load, got ${out}`)
-            }
-          } catch (err: any) {
-            if (shouldPrintDebug) {
-              logger.info(
-                `skip optimize styled(${variableName}), unable to pre-process (DEBUG=tamagui for more)`
-              )
-            }
-          }
-        }
-
-        if (!Component) {
-          if (shouldPrintDebug) {
-            logger.info(` No component found`)
-          }
-
-          /**
-           * We could/should still extract CSS just limited to validStyleProps
-           */
-          return
-        }
-
-        const componentSkipProps = new Set([
-          ...(Component.staticConfig.inlineWhenUnflattened || []),
-          ...(Component.staticConfig.inlineProps || []),
-          // for now skip variants, will return to them
-          'variants',
-          'defaultVariants',
-          // skip fontFamily its basically a "variant", important for theme use to be value always
-          'fontFamily',
-          'name',
-          'focusStyle',
-          'focusVisibleStyle',
-          'focusWithinStyle',
-          'disabledStyle',
-          'hoverStyle',
-          'pressStyle',
-        ])
-
-        // for now dont parse variants, spreads, etc
-        const skipped = new Set<t.ObjectProperty | t.SpreadElement | t.ObjectMethod>()
-        const styles = {}
-        const staticDefaultProps = {}
-
-        // Generate scope object at this level
-        const staticNamespace = getStaticBindingsForScope(
-          path.scope,
-          importsWhitelist,
-          sourcePath,
-          bindingCache,
-          shouldPrintDebug
-        )
-
-        const attemptEval = !evaluateVars
-          ? evaluateAstNode
-          : createEvaluator({
-              props: propsWithFileInfo,
-              staticNamespace,
-              sourcePath,
-              shouldPrintDebug,
-            })
-        const attemptEvalSafe = createSafeEvaluator(attemptEval)
-
-        for (const property of definition.properties) {
-          if (
-            t.isObjectProperty(property) &&
-            (t.isIdentifier(property.key) || t.isStringLiteral(property.key))
-          ) {
-            const key = t.isIdentifier(property.key)
-              ? property.key.name
-              : property.key.value
-            const defaultPropValue = attemptEvalSafe(property.value)
-            if (defaultPropValue !== FAILED_EVAL) {
-              staticDefaultProps[key] = defaultPropValue
-            }
-          }
-
-          if (
-            !t.isObjectProperty(property) ||
-            !t.isIdentifier(property.key) ||
-            !isValidStyleKey(property.key.name, Component.staticConfig) ||
-            // TODO make pseudos and variants work
-            // skip pseudos
-            pseudoDescriptors[property.key.name] ||
-            // skip variants
-            Component.staticConfig.variants?.[property.key.name] ||
-            componentSkipProps.has(property.key.name)
-          ) {
-            skipped.add(property)
-            continue
-          }
-          // attempt eval
-          const out = attemptEvalSafe(property.value)
-          if (out === FAILED_EVAL) {
-            skipped.add(property)
-          } else {
-            styles[property.key.name] = out
-          }
-        }
-
-        const out = getSplitStyles(
-          styles,
-          Component.staticConfig,
-          defaultTheme,
-          '',
-          componentState,
-          styleProps,
-          undefined,
-          undefined,
-          undefined,
-          undefined,
-          false,
-          shouldPrintDebug
-        )!
-
-        const classNames = {
-          ...out.classNames,
-        }
-
-        // // add in the style object as classnames
-        // const atomics = getPropsAtomic(out.style)
-        // for (const atomic of atomics) {
-        //   out.rulesToInsert = out.rulesToInsert || []
-        //   out.rulesToInsert.push(atomic)
-        //   classNames[atomic.property] = atomic.identifier
-        // }
-
-        if (shouldPrintDebug) {
-          logger.info(
-            [
-              `Extracted styled(${variableName})\n`,
-              JSON.stringify(styles, null, 2),
-              '\n classNames:',
-              JSON.stringify(classNames, null, 2),
-              '\n  rulesToInsert:',
-              out.rulesToInsert,
-            ].join(' ')
-          )
-        }
-
-        // don't replace definition values with class name strings -
-        // the runtime needs real values for animations, context, and group styles.
-        // we only emit the CSS rules so they're available if the runtime uses classNames.
-
-        if (out.rulesToInsert) {
-          for (const key in out.rulesToInsert) {
-            const styleObject = out.rulesToInsert[key]
-            onStyledDefinitionRule?.(
-              styleObject[StyleObjectIdentifier],
-              styleObject[StyleObjectRules]
-            )
-          }
-        }
-
-        res.styled++
-
-        // register so JSX handler can find this component (same-file and cross-file)
-        if (extractStyledDefinitions && enableDynamicEvaluation && Component) {
-          const dynamicStaticConfig = {
-            ...Component.staticConfig,
-            defaultProps: {
-              ...Component.staticConfig.defaultProps,
-              ...staticDefaultProps,
-            },
-          }
-
-          // add to allLoadedComponents with '' so getValidComponent matches when moduleName is ''
-          // (same-file styled components have '' as moduleName in JSX handler)
-          propsWithFileInfo.allLoadedComponents.push({
-            moduleName: '',
-            nameToInfo: { [variableName]: { staticConfig: dynamicStaticConfig } },
-          })
-
-          // also cache by file path so other files importing from this path can find it
-          if (sourcePath) {
-            let existing = dynamicComponentCache.get(sourcePath)
-            if (!existing) {
-              existing = { moduleName: sourcePath, nameToInfo: {} }
-              dynamicComponentCache.set(sourcePath, existing)
-            }
-            existing.nameToInfo[variableName] = { staticConfig: dynamicStaticConfig }
-          }
-        }
-
-        if (shouldPrintDebug) {
-          logger.info(`Extracted styled(${variableName})`)
-        }
-      },
-
-      JSXElement(traversePath) {
-        tm.mark('jsx-element', !!shouldPrintDebug)
-
-        const node = traversePath.node.openingElement
-        const ogAttributes = node.attributes.map((attr) => ({ ...attr }))
-        const componentName = findComponentName(traversePath.scope)
-        const closingElement = traversePath.node.closingElement
-
-        // skip non-identifier opening elements (member expressions, etc.)
-        if (
-          (closingElement && t.isJSXMemberExpression(closingElement?.name)) ||
-          !t.isJSXIdentifier(node.name)
-        ) {
-          if (shouldPrintDebug) {
-            logger.info(` skip non-identifier element`)
-          }
-
-          return
-        }
-
-        // validate its a proper import from tamagui (or internally inside tamagui)
-        const binding = traversePath.scope.getBinding(node.name.name)
-        let moduleName = ''
-        let dynamicComponent: { staticConfig: any } | null = null
-
-        if (binding) {
-          if (t.isImportDeclaration(binding.path.parent)) {
-            moduleName = binding.path.parent.source.value
-            if (!isValidImport(propsWithFileInfo, moduleName, binding.identifier.name)) {
-              // fallback: try dynamic component cache for local imports (relative or tsconfig alias)
-              if (enableDynamicEvaluation && sourcePath) {
-                const resolved = resolveImportPath(sourcePath, moduleName)
-                if (resolved) {
-                  // check cache first
-                  const cached = dynamicComponentCache.get(resolved)
-                  if (cached?.nameToInfo[binding.identifier.name]) {
-                    dynamicComponent = cached.nameToInfo[binding.identifier.name]
-                  } else if (
-                    !dynamicLoadingInProgress.has(resolved) &&
-                    mightHaveStyledComponents(resolved)
-                  ) {
-                    // proactively load the file
-                    dynamicLoadingInProgress.add(resolved)
-                    try {
-                      const out = loadTamaguiSync({
-                        forceExports: true,
-                        components: [resolved],
-                      })
-                      if (out?.components) {
-                        for (const comp of out.components) {
-                          // merge into cache
-                          let existing = dynamicComponentCache.get(resolved)
-                          if (!existing) {
-                            existing = { moduleName: resolved, nameToInfo: {} }
-                            dynamicComponentCache.set(resolved, existing)
-                          }
-                          Object.assign(existing.nameToInfo, comp.nameToInfo)
-                          // also add to allLoadedComponents so getValidComponent works
-                          propsWithFileInfo.allLoadedComponents.push({
-                            moduleName: resolved,
-                            nameToInfo: comp.nameToInfo,
-                          })
-                        }
-                        const cachedNow = dynamicComponentCache.get(resolved)
-                        if (cachedNow?.nameToInfo[binding.identifier.name]) {
-                          dynamicComponent = cachedNow.nameToInfo[binding.identifier.name]
-                        }
-                      }
-                    } catch (err) {
-                      if (shouldPrintDebug) {
-                        logger.info(` - Failed to dynamically load ${resolved}: ${err}`)
-                      }
-                    } finally {
-                      dynamicLoadingInProgress.delete(resolved)
-                    }
-                  }
-                }
-              }
-
-              if (!dynamicComponent) {
-                if (shouldPrintDebug) {
-                  logger.info(
-                    ` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}\n`
-                  )
-                }
-                return
-              }
-            }
-          }
-        }
-
-        const component =
-          dynamicComponent ||
-          getValidComponent(propsWithFileInfo, moduleName, node.name.name)
-        if (!component || !component.staticConfig) {
-          if (shouldPrintDebug) {
-            logger.info(`\n - No Tamagui conf for: ${node.name.name}\n`)
-          }
-          return
-        }
-
-        const originalNodeName = node.name.name
-
-        // found a valid tag
-        res.found++
-
-        const filePath = `./${relative(process.cwd(), sourcePath)}`
-        const lineNumbers = node.loc
-          ? node.loc.start.line +
-            (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : '')
-          : ''
-
-        const codePosition = `${filePath}:${lineNumbers}`
-
-        // debug just one
-        const debugPropValue = node.attributes
-          .filter(
-            (n) =>
-              t.isJSXAttribute(n) && t.isJSXIdentifier(n.name) && n.name.name === 'debug'
-          )
-          // @ts-ignore
-          .map((n: t.JSXAttribute) => {
-            if (n.value === null) return true
-            if (t.isStringLiteral(n.value)) return n.value.value as 'verbose'
-            return false
-          })[0] as boolean | 'verbose' | undefined
-
-        if (debugPropValue) {
-          shouldPrintDebug = debugPropValue
-        }
-
-        if (shouldPrintDebug) {
-          logger.info(
-            `\x1b[33m\x1b[0m ` + `${componentName} | ${codePosition} -------------------`
-          )
-          // prettier-ignore
-          logger.info(
-            [
-              '\x1b[1m',
-              '\x1b[32m',
-              `<${originalNodeName} />`,
-              disableDebugAttr ? '' : '🐛',
-            ].join(' ')
-          )
-        }
-
-        // add data-* debug attributes
-        if (platform !== 'native') {
-          if (shouldAddDebugProp && !disableDebugAttr) {
-            res.modified++
-            node.attributes.unshift(
-              t.jsxAttribute(t.jsxIdentifier('data-is'), t.stringLiteral(node.name.name))
-            )
-            if (componentName) {
-              node.attributes.unshift(
-                t.jsxAttribute(t.jsxIdentifier('data-in'), t.stringLiteral(componentName))
-              )
-            }
-
-            node.attributes.unshift(
-              t.jsxAttribute(
-                t.jsxIdentifier('data-at'),
-                t.stringLiteral(`${basename(filePath)}:${lineNumbers}`)
-              )
-            )
-          }
-        }
-
-        if (shouldDisableExtraction) {
-          if (shouldPrintDebug === 'verbose') {
-            logger.info(` ❌ Extraction disabled: ${JSON.stringify(disableExtraction)}\n`)
-          }
-          return
-        }
-
-        try {
-          const { staticConfig } = component
-
-          const defaultProps = {
-            ...getDefaultProps(staticConfig),
-          }
-          const variants = staticConfig.variants || {}
-          const isTextView = staticConfig.isText || false
-          const validStyles = staticConfig?.validStyles ?? {}
-
-          // find render="a" render="main" etc dom indicators
-          let tagName = defaultProps.render ?? (isTextView ? 'span' : 'div')
-          traversePath
-            .get('openingElement')
-            .get('attributes')
-            .forEach((path) => {
-              const attr = path.node
-              if (t.isJSXSpreadAttribute(attr)) return
-              if (attr.name.name !== 'render') return
-              const val = attr.value
-              if (!t.isStringLiteral(val)) return
-              tagName = val.value
-            })
-
-          if (shouldPrintDebug === 'verbose') {
-            console.info(` Start tag ${tagName}`)
-          }
-
-          const flatNodeName = getFlattenedNode?.({ isTextView, tag: tagName })
-
-          const inlineProps = new Set([
-            // adding some always inline props
-            ...(restProps.inlineProps || []),
-            ...(staticConfig.inlineProps || []),
-          ])
-
-          const canFlattenTransition =
-            isTargetingHTML &&
-            tamaguiConfig?.animations.outputStyle === 'css' &&
-            !tamaguiConfig.animationDrivers
-
-          const deoptProps = new Set([
-            // css-only transitions lower to ordinary css; every runtime driver
-            // needs the component preserved so it can respond to prop changes.
-            'animation',
-            ...(canFlattenTransition ? [] : ['transition']),
-            'animateOnly',
-            'animatePresence',
-            'disableOptimization',
-
-            ...(!isTargetingHTML
-              ? [
-                  // native has no css pseudo selectors; these are runtime-only on
-                  // rn (event listeners + style merge in createComponent), and if
-                  // we let them flatten into the stylesheet they get written
-                  // under a literal key that rn treats as an unknown style prop.
-                  // hover is intentionally excluded: it is no-op on native and
-                  // should be dropped rather than preserved as runtime work.
-                  'pressStyle',
-                  'focusStyle',
-                  'focusVisibleStyle',
-                  'focusWithinStyle',
-                  'disabledStyle',
-                ]
-              : []),
-
-            // when using a non-CSS driver, de-opt on enterStyle/exitStyle
-            ...(tamaguiConfig?.animations.isReactNative
-              ? ['enterStyle', 'exitStyle']
-              : []),
-          ])
-
-          const inlineWhenUnflattened = new Set(staticConfig.inlineWhenUnflattened || [])
-
-          // Generate scope object at this level
-          const staticNamespace = getStaticBindingsForScope(
-            traversePath.scope,
-            importsWhitelist,
-            sourcePath,
-            bindingCache,
-            shouldPrintDebug
-          )
-
-          const attemptEval = !evaluateVars
-            ? evaluateAstNode
-            : createEvaluator({
-                props: propsWithFileInfo,
-                staticNamespace,
-                sourcePath,
-                traversePath,
-                shouldPrintDebug,
-              })
-          const attemptEvalSafe = createSafeEvaluator(attemptEval)
-
-          if (shouldPrintDebug) {
-            logger.info(`  staticNamespace ${Object.keys(staticNamespace).join(', ')}`)
-          }
-
-          //
-          //  SPREADS SETUP
-          //
-
-          if (couldntParse) {
-            return
-          }
-
-          tm.mark('jsx-element-flattened', !!shouldPrintDebug)
-
-          let attrs: ExtractedAttr[] = []
-          let shouldDeopt = false
-          const inlined = new Map<string, any>()
-          const variantValues = new Map<string, any>()
-          let hasSetOptimized = false
-          const inlineWhenUnflattenedOGVals = {}
-
-          // RUN first pass
-
-          // normalize all conditionals so we can evaluate away easier later
-          // at the same time lets normalize shorthand media queries into spreads:
-          // that way we can parse them with the same logic later on
-          //
-          // {...media.sm && { color: x ? 'red' : 'blue' }}
-          // => {...media.sm && x && { color: 'red' }}
-          // => {...media.sm && !x && { color: 'blue' }}
-          //
-          // $sm={{ color: 'red' }}
-          // => {...media.sm && { color: 'red' }}
-          //
-          // $sm={{ color: x ? 'red' : 'blue' }}
-          // => {...media.sm && x && { color: 'red' }}
-          // => {...media.sm && !x && { color: 'blue' }}
-
-          const propMapperStyleState: GetStyleState = {
-            staticConfig,
-            usedKeys: {},
-            classNames: {},
-            style: {},
-            theme: defaultTheme,
-            viewProps: defaultProps,
-            conf: tamaguiConfig!,
-            props: defaultProps,
-            componentState,
-            styleProps: {
-              ...styleProps,
-              resolveValues: 'auto',
-            },
-            debug: shouldPrintDebug,
-          }
-
-          attrs = traversePath
-            .get('openingElement')
-            .get('attributes')
-            .flatMap((path) => {
-              // avoid work
-              if (shouldDeopt) {
-                return
-              }
-
-              try {
-                const res = evaluateAttribute(path)
-                if (!res) {
-                  path.remove()
-                }
-
-                return res
-              } catch (err: any) {
-                if (shouldPrintDebug) {
-                  logger.info(
-                    [
-                      'Recoverable error extracting attribute',
-                      err.message,
-                      shouldPrintDebug === 'verbose' ? err.stack : '',
-                    ].join(' ')
-                  )
-                  if (shouldPrintDebug === 'verbose') {
-                    logger.info(`node ${path.node?.type}`)
-                  }
-                }
-                // dont flatten if we run into error
-                inlined.set(`${Math.random()}`, 'spread')
-                return {
-                  type: 'attr',
-                  value: path.node,
-                } as const
-              }
-            })
-            .flat(4)
-            .filter(isPresent)
-
-          if (shouldPrintDebug) {
-            logger.info(
-              ['  - attrs (before):\n', logLines(attrs.map(attrStr).join(', '))].join(' ')
-            )
-          }
-
-          // START function evaluateAttribute
-          function evaluateAttribute(
-            path: NodePath<t.JSXAttribute | t.JSXSpreadAttribute>
-          ): ExtractedAttr | ExtractedAttr[] | null {
-            const attribute = path.node
-            const attr: ExtractedAttr = { type: 'attr', value: attribute }
-            // ...spreads
-            if (t.isJSXSpreadAttribute(attribute)) {
-              const arg = attribute.argument
-              const conditional = t.isConditionalExpression(arg)
-                ? // <YStack {...isSmall ? { color: 'red } : { color: 'blue }}
-                  ([arg.test, arg.consequent, arg.alternate] as const)
-                : t.isLogicalExpression(arg) && arg.operator === '&&'
-                  ? // <YStack {...isSmall && { color: 'red }}
-                    ([arg.left, arg.right, null] as const)
-                  : null
-
-              if (conditional) {
-                const [test, alt, cons] = conditional
-                if (!test) throw new Error(`no test`)
-                if ([alt, cons].some((side) => side && !isStaticObject(side))) {
-                  if (shouldPrintDebug) {
-                    logger.info(`not extractable ${alt} ${cons}`)
-                  }
-                  return attr
-                }
-                // split into individual ternaries per object property
-                return [
-                  ...(flattenNestedTernaries(test, alt) || []),
-                  ...((cons &&
-                    flattenNestedTernaries(t.unaryExpression('!', test), cons)) ||
-                    []),
-                ].map((ternary) => ({
-                  type: 'ternary',
-                  value: ternary,
-                }))
-              }
-            }
-            // END ...spreads
-
-            // directly keep these
-            // couldn't evaluate spread, undefined name, or name is not string
-            if (
-              t.isJSXSpreadAttribute(attribute) ||
-              !attribute.name ||
-              typeof attribute.name.name !== 'string'
-            ) {
-              if (shouldPrintDebug) {
-                logger.info('  ! inlining, spread attr')
-              }
-              inlined.set(`${Math.random()}`, 'spread')
-              return attr
-            }
-
-            const name = attribute.name.name
-
-            // in tamagui style is handled at the end of the style loop so its not as simple as just
-            // adding this as a "style" property
-            // its not used often when using tamagui so not optimizing it for now
-            if (name === 'style') {
-              shouldDeopt = true
-              return null
-            }
-
-            if (excludeProps?.has(name)) {
-              if (shouldPrintDebug) {
-                logger.info(['  excluding prop', name].join(' '))
-              }
-              return null
-            }
-
-            if (inlineProps.has(name)) {
-              inlined.set(name, name)
-              if (shouldPrintDebug) {
-                logger.info(['  ! inlining, inline prop', name].join(' '))
-              }
-              return attr
-            }
-
-            // pass className, key, and style props through untouched
-            if (UNTOUCHED_PROPS[name]) {
-              return attr
-            }
-
-            if (INLINE_EXTRACTABLE[name]) {
-              inlined.set(name, INLINE_EXTRACTABLE[name])
-              return attr
-            }
-
-            if (
-              name.startsWith('data-') ||
-              name.startsWith('aria-') ||
-              validHTMLAttributes[name]
-            ) {
-              return attr
-            }
-
-            // de-opt on enterStyle={expression}
-            if (
-              (name === 'enterStyle' || name === 'exitStyle') &&
-              t.isJSXExpressionContainer(attribute?.value)
-            ) {
-              shouldDeopt = true
-              return attr
-            }
-
-            // shorthand media queries
-            if (name[0] === '$' && t.isJSXExpressionContainer(attribute?.value)) {
-              const shortname = name.slice(1)
-              if (mediaQueryConfig[shortname]) {
-                const expression = attribute.value.expression
-                if (!t.isJSXEmptyExpression(expression)) {
-                  const ternaries = flattenNestedTernaries(
-                    t.stringLiteral(shortname),
-                    expression,
-                    {
-                      inlineMediaQuery: shortname,
-                    }
-                  )
-                  if (ternaries) {
-                    return ternaries.map((value) => ({
-                      type: 'ternary',
-                      value,
-                    }))
-                  }
-                }
-              }
-            }
-
-            const [value, valuePath] = (() => {
-              if (t.isJSXExpressionContainer(attribute?.value)) {
-                return [attribute.value.expression!, path.get('value')!] as const
-              }
-              return [attribute.value!, path.get('value')!] as const
-            })()
-
-            // these props have runtime-only meaning on native. decide from the
-            // original jsx attr, before getSplitStyles has a chance to drop
-            // native-dead work like hoverStyle from its static output.
-            if (
-              deoptProps.has(name) ||
-              (platform === 'native' &&
-                name[0] === '$' &&
-                (name.startsWith('$theme-') ||
-                  (name.startsWith('$group-') && getGroupPseudo(name) !== 'hover')))
-            ) {
-              inlined.set(name, true)
-              return attr
-            }
-
-            const remove = () => {
-              Array.isArray(valuePath)
-                ? valuePath.map((p) => p.remove())
-                : valuePath.remove()
-            }
-
-            if (name === 'ref') {
-              if (shouldPrintDebug) {
-                logger.info(['  ! inlining, ref', name].join(' '))
-              }
-              inlined.set('ref', 'ref')
-              return attr
-            }
-
-            if (name === 'render') {
-              // Only optimize string literal render props
-              // JSX elements and functions should deopt
-              if (!value || value.type !== 'StringLiteral') {
-                if (shouldPrintDebug) {
-                  logger.info(`  ! deopt on render prop (not a string literal)`)
-                }
-                shouldDeopt = true
-              }
-              return {
-                type: 'attr',
-                value: path.node,
-              }
-            }
-
-            // native shouldn't extract variables
-            if (disableExtractVariables === true) {
-              if (value) {
-                if (value.type === 'StringLiteral' && value.value[0] === '$') {
-                  if (shouldPrintDebug) {
-                    logger.info(
-                      [
-                        `  ! inlining, native disable extract: ${name} =`,
-                        value.value,
-                      ].join(' ')
-                    )
-                  }
-                  inlined.set(name, true)
-                  return attr
-                }
-              }
-            }
-
-            if (name === 'theme') {
-              inlined.set('theme', attr.value)
-              return attr
-            }
-
-            // static `group="<literal>"` is handled at compile-time in
-            // extractToClassNames (emits container CSS + adds `t_group_<name>`
-            // className), so we drop the JSX attribute here without bailing
-            // flattening. dynamic `group={expr}` falls through to runtime.
-            if (isTargetingHTML && name === 'group' && t.isStringLiteral(value)) {
-              return []
-            }
-
-            // if value can be evaluated, extract it and filter it out
-            const styleValue = attemptEvalSafe(value)
-
-            // media-like blocks with nested $-keys (eg $theme-dark={{ $sm: {…} }})
-            // can't resolve to static CSS in one pass — keep them on the runtime path
-            if (
-              name[0] === '$' &&
-              (name.startsWith('$theme-') || name.startsWith('$group-')) &&
-              styleValue &&
-              typeof styleValue === 'object' &&
-              Object.keys(styleValue).some((k) => k[0] === '$')
-            ) {
-              if (shouldPrintDebug) {
-                logger.info(`  ! nested media-like key inside ${name}, deopt to runtime`)
-              }
-              inlined.set(name, true)
-              return attr
-            }
-
-            // never flatten if a prop isn't a valid static attribute
-            // only post prop-mapping
-            if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
-              let out: any = null
-
-              // for now passing empty props {}, a bit odd, need to at least document
-              // for now we don't expose custom components so just noting behavior
-              propMapper(name, styleValue, propMapperStyleState, false, (key, val) => {
-                out ||= {}
-                out[key] = val
-              })
-
-              if (out) {
-                if (isTargetingHTML) {
-                  // translate to DOM-compat
-                  out = reactNativeWebInternals.createDOMProps(
-                    isTextView ? 'span' : 'div',
-                    out
-                  )
-                  // remove className - we dont use rnw styling
-                  delete out.className
-                  // remove style - rnw createDOMProps unconditionally emits a
-                  // (possibly empty) style key, but we passed it a single
-                  // non-style prop. Leaving it in causes Object.keys(out) to
-                  // iterate twice and emit the original JSXAttribute twice
-                  // (e.g. duplicate testID), breaking the DOM output.
-                  delete out.style
-                }
-              }
-
-              let didInline = false
-              const attributes = Object.keys(out).map((key) => {
-                const val = out[key]
-                const isStyle = isValidStyleKey(key, staticConfig)
-                if (isStyle) {
-                  return {
-                    type: 'style',
-                    value: { [key]: styleValue },
-                    name: key,
-                    attr: path.node,
-                  } as const
-                }
-                if (
-                  validHTMLAttributes[key] ||
-                  key.startsWith('aria-') ||
-                  key.startsWith('data-') ||
-                  // this is debug stuff added by vite / new jsx transform
-                  key === '__source' ||
-                  key === '__self'
-                ) {
-                  if (
-                    styleValue === FAILED_EVAL &&
-                    key !== name &&
-                    t.isJSXAttribute(attr.value)
-                  ) {
-                    // createDOMProps renamed the prop (e.g. testID -> data-testid).
-                    // preserve the original expression value but use the new
-                    // attribute name. restricted to FAILED_EVAL because the
-                    // later `case 'attr'` rename pass only runs on
-                    // statically-evaluable values; for static values that pass
-                    // intentionally preserves some prop names (e.g. focusable
-                    // in v2) instead of doing the createDOMProps rename.
-                    return {
-                      type: 'attr',
-                      value: t.jsxAttribute(t.jsxIdentifier(key), attr.value.value),
-                    } as const
-                  }
-                  return attr
-                }
-                if (shouldPrintDebug) {
-                  logger.info('  ! inlining, non-static ' + key)
-                }
-                didInline = true
-                inlined.set(key, val)
-                return val
-              })
-
-              // weird logic whats going on here
-              if (didInline) {
-                if (shouldPrintDebug) {
-                  logger.info(
-                    `  bailing flattening due to attributes ${attributes.map((x) =>
-                      x.toString()
-                    )}`
-                  )
-                }
-                // bail
-                return attr
-              }
-
-              // return evaluated attributes
-              return attributes
-            }
-
-            // FAILED = dynamic or ternary, keep going
-            if (styleValue !== FAILED_EVAL) {
-              if (inlineWhenUnflattened.has(name)) {
-                // preserve original value for restoration
-                inlineWhenUnflattenedOGVals[name] = { styleValue, attr }
-              }
-
-              if (isValidStyleKey(name, staticConfig)) {
-                // $theme- / $group- styles extract through the atomic-CSS pipeline
-                // (extractToClassNames → createMediaStyle), so they fall through to
-                // the normal style return below. The one case we still bail is
-                // $group-<name>-* when an ancestor element declares `group="<name>"`
-                // together with `untilMeasured` — the runtime measures the parent
-                // and only then emits child styles, which can't be modeled in CSS.
-                // $platform- can be flattened if the platform matches.
-                if (name[0] === '$') {
-                  if (name.startsWith('$group-')) {
-                    const groupName = name.slice('$group-'.length).split('-')[0]
-                    if (groupName && hasUntilMeasuredAncestor(path, groupName)) {
-                      if (shouldPrintDebug) {
-                        logger.info(
-                          `  ! group="${groupName}" ancestor has untilMeasured, not flattening: ${name}`
-                        )
-                      }
-                      inlined.set(name, true)
-                      return attr
-                    }
-                  }
-
-                  // $platform-web, $platform-native, $platform-ios, $platform-android, $platform-tv, $platform-androidtv, $platform-tvos
-                  if (name.startsWith('$platform-')) {
-                    const platformName = name.slice(10) // remove '$platform-'
-                    const isMatchingPlatform =
-                      platformName === platform ||
-                      (platformName === 'native' && platform === 'native') ||
-                      (platformName === 'web' && platform === 'web')
-
-                    if (isMatchingPlatform && typeof styleValue === 'object') {
-                      // Flatten the inner styles directly
-                      if (shouldPrintDebug) {
-                        logger.info(
-                          `  flattening $platform-${platformName}: ${JSON.stringify(styleValue)}`
-                        )
-                      }
-                      return Object.entries(styleValue).map(([key, val]) => ({
-                        type: 'style' as const,
-                        value: { [key]: val },
-                        name: key,
-                        attr: path.node,
-                      }))
-                    } else {
-                      // On native builds, sub-platform variants (android, ios, tv, androidtv, tvos)
-                      // can't be resolved at compile time - leave for runtime evaluation
-                      if (
-                        platform === 'native' &&
-                        nativeOnlyPlatforms.has(platformName)
-                      ) {
-                        if (shouldPrintDebug) {
-                          logger.info(
-                            `  ! keeping platform-specific style for runtime evaluation: ${name}`
-                          )
-                        }
-                        inlined.set(name, true)
-                        return attr
-                      }
-                      // Platform doesn't match, skip these styles entirely
-                      if (shouldPrintDebug) {
-                        logger.info(`  ! skipping non-matching platform style: ${name}`)
-                      }
-                      return []
-                    }
-                  }
-                }
-                if (shouldPrintDebug) {
-                  logger.info(`  style: ${name} = ${JSON.stringify(styleValue)}`)
-                }
-                if (!(name in defaultProps)) {
-                  if (!hasSetOptimized) {
-                    res.optimized++
-                    hasSetOptimized = true
-                  }
-                }
-                return {
-                  type: 'style',
-                  value: { [name]: styleValue },
-                  name,
-                  attr: path.node,
-                }
-              }
-              if (variants[name]) {
-                variantValues.set(name, styleValue)
-              }
-              inlined.set(name, true)
-              return attr
-            }
-
-            // ternaries!
-
-            // binary ternary, we can eventually make this smarter but step 1
-            // basically for the common use case of:
-            // opacity={(conditional ? 0 : 1) * scale}
-            if (t.isBinaryExpression(value)) {
-              if (shouldPrintDebug) {
-                logger.info(` binary expression ${name} = ${value}`)
-              }
-              const { operator, left, right } = value
-              // if one side is a ternary, and the other side is evaluatable, we can maybe extract
-              const lVal = attemptEvalSafe(left)
-              const rVal = attemptEvalSafe(right)
-              if (shouldPrintDebug) {
-                logger.info(
-                  `  evalBinaryExpression lVal ${String(lVal)}, rVal ${String(rVal)}`
-                )
-              }
-              if (lVal !== FAILED_EVAL && t.isConditionalExpression(right)) {
-                const ternary = addBinaryConditional(operator, left, right)
-                if (ternary) return ternary
-              }
-              if (rVal !== FAILED_EVAL && t.isConditionalExpression(left)) {
-                const ternary = addBinaryConditional(operator, right, left)
-                if (ternary) return ternary
-              }
-              if (shouldPrintDebug) {
-                logger.info(`  evalBinaryExpression cant extract`)
-              }
-              inlined.set(name, true)
-              return attr
-            }
-
-            const staticConditional = getStaticConditional(value)
-            if (staticConditional) {
-              if (shouldPrintDebug === 'verbose') {
-                logger.info(` static conditional ${name} ${value}`)
-              }
-              return { type: 'ternary', value: staticConditional }
-            }
-
-            const staticLogical = getStaticLogical(value)
-            if (staticLogical) {
-              if (shouldPrintDebug === 'verbose') {
-                logger.info(` static ternary ${name} =  ${value}`)
-              }
-              return { type: 'ternary', value: staticLogical }
-            }
-
-            // if we've made it this far, the prop stays inline
-            inlined.set(name, true)
-            if (shouldPrintDebug) {
-              logger.info(` ! inline no match ${name} ${value}`)
-            }
-
-            //
-            // RETURN ATTR
-            //
-            return attr
-
-            // attr helpers:
-            function addBinaryConditional(
-              operator: any,
-              staticExpr: any,
-              cond: t.ConditionalExpression
-            ): ExtractedAttr | null {
-              if (getStaticConditional(cond)) {
-                const alt = attemptEval(
-                  t.binaryExpression(operator, staticExpr, cond.alternate)
-                )
-                const cons = attemptEval(
-                  t.binaryExpression(operator, staticExpr, cond.consequent)
-                )
-                if (shouldPrintDebug) {
-                  logger.info(['  binaryConditional', cond.test, cons, alt].join(' '))
-                }
-                return {
-                  type: 'ternary',
-                  value: {
-                    test: cond.test,
-                    remove,
-                    alternate: { [name]: alt },
-                    consequent: { [name]: cons },
-                  },
-                }
-              }
-              return null
-            }
-
-            function getStaticConditional(value: t.Node): Ternary | null {
-              if (t.isConditionalExpression(value)) {
-                try {
-                  const aVal = attemptEval(value.alternate)
-                  const cVal = attemptEval(value.consequent)
-                  if (shouldPrintDebug) {
-                    const type = value.test.type
-                    logger.info(['      static ternary', type, cVal, aVal].join(' '))
-                  }
-                  return {
-                    test: value.test,
-                    remove,
-                    consequent: { [name]: cVal },
-                    alternate: { [name]: aVal },
-                  }
-                } catch (err: any) {
-                  if (shouldPrintDebug) {
-                    logger.info(['       cant eval ternary', err.message].join(' '))
-                  }
-                }
-              }
-              return null
-            }
-
-            function getStaticLogical(value: t.Node): Ternary | null {
-              if (t.isLogicalExpression(value)) {
-                if (value.operator === '&&') {
-                  try {
-                    const val = attemptEval(value.right)
-                    if (shouldPrintDebug) {
-                      logger.info(['  staticLogical', value.left, name, val].join(' '))
-                    }
-                    return {
-                      test: value.left,
-                      remove,
-                      consequent: { [name]: val },
-                      alternate: null,
-                    }
-                  } catch (err) {
-                    if (shouldPrintDebug) {
-                      logger.info(['  cant static eval logical', err].join(' '))
-                    }
-                  }
-                }
-              }
-              return null
-            }
-          } // END function evaluateAttribute
-
-          function isStaticObject(obj: t.Node): obj is t.ObjectExpression {
-            return (
-              t.isObjectExpression(obj) &&
-              obj.properties.every((prop) => {
-                if (!t.isObjectProperty(prop)) {
-                  // console.warn('not an object prop?', prop)
-                  return false
-                }
-                const propName = prop.key['name']
-                if (!isValidStyleKey(propName, staticConfig) && propName !== 'render') {
-                  if (shouldPrintDebug) {
-                    logger.info(['  not a valid style prop!', propName].join(' '))
-                  }
-                  return false
-                }
-                return true
-              })
-            )
-          }
-
-          // side = {
-          //   color: 'red',
-          //   background: x ? 'red' : 'green',
-          //   $gtSm: { color: 'green' }
-          // }
-          // => Ternary<test, { color: 'red' }, null>
-          // => Ternary<test && x, { background: 'red' }, null>
-          // => Ternary<test && !x, { background: 'green' }, null>
-          // => Ternary<test && '$gtSm', { color: 'green' }, null>
-          function flattenNestedTernaries(
-            test: t.Expression,
-            side: t.Expression | null,
-            ternaryPartial: Partial<Ternary> = {}
-          ): null | Ternary[] {
-            if (!side) {
-              return null
-            }
-            if (!isStaticObject(side)) {
-              throw new Error('not extractable')
-            }
-            return side.properties.flatMap((property) => {
-              if (!t.isObjectProperty(property)) {
-                throw new Error('expected object property')
-              }
-              // this could be a recurse here if we want to get fancy
-              if (t.isConditionalExpression(property.value)) {
-                // merge up into the parent conditional, split into two
-                const [truthy, falsy] = [
-                  t.objectExpression([
-                    t.objectProperty(property.key, property.value.consequent),
-                  ]),
-                  t.objectExpression([
-                    t.objectProperty(property.key, property.value.alternate),
-                  ]),
-                ].map((x) => attemptEval(x))
-                return [
-                  createTernary({
-                    remove() {},
-                    ...ternaryPartial,
-                    test: t.logicalExpression('&&', test, property.value.test),
-                    consequent: truthy,
-                    alternate: null,
-                  }),
-                  createTernary({
-                    ...ternaryPartial,
-                    test: t.logicalExpression(
-                      '&&',
-                      test,
-                      t.unaryExpression('!', property.value.test)
-                    ),
-                    consequent: falsy,
-                    alternate: null,
-                    remove() {},
-                  }),
-                ]
-              }
-              const obj = t.objectExpression([
-                t.objectProperty(property.key, property.value),
-              ])
-              const consequent = attemptEval(obj)
-              return createTernary({
-                remove() {},
-                ...ternaryPartial,
-                test,
-                consequent,
-                alternate: null,
-              })
-            })
-          }
-
-          if (couldntParse || shouldDeopt) {
-            if (shouldPrintDebug) {
-              logger.info(
-                [`  avoid optimizing:`, { couldntParse, shouldDeopt }].join(' ')
-              )
-            }
-            node.attributes = ogAttributes
-            return
-          }
-
-          // before deopt, can still optimize
-          const parentFn = findTopmostFunction(traversePath)
-          if (parentFn) {
-            modifiedComponents.add(parentFn)
-          }
-
-          // flatten logic!
-          // fairly simple check to see if all children are text
-          const hasSpread = attrs.some(
-            (x) => x.type === 'attr' && t.isJSXSpreadAttribute(x.value)
-          )
-
-          const hasOnlyStringChildren =
-            !hasSpread &&
-            (node.selfClosing ||
-              (traversePath.node.children &&
-                traversePath.node.children.every((x) => x.type === 'JSXText')))
-
-          let themeVal = inlined.get('theme')
-
-          // on native we can't flatten when theme prop is set
-          if (platform !== 'native') {
-            inlined.delete('theme')
-          }
-
-          for (const [key] of inlined) {
-            const isStaticObjectVariant =
-              staticConfig.variants?.[key] && variantValues.has(key)
-            if (INLINE_EXTRACTABLE[key] || isStaticObjectVariant) {
-              inlined.delete(key)
-            }
-          }
-
-          const canFlattenProps = inlined.size === 0
-
-          let shouldFlatten = Boolean(
-            flatNodeName &&
-            !shouldDeopt &&
-            canFlattenProps &&
-            !hasSpread &&
-            !staticConfig.isStyledHOC &&
-            !staticConfig.isHOC &&
-            !staticConfig.isReactNative &&
-            staticConfig.neverFlatten !== true &&
-            (staticConfig.neverFlatten === 'jsx' ? hasOnlyStringChildren : true)
-          )
-
-          const usedThemeKeys = new Set<string>()
-          // if it accesses any theme values during evaluation
-          themeAccessListeners.add((key) => {
-            if (disableExtractVariables) {
-              usedThemeKeys.add(key)
-              shouldFlatten = false
-              if (shouldPrintDebug === 'verbose') {
-                logger.info([' ! accessing theme key, avoid flatten', key].join(' '))
-              }
-            }
-          })
-
-          if (!shouldFlatten) {
-            if (shouldPrintDebug) {
-              logger.info(
-                `Deopting ${JSON.stringify({
-                  shouldFlatten,
-                  shouldDeopt,
-                  canFlattenProps,
-                  hasSpread,
-                  neverFlatten: staticConfig.neverFlatten,
-                })}`
-              )
-            }
-            node.attributes = ogAttributes
-            return
-          }
-
-          // ensure the default styles are there
-          let skipMap = false
-          const defaultStyleAttrs = Object.keys(defaultProps).flatMap((key) => {
-            if (skipMap) return []
-            const value = defaultProps[key]
-            if (key === 'theme' && !themeVal) {
-              if (platform === 'native') {
-                shouldFlatten = false
-                skipMap = true
-                inlined.set('theme', { value: t.stringLiteral(value) })
-              }
-              themeVal = { value: t.stringLiteral(value) }
-              return []
-            }
-            if (!isValidStyleKey(key, staticConfig)) {
-              return []
-            }
-            const name = tamaguiConfig?.shorthands[key] || key
-            if (value === undefined) {
-              logger.warn(
-                `⚠️ Error evaluating default style for component, prop ${key} ${value}`
-              )
-              shouldDeopt = true
-              return
-            }
-            if (name[0] === '$' && mediaQueryConfig[name.slice(1)]) {
-              defaultProps[key] = undefined
-              return evaluateAttribute({
-                node: t.jsxAttribute(
-                  t.jsxIdentifier(name),
-                  t.jsxExpressionContainer(
-                    t.objectExpression(
-                      Object.keys(value)
-                        .filter((k) => {
-                          return typeof value[k] !== 'undefined'
-                        })
-                        .map((k) => {
-                          return t.objectProperty(t.identifier(k), literalToAst(value[k]))
-                        })
-                    )
-                  )
-                ),
-              } as any)
-            }
-            const attr: ExtractedAttrStyle = {
-              type: 'style',
-              name,
-              value: { [name]: value },
-            }
-            return attr
-          }) as ExtractedAttr[]
-
-          if (!skipMap) {
-            if (defaultStyleAttrs.length) {
-              attrs = [...defaultStyleAttrs, ...attrs]
-            }
-          }
-
-          // combine ternaries
-          let ternaries: Ternary[] = []
-          attrs = attrs
-            .reduce<(ExtractedAttr | ExtractedAttr[])[]>((out, cur) => {
-              const next = attrs[attrs.indexOf(cur) + 1]
-              if (cur.type === 'ternary') {
-                ternaries.push(cur.value)
-              }
-              if ((!next || next.type !== 'ternary') && ternaries.length) {
-                // finish, process
-                const normalized = normalizeTernaries(ternaries).map(
-                  ({ alternate, consequent, ...rest }) => {
-                    return {
-                      type: 'ternary' as const,
-                      value: {
-                        ...rest,
-                        alternate: alternate || null,
-                        consequent: consequent || null,
-                      },
-                    }
-                  }
-                )
-                try {
-                  return [...out, ...normalized]
-                } finally {
-                  if (shouldPrintDebug) {
-                    logger.info(
-                      `    normalizeTernaries (${ternaries.length} => ${normalized.length})`
-                    )
-                  }
-                  ternaries = []
-                }
-              }
-              if (cur.type === 'ternary') {
-                return out
-              }
-              out.push(cur)
-              return out
-            }, [])
-            .flat()
-
-          const ternaryBranchProps = new Map<string, Ternary>()
-          const allTernaries = attrs.flatMap((attr) =>
-            attr.type === 'ternary' ? attr.value : []
-          )
-          if (allTernaries.length > 1) {
-            for (const ternary of normalizeTernaries(allTernaries)) {
-              ternaryBranchProps.set(getTernaryKey(ternary.test), ternary)
-            }
-          }
-
-          // wrap theme around children on flatten
-          // account for shouldFlatten could change w the above block "if (disableExtractVariables)"
-          if (themeVal) {
-            if (!programPath) {
-              console.warn(
-                `No program path found, avoiding importing flattening / importing theme in ${sourcePath}`
-              )
-            } else {
-              if (shouldPrintDebug) {
-                logger.info(['  - wrapping theme', themeVal].join(' '))
-              }
-
-              // remove theme attribute from flattened node
-              attrs = attrs.filter(
-                (x) =>
-                  !(
-                    x.type === 'attr' &&
-                    t.isJSXAttribute(x.value) &&
-                    x.value.name.name === 'theme'
-                  )
-              )
-
-              // add import
-              if (!hasImportedTheme) {
-                hasImportedTheme = true
-                programPath.node.body.push(
-                  t.importDeclaration(
-                    [
-                      t.importSpecifier(
-                        t.identifier('_TamaguiTheme'),
-                        t.identifier('Theme')
-                      ),
-                    ],
-                    t.stringLiteral('@tamagui/web')
-                  )
-                )
-              }
-
-              traversePath.replaceWith(
-                t.jsxElement(
-                  t.jsxOpeningElement(t.jsxIdentifier('_TamaguiTheme'), [
-                    t.jsxAttribute(t.jsxIdentifier('name'), themeVal.value),
-                  ]),
-                  t.jsxClosingElement(t.jsxIdentifier('_TamaguiTheme')),
-                  [traversePath.node]
-                )
-              )
-            }
-          }
-
-          if (shouldPrintDebug) {
-            logger.info(
-              ['  - attrs (flattened): \n', logLines(attrs.map(attrStr).join(', '))].join(
-                ' '
-              )
-            )
-          }
-
-          function mergeToEnd(obj: object, key: string, val: any) {
-            if (key in obj) {
-              delete obj[key]
-            }
-            obj[key] = val
-          }
-
-          // preserves order
-          function normalizeStyleWithoutVariants(style: any) {
-            let res = {}
-            for (const key in style) {
-              if (staticConfig.variants && key in staticConfig.variants) {
-                mergeToEnd(res, key, style[key])
-              } else {
-                const expanded = normalizeStyle({ [key]: style[key] }, true)
-                for (const key in expanded) {
-                  mergeToEnd(res, key, expanded[key])
-                }
-              }
-            }
-            return res
-          }
-
-          // evaluates all static attributes into a simple object
-          let foundStaticProps = {}
-
-          for (const key in attrs) {
-            const cur = attrs[key]
-            if (cur.type === 'style') {
-              // remove variants because they are processed later, and can lead to invalid values here
-              // see <Spacer flex /> where flex looks like a valid style, but is a variant
-              const expanded = normalizeStyleWithoutVariants(cur.value)
-              // preserve order
-              for (const key in expanded) {
-                mergeToEnd(foundStaticProps, key, expanded[key])
-              }
-              continue
-            }
-            if (cur.type === 'attr') {
-              if (t.isJSXSpreadAttribute(cur.value)) {
-                continue
-              }
-              if (!t.isJSXIdentifier(cur.value.name)) {
-                continue
-              }
-              const key = cur.value.name.name
-              // undefined = boolean true
-              const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true))
-              if (value !== FAILED_EVAL) {
-                mergeToEnd(foundStaticProps, key, value)
-              }
-            }
-          }
-
-          // must preserve exact order
-          const completeProps = {}
-          for (const key in defaultProps) {
-            if (!(key in foundStaticProps)) {
-              completeProps[key] = defaultProps[key]
-            }
-          }
-          for (const key in foundStaticProps) {
-            completeProps[key] = foundStaticProps[key]
-          }
-
-          // expand shorthands, de-opt variables
-          attrs = attrs.reduce<ExtractedAttr[]>((acc, cur) => {
-            if (!cur) return acc
-            if (cur.type === 'attr' && !t.isJSXSpreadAttribute(cur.value)) {
-              if (shouldFlatten) {
-                const name = cur.value.name.name
-                if (typeof name === 'string') {
-                  if (name === 'render') {
-                    // remove render=""
-                    return acc
-                  }
-
-                  // if flattening, expand variants
-                  if (variants[name] && variantValues.has(name)) {
-                    const styleState = {
-                      ...propMapperStyleState,
-                      props: completeProps,
-                    }
-
-                    let out: Record<string, any> = {}
-                    propMapper(
-                      name,
-                      variantValues.get(name),
-                      styleState,
-                      false,
-                      (key, val) => {
-                        out[key] = val
-                      }
-                    )
-
-                    if (out && isTargetingHTML) {
-                      const cn = out.className
-                      // translate to DOM-compat
-                      out = reactNativeWebInternals.createDOMProps(
-                        isTextView ? 'span' : 'div',
-                        out
-                      )
-                      // remove rnw className use ours
-                      out.className = cn
-                      // see note in single-prop branch above; createDOMProps
-                      // also emits a stray style key here that would duplicate
-                      // emitted JSXAttributes downstream.
-                      delete out.style
-                    }
-                    if (shouldPrintDebug) {
-                      logger.info([' - expanded variant', name, out].join(' '))
-                    }
-                    for (const key in out) {
-                      const value = out[key]
-                      if (isValidStyleKey(key, staticConfig)) {
-                        acc.push({
-                          type: 'style',
-                          value: { [key]: value },
-                          name: key,
-                          attr: cur.value,
-                        } as const)
-                      } else {
-                        acc.push({
-                          type: 'attr',
-                          value: t.jsxAttribute(
-                            t.jsxIdentifier(key),
-                            t.jsxExpressionContainer(
-                              typeof value === 'string'
-                                ? t.stringLiteral(value)
-                                : literalToAst(value)
-                            )
-                          ),
-                        })
-                      }
-                    }
-                  }
-                }
-              }
-            }
-
-            if (cur.type !== 'style') {
-              acc.push(cur)
-              return acc
-            }
-
-            let key = Object.keys(cur.value)[0]
-            const value = cur.value[key]
-            const fullKey = tamaguiConfig?.shorthands[key]
-            // expand shorthands
-            if (fullKey) {
-              cur.value = { [fullKey]: value }
-              key = fullKey
-            }
-
-            // finally we have all styles + expansions, lets see if we need to skip
-            // any and keep them as attrs
-            if (disableExtractVariables) {
-              if (
-                value[0] === '$' &&
-                (usedThemeKeys.has(key) || usedThemeKeys.has(fullKey))
-              ) {
-                if (shouldPrintDebug) {
-                  logger.info([`   keeping variable inline: ${key} =`, value].join(' '))
-                }
-                acc.push({
-                  type: 'attr',
-                  value: t.jsxAttribute(
-                    t.jsxIdentifier(key),
-                    t.jsxExpressionContainer(t.stringLiteral(value))
-                  ),
-                })
-                return acc
-              }
-            }
-
-            acc.push(cur)
-            return acc
-          }, [])
-
-          tm.mark('jsx-element-expanded', !!shouldPrintDebug)
-          if (shouldPrintDebug) {
-            logger.info(
-              ['  - attrs (expanded): \n', logLines(attrs.map(attrStr).join(', '))].join(
-                ' '
-              )
-            )
-          }
-
-          // merge styles, leave undefined values
-          let prev: ExtractedAttr | null = null
-
-          function mergeStyles(
-            prev: ViewStyle & PseudoStyles,
-            next: ViewStyle & PseudoStyles
-          ) {
-            for (const key in next) {
-              // merge pseudos
-              if (pseudoDescriptors[key]) {
-                prev[key] = prev[key] || {}
-                Object.assign(prev[key], next[key])
-              } else {
-                mergeToEnd(prev, key, next[key])
-              }
-            }
-          }
-
-          // post process
-          const getProps = (
-            props: object | null,
-            includeProps = false,
-            debugName = '',
-            branchProps?: object | null
-          ) => {
-            if (!props) {
-              if (shouldPrintDebug) logger.info([' getProps() no props'].join(' '))
-              return {}
-            }
-            if (excludeProps?.size) {
-              for (const key in props) {
-                if (excludeProps.has(key)) {
-                  if (shouldPrintDebug) logger.info([' delete excluded', key].join(' '))
-                  delete props[key]
-                }
-              }
-            }
-
-            const before = process.env.IS_STATIC
-            process.env.IS_STATIC = 'is_static'
-            try {
-              const fallbackProps = branchProps
-                ? { ...completeProps, ...branchProps }
-                : completeProps
-
-              // $group-* / $theme-* keys carry block-form style objects that
-              // getSplitStyles drops in static mode (no parent group context,
-              // no theme value to read). Pluck them out so the atomic-CSS
-              // pipeline in extractToClassNames can emit @container / theme
-              // rules for them directly.
-              let extractedMediaLikeProps: Record<string, any> | null = null
-              let propsForSplit: any = props
-              for (const k in props) {
-                if (
-                  k[0] === '$' &&
-                  (k.startsWith('$group-') || k.startsWith('$theme-'))
-                ) {
-                  if (propsForSplit === props) {
-                    propsForSplit = { ...props }
-                  }
-                  if (
-                    platform === 'native' &&
-                    k.startsWith('$group-') &&
-                    getGroupPseudo(k) === 'hover'
-                  ) {
-                    delete propsForSplit[k]
-                    continue
-                  }
-                  extractedMediaLikeProps ||= {}
-                  extractedMediaLikeProps[k] = propsForSplit[k]
-                  delete propsForSplit[k]
-                }
-              }
-
-              const out = getSplitStyles(
-                propsForSplit,
-                staticConfig,
-                defaultTheme,
-                '',
-                componentState,
-                {
-                  ...styleProps,
-                  noClass: true,
-                  fallbackProps,
-                  ...(platform === 'native' && {
-                    resolveValues: 'except-theme',
-                  }),
-                },
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                false,
-                debugPropValue || shouldPrintDebug
-              )!
-
-              // resolve tokens inside the plucked blocks: they skipped the main
-              // split, so values like "$color5" would flow raw into the emitted
-              // CSS where browsers reject the declaration. run each block through
-              // its own static split so tokens become var(--x) references.
-              // (native never extracts these — it deopts below — so web only.)
-              if (extractedMediaLikeProps && platform !== 'native') {
-                for (const k in extractedMediaLikeProps) {
-                  const block = extractedMediaLikeProps[k]
-                  if (!block || typeof block !== 'object') continue
-                  const blockOut = getSplitStyles(
-                    block,
-                    staticConfig,
-                    defaultTheme,
-                    '',
-                    componentState,
-                    {
-                      ...styleProps,
-                      noClass: true,
-                      fallbackProps,
-                    },
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    false,
-                    debugPropValue || shouldPrintDebug
-                  )
-                  if (blockOut) {
-                    extractedMediaLikeProps[k] = {
-                      ...blockOut.style,
-                      ...blockOut.pseudos,
-                    }
-                  }
-                }
-              }
-
-              let outProps = {
-                ...(includeProps ? out.viewProps : {}),
-                ...out.style,
-                ...out.pseudos,
-                ...extractedMediaLikeProps,
-              }
-
-              // check de-opt props again
-              for (const key in outProps) {
-                if (deoptProps.has(key)) {
-                  shouldFlatten = false
-                }
-                // native has no atomic-CSS sink for theme- / group- pseudo
-                // blocks; if they flatten they get serialized under the literal
-                // `$theme-…` / `$group-…` key into the RN StyleSheet, where the
-                // runtime's @container / theme-name matching never runs. de-opt
-                // → preserve as inline prop so getSplitStyles handles them at
-                // render time.
-                if (
-                  platform === 'native' &&
-                  key[0] === '$' &&
-                  (key.startsWith('$theme-') ||
-                    (key.startsWith('$group-') && getGroupPseudo(key) !== 'hover') ||
-                    // same story for a breakpoint a variant brought with it:
-                    // native matches media at render time, so there is nothing
-                    // to write it to here
-                    mediaQueryConfig[key.slice(1)])
-                ) {
-                  shouldFlatten = false
-                }
-              }
-
-              if (shouldPrintDebug) {
-                logger.info(`(${debugName})`)
-                // prettier-ignore
-                logger.info(`\n       getProps (props in): ${logLines(objToStr(props))}`)
-                // prettier-ignore
-                logger.info(
-                  `\n       getProps (outProps): ${logLines(objToStr(outProps))}`
-                )
-              }
-
-              if (out.fontFamily) {
-                setPropsToFontFamily(outProps, out.fontFamily)
-                if (shouldPrintDebug) {
-                  logger.info(`\n      💬 new font fam: ${out.fontFamily}`)
-                }
-              }
-
-              return outProps
-            } catch (err: any) {
-              logger.info(['error', err.message, err.stack].join(' '))
-              return {}
-            } finally {
-              process.env.IS_STATIC = before
-            }
-          }
-
-          // add default props
-          attrs.unshift({
-            type: 'style',
-            value: defaultProps,
-          })
-
-          attrs = attrs.reduce<ExtractedAttr[]>((acc, cur) => {
-            if (cur.type === 'style') {
-              const keys = Object.keys(cur.value || {})
-              if (!keys.length) {
-                return acc
-              }
-              const key = keys[0]
-              const value = cur.value[key]
-
-              // Check if this is a media-like key ($theme-, $platform-, $group-, or $mediaQuery)
-              const isMediaLikeKey =
-                key[0] === '$' &&
-                (key.startsWith('$theme-') ||
-                  key.startsWith('$platform-') ||
-                  key.startsWith('$group-') ||
-                  mediaQueryConfig[key.slice(1)])
-
-              const shouldKeepOriginalAttr =
-                // !isStyleAndAttr[key] &&
-                !shouldFlatten &&
-                // de-opt if non-style
-                !validStyles[key] &&
-                !pseudoDescriptors[key] &&
-                !isMediaLikeKey &&
-                !(key.startsWith('data-') || key.startsWith('aria-'))
-
-              if (shouldKeepOriginalAttr) {
-                if (shouldPrintDebug) {
-                  logger.info(['     - keeping as non-style', key].join(' '))
-                }
-                prev = cur
-                acc.push({
-                  type: 'attr',
-                  value: t.jsxAttribute(
-                    t.jsxIdentifier(key),
-                    t.jsxExpressionContainer(
-                      typeof value === 'string'
-                        ? t.stringLiteral(value)
-                        : literalToAst(value)
-                    )
-                  ),
-                })
-                acc.push(cur)
-                return acc
-              }
-
-              if (prev?.type === 'style') {
-                mergeStyles(prev.value, cur.value)
-                return acc
-              }
-            }
-
-            if (cur.type === 'style') {
-              prev = cur
-            }
-            acc.push(cur)
-            return acc
-          }, [])
-
-          if (shouldPrintDebug) {
-            logger.info(
-              [
-                '  - attrs (combined 🔀): \n',
-                logLines(attrs.map(attrStr).join(', ')),
-              ].join(' ')
-            )
-          }
-
-          let getStyleError: any = null
-
-          // a variant can carry its own media blocks ($md/$lg inside a variant
-          // value). getSplitStyles leaves those nested rather than folding them
-          // into the flat style, so hand them to the same media path a $md/$lg
-          // prop takes. they go on the end because a variant is a prop, and so
-          // outranks the media the styled() frame declared in its defaults.
-          const mediaFromVariants: ExtractedAttr[] = []
-
-          // fix up ternaries, combine final style values
-          for (const attr of attrs) {
-            try {
-              if (shouldPrintDebug) {
-                console.info(`  Processing ${attr.type}:`)
-              }
-
-              switch (attr.type) {
-                case 'ternary': {
-                  const branchProps = ternaryBranchProps.get(
-                    getTernaryKey(attr.value.test)
-                  )
-                  const a = getProps(
-                    attr.value.alternate,
-                    false,
-                    'ternary.alternate',
-                    branchProps?.alternate
-                  )
-                  const c = getProps(
-                    attr.value.consequent,
-                    false,
-                    'ternary.consequent',
-                    branchProps?.consequent
-                  )
-                  if (a) attr.value.alternate = a
-                  if (c) attr.value.consequent = c
-                  if (shouldPrintDebug)
-                    logger.info(['     => tern ', attrStr(attr)].join(' '))
-                  continue
-                }
-                case 'style': {
-                  // expand variants and such
-                  const styles = getProps(attr.value, false, 'style')
-                  if (styles) {
-                    for (const key in styles) {
-                      if (key[0] !== '$') continue
-                      const mediaKey = key.slice(1)
-                      if (!mediaQueryConfig[mediaKey]) continue
-                      mediaFromVariants.push({
-                        type: 'ternary',
-                        value: {
-                          inlineMediaQuery: mediaKey,
-                          test: t.stringLiteral(mediaKey),
-                          consequent: styles[key],
-                          alternate: null,
-                          remove() {},
-                        },
-                      })
-                      delete styles[key]
-                    }
-                    // @ts-ignore
-                    attr.value = styles
-                  }
-                  // prettier-ignore
-                  if (shouldPrintDebug)
-                    logger.info(
-                      ['  * styles (in)', logLines(objToStr(attr.value))].join(' ')
-                    )
-                  // prettier-ignore
-                  if (shouldPrintDebug)
-                    logger.info(
-                      ['  * styles (out)', logLines(objToStr(styles))].join(' ')
-                    )
-                  continue
-                }
-                case 'attr': {
-                  if (shouldFlatten && t.isJSXAttribute(attr.value)) {
-                    // we know all attributes are static
-                    // this only does one at a time but it should really do the whole group together...
-                    // also awkward to be doing it using jsxAttributes...
-                    const key = attr.value.name.name as string
-
-                    // dont process style/className can just stay attrs
-                    if (key === 'style' || key === 'className' || key === 'render') {
-                      continue
-                    }
-
-                    // undefined = boolean true
-                    const value = attemptEvalSafe(
-                      attr.value.value || t.booleanLiteral(true)
-                    )
-                    if (value !== FAILED_EVAL) {
-                      const outProps = getProps({ [key]: value }, true, `attr.${key}`)
-                      const outKey = Object.keys(outProps)[0]
-                      if (outKey) {
-                        const outVal = outProps[outKey]
-                        attr.value = t.jsxAttribute(
-                          t.jsxIdentifier(outKey),
-                          t.jsxExpressionContainer(
-                            typeof outVal === 'string'
-                              ? t.stringLiteral(outVal)
-                              : literalToAst(outVal)
-                          )
-                        )
-                      }
-                    }
-                  }
-                }
-              }
-            } catch (err) {
-              // any error de-opt
-              getStyleError = err
-            }
-          }
-
-          if (mediaFromVariants.length) {
-            attrs.push(...mediaFromVariants)
-          }
-
-          if (shouldPrintDebug) {
-            // prettier-ignore
-            logger.info(
-              [
-                '  - attrs (ternaries/combined):\n',
-                logLines(attrs.map(attrStr).join(', ')),
-              ].join(' ')
-            )
-          }
-
-          tm.mark('jsx-element-styles', !!shouldPrintDebug)
-
-          if (getStyleError) {
-            logger.info([' ⚠️ postprocessing error, deopt', getStyleError].join(' '))
-            node.attributes = ogAttributes
-            return null
-          }
-
-          // final lazy extra loop:
-          const existingStyleKeys = new Set()
-          for (let i = attrs.length - 1; i >= 0; i--) {
-            const attr = attrs[i]
-
-            // if flattening map inline props to proper flattened names
-            if (shouldFlatten) {
-              if (attr.type === 'attr') {
-                if (t.isJSXAttribute(attr.value)) {
-                  if (t.isJSXIdentifier(attr.value.name)) {
-                    const name = attr.value.name.name
-                    if (INLINE_EXTRACTABLE[name]) {
-                      // map to HTML only name
-                      attr.value.name.name = INLINE_EXTRACTABLE[name]
-                    }
-                  }
-                }
-              }
-            }
-
-            // remove duplicate styles
-            // so if you have:
-            //   style({ color: 'red' }), ...someProps, style({ color: 'green' })
-            // this will mutate:
-            //   style({}), ...someProps, style({ color: 'green' })
-            if (attr.type === 'style') {
-              for (const key in attr.value) {
-                if (existingStyleKeys.has(key)) {
-                  if (shouldPrintDebug) {
-                    logger.info([`  >> delete existing ${key}`].join(' '))
-                  }
-                  delete attr.value[key]
-                } else {
-                  existingStyleKeys.add(key)
-                }
-              }
-            }
-          }
-
-          attrs = attrs.filter(Boolean)
-
-          // inlineWhenUnflattened
-          if (!shouldFlatten) {
-            if (inlineWhenUnflattened.size) {
-              for (const [index, attr] of attrs.entries()) {
-                if (attr.type === 'style') {
-                  for (const key in attr.value) {
-                    if (!inlineWhenUnflattened.has(key)) continue
-                    const val = inlineWhenUnflattenedOGVals[key]
-                    if (val) {
-                      // delete the style
-                      delete attr.value[key]
-
-                      // and insert it before
-                      attrs.splice(index - 1, 0, val.attr)
-                    } else {
-                      // just delete it, it was added during expansion but should be left inline
-                      delete attr.value[key]
-                    }
-                  }
-                }
-              }
-            }
-          }
-
-          // delete empty styles:
-          attrs = attrs.filter((x) => {
-            if (x.type === 'style' && Object.keys(x.value).length === 0) {
-              return false
-            }
-            return true
-          })
-
-          const isNativeNotFlat = !shouldFlatten && platform === 'native'
-          if (isNativeNotFlat) {
-            if (shouldPrintDebug) {
-              logger.info(
-                `Disabled flattening except for simple cases on native for now: ${JSON.stringify(
-                  {
-                    flatNode: flatNodeName,
-                    shouldDeopt,
-                    canFlattenProps,
-                    hasSpread,
-                    'staticConfig.isStyledHOC': staticConfig.isStyledHOC,
-                    '!staticConfig.isHOC': !staticConfig.isHOC,
-                    'staticConfig.isReactNative': staticConfig.isReactNative,
-                    'staticConfig.neverFlatten': staticConfig.neverFlatten,
-                  },
-                  null,
-                  2
-                )}`
-              )
-            }
-            node.attributes = ogAttributes
-            return null
-          }
-
-          if (shouldPrintDebug) {
-            // prettier-ignore
-            logger.info(
-              [
-                ` - inlined props (${inlined.size}):`,
-                shouldDeopt ? ' deopted' : '',
-                hasSpread ? ' has spread' : '',
-                staticConfig.neverFlatten ? 'neverFlatten' : '',
-              ].join(' ')
-            )
-            logger.info(`  - attrs (end):\n ${logLines(attrs.map(attrStr).join(', '))}`)
-          }
-
-          onExtractTag({
-            parserProps: propsWithFileInfo,
-            attrs,
-            node,
-            lineNumbers,
-            filePath,
-            config: tamaguiConfig!,
-            flatNodeName,
-            attemptEval,
-            jsxPath: traversePath,
-            originalNodeName,
-            programPath: programPath!,
-            completeProps,
-            staticConfig,
-          })
-
-          if (shouldFlatten) {
-            if (shouldPrintDebug) {
-              logger.info(['  [✅] flattened', originalNodeName, flatNodeName].join(' '))
-            }
-            // Only rename if onExtractTag hasn't already renamed to a custom wrapper
-            // @ts-ignore - check if already renamed by callback (e.g., to a styled wrapper)
-            const currentName = node.name?.name
-            if (
-              !currentName ||
-              currentName === originalNodeName ||
-              currentName.startsWith('__ReactNative')
-            ) {
-              // @ts-ignore
-              node.name.name = flatNodeName
-              if (closingElement) {
-                // @ts-ignore
-                closingElement.name.name = flatNodeName
-              }
-            }
-            res.flattened++
-          }
-        } catch (err: any) {
-          node.attributes = ogAttributes
-
-          if (!(err instanceof BailOptimizationError)) {
-            console.error(
-              `@tamagui/static error, reverting optimization. In ${filePath} ${lineNumbers} on ${originalNodeName}: ${err.message}. For stack trace set environment TAMAGUI_DEBUG=1`
-            )
-            if (process.env.TAMAGUI_DEBUG === '1') {
-              console.error(err.stack)
-            }
-          }
-        } finally {
-          if (debugPropValue) {
-            shouldPrintDebug = ogDebug
-          }
-        }
-      },
-    })
-
-    tm.mark('jsx-done', !!shouldPrintDebug)
-    tm.done(shouldPrintDebug === 'verbose')
-
-    return res
-  }
-}