@tamagui/static 2.0.0-rc.4 → 2.0.0-rc.40

package/src/extractor/createExtractor.ts

@@ -12,7 +12,9 @@ import {
   type StaticConfig,
   type TamaguiComponentState,
 } from '@tamagui/web'
-import { basename, relative } from 'node:path'
+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'
@@ -26,7 +28,7 @@ import type {
   TamaguiOptionsWithFileInfo,
   Ternary,
 } from '../types'
-import type { TamaguiProjectInfo } from './bundleConfig'
+import type { LoadedComponents, TamaguiProjectInfo } from './bundleConfig'
 import { createEvaluator, createSafeEvaluator } from './createEvaluator'
 import { evaluateAstNode } from './evaluateAstNode'
 import {
@@ -49,6 +51,7 @@ 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,
@@ -56,6 +59,11 @@ const UNTOUCHED_PROPS = {
   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>
@@ -71,10 +79,6 @@ function isFullyDisabled(props: TamaguiOptions) {
 export function createExtractor(
   { logger = console, platform = 'web' }: ExtractorOptions = { logger: console }
 ) {
-  if (!process.env.TAMAGUI_TARGET) {
-    throw new Error('Please set process.env.TAMAGUI_TARGET to either "web" or "native"')
-  }
-
   const INLINE_EXTRACTABLE = {
     ref: 'ref',
     key: 'key',
@@ -85,6 +89,29 @@ export function createExtractor(
       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 = {
@@ -99,7 +126,7 @@ export function createExtractor(
   } as const
 
   const styleProps: SplitStyleProps = {
-    resolveValues: process.env.TAMAGUI_TARGET === 'native' ? 'value' : 'variable',
+    resolveValues: platform === 'native' ? 'value' : 'variable',
     noClass: false,
     isAnimated: false,
   }
@@ -107,12 +134,89 @@ export function createExtractor(
   const shouldAddDebugProp =
     // really basic disable this for next.js because it messes with ssr
     !process.env.npm_package_dependencies_next &&
-    process.env.TAMAGUI_TARGET !== 'native' &&
+    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
 
@@ -178,6 +282,12 @@ export function createExtractor(
       ...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
     }
@@ -375,12 +485,12 @@ export function createExtractor(
         logger.info(` - import via ${moduleName} ${valid}`)
       }
 
-      if (extractStyledDefinitions) {
-        if (valid) {
-          if (node.specifiers.some((specifier) => specifier.local.name === 'styled')) {
-            doesUseValidImport = true
-            break
-          }
+      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
         }
       }
 
@@ -400,7 +510,7 @@ export function createExtractor(
         }
         if (isValidComponent) {
           doesUseValidImport = true
-          break
+          if (!(extractStyledDefinitions && enableDynamicEvaluation)) break
         }
       }
     }
@@ -411,6 +521,35 @@ export function createExtractor(
       )
     }
 
+    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
     }
@@ -484,6 +623,10 @@ export function createExtractor(
             ? path.parent.id.name
             : 'unknown'
 
+        if (shouldPrintDebug) {
+          logger.info(` [styled] Found styled(${variableName})`)
+        }
+
         const parentNode = path.node.arguments[0]
 
         if (!t.isIdentifier(parentNode)) {
@@ -496,10 +639,12 @@ export function createExtractor(
           return
         }
 
-        let Component = getValidImportedComponent(variableName)
+        // look up by parent first (e.g. View in `styled(View, {...})`), then by self
+        let Component =
+          getValidImportedComponent(parentName) || getValidImportedComponent(variableName)
 
         if (!Component) {
-          if (enableDynamicEvaluation !== true) {
+          if (!enableDynamicEvaluation) {
             return
           }
 
@@ -583,6 +728,7 @@ export function createExtractor(
         // 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(
@@ -604,6 +750,19 @@ export function createExtractor(
         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) ||
@@ -667,23 +826,9 @@ export function createExtractor(
           )
         }
 
-        // leave only un-parsed props...
-        // preserve original order
-        definition.properties = definition.properties.map((prop) => {
-          if (
-            skipped.has(prop) ||
-            !t.isObjectProperty(prop) ||
-            !t.isIdentifier(prop.key)
-          ) {
-            return prop
-          }
-          const key = prop.key.name
-          const value = classNames[key]
-          if (value) {
-            return t.objectProperty(t.stringLiteral(key), t.stringLiteral(value))
-          }
-          return prop
-        })
+        // 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) {
@@ -697,6 +842,34 @@ export function createExtractor(
 
         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})`)
         }
@@ -725,22 +898,77 @@ export function createExtractor(
         // 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)) {
-              if (shouldPrintDebug) {
-                logger.info(
-                  ` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}\n`
-                )
+              // 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
               }
-              return
             }
           }
         }
 
-        const component = getValidComponent(propsWithFileInfo, moduleName, node.name.name)
+        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`)
@@ -832,13 +1060,6 @@ export function createExtractor(
           const isTextView = staticConfig.isText || false
           const validStyles = staticConfig?.validStyles ?? {}
 
-          if (process.env.NODE_ENV === 'production') {
-            if (isTextView) {
-              // temporarily disabled - need to fix css nesting dix
-              return
-            }
-          }
-
           // find render="a" render="main" etc dom indicators
           let tagName = defaultProps.render ?? (isTextView ? 'span' : 'div')
           traversePath
@@ -1292,7 +1513,7 @@ export function createExtractor(
                     return attr
                   }
 
-                  // $platform-web, $platform-native, $platform-ios, $platform-android
+                  // $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 =
@@ -1314,6 +1535,20 @@ export function createExtractor(
                         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}`)

package/src/extractor/detectModuleFormat.ts

@@ -0,0 +1,42 @@
+import { readFileSync } from 'node:fs'
+import { dirname, extname, join } from 'node:path'
+
+type ModuleFormat = 'cjs' | 'esm'
+
+// cache per directory to avoid repeated fs reads
+const formatCache = new Map<string, ModuleFormat>()
+
+export function detectModuleFormat(filePath: string): ModuleFormat {
+  const ext = extname(filePath)
+
+  // definitive by extension
+  if (ext === '.mjs') return 'esm'
+  if (ext === '.cjs') return 'cjs'
+
+  // walk up to find nearest package.json with "type" field
+  let dir = dirname(filePath)
+  while (true) {
+    if (formatCache.has(dir)) {
+      return formatCache.get(dir)!
+    }
+
+    try {
+      const pkg = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf-8'))
+      const format: ModuleFormat = pkg.type === 'module' ? 'esm' : 'cjs'
+      formatCache.set(dir, format)
+      return format
+    } catch {
+      // no package.json or malformed, keep walking
+    }
+
+    const parent = dirname(dir)
+    if (parent === dir) break
+    dir = parent
+  }
+
+  return 'cjs'
+}
+
+export function clearFormatCache() {
+  formatCache.clear()
+}

package/src/extractor/esbuildTsconfigPaths.ts

@@ -25,6 +25,11 @@ export function TsconfigPathsPlugin(): Plugin {
     name,
     setup({ onResolve }) {
       onResolve({ filter: /.*/ }, (args) => {
+        // skip @tamagui packages - they should be externalized, not resolved via tsconfig
+        if (args.path.startsWith('@tamagui/')) {
+          return null
+        }
+
         const paths = compilerOptions.paths || {}
         const hasMatchingPath = Object.keys(paths).some((p) =>
           new RegExp(p.replace('*', '\\w*')).test(args.path)
@@ -59,7 +64,7 @@ export function TsconfigPathsPlugin(): Plugin {
   }
 }
 
-function loadCompilerOptionsFromTsconfig(tsconfig?: Tsconfig | string) {
+export function loadCompilerOptionsFromTsconfig(tsconfig?: Tsconfig | string) {
   if (!tsconfig) {
     const configPath =
       findConfigFile(process.cwd(), sys.fileExists, 'tsconfig.json') ||

package/src/extractor/extractToClassNames.ts

@@ -107,7 +107,7 @@ export async function extractToClassNames({
     sourcePath,
     extractStyledDefinitions: true,
     onStyledDefinitionRule(identifier, rules) {
-      const css = rules.join(';')
+      const css = rules.join('\n')
       if (shouldPrintDebug) {
         console.info(`adding styled() rule: .${identifier} ${css}`)
       }
@@ -343,11 +343,18 @@ export async function extractToClassNames({
         baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
       }
 
-      let base = staticConfig.componentName
-        ? t.stringLiteral(
-            `is_${staticConfig.componentName}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
-          )
-        : t.stringLiteral(baseClassNameStr || '')
+      // add is_View or is_Text base class matching runtime behavior
+      const baseTypeClass = staticConfig.isText ? 'is_Text' : 'is_View'
+      baseClassNameStr = `${baseTypeClass}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
+
+      // add component name class (skip 'Text' since is_Text already covers it)
+      const componentNameFinal = staticConfig.componentName
+      let base =
+        componentNameFinal && componentNameFinal !== 'Text'
+          ? t.stringLiteral(
+              `is_${componentNameFinal}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
+            )
+          : t.stringLiteral(baseClassNameStr || '')
 
       attrClassName = attrClassName as t.Expression | null // actual typescript bug, flatMap doesn't update from never
 
@@ -616,10 +623,9 @@ function hoistClassName(path: NodePath<t.JSXElement>, str: string) {
 function cleanupClassName(inStr: string) {
   const out = new Set<string>()
   for (const part of inStr.split(' ')) {
-    if (part === ' ') continue
+    if (!part || part === ' ') continue
     if (part === 'font_') continue
     out.add(part)
   }
-  // always a space after for joining
-  return [...out].join(' ') + ' '
+  return [...out].join(' ')
 }