@tamagui/static 2.0.0-rc.8 → 2.0.0

package/src/extractor/concatClassName.ts

@@ -45,24 +45,9 @@ export function concatClassName(_cn: Record<string, any> | null | undefined): st
         continue
       }
 
-      const nextChar = name[splitIndex + 1]
-      // synced to static-ui constants
-      // MEDIA_SEP
-      const isMediaQuery = nextChar === '_'
-      // PSEUDO_SEP
-      // commenting out three things to make pseudos override properly
-      // (leave in for a bit to see if other bugs pop up later):
-      // 1. const isPseudoQuery = nextChar === '0'
       const styleKey = name.slice(1, name.indexOf('-'))
-      // 2. isMediaQuery || isPseudoQuery
-      // extract just the media query name (e.g., 'lg' '_pr-_lg_260px')
-      // by finding the underscore after the media key name
-      const mediaStart = splitIndex + 2
-      const mediaEnd = name.indexOf('_', mediaStart)
-      const mediaKey =
-        isMediaQuery && mediaEnd > mediaStart ? name.slice(mediaStart, mediaEnd) : null
-      const uid = mediaKey ? styleKey + mediaKey : styleKey
-      // 3. && !isPseudoQuery
+      const { mediaKey, pseudoKey } = getClassNameScope(name, splitIndex)
+      const uid = `${styleKey}${mediaKey ? `@${mediaKey}` : ''}${pseudoKey ? `:${pseudoKey}` : ''}`
 
       if (usedPrefixes.has(uid)) {
         // if (shouldDebug) console.log('debug exclude:', usedPrefixes, name)
@@ -75,8 +60,8 @@ export function concatClassName(_cn: Record<string, any> | null | undefined): st
       if (propName && propObjects) {
         if (
           propObjects.some((po) => {
-            if (mediaKey) {
-              const propKey = pseudoInvert[mediaKey]
+            if (pseudoKey) {
+              const propKey = pseudoInvert[pseudoKey]
               return po && po[propKey] && propName in po[propKey] && po[propKey] !== null
             }
             const res = po && propName in po && po[propName] !== null
@@ -95,11 +80,43 @@ export function concatClassName(_cn: Record<string, any> | null | undefined): st
   return final.trim()
 }
 
+function getClassNameScope(name: string, splitIndex: number) {
+  let mediaKey = ''
+  let pseudoKey = ''
+  let valueStart = splitIndex + 1
+
+  if (name[valueStart] === '_') {
+    const mediaEnd = name.indexOf('_', valueStart + 1)
+    if (mediaEnd > valueStart + 1) {
+      mediaKey = name.slice(valueStart + 1, mediaEnd)
+      valueStart = mediaEnd + 1
+    }
+  }
+
+  if (name[valueStart] === '0') {
+    const pseudoStart = valueStart + 1
+    for (const nextPseudoKey of pseudoKeys) {
+      if (name.startsWith(`${nextPseudoKey}-`, pseudoStart)) {
+        pseudoKey = nextPseudoKey
+        break
+      }
+    }
+  }
+
+  return { mediaKey, pseudoKey }
+}
+
 const pseudoInvert = {
   hover: 'hoverStyle',
+  active: 'pressStyle',
   focus: 'focusStyle',
-  press: 'pressStyle',
+  'focus-visible': 'focusVisibleStyle',
+  'focus-within': 'focusWithinStyle',
   focusVisible: 'focusVisibleStyle',
   focusWithin: 'focusWithinStyle',
   disabled: 'disabledStyle',
+  enter: 'enterStyle',
+  exit: 'exitStyle',
 }
+
+const pseudoKeys = Object.keys(pseudoInvert).sort((a, b) => b.length - a.length)

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
     }
@@ -505,7 +644,7 @@ export function createExtractor(
           getValidImportedComponent(parentName) || getValidImportedComponent(variableName)
 
         if (!Component) {
-          if (enableDynamicEvaluation !== true) {
+          if (!enableDynamicEvaluation) {
             return
           }
 
@@ -589,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(
@@ -610,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) ||
@@ -689,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})`)
         }
@@ -717,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`)
@@ -824,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
@@ -1215,6 +1444,12 @@ export function createExtractor(
                   )
                   // 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
                 }
               }
 
@@ -1238,6 +1473,23 @@ export function createExtractor(
                   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) {
@@ -1284,7 +1536,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 =
@@ -1306,6 +1558,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}`)
@@ -1912,6 +2178,10 @@ export function createExtractor(
                       )
                       // 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(' '))

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') ||