@tamagui/cli 2.7.7 → 3.0.0-beta.643.1

package/src/build.ts

@@ -1,9 +1,9 @@
 import {
-  createExtractor,
-  extractToClassNames,
-  extractToNative,
+  CompilerFrontend,
   loadTamagui,
   loadTamaguiBuildConfigSync,
+  compilerProjectStamp,
+  type CompilerProject,
 } from '@tamagui/static'
 import type { CLIResolvedOptions, TamaguiOptions } from '@tamagui/types'
 import chokidar from 'chokidar'
@@ -11,8 +11,22 @@ import { copyFile, mkdir, readFile, rm, stat, writeFile } from 'fs-extra'
 import MicroMatch from 'micromatch'
 import { basename, dirname, extname, join, relative, resolve } from 'node:path'
 import { tmpdir } from 'node:os'
-import { execSync } from 'node:child_process'
+import { spawn } from 'node:child_process'
 import { createHash } from 'node:crypto'
+import { createRequire } from 'node:module'
+import {
+  findConfigFile,
+  nodeModuleNameResolver,
+  parseJsonConfigFileContent,
+  readConfigFile,
+  sys,
+} from 'typescript'
+
+const cliVersion = (
+  createRequire(typeof __filename === 'string' ? __filename : import.meta.url)(
+    '@tamagui/cli/package.json'
+  ) as { version: string }
+).version
 
 export type BuildStats = {
   filesProcessed: number
@@ -68,418 +82,615 @@ export const build = async (
   const outputAround = options.outputAround || false
   const promises: Promise<void>[] = []
   const isDryRun = options.dryRun || false
+  const trackedFiles: TrackedFile[] = []
+  const trackedPaths = new Set<string>()
+  const restoreDir = options.runCommand
+    ? join(tmpdir(), `tamagui-restore-${process.pid}`)
+    : null
 
-  if (isDryRun) {
-    console.info('[dry-run] no files will be written\n')
+  if (restoreDir) {
+    await mkdir(restoreDir, { recursive: true })
   }
-
-  // create output directory if specified
-  if (outputDir) {
-    await mkdir(outputDir, { recursive: true })
+  let didRestore = false
+  const restoreTrackedFiles = async (force = false) => {
+    if (didRestore) return
+    await restoreFiles(trackedFiles, restoreDir, force)
+    didRestore = true
   }
 
-  const loadedOptions = loadTamaguiBuildConfigSync(options.tamaguiOptions)
+  try {
+    const trackFile = async (filePath: string): Promise<void> => {
+      if (!restoreDir || trackedPaths.has(filePath)) return
+      trackedPaths.add(filePath)
 
-  // when running CLI build directly, ignore disable since user explicitly wants to build
-  if (loadedOptions.disable) {
-    console.warn(
-      `[tamagui] Note: "disable" option in tamagui.build.ts is being ignored for CLI build command`
-    )
-  }
-  const buildOptions = {
-    ...loadedOptions,
-    disable: false,
-    disableExtraction: false,
-  }
-
-  const targets =
-    options.target === 'both' || !options.target
-      ? (['web', 'native'] as const)
-      : ([options.target] as const)
+      const currentStat = await stat(filePath).catch(() => null)
+      if (!currentStat) {
+        trackedFiles.push({ path: filePath, hardlinkPath: '', mtimeAfterWrite: 0 })
+        return
+      }
 
-  // Load tamagui for web first (needed for both targets)
-  const webTamaguiOptions = {
-    ...buildOptions,
-    platform: 'web' as const,
-  } satisfies TamaguiOptions
+      const hash = createHash('md5').update(filePath).digest('hex')
+      const backupPath = join(restoreDir, hash)
+      await copyFile(filePath, backupPath)
+      trackedFiles.push({ path: filePath, hardlinkPath: backupPath, mtimeAfterWrite: 0 })
+    }
 
-  await loadTamagui(webTamaguiOptions)
+    const recordMtime = async (filePath: string): Promise<void> => {
+      if (!restoreDir) return
+      const tracked = trackedFiles.find((item) => item.path === filePath)
+      if (tracked) {
+        const fileStat = await stat(filePath)
+        tracked.mtimeAfterWrite = fileStat.mtimeMs
+      }
+    }
 
-  // Collect all files first
-  const allFiles: string[] = []
+    if (isDryRun) {
+      console.info('[dry-run] no files will be written\n')
+    }
 
-  // Handle both directory and specific file paths
-  const watchPattern = sourceDir.match(/\.(tsx|jsx)$/)
-    ? sourceDir // Single file
-    : `${sourceDir}/**/*.{tsx,jsx}` // Directory
+    // create output directory if specified
+    if (outputDir) {
+      await mkdir(outputDir, { recursive: true })
+    }
 
-  await new Promise<void>((res) => {
-    const watcher = chokidar.watch(watchPattern, {
-      ignoreInitial: false,
-    })
-    watcher
-      .on('add', (relativePath) => {
-        const sourcePath = resolve(process.cwd(), relativePath)
+    const loadedOptions = loadTamaguiBuildConfigSync(options.tamaguiOptions)
 
-        if (options.exclude && MicroMatch.contains(relativePath, options.exclude)) {
-          return
-        }
-        if (options.include && !MicroMatch.contains(relativePath, options.include)) {
-          return
-        }
+    // when running CLI build directly, ignore disable since user explicitly wants to build
+    if (loadedOptions.disable) {
+      console.warn(
+        `[tamagui] Note: "disable" option in tamagui.build.ts is being ignored for CLI build command`
+      )
+    }
+    const buildOptions = {
+      ...loadedOptions,
+      disable: false,
+      disableExtraction: false,
+    }
 
-        allFiles.push(sourcePath)
+    const targets =
+      options.target === 'both' || !options.target
+        ? (['web', 'native'] as const)
+        : ([options.target] as const)
+
+    const root = process.cwd()
+    const outputCSSPath = buildOptions.outputCSS
+      ? resolve(root, buildOptions.outputCSS)
+      : null
+    if (outputCSSPath) {
+      await trackFile(outputCSSPath)
+    }
+    const require = createRequire(
+      typeof __filename === 'string' ? __filename : import.meta.url
+    )
+    const configPath =
+      findConfigFile(root, sys.fileExists, 'tsconfig.json') ||
+      findConfigFile(root, sys.fileExists, 'jsconfig.json')
+    const compilerOptions = configPath
+      ? parseJsonConfigFileContent(
+          (() => {
+            const loaded = readConfigFile(configPath, sys.readFile)
+            if (loaded.error) throw new Error(String(loaded.error.messageText))
+            return loaded.config
+          })(),
+          sys,
+          dirname(configPath)
+        ).options
+      : {}
+    const resolveCompilerId = (specifier: string, importer: string): string | null => {
+      const resolved = nodeModuleNameResolver(specifier, importer, compilerOptions, sys)
+        .resolvedModule?.resolvedFileName
+      if (resolved && !resolved.endsWith('.d.ts')) return resolved
+      try {
+        return require.resolve(specifier, { paths: [dirname(importer), root] })
+      } catch {
+        return null
+      }
+    }
+    const compilerFrontends = new Map<'web' | 'native', CompilerFrontend>()
+    const compilerProjects = new Map<'web' | 'native', CompilerProject>()
+
+    for (const target of targets) {
+      const targetOptions = { ...buildOptions, platform: target } satisfies TamaguiOptions
+      const projectInfo = await loadTamagui(targetOptions)
+      if (!projectInfo) throw new Error(`Unable to load Tamagui for the ${target} build`)
+      const componentModules = [
+        ...new Set(['@tamagui/core', ...(targetOptions.components ?? [])]),
+      ].map((moduleName) => {
+        const id = resolveCompilerId(moduleName, join(root, '__tamagui_cli__.tsx'))
+        if (!id) throw new Error(`Unable to resolve compiler component ${moduleName}`)
+        return { moduleName, id }
       })
-      .on('ready', () => {
-        watcher.close().then(() => res())
+      compilerProjects.set(target, {
+        projectInfo,
+        componentModules,
+        generation: createHash('sha256')
+          .update(target)
+          .update('\0')
+          .update(buildOptions.config ?? 'tamagui.config.ts')
+          .update('\0')
+          .update(JSON.stringify(targetOptions.components ?? []))
+          .update('\0')
+          .update(String(!!targetOptions.disablePartialExtraction))
+          .update('\0')
+          .update(
+            String(target === 'native' && !!targetOptions.experimental?.nativeFastPath)
+          )
+          .digest('hex'),
+        disablePartialExtraction: targetOptions.disablePartialExtraction,
+        experimentalNativeFastPath:
+          target === 'native' && targetOptions.experimental?.nativeFastPath === true,
+        cacheStamp: compilerProjectStamp({
+          stampSources: projectInfo.stampSources ?? [],
+          hostVersions: [`@tamagui/cli@${cliVersion}`],
+          target,
+          componentModules,
+          disablePartialExtraction: !!targetOptions.disablePartialExtraction,
+          experimentalNativeFastPath:
+            target === 'native' && targetOptions.experimental?.nativeFastPath === true,
+          zeroRuntime: false,
+          development: process.env.NODE_ENV === 'development',
+        }),
       })
-  })
+      compilerFrontends.set(target, new CompilerFrontend())
+    }
+    if (outputCSSPath) {
+      await recordMtime(outputCSSPath)
+    }
 
-  // Now determine what to optimize for each file
-  const fileToTargets = new Map<string, ('web' | 'native')[]>()
+    const compileTarget = async (
+      target: 'web' | 'native',
+      sourcePath: string,
+      source: string
+    ) => {
+      const compiler = compilerFrontends.get(target)!
+      const project = compilerProjects.get(target)!
+      return compiler.compile({
+        id: sourcePath,
+        source,
+        root,
+        target,
+        project,
+        resolve: async (specifier, importer) => {
+          const id = resolveCompilerId(specifier, importer)
+          return id ? { id, external: id.includes('/node_modules/') } : null
+        },
+        load: async (id) => {
+          try {
+            return await readFile(id.split(/[?#]/, 1)[0]!, 'utf8')
+          } catch {
+            return null
+          }
+        },
+      })
+    }
 
-  for (const sourcePath of allFiles) {
-    const platformMatch = sourcePath.match(/\.(web|native|ios|android)\.(tsx|jsx)$/)
-    let filePlatforms: ('web' | 'native')[] = []
+    // Collect all files first
+    const allFiles: string[] = []
 
-    if (platformMatch) {
-      // Platform-specific file - only optimize for that platform
-      const platform = platformMatch[1]
-      if (platform === 'web') {
-        filePlatforms = ['web']
-      } else if (platform === 'native' || platform === 'ios' || platform === 'android') {
-        filePlatforms = ['native']
-      }
-    } else {
-      // Base file without platform extension
-      // Check if platform-specific versions exist in the collected files
-      const basePath = sourcePath.replace(/\.(tsx|jsx)$/, '')
-      const hasNative = allFiles.some(
-        (f) =>
-          f === `${basePath}.native.tsx` ||
-          f === `${basePath}.native.jsx` ||
-          f === `${basePath}.ios.tsx` ||
-          f === `${basePath}.ios.jsx` ||
-          f === `${basePath}.android.tsx` ||
-          f === `${basePath}.android.jsx`
-      )
-      const hasWeb = allFiles.some(
-        (f) => f === `${basePath}.web.tsx` || f === `${basePath}.web.jsx`
-      )
+    // Handle both directory and specific file paths
+    const watchPattern = sourceDir.match(/\.(tsx|jsx)$/)
+      ? sourceDir // Single file
+      : `${sourceDir}/**/*.{tsx,jsx}` // Directory
+    const sourceRoot = sourceDir.match(/\.(tsx|jsx)$/)
+      ? dirname(resolve(sourceDir))
+      : resolve(sourceDir)
 
-      // Only optimize for targets that don't have platform-specific files
-      filePlatforms = targets.filter((target) => {
-        if (target === 'native' && hasNative) return false
-        if (target === 'web' && hasWeb) return false
-        return true
+    await new Promise<void>((res) => {
+      const watcher = chokidar.watch(watchPattern, {
+        ignoreInitial: false,
       })
+      watcher
+        .on('add', (relativePath) => {
+          const sourcePath = resolve(process.cwd(), relativePath)
+
+          if (options.exclude && MicroMatch.contains(relativePath, options.exclude)) {
+            return
+          }
+          if (options.include && !MicroMatch.contains(relativePath, options.include)) {
+            return
+          }
+
+          allFiles.push(sourcePath)
+        })
+        .on('ready', () => {
+          watcher.close().then(() => res())
+        })
+    })
+
+    // chokidar emits "add" in filesystem/stat-completion order, which varies between
+    // runs. sort so file processing order (and therefore output) is reproducible.
+    allFiles.sort()
+
+    // Now determine what to optimize for each file
+    const fileToTargets = new Map<string, ('web' | 'native')[]>()
+
+    for (const sourcePath of allFiles) {
+      const platformMatch = sourcePath.match(/\.(web|native|ios|android)\.(tsx|jsx)$/)
+      let filePlatforms: ('web' | 'native')[] = []
+
+      if (platformMatch) {
+        // Platform-specific file - only optimize for that platform
+        const platform = platformMatch[1]
+        if (platform === 'web') {
+          filePlatforms = ['web']
+        } else if (
+          platform === 'native' ||
+          platform === 'ios' ||
+          platform === 'android'
+        ) {
+          filePlatforms = ['native']
+        }
+      } else {
+        // Base file without platform extension
+        // Check if platform-specific versions exist in the collected files
+        const basePath = sourcePath.replace(/\.(tsx|jsx)$/, '')
+        const hasNative = allFiles.some(
+          (f) =>
+            f === `${basePath}.native.tsx` ||
+            f === `${basePath}.native.jsx` ||
+            f === `${basePath}.ios.tsx` ||
+            f === `${basePath}.ios.jsx` ||
+            f === `${basePath}.android.tsx` ||
+            f === `${basePath}.android.jsx`
+        )
+        const hasWeb = allFiles.some(
+          (f) => f === `${basePath}.web.tsx` || f === `${basePath}.web.jsx`
+        )
+
+        // Only optimize for targets that don't have platform-specific files
+        filePlatforms = targets.filter((target) => {
+          if (target === 'native' && hasNative) return false
+          if (target === 'web' && hasWeb) return false
+          return true
+        })
+
+        // Special case: if BOTH .web and .native exist, don't touch base file at all
+        if (hasWeb && hasNative) {
+          filePlatforms = []
+        }
+      }
 
-      // Special case: if BOTH .web and .native exist, don't touch base file at all
-      if (hasWeb && hasNative) {
-        filePlatforms = []
+      if (filePlatforms.length > 0) {
+        fileToTargets.set(sourcePath, filePlatforms)
       }
     }
 
-    if (filePlatforms.length > 0) {
-      fileToTargets.set(sourcePath, filePlatforms)
+    // Track overall statistics
+    const stats: BuildStats = {
+      filesProcessed: 0,
+      optimized: 0,
+      flattened: 0,
+      styled: 0,
+      found: 0,
     }
-  }
 
-  // Track overall statistics
-  const stats: BuildStats = {
-    filesProcessed: 0,
-    optimized: 0,
-    flattened: 0,
-    styled: 0,
-    found: 0,
-  }
+    if (options.debug) {
+      process.env.NODE_ENV ||= 'development'
+    }
 
-  // Track files for restoration (when using --run)
-  const trackedFiles: TrackedFile[] = []
-  const restoreDir = options.runCommand
-    ? join(tmpdir(), `tamagui-restore-${process.pid}`)
-    : null
+    // Read each original source ONCE, up front, so both target passes compile
+    // identical input (the web pass rewrites the file on disk).
+    const sources = new Map<string, string>()
+    await Promise.all(
+      [...fileToTargets.keys()].map(async (sourcePath) => {
+        sources.set(sourcePath, await readFile(sourcePath, 'utf-8'))
+      })
+    )
 
-  if (restoreDir) {
-    await mkdir(restoreDir, { recursive: true })
-  }
+    const buildWebFile = async (sourcePath: string, originalSource: string) => {
+      if (isDryRun) {
+        console.info(`\n${sourcePath} [web]`)
+      }
+      const out = await compileTarget('web', sourcePath, originalSource)
 
-  // Helper to backup a file before modifying it
-  const trackFile = async (filePath: string): Promise<void> => {
-    if (!restoreDir) return
-    const hash = createHash('md5').update(filePath).digest('hex')
-    const backupPath = join(restoreDir, hash)
-    // Use copy instead of hardlink - hardlinks share content, so modifying
-    // the original would also modify the "backup"
-    await copyFile(filePath, backupPath)
-    trackedFiles.push({ path: filePath, hardlinkPath: backupPath, mtimeAfterWrite: 0 })
-  }
+      if (out.output.changed || out.plan.stats.found > 0) {
+        stats.filesProcessed++
+        stats.optimized += out.plan.stats.lowered - out.plan.stats.flattened
+        stats.flattened += out.plan.stats.flattened
+        stats.styled += out.plan.stats.styled
+        stats.found += out.plan.stats.found
 
-  // Helper to record mtime after writing
-  const recordMtime = async (filePath: string): Promise<void> => {
-    if (!restoreDir) return
-    const tracked = trackedFiles.find((t) => t.path === filePath)
-    if (tracked) {
-      const fileStat = await stat(filePath)
-      tracked.mtimeAfterWrite = fileStat.mtimeMs
-    }
-  }
+        if (isDryRun) {
+          if (out.plan.css) {
+            console.info(`\ncss:\n${out.plan.css}`)
+          }
+          console.info(`\njs:\n${out.output.code}`)
+        } else {
+          // compute relative path to preserve directory structure in output
+          const relPath = outputDir
+            ? relative(sourceRoot, sourcePath)
+            : basename(sourcePath)
+          const cssName = '_' + basename(sourcePath, extname(sourcePath))
+          const outputBase = outputDir
+            ? join(outputDir, dirname(relPath))
+            : dirname(sourcePath)
+
+          // ensure output subdirectory exists
+          if (outputDir) {
+            await mkdir(outputBase, { recursive: true })
+          }
+
+          const stylePath = join(outputBase, cssName + '.css')
+          const cssImport = `import "./${cssName}.css"`
+          const code = out.plan.css
+            ? insertCssImport(out.output.code, cssImport)
+            : out.output.code
+
+          // Determine output path for JS (preserve directory structure)
+          const webOutputPath = outputDir ? join(outputDir, relPath) : sourcePath
 
-  // Process all files
-  for (const [sourcePath, filePlatforms] of fileToTargets) {
-    promises.push(
-      (async () => {
-        if (options.debug) {
-          process.env.NODE_ENV ||= 'development'
+          // Track original file before modifying (skip if using output dir)
+          if (!outputDir) {
+            await trackFile(sourcePath)
+          }
+
+          // Write web output
+          await writeFile(webOutputPath, code, 'utf-8')
+          if (!outputDir) {
+            await recordMtime(sourcePath)
+          }
+
+          // CSS file is new, track for cleanup (skip if using output dir)
+          if (out.plan.css) {
+            await writeFile(stylePath, out.plan.css, 'utf-8')
+          }
+          if (!outputDir && out.plan.css) {
+            // Note: CSS files are new (generated), we'll delete them on restore
+            trackedFiles.push({
+              path: stylePath,
+              hardlinkPath: '', // Empty means delete on restore
+              mtimeAfterWrite: (await stat(stylePath)).mtimeMs,
+            })
+          }
         }
-        // Read original source ONCE for both targets
-        const originalSource = await readFile(sourcePath, 'utf-8')
+      } else if (isDryRun) {
+        console.info(`  web: no output`)
+      }
+    }
 
-        if (isDryRun) {
-          console.info(`\n${sourcePath} [${filePlatforms.join(', ')}]`)
+    // Build native version from original source (NOT from the web-optimized version)
+    const buildNativeFile = async (
+      sourcePath: string,
+      filePlatforms: ('web' | 'native')[],
+      originalSource: string
+    ) => {
+      if (isDryRun) {
+        console.info(`\n${sourcePath} [native]`)
+      }
+      // Use the ORIGINAL source, not what was just written to disk
+      const nativeOut = await compileTarget('native', sourcePath, originalSource)
+
+      if (isDryRun) {
+        if (nativeOut.output.code) {
+          console.info(`\nnative:\n${nativeOut.output.code}`)
+        } else {
+          console.info(`  native: no output`)
+        }
+      } else {
+        // Determine output path:
+        // - If --output-around, write .native.tsx next to source
+        // - If --output specified, preserve directory structure
+        // - If this IS a .native.tsx file, overwrite it
+        // - If building both targets from base file, create .native.tsx
+        // - If single native target, overwrite source
+        let nativeOutputPath = sourcePath
+        const isPlatformSpecific = /\.(web|native|ios|android)\.(tsx|jsx)$/.test(
+          sourcePath
+        )
+        const needsNativeSuffix =
+          !isPlatformSpecific && (filePlatforms.length > 1 || outputAround)
+
+        if (outputAround) {
+          // Output .native.tsx next to source file
+          nativeOutputPath = sourcePath.replace(/\.(tsx|jsx)$/, '.native.$1')
+          // Check if file exists - error if so
+          const exists = await stat(nativeOutputPath).catch(() => null)
+          if (exists) {
+            throw new Error(
+              `--output-around: ${nativeOutputPath} already exists. Remove it first or use --output instead.`
+            )
+          }
+        } else if (outputDir) {
+          // preserve directory structure in output
+          const relPath = relative(sourceRoot, sourcePath)
+          // add .native suffix when building both targets to avoid overwriting web output
+          const outputRelPath = needsNativeSuffix
+            ? relPath.replace(/\.(tsx|jsx)$/, '.native.$1')
+            : relPath
+          nativeOutputPath = join(outputDir, outputRelPath)
+          // ensure output subdirectory exists
+          await mkdir(dirname(nativeOutputPath), { recursive: true })
+        } else if (needsNativeSuffix) {
+          // Base file building both targets - create separate .native.tsx
+          nativeOutputPath = sourcePath.replace(/\.(tsx|jsx)$/, '.native.$1')
         }
 
-        // Build web version from original source
-        if (filePlatforms.includes('web')) {
-          process.env.TAMAGUI_TARGET = 'web'
-          const extractor = createExtractor({
-            platform: 'web',
-          })
-
-          const out = await extractToClassNames({
-            extractor,
-            source: originalSource,
-            sourcePath,
-            options: {
-              ...buildOptions,
-              platform: 'web',
-            },
-            shouldPrintDebug: options.debug || false,
-          })
-
-          if (out) {
+        if (nativeOut.output.code) {
+          if (nativeOut.output.changed) {
             stats.filesProcessed++
-            stats.optimized += out.stats.optimized
-            stats.flattened += out.stats.flattened
-            stats.styled += out.stats.styled
-            stats.found += out.stats.found
-
-            if (isDryRun) {
-              const jsContent =
-                typeof out.js === 'string' ? out.js : out.js.toString('utf-8')
-              if (out.styles) {
-                console.info(`\ncss:\n${out.styles}`)
-              }
-              console.info(`\njs:\n${jsContent}`)
-            } else {
-              // compute relative path to preserve directory structure in output
-              const relPath = outputDir
-                ? relative(resolve(sourceDir), sourcePath)
-                : basename(sourcePath)
-              const cssName = '_' + basename(sourcePath, extname(sourcePath))
-              const outputBase = outputDir
-                ? join(outputDir, dirname(relPath))
-                : dirname(sourcePath)
-
-              // ensure output subdirectory exists
-              if (outputDir) {
-                await mkdir(outputBase, { recursive: true })
-              }
-
-              const stylePath = join(outputBase, cssName + '.css')
-              const cssImport = `import "./${cssName}.css"`
-              const jsContent =
-                typeof out.js === 'string' ? out.js : out.js.toString('utf-8')
-              const code = insertCssImport(jsContent, cssImport)
-
-              // Determine output path for JS (preserve directory structure)
-              const webOutputPath = outputDir ? join(outputDir, relPath) : sourcePath
-
-              // Track original file before modifying (skip if using output dir)
-              if (!outputDir) {
-                await trackFile(sourcePath)
-              }
-
-              // Write web output
-              await writeFile(webOutputPath, code, 'utf-8')
-              if (!outputDir) {
-                await recordMtime(sourcePath)
-              }
-
-              // CSS file is new, track for cleanup (skip if using output dir)
-              await writeFile(stylePath, out.styles, 'utf-8')
-              if (!outputDir) {
-                // Note: CSS files are new (generated), we'll delete them on restore
-                trackedFiles.push({
-                  path: stylePath,
-                  hardlinkPath: '', // Empty means delete on restore
-                  mtimeAfterWrite: (await stat(stylePath)).mtimeMs,
-                })
-              }
-            }
-          } else if (isDryRun) {
-            console.info(`  web: no output`)
+            stats.flattened += nativeOut.plan.stats.flattened
           }
-        }
 
-        // Build native version from original source (NOT from the web-optimized version)
-        if (filePlatforms.includes('native')) {
-          process.env.TAMAGUI_TARGET = 'native'
-          const nativeTamaguiOptions = {
-            ...buildOptions,
-            platform: 'native' as const,
-          } satisfies TamaguiOptions
-
-          // Use the ORIGINAL source, not what was just written to disk
-          const nativeOut = extractToNative(
-            sourcePath,
-            originalSource,
-            nativeTamaguiOptions
-          )
+          // Track original if overwriting existing file (skip if using output dir or outputAround)
+          if (
+            !outputDir &&
+            !outputAround &&
+            (nativeOutputPath === sourcePath || filePlatforms.length === 1)
+          ) {
+            await trackFile(nativeOutputPath)
+          }
+          await writeFile(nativeOutputPath, nativeOut.output.code, 'utf-8')
+          if (!outputDir && !outputAround) {
+            await recordMtime(nativeOutputPath)
+          }
 
-          if (isDryRun) {
-            if (nativeOut.code) {
-              console.info(`\nnative:\n${nativeOut.code}`)
-            } else {
-              console.info(`  native: no output`)
-            }
-          } else {
-            // Determine output path:
-            // - If --output-around, write .native.tsx next to source
-            // - If --output specified, preserve directory structure
-            // - If this IS a .native.tsx file, overwrite it
-            // - If building both targets from base file, create .native.tsx
-            // - If single native target, overwrite source
-            let nativeOutputPath = sourcePath
-            const isPlatformSpecific = /\.(web|native|ios|android)\.(tsx|jsx)$/.test(
-              sourcePath
-            )
-            const needsNativeSuffix =
-              !isPlatformSpecific && (filePlatforms.length > 1 || outputAround)
-
-            if (outputAround) {
-              // Output .native.tsx next to source file
-              nativeOutputPath = sourcePath.replace(/\.(tsx|jsx)$/, '.native.$1')
-              // Check if file exists - error if so
-              const exists = await stat(nativeOutputPath).catch(() => null)
-              if (exists) {
-                throw new Error(
-                  `--output-around: ${nativeOutputPath} already exists. Remove it first or use --output instead.`
-                )
-              }
-            } else if (outputDir) {
-              // preserve directory structure in output
-              const relPath = relative(resolve(sourceDir), sourcePath)
-              // add .native suffix when building both targets to avoid overwriting web output
-              const outputRelPath = needsNativeSuffix
-                ? relPath.replace(/\.(tsx|jsx)$/, '.native.$1')
-                : relPath
-              nativeOutputPath = join(outputDir, outputRelPath)
-              // ensure output subdirectory exists
-              await mkdir(dirname(nativeOutputPath), { recursive: true })
-            } else if (needsNativeSuffix) {
-              // Base file building both targets - create separate .native.tsx
-              nativeOutputPath = sourcePath.replace(/\.(tsx|jsx)$/, '.native.$1')
-            }
-
-            if (nativeOut.code) {
-              // check if extraction actually happened by looking for our markers
-              const hasExtraction =
-                nativeOut.code.includes('__ReactNativeStyleSheet') ||
-                nativeOut.code.includes('_withStableStyle')
-              if (hasExtraction) {
-                stats.filesProcessed++
-                // count styled wrappers as flattened (native extraction flattens styles)
-                const wrapperMatches = nativeOut.code.match(/_withStableStyle/g)
-                if (wrapperMatches) {
-                  stats.flattened += wrapperMatches.length
-                }
-              }
-
-              // Track original if overwriting existing file (skip if using output dir or outputAround)
-              if (
-                !outputDir &&
-                !outputAround &&
-                (nativeOutputPath === sourcePath || filePlatforms.length === 1)
-              ) {
-                await trackFile(nativeOutputPath)
-              }
-              await writeFile(nativeOutputPath, nativeOut.code, 'utf-8')
-              if (!outputDir && !outputAround) {
-                await recordMtime(nativeOutputPath)
-              }
-
-              // If creating new .native.tsx, track for deletion (skip if using output dir or outputAround)
-              if (
-                !outputDir &&
-                !outputAround &&
-                nativeOutputPath !== sourcePath &&
-                filePlatforms.length > 1
-              ) {
-                trackedFiles.push({
-                  path: nativeOutputPath,
-                  hardlinkPath: '', // Empty = delete on restore
-                  mtimeAfterWrite: (await stat(nativeOutputPath)).mtimeMs,
-                })
-              }
-
-              if (outputAround) {
-                console.info(`  → ${nativeOutputPath}`)
-              }
-            }
+          // If creating new .native.tsx, track for deletion (skip if using output dir or outputAround)
+          if (
+            !outputDir &&
+            !outputAround &&
+            nativeOutputPath !== sourcePath &&
+            filePlatforms.length > 1
+          ) {
+            trackedFiles.push({
+              path: nativeOutputPath,
+              hardlinkPath: '', // Empty = delete on restore
+              mtimeAfterWrite: (await stat(nativeOutputPath)).mtimeMs,
+            })
           }
-        }
-      })()
-    )
-  }
 
-  await Promise.all(promises)
+          if (outputAround) {
+            console.info(`  → ${nativeOutputPath}`)
+          }
+        }
+      }
+    }
 
-  if (isDryRun) {
-    console.info(
-      `\n${stats.filesProcessed} files | ${stats.found} found | ${stats.optimized} optimized | ${stats.flattened} flattened | ${stats.styled} styled\n`
-    )
-  }
+    // process.env.TAMAGUI_TARGET is process-global, and many tamagui modules read it
+    // at module-evaluation time (font family/size tables, isWeb, CSS-variable
+    // emission). Compiling files concurrently while flipping it per file let one
+    // file's target leak into another's in-flight compile, so the same source could
+    // emit web classes built from native config. Finish every file for one target
+    // before switching targets.
+    for (const target of targets) {
+      process.env.TAMAGUI_TARGET = target
+      const targetFiles = [...fileToTargets].filter(([, filePlatforms]) =>
+        filePlatforms.includes(target)
+      )
+      const targetPromises = targetFiles.map(([sourcePath, filePlatforms]) =>
+        target === 'web'
+          ? buildWebFile(sourcePath, sources.get(sourcePath)!)
+          : buildNativeFile(sourcePath, filePlatforms, sources.get(sourcePath)!)
+      )
+      promises.push(...targetPromises)
+      await Promise.all(targetPromises)
+    }
 
-  // Verify expected optimizations if specified
-  if (options.expectOptimizations !== undefined) {
-    const totalOptimizations = stats.optimized + stats.flattened
-    if (totalOptimizations < options.expectOptimizations) {
-      console.error(
-        `\nExpected at least ${options.expectOptimizations} optimizations but only got ${totalOptimizations}`
+    if (isDryRun) {
+      console.info(
+        `\n${stats.filesProcessed} files | ${stats.found} found | ${stats.optimized} optimized | ${stats.flattened} flattened | ${stats.styled} styled\n`
       )
-      console.error(`Stats: ${JSON.stringify(stats, null, 2)}`)
-      process.exit(1)
     }
-    console.info(
-      `\n✓ Met optimization target: ${totalOptimizations} >= ${options.expectOptimizations}`
-    )
-  }
 
-  // If a command was provided, run it and then restore files
-  if (options.runCommand && options.runCommand.length > 0) {
-    const command = options.runCommand.join(' ')
-    console.info(`\nRunning: ${command}\n`)
+    // Verify expected optimizations if specified
+    if (options.expectOptimizations !== undefined) {
+      const totalOptimizations = stats.optimized + stats.flattened
+      if (totalOptimizations < options.expectOptimizations) {
+        console.error(
+          `\nExpected at least ${options.expectOptimizations} optimizations but only got ${totalOptimizations}`
+        )
+        console.error(`Stats: ${JSON.stringify(stats, null, 2)}`)
+        await restoreTrackedFiles(true)
+        throw new Error(
+          `Expected at least ${options.expectOptimizations} optimizations but only got ${totalOptimizations}`
+        )
+      }
+      console.info(
+        `\n✓ Met optimization target: ${totalOptimizations} >= ${options.expectOptimizations}`
+      )
+    }
 
-    try {
-      execSync(command, { stdio: 'inherit' })
-    } catch (err: any) {
-      console.error(`\nCommand failed with exit code ${err.status || 1}`)
-      process.exitCode = err.status || 1
-    } finally {
-      // Always restore files
-      await restoreFiles(trackedFiles, restoreDir)
+    // If a command was provided, run it and then restore files
+    if (options.runCommand && options.runCommand.length > 0) {
+      let commandFailed = true
+
+      try {
+        await runCommand(options.runCommand, () => restoreTrackedFiles(true))
+        commandFailed = false
+      } catch (err: any) {
+        console.error(`\nCommand failed with exit code ${err.status || 1}`)
+        throw err
+      } finally {
+        // Always restore files
+        await restoreTrackedFiles(commandFailed)
+      }
     }
+
+    return { stats, trackedFiles }
+  } catch (error) {
+    await Promise.allSettled(promises)
+    await restoreTrackedFiles(true)
+    throw error
   }
+}
 
-  return { stats, trackedFiles }
+async function runCommand(
+  command: string[],
+  restore: () => Promise<void>
+): Promise<void> {
+  await new Promise<void>((resolveCommand, rejectCommand) => {
+    const child = spawn(command[0], command.slice(1), { stdio: 'inherit' })
+    let settled = false
+    let listenersRestored = false
+    const interruptListeners = process.listeners('SIGINT')
+    const terminateListeners = process.listeners('SIGTERM')
+    process.removeAllListeners('SIGINT')
+    process.removeAllListeners('SIGTERM')
+
+    const cleanup = () => {
+      process.off('SIGINT', onInterrupt)
+      process.off('SIGTERM', onTerminate)
+      if (listenersRestored) return
+      listenersRestored = true
+      for (const listener of interruptListeners) process.on('SIGINT', listener)
+      for (const listener of terminateListeners) process.on('SIGTERM', listener)
+    }
+    const finishSignal = (signal: NodeJS.Signals) => {
+      if (settled) return
+      settled = true
+      void (async () => {
+        const childExited =
+          child.exitCode === null && child.signalCode === null
+            ? new Promise<void>((resolveExit) => child.once('exit', () => resolveExit()))
+            : Promise.resolve()
+        child.kill(signal)
+        await childExited
+        try {
+          await restore()
+        } finally {
+          cleanup()
+          process.exit(signal === 'SIGINT' ? 130 : 143)
+        }
+      })()
+    }
+    const onInterrupt = () => finishSignal('SIGINT')
+    const onTerminate = () => finishSignal('SIGTERM')
+    process.once('SIGINT', onInterrupt)
+    process.once('SIGTERM', onTerminate)
+    console.info(`\nRunning: ${command.join(' ')}\n`)
+
+    child.once('error', (error) => {
+      if (settled) return
+      settled = true
+      cleanup()
+      rejectCommand(error)
+    })
+    child.once('exit', (code, signal) => {
+      if (settled) return
+      settled = true
+      cleanup()
+      if (code === 0) {
+        resolveCommand()
+        return
+      }
+      const error = new Error(
+        signal ? `Command terminated by ${signal}` : `Command exited with code ${code}`
+      ) as Error & { status?: number }
+      error.status = code ?? 1
+      rejectCommand(error)
+    })
+  })
 }
 
 async function restoreFiles(
   trackedFiles: TrackedFile[],
-  restoreDir: string | null
+  restoreDir: string | null,
+  force = false
 ): Promise<void> {
-  if (!restoreDir || trackedFiles.length === 0) return
+  if (!restoreDir) return
+  if (trackedFiles.length === 0) {
+    await rm(restoreDir, { recursive: true, force: true })
+    return
+  }
 
   console.info(`\nRestoring ${trackedFiles.length} files...`)
   let restored = 0
@@ -491,7 +702,7 @@ async function restoreFiles(
       const currentStat = await stat(tracked.path).catch(() => null)
 
       // Check if file was modified during command execution
-      if (currentStat && currentStat.mtimeMs !== tracked.mtimeAfterWrite) {
+      if (!force && currentStat && currentStat.mtimeMs !== tracked.mtimeAfterWrite) {
         console.warn(`  Skipping ${tracked.path} - modified during build`)
         skipped++
         continue