@tamagui/static 1.0.1-beta.99 → 1.0.1-rc.0

package/src/extractor/createExtractor.ts

@@ -1,43 +1,53 @@
-import { relative } from 'path'
+/* eslint-disable no-console */
+import { basename, relative } from 'path'
 
-import traverse, { NodePath, Visitor } from '@babel/traverse'
+import traverse, { NodePath, TraverseOptions } from '@babel/traverse'
 import * as t from '@babel/types'
 import {
   PseudoStyles,
   StaticConfigParsed,
-  TamaguiInternalConfig,
-  createDOMProps,
   expandStyles,
   getSplitStyles,
   getStylesAtomic,
   mediaQueryConfig,
   proxyThemeVariables,
   pseudoDescriptors,
-  stylePropsTransform,
 } from '@tamagui/core-node'
-import { difference, pick } from 'lodash'
 import type { ViewStyle } from 'react-native'
+import { createDOMProps } from 'react-native-web-internals'
 
-import { FAILED_EVAL } from '../constants'
-import {
+import { FAILED_EVAL } from '../constants.js'
+import type {
   ExtractedAttr,
   ExtractedAttrAttr,
   ExtractedAttrStyle,
+  ExtractorOptions,
   ExtractorParseProps,
+  TamaguiOptions,
+  TamaguiOptionsWithFileInfo,
   Ternary,
-} from '../types'
-import { createEvaluator, createSafeEvaluator } from './createEvaluator'
-import { evaluateAstNode } from './evaluateAstNode'
-import { attrStr, findComponentName, isInsideTamagui, isPresent, objToStr } from './extractHelpers'
-import { findTopmostFunction } from './findTopmostFunction'
-import { getStaticBindingsForScope } from './getStaticBindingsForScope'
-import { literalToAst } from './literalToAst'
-import { loadTamagui } from './loadTamagui'
-import { logLines } from './logLines'
-import { normalizeTernaries } from './normalizeTernaries'
-import { removeUnusedHooks } from './removeUnusedHooks'
-import { timer } from './timer'
-import { validHTMLAttributes } from './validHTMLAttributes'
+} from '../types.js'
+import { createEvaluator, createSafeEvaluator } from './createEvaluator.js'
+import { evaluateAstNode } from './evaluateAstNode.js'
+import {
+  attrStr,
+  findComponentName,
+  getValidComponent,
+  getValidImport,
+  isPresent,
+  isValidImport,
+  objToStr,
+} from './extractHelpers.js'
+import { findTopmostFunction } from './findTopmostFunction.js'
+import { getPrefixLogs } from './getPrefixLogs.js'
+import { cleanupBeforeExit, getStaticBindingsForScope } from './getStaticBindingsForScope.js'
+import { literalToAst } from './literalToAst.js'
+import { TamaguiProjectInfo, loadTamagui, loadTamaguiSync } from './loadTamagui.js'
+import { logLines } from './logLines.js'
+import { normalizeTernaries } from './normalizeTernaries.js'
+import { removeUnusedHooks } from './removeUnusedHooks.js'
+import { timer } from './timer.js'
+import { validHTMLAttributes } from './validHTMLAttributes.js'
 
 const UNTOUCHED_PROPS = {
   key: true,
@@ -48,25 +58,30 @@ const UNTOUCHED_PROPS = {
 const INLINE_EXTRACTABLE = {
   ref: 'ref',
   key: 'key',
-  onPress: 'onClick',
-  onHoverIn: 'onMouseEnter',
-  onHoverOut: 'onMouseLeave',
-  onPressIn: 'onMouseDown',
-  onPressOut: 'onMouseUp',
+  ...(process.env.TAMAGUI_TARGET === 'web' && {
+    onPress: 'onClick',
+    onHoverIn: 'onMouseEnter',
+    onHoverOut: 'onMouseLeave',
+    onPressIn: 'onMouseDown',
+    onPressOut: 'onMouseUp',
+  }),
 }
 
-const isAttr = (x: ExtractedAttr): x is ExtractedAttrAttr => x.type === 'attr'
-
 const validHooks = {
   useMedia: true,
   useTheme: true,
 }
 
+const isAttr = (x: ExtractedAttr): x is ExtractedAttrAttr => x.type === 'attr'
+const createTernary = (x: Ternary) => x
+
 export type Extractor = ReturnType<typeof createExtractor>
 
-const createTernary = (x: Ternary) => x
+type FileOrPath = NodePath<t.Program> | t.File
 
-export function createExtractor() {
+let hasLoggedBaseInfo = false
+
+export function createExtractor({ logger = console }: ExtractorOptions = { logger: console }) {
   if (!process.env.TAMAGUI_TARGET) {
     console.log('⚠️ Please set process.env.TAMAGUI_TARGET to either "web" or "native"')
     process.exit(1)
@@ -79,1248 +94,1451 @@ export function createExtractor() {
     process.env.IDENTIFY_TAGS !== 'false' &&
     (process.env.NODE_ENV === 'development' || process.env.DEBUG || process.env.IDENTIFY_TAGS)
 
-  let loadedTamaguiConfig: TamaguiInternalConfig
-  let hasLogged = false
-
-  function isValidStyleKey(name: string, staticConfig: StaticConfigParsed) {
-    return !!(
-      !!staticConfig.validStyles?.[name] ||
-      !!pseudoDescriptors[name] ||
-      // dont disable variants or else you lose many things flattening
-      staticConfig.variants?.[name] ||
-      loadedTamaguiConfig.shorthands[name] ||
-      (name[0] === '$' ? !!mediaQueryConfig[name.slice(1)] : false)
-    )
+  let projectInfo: TamaguiProjectInfo | null = null
+
+  // 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) {
+    return (projectInfo ||= loadTamaguiSync({
+      config: props.config || 'tamagui.config.ts',
+      components: props.components || ['tamagui'],
+    }))
+  }
+
+  async function load(props: TamaguiOptions) {
+    return (projectInfo ||= await loadTamagui({
+      config: props.config || 'tamagui.config.ts',
+      components: props.components || ['tamagui'],
+    }))
   }
 
   return {
+    options: {
+      logger,
+    },
+    cleanupBeforeExit,
+    loadTamagui: load,
+    loadTamaguiSync: loadSync,
     getTamagui() {
-      return loadedTamaguiConfig
+      return projectInfo?.tamaguiConfig
     },
-    parse: (
-      fileOrPath: NodePath<t.Program> | t.File,
-      {
-        config = 'tamagui.config.ts',
-        importsWhitelist = ['constants.js'],
-        evaluateVars = true,
-        shouldPrintDebug = false,
-        sourcePath = '',
-        onExtractTag,
-        onStyleRule,
-        getFlattenedNode,
-        disable,
-        disableExtraction,
-        disableExtractInlineMedia,
-        disableExtractVariables,
-        disableDebugAttr,
-        extractStyledDefinitions = false,
-        prefixLogs,
-        excludeProps,
-        target,
-        ...props
-      }: ExtractorParseProps
-    ) => {
-      if (disable) {
-        return null
+    parseSync: (f: FileOrPath, props: ExtractorParseProps) => {
+      const projectInfo = loadSync(props)
+      return parseWithConfig(projectInfo, f, props)
+    },
+    parse: async (f: FileOrPath, props: ExtractorParseProps) => {
+      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,
+      onStyleRule,
+      getFlattenedNode,
+      disable,
+      disableExtraction,
+      disableExtractInlineMedia,
+      disableExtractVariables,
+      disableDebugAttr,
+      disableExtractFoundComponents,
+      includeExtensions = ['.tsx', '.jsx', '.js'],
+      extractStyledDefinitions = false,
+      prefixLogs,
+      excludeProps,
+      target,
+      ...restProps
+    } = options
+
+    let shouldPrintDebug = options.shouldPrintDebug || false
+
+    if (disable === true || (Array.isArray(disable) && disable.includes(sourcePath))) {
+      return null
+    }
+    if (sourcePath === '') {
+      throw new Error(`Must provide a source file name`)
+    }
+    if (!components) {
+      throw new Error(`Must provide components`)
+    }
+    if (includeExtensions && !includeExtensions.some((ext) => sourcePath.endsWith(ext))) {
+      if (shouldPrintDebug) {
+        logger.info(
+          `Ignoring file due to includeExtensions: ${sourcePath}, includeExtensions: ${includeExtensions.join(
+            ', '
+          )}`
+        )
       }
-      if (sourcePath === '') {
-        throw new Error(`Must provide a source file name`)
+      return null
+    }
+
+    function isValidStyleKey(name: string, staticConfig: StaticConfigParsed) {
+      if (!projectInfo) {
+        throw new Error(`Tamagui extractor not loaded yet`)
       }
-      if (!Array.isArray(props.components)) {
-        throw new Error(`Must provide components array with list of Tamagui component modules`)
+      if (target === 'native' && name[0] === '$' && mediaQueryConfig[name.slice(1)]) {
+        return false
       }
-
-      const isTargetingHTML = target === 'html'
-      const ogDebug = shouldPrintDebug
-      const tm = timer()
-
-      // we require it after parse 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
-      const { components, tamaguiConfig } = loadTamagui({
-        config,
-        components: props.components || ['tamagui'],
-      })
-
-      if (shouldPrintDebug === 'verbose') {
-        console.log('tamagui.config.ts:', { components, config })
+      return !!(
+        !!staticConfig.validStyles?.[name] ||
+        !!pseudoDescriptors[name] ||
+        // dont disable variants or else you lose many things flattening
+        staticConfig.variants?.[name] ||
+        projectInfo?.tamaguiConfig.shorthands[name] ||
+        (name[0] === '$' ? !!mediaQueryConfig[name.slice(1)] : false)
+      )
+    }
+
+    /**
+     * Step 1: Determine if importing any statically extractable components
+     */
+
+    const isTargetingHTML = target === 'html'
+    const ogDebug = shouldPrintDebug
+    const tm = timer()
+    const propsWithFileInfo: TamaguiOptionsWithFileInfo = {
+      ...options,
+      sourcePath,
+      allLoadedComponents: [...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')) {
+        const next = [...propsWithFileInfo.allLoadedComponents].map((info) => {
+          const nameToInfo = { ...info.nameToInfo }
+          for (const key in nameToInfo) {
+            delete nameToInfo[key].staticConfig.validStyles
+          }
+          return { ...info, nameToInfo }
+        })
+        logger.info(['loaded:', JSON.stringify(next, null, 2)].join('\n'))
+      }
+    }
+
+    tm.mark('load-tamagui', !!shouldPrintDebug)
+
+    const firstThemeName = Object.keys(tamaguiConfig.themes)[0]
+    const firstTheme = tamaguiConfig.themes[firstThemeName]
+
+    if (!firstTheme || typeof firstTheme !== 'object') {
+      console.error(`Missing theme, an error occurred when importing your config`)
+      console.log(`Got config:`, tamaguiConfig)
+      console.log(`Looking for theme:`, firstThemeName)
+      process.exit(0)
+    }
+
+    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)
+      },
+    })
 
-      tm.mark('load-tamagui', shouldPrintDebug === 'verbose')
+    // @ts-ignore
+    const body = fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
 
-      loadedTamaguiConfig = tamaguiConfig as any
+    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.log(`components`, Object.keys(components), components)
+      }
+    }
 
-      const proxiedTheme = proxyThemeVariables(
-        tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]
+    if (shouldPrintDebug === 'verbose') {
+      logger.info(
+        `allLoadedComponent modules ${propsWithFileInfo.allLoadedComponents
+          .map((k) => k.moduleName)
+          .join(', ')}`
       )
+    }
 
-      type AccessListener = (key: string) => void
-      const themeAccessListeners = new Set<AccessListener>()
-      const defaultTheme = new Proxy(proxiedTheme, {
-        get(target, key) {
-          if (key[0] === '$') {
-            themeAccessListeners.forEach((cb) => cb(String(key)))
-          }
-          return Reflect.get(target, key)
-        },
-      })
+    let doesUseValidImport = false
+    let hasImportedTheme = false
 
-      const body = fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
+    const importDeclarations: t.ImportDeclaration[] = []
 
-      /**
-       * Step 1: Determine if importing any statically extractable components
-       */
-      const isInternalImport = (importStr: string) => {
-        return isInsideTamagui(sourcePath) && importStr[0] === '.'
-      }
+    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 validComponents: { [key: string]: any } = Object.keys(components)
-        // check if uppercase to avoid hitting media query proxy before init
-        .filter((key) => key[0].toUpperCase() === key[0] && !!components[key]?.staticConfig)
-        .reduce((obj, name) => {
-          obj[name] = components[name]
-          return obj
-        }, {})
+      // if importing valid module
+      const valid = isValidImport(propsWithFileInfo, moduleName)
 
-      if (shouldPrintDebug === 'verbose') {
-        console.log('validComponents', Object.keys(validComponents))
+      if (valid) {
+        importDeclarations.push(node)
       }
 
-      let doesUseValidImport = false
-      let hasImportedTheme = false
-
-      for (const bodyPath of body) {
-        if (bodyPath.type !== 'ImportDeclaration') continue
-        const node = ('node' in bodyPath ? bodyPath.node : bodyPath) as t.ImportDeclaration
-        const from = node.source.value
-        // if importing styled()
-        if (extractStyledDefinitions) {
-          if (from === '@tamagui/core' || from === 'tamagui') {
-            if (
-              node.specifiers.some((specifier) => {
-                return specifier.local.name === 'styled'
-              })
-            ) {
-              doesUseValidImport = true
-              break
-            }
-          }
-        }
-        const isValidImport = props.components.includes(from) || isInternalImport(from)
-        if (isValidImport) {
-          const isValidComponent = node.specifiers.some((specifier) => {
-            const name = specifier.local.name
-            return !!(validComponents[name] || validHooks[name])
-          })
-          if (shouldPrintDebug === 'verbose') {
-            console.log('import from', from, { isValidComponent })
-          }
-          if (isValidComponent) {
+      if (extractStyledDefinitions) {
+        if (valid) {
+          if (node.specifiers.some((specifier) => specifier.local.name === 'styled')) {
             doesUseValidImport = true
             break
           }
         }
       }
 
-      if (shouldPrintDebug) {
-        console.log(sourcePath, { doesUseValidImport })
+      if (valid) {
+        const names = node.specifiers.map((specifier) => specifier.local.name)
+        const isValidComponent = names.some((name) =>
+          Boolean(isValidImport(propsWithFileInfo, moduleName, name) || validHooks[name])
+        )
+        if (shouldPrintDebug === 'verbose') {
+          logger.info(
+            `import ${names.join(', ')} from ${moduleName} isValidComponent ${isValidComponent}`
+          )
+        }
+        if (isValidComponent) {
+          doesUseValidImport = true
+          break
+        }
       }
+    }
+
+    if (shouldPrintDebug) {
+      logger.info(`file: ${sourcePath} ${JSON.stringify({ doesUseValidImport, hasImportedTheme })}`)
+    }
 
-      if (!doesUseValidImport) {
+    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
+    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>) => {
+      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,
+    }
+
+    callTraverse({
+      // @ts-ignore
+      Program: {
+        enter(path) {
+          programPath = path
+        },
+      },
 
-      tm.mark('import-check', shouldPrintDebug === 'verbose')
+      // styled() calls
+      CallExpression(path) {
+        if (disable || shouldDisableExtraction || extractStyledDefinitions === false) {
+          return
+        }
 
-      let couldntParse = false
-      const modifiedComponents = new Set<NodePath<any>>()
+        if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== 'styled') {
+          return
+        }
 
-      // only keeping a cache around per-file, reset it if it changes
-      const bindingCache: Record<string, string | null> = {}
+        const name =
+          t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id)
+            ? path.parent.id.name
+            : 'unknown'
 
-      const callTraverse = (a: Visitor<{}>) => {
-        return fileOrPath.type === 'File' ? traverse(fileOrPath, a) : fileOrPath.traverse(a)
-      }
+        const definition = path.node.arguments[1]
 
-      /**
-       * Step 2: Statically extract from JSX < /> nodes
-       */
-      let programPath: NodePath<t.Program>
-
-      const res = {
-        styled: 0,
-        flattened: 0,
-        optimized: 0,
-        modified: 0,
-        found: 0,
-      }
+        if (!name || !definition || !t.isObjectExpression(definition)) {
+          return
+        }
 
-      callTraverse({
-        Program: {
-          enter(path) {
-            programPath = path
-          },
-        },
+        let Component = getValidImportedComponent(name)
 
-        CallExpression(path) {
-          if (disable || disableExtraction || extractStyledDefinitions === false) {
+        if (!Component) {
+          if (disableExtractFoundComponents === true) {
             return
           }
-
-          if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== 'styled') {
+          if (
+            Array.isArray(disableExtractFoundComponents) &&
+            disableExtractFoundComponents.includes(name)
+          ) {
             return
           }
 
-          const name =
-            t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id)
-              ? path.parent.id.name
-              : 'unknown'
-          const definition = path.node.arguments[1]
-
-          if (!name || !definition || !t.isObjectExpression(definition)) {
-            return
-          }
-
-          const Component = validComponents[name] as
-            | { staticConfig: StaticConfigParsed }
-            | undefined
-
-          if (!Component) {
+          try {
             if (shouldPrintDebug) {
-              console.log(
-                `Didn't recognize styled(${name}), ${name} isn't in design system provided to tamagui.config.ts`
-              )
+              logger.info(`Unknown component ${name}, attempting dynamic load: ${sourcePath}`)
             }
-            return
-          }
 
-          const componentSkipProps = new Set([
-            ...(Component.staticConfig.inlineWhenUnflattened || []),
-            ...(Component.staticConfig.inlineProps || []),
-            ...(Component.staticConfig.deoptProps || []),
-            // 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',
-          ])
+            const out = loadTamaguiSync({
+              forceExports: true,
+              components: [sourcePath],
+            })
 
-          // for now dont parse variants, spreads, etc
-          const skipped: (t.ObjectProperty | t.SpreadElement | t.ObjectMethod)[] = []
-          const styles = {}
+            if (!out?.components) {
+              if (shouldPrintDebug) {
+                logger.info(`Couldn't load, got ${out}`)
+              }
+              return
+            }
 
-          // Generate scope object at this level
-          const staticNamespace = getStaticBindingsForScope(
-            path.scope,
-            importsWhitelist,
-            sourcePath,
-            bindingCache,
-            shouldPrintDebug
-          )
+            propsWithFileInfo.allLoadedComponents = [
+              ...propsWithFileInfo.allLoadedComponents,
+              ...out.components,
+            ]
 
-          const attemptEval = !evaluateVars
-            ? evaluateAstNode
-            : createEvaluator({
-                tamaguiConfig,
-                staticNamespace,
-                sourcePath,
-                shouldPrintDebug,
-              })
-          const attemptEvalSafe = createSafeEvaluator(attemptEval)
+            Component = out.components.flatMap((x) => x.nameToInfo[name] ?? [])[0]
 
-          for (const property of definition.properties) {
-            if (
-              !t.isObjectProperty(property) ||
-              !t.isIdentifier(property.key) ||
-              !isValidStyleKey(property.key.name, Component.staticConfig) ||
-              // skip variants
-              Component.staticConfig.variants?.[property.key.name] ||
-              componentSkipProps.has(property.key.name)
-            ) {
-              skipped.push(property)
-              continue
+            if (shouldPrintDebug === 'verbose') {
+              logger.info([`Tamagui Loaded`, JSON.stringify(out.components), !!Component].join(' '))
             }
-            // attempt eval
-            const out = attemptEvalSafe(property.value)
-            if (out === FAILED_EVAL) {
-              skipped.push(property)
-            } else {
-              styles[property.key.name] = out
+          } catch (err: any) {
+            if (shouldPrintDebug) {
+              logger.info(
+                `${getPrefixLogs(
+                  options
+                )} skip optimize styled(${name}), unable to pre-process (DEBUG=tamagui for more)`
+              )
+            }
+            if (process.env.DEBUG === 'tamagui') {
+              logger.info(
+                ` Disable this with "disableExtractFoundComponents" in your build-time configuration. \n\n ${err.message} ${err.stack}`
+              )
             }
           }
+        }
 
-          // turn parsed styles into CSS
-          const out = getSplitStyles(styles, Component.staticConfig, defaultTheme, {
-            focus: false,
-            hover: false,
-            mounted: false,
-            press: false,
-            pressIn: false,
-            resolveVariablesAs: 'variable',
-          })
+        if (!Component) {
+          return
+        }
 
-          const classNames = {
-            ...out.classNames,
+        const componentSkipProps = new Set([
+          ...(Component.staticConfig.inlineWhenUnflattened || []),
+          ...(Component.staticConfig.inlineProps || []),
+          ...(Component.staticConfig.deoptProps || []),
+          // 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',
+        ])
+
+        // for now dont parse variants, spreads, etc
+        const skipped: (t.ObjectProperty | t.SpreadElement | t.ObjectMethod)[] = []
+        const styles = {}
+
+        // 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) ||
+            !isValidStyleKey(property.key.name, Component.staticConfig) ||
+            // skip variants
+            Component.staticConfig.variants?.[property.key.name] ||
+            componentSkipProps.has(property.key.name)
+          ) {
+            skipped.push(property)
+            continue
+          }
+          // attempt eval
+          const out = attemptEvalSafe(property.value)
+          if (out === FAILED_EVAL) {
+            skipped.push(property)
+          } else {
+            styles[property.key.name] = out
           }
+        }
 
-          // add in the style object as classnames
-          const atomics = getStylesAtomic(out.style)
+        const out = getSplitStyles(styles, Component.staticConfig, defaultTheme, {
+          focus: false,
+          hover: false,
+          unmounted: true,
+          press: false,
+          pressIn: false,
+          resolveVariablesAs: 'variable',
+          noClassNames: false,
+        })
+
+        const classNames = {
+          ...out.classNames,
+        }
 
-          if (shouldPrintDebug) {
-            console.log('Exctacting styled()', styles, out, 'to', atomics)
-          }
+        // // add in the style object as classnames
+        // const atomics = getStylesAtomic(out.style)
+        // for (const atomic of atomics) {
+        //   out.rulesToInsert = out.rulesToInsert || []
+        //   out.rulesToInsert.push(atomic)
+        //   classNames[atomic.property] = atomic.identifier
+        // }
 
-          for (const atomic of atomics) {
-            for (const rule of atomic.rules) {
-              out.rulesToInsert = out.rulesToInsert || []
-              out.rulesToInsert.push([atomic.identifier, rule])
-            }
-            classNames[atomic.property] = atomic.identifier
-          }
+        if (shouldPrintDebug) {
+          // prettier-ignore
+          logger.info([`Extracted styled(${name})\n`, JSON.stringify(styles, null, 2), '\n  rulesToInsert:', out.rulesToInsert.flatMap((rule) => rule.rules).join('\n')].join(' '))
+        }
 
-          // leave only un-parsed props...
-          definition.properties = skipped
+        // leave only un-parsed props...
+        definition.properties = skipped
 
-          // ... + key: className
-          for (const cn in classNames) {
-            if (componentSkipProps.has(cn)) {
-              continue
-            }
-            const val = classNames[cn]
-            definition.properties.push(t.objectProperty(t.stringLiteral(cn), t.stringLiteral(val)))
+        // ... + key: className
+        for (const cn in classNames) {
+          if (componentSkipProps.has(cn)) {
+            continue
           }
+          const val = classNames[cn]
+          definition.properties.push(t.objectProperty(t.stringLiteral(cn), t.stringLiteral(val)))
+        }
 
-          if (out.rulesToInsert) {
-            for (const [identifier, rule] of out.rulesToInsert) {
-              onStyleRule?.(identifier, [rule])
-            }
+        if (out.rulesToInsert) {
+          for (const { identifier, rules } of out.rulesToInsert) {
+            onStyleRule?.(identifier, rules)
           }
+        }
 
-          res.styled++
+        res.styled++
 
-          if (shouldPrintDebug) {
-            console.log(`Extracted styled(${name}) props:`, styles)
-          }
-        },
+        if (shouldPrintDebug) {
+          logger.info(`Extracted styled(${name})`)
+        }
+      },
 
-        JSXElement(traversePath) {
-          tm.mark('jsx-element', shouldPrintDebug === 'verbose')
+      JSXElement(traversePath) {
+        if (shouldDisableExtraction) {
+          return
+        }
 
-          const node = traversePath.node.openingElement
-          const ogAttributes = node.attributes
-          const componentName = findComponentName(traversePath.scope)
-          const closingElement = traversePath.node.closingElement
+        tm.mark('jsx-element', !!shouldPrintDebug)
 
-          // skip non-identifier opening elements (member expressions, etc.)
-          if (t.isJSXMemberExpression(closingElement?.name) || !t.isJSXIdentifier(node.name)) {
-            return
-          }
+        const node = traversePath.node.openingElement
+        const ogAttributes = node.attributes.map((attr) => ({ ...attr }))
+        const componentName = findComponentName(traversePath.scope)
+        const closingElement = traversePath.node.closingElement
 
-          // validate its a proper import from tamagui (or internally inside tamagui)
-          const binding = traversePath.scope.getBinding(node.name.name)
+        // skip non-identifier opening elements (member expressions, etc.)
+        if (t.isJSXMemberExpression(closingElement?.name) || !t.isJSXIdentifier(node.name)) {
+          return
+        }
 
-          if (binding) {
-            if (!t.isImportDeclaration(binding.path.parent)) {
-              return
-            }
-            const source = binding.path.parent.source
-            if (!props.components.includes(source.value) && !isInternalImport(source.value)) {
-              return
+        // validate its a proper import from tamagui (or internally inside tamagui)
+        const binding = traversePath.scope.getBinding(node.name.name)
+        let modulePath = ''
+
+        if (binding) {
+          if (!t.isImportDeclaration(binding.path.parent)) {
+            if (shouldPrintDebug) {
+              logger.info(` - Binding not import declaration, skip`)
             }
-            if (!validComponents[binding.identifier.name]) {
-              return
+            return
+          }
+          modulePath = binding.path.parent.source.value
+          if (!isValidImport(propsWithFileInfo, modulePath, binding.identifier.name)) {
+            if (shouldPrintDebug) {
+              logger.info(` - Binding not internal import or from components ${modulePath}`)
             }
+            return
           }
+        }
 
-          const component = validComponents[node.name.name] as { staticConfig?: StaticConfigParsed }
-          if (!component || !component.staticConfig) {
-            return
+        const component = getValidComponent(propsWithFileInfo, modulePath, node.name.name)
+        if (!component || !component.staticConfig) {
+          if (shouldPrintDebug) {
+            logger.info(` - No Tamagui conf on this: ${node.name.name}`)
           }
+          return
+        }
+
+        const originalNodeName = node.name.name
 
-          const originalNodeName = node.name.name
+        // found a valid tag
+        res.found++
 
-          // 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 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 tagId = [componentName, `${node.name.name}`, `${filePath}:${lineNumbers}`].filter(
-            Boolean
+        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
+        }
 
-          // debug just one
-          const debugPropValue = node.attributes
-            .filter<t.JSXAttribute>(
-              // @ts-ignore
-              (n) => t.isJSXAttribute(n) && t.isJSXIdentifier(n.name) && n.name.name === 'debug'
-            )
-            .map((n) => {
-              if (n.value === null) return true
-              if (t.isStringLiteral(n.value)) return n.value.value as 'verbose'
-              return false
-            })[0]
+        if (shouldPrintDebug) {
+          logger.info('\n')
+          logger.info(
+            `\x1b[33m%s\x1b[0m ` + `${componentName} | ${codePosition} -------------------`
+          )
+          // prettier-ignore
+          logger.info(['\x1b[1m', '\x1b[32m', `<${originalNodeName} />`, disableDebugAttr ? '' : '🐛'].join(' '))
+        }
 
-          if (debugPropValue) {
-            shouldPrintDebug = debugPropValue
+        // add data-* debug attributes
+        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))
+            )
           }
 
-          try {
-            node.attributes.find(
-              (n) =>
-                t.isJSXAttribute(n) &&
-                t.isJSXIdentifier(n.name) &&
-                n.name.name === 'debug' &&
-                n.value === null
+          node.attributes.unshift(
+            t.jsxAttribute(
+              t.jsxIdentifier('data-at'),
+              t.stringLiteral(`${basename(filePath)}:${lineNumbers}`)
             )
+          )
+        }
 
-            if (shouldPrintDebug) {
-              console.log('\n')
-              console.log('\x1b[33m%s\x1b[0m', `${tagId[0]} | ${tagId[2]} -------------------`)
-              console.log('\x1b[1m', '\x1b[32m', `<${originalNodeName} />`)
-            }
-
-            // add data-is
-            if (shouldAddDebugProp && !disableDebugAttr) {
-              res.modified++
-              node.attributes.unshift(
-                t.jsxAttribute(t.jsxIdentifier('data-is'), t.stringLiteral(tagId.join(' ')))
-              )
-            }
-
-            const shouldLog = !hasLogged
-            if (shouldLog) {
-              console.log(`  1️⃣  Inline optimized  2️⃣  Inline flattened  3️⃣  styled() extracted`)
-              const prefix = '      |'
-              // prettier-ignore
-              console.log(prefixLogs || prefix, '                         total ·  1️⃣  ·  2️⃣  ·  3️⃣')
-              hasLogged = true
-            }
-            if (disableExtraction) {
-              return
-            }
-
-            const { staticConfig } = component
-            const variants = staticConfig.variants || {}
-            const isTextView = staticConfig.isText || false
-            const validStyles = staticConfig?.validStyles ?? {}
-
-            // find tag="a" tag="main" etc dom indicators
-            let tagName = staticConfig.defaultProps.tag ?? (isTextView ? 'span' : 'div')
-            traversePath
-              .get('openingElement')
-              .get('attributes')
-              .forEach((path) => {
-                const attr = path.node
-                if (t.isJSXSpreadAttribute(attr)) return
-                if (attr.name.name !== 'tag') return
-                const val = attr.value
-                if (!t.isStringLiteral(val)) return
-                tagName = val.value
-              })
+        // disable as it gets messy
+        // const shouldLog = !hasLogged
+        // if (shouldLog) {
+        //   logger.info(`  1️⃣  Inline optimized  2️⃣  Inline flattened  3️⃣  styled() extracted`)
+        //   const prefix = '      |'
+        //   // prettier-ignore
+        //   logger.info([prefixLogs || prefix, '                         total ·  1️⃣  ·  2️⃣  ·  3️⃣'].join(' '))
+        //   hasLogged = true
+        // }
+
+        if (disableExtraction) {
+          return
+        }
 
-            const flatNode = getFlattenedNode({ isTextView, tag: tagName })
+        try {
+          const { staticConfig } = component
+          const variants = staticConfig.variants || {}
+          const isTextView = staticConfig.isText || false
+          const validStyles = staticConfig?.validStyles ?? {}
+
+          // find tag="a" tag="main" etc dom indicators
+          let tagName = staticConfig.defaultProps.tag ?? (isTextView ? 'span' : 'div')
+          traversePath
+            .get('openingElement')
+            .get('attributes')
+            .forEach((path) => {
+              const attr = path.node
+              if (t.isJSXSpreadAttribute(attr)) return
+              if (attr.name.name !== 'tag') return
+              const val = attr.value
+              if (!t.isStringLiteral(val)) return
+              tagName = val.value
+            })
 
-            const inlineProps = new Set([
-              ...(props.inlineProps || []),
-              ...(staticConfig.inlineProps || []),
-            ])
+          const flatNode = getFlattenedNode?.({ isTextView, tag: tagName })
 
-            const deoptProps = new Set([
-              // always de-opt animation
-              'animation',
-              ...(props.deoptProps || []),
-              ...(staticConfig.deoptProps || []),
-            ])
+          const inlineProps = new Set([
+            ...(restProps.inlineProps || []),
+            ...(staticConfig.inlineProps || []),
+          ])
 
-            const inlineWhenUnflattened = new Set([...(staticConfig.inlineWhenUnflattened || [])])
+          const deoptProps = new Set([
+            // always de-opt animation
+            'animation',
+            ...(restProps.deoptProps || []),
+            ...(staticConfig.deoptProps || []),
+          ])
 
-            // Generate scope object at this level
-            const staticNamespace = getStaticBindingsForScope(
-              traversePath.scope,
-              importsWhitelist,
-              sourcePath,
-              bindingCache,
-              shouldPrintDebug
-            )
+          const inlineWhenUnflattened = new Set([...(staticConfig.inlineWhenUnflattened || [])])
 
-            const attemptEval = !evaluateVars
-              ? evaluateAstNode
-              : createEvaluator({
-                  tamaguiConfig,
-                  staticNamespace,
-                  sourcePath,
-                  traversePath,
-                  shouldPrintDebug,
-                })
-            const attemptEvalSafe = createSafeEvaluator(attemptEval)
+          // Generate scope object at this level
+          const staticNamespace = getStaticBindingsForScope(
+            traversePath.scope,
+            importsWhitelist,
+            sourcePath,
+            bindingCache,
+            shouldPrintDebug
+          )
 
-            if (shouldPrintDebug) {
-              console.log('  staticNamespace', Object.keys(staticNamespace).join(', '))
-            }
+          const attemptEval = !evaluateVars
+            ? evaluateAstNode
+            : createEvaluator({
+                props: propsWithFileInfo,
+                staticNamespace,
+                sourcePath,
+                traversePath,
+                shouldPrintDebug,
+              })
+          const attemptEvalSafe = createSafeEvaluator(attemptEval)
 
-            //
-            //  SPREADS SETUP
-            //
+          if (shouldPrintDebug) {
+            logger.info(`  staticNamespace ${Object.keys(staticNamespace).join(', ')}`)
+          }
 
-            // TODO restore
-            // const hasDeopt = (obj: Object) => {
-            //   return Object.keys(obj).some(isDeoptedProp)
-            // }
-
-            // flatten any easily evaluatable spreads
-            const flattenedAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
-            traversePath
-              .get('openingElement')
-              .get('attributes')
-              .forEach((path) => {
-                const attr = path.node
-                if (!t.isJSXSpreadAttribute(attr)) {
-                  flattenedAttrs.push(attr)
-                  return
+          //
+          //  SPREADS SETUP
+          //
+
+          // TODO restore
+          // const hasDeopt = (obj: Object) => {
+          //   return Object.keys(obj).some(isDeoptedProp)
+          // }
+
+          // flatten any easily evaluatable spreads
+          const flattenedAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
+          traversePath
+            .get('openingElement')
+            .get('attributes')
+            .forEach((path) => {
+              const attr = path.node
+              if (!t.isJSXSpreadAttribute(attr)) {
+                flattenedAttrs.push(attr)
+                return
+              }
+              let arg: any
+              try {
+                arg = attemptEval(attr.argument)
+              } catch (e: any) {
+                if (shouldPrintDebug) {
+                  logger.info(['  couldnt parse spread', e.message].join(' '))
                 }
-                let arg: any
+                flattenedAttrs.push(attr)
+                return
+              }
+              if (arg !== undefined) {
                 try {
-                  arg = attemptEval(attr.argument)
-                } catch (e: any) {
-                  if (shouldPrintDebug) {
-                    console.log('  couldnt parse spread', e.message)
-                  }
-                  flattenedAttrs.push(attr)
-                  return
-                }
-                if (arg !== undefined) {
-                  try {
-                    if (typeof arg !== 'object' || arg == null) {
-                      if (shouldPrintDebug) {
-                        console.log('  non object or null arg', arg)
+                  if (typeof arg !== 'object' || arg == null) {
+                    if (shouldPrintDebug) {
+                      logger.info(['  non object or null arg', arg].join(' '))
+                    }
+                    flattenedAttrs.push(attr)
+                  } else {
+                    for (const k in arg) {
+                      const value = arg[k]
+                      // this is a null prop:
+                      if (!value && typeof value === 'object') {
+                        logger.error(['Unhandled null prop', k, value, arg].join(' '))
+                        continue
                       }
-                      flattenedAttrs.push(attr)
-                    } else {
-                      for (const k in arg) {
-                        const value = arg[k]
-                        // this is a null prop:
-                        if (!value && typeof value === 'object') {
-                          console.log('shouldnt we handle this?', k, value, arg)
-                          continue
-                        }
-                        flattenedAttrs.push(
-                          t.jsxAttribute(
-                            t.jsxIdentifier(k),
-                            t.jsxExpressionContainer(literalToAst(value))
-                          )
+                      flattenedAttrs.push(
+                        t.jsxAttribute(
+                          t.jsxIdentifier(k),
+                          t.jsxExpressionContainer(literalToAst(value))
                         )
-                      }
+                      )
                     }
-                  } catch (err) {
-                    console.warn('cant parse spread, caught err', err)
-                    couldntParse = true
                   }
+                } catch (err) {
+                  logger.warn(`cant parse spread, caught err ${err}`)
+                  couldntParse = true
                 }
-              })
-
-            if (couldntParse) {
-              return
-            }
-
-            tm.mark('jsx-element-flattened', shouldPrintDebug === 'verbose')
-
-            // set flattened
-            node.attributes = flattenedAttrs
-
-            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' }}
-
-            attrs = traversePath
-              .get('openingElement')
-              .get('attributes')
-              .flatMap((path) => {
-                try {
-                  const res = evaluateAttribute(path)
-                  tm.mark('jsx-element-evaluate-attr', shouldPrintDebug === 'verbose')
-                  if (!res) {
-                    path.remove()
-                  }
-                  return res
-                } catch (err: any) {
-                  if (shouldPrintDebug) {
-                    console.log('Error extracting attribute', err.message, err.stack)
-                    console.log('node', path.node)
-                  }
-                  // 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) {
-              console.log('  - attrs (before):\n', logLines(attrs.map(attrStr).join(', ')))
-            }
+          if (couldntParse) {
+            return
+          }
 
-            // 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 && !isExtractable(side))) {
-                    if (shouldPrintDebug) {
-                      console.log('not extractable', alt, cons)
-                    }
-                    return attr
-                  }
-                  // split into individual ternaries per object property
-                  return [
-                    ...(createTernariesFromObjectProperties(test, alt) || []),
-                    ...((cons &&
-                      createTernariesFromObjectProperties(t.unaryExpression('!', test), cons)) ||
-                      []),
-                  ].map((ternary) => ({
-                    type: 'ternary',
-                    value: ternary,
-                  }))
+          tm.mark('jsx-element-flattened', !!shouldPrintDebug)
+
+          // set flattened
+          node.attributes = flattenedAttrs
+
+          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' }}
+
+          attrs = traversePath
+            .get('openingElement')
+            .get('attributes')
+            .flatMap((path) => {
+              try {
+                const res = evaluateAttribute(path)
+                tm.mark('jsx-element-evaluate-attr', !!shouldPrintDebug)
+                if (!res) {
+                  path.remove()
                 }
-              }
-              // 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'
-              ) {
+                return res
+              } catch (err: any) {
                 if (shouldPrintDebug) {
-                  console.log('  ! inlining, spread attr')
+                  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 attr
+                return {
+                  type: 'attr',
+                  value: path.node,
+                } as const
               }
+            })
+            .flat(4)
+            .filter(isPresent)
 
-              const name = attribute.name.name
+          if (shouldPrintDebug) {
+            logger.info(
+              ['  - attrs (before):\n', logLines(attrs.map(attrStr).join(', '))].join(' ')
+            )
+          }
 
-              if (excludeProps?.has(name)) {
-                if (shouldPrintDebug) {
-                  console.log('  excluding prop', name)
+          // 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
                 }
-                return null
+                // split into individual ternaries per object property
+                return [
+                  ...(createTernariesFromObjectProperties(test, alt) || []),
+                  ...((cons &&
+                    createTernariesFromObjectProperties(t.unaryExpression('!', test), cons)) ||
+                    []),
+                ].map((ternary) => ({
+                  type: 'ternary',
+                  value: ternary,
+                }))
               }
+            }
+            // END ...spreads
 
-              if (inlineProps.has(name)) {
-                inlined.set(name, name)
-                if (shouldPrintDebug) {
-                  console.log('  ! inlining, inline prop', name)
-                }
-                return attr
+            // 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
+            }
 
-              // can still optimize the object... see hoverStyle on native
-              if (deoptProps.has(name)) {
-                shouldDeopt = true
-                inlined.set(name, name)
-                if (shouldPrintDebug) {
-                  console.log('  ! inlining, deopted prop', name)
-                }
-                return attr
-              }
+            const name = attribute.name.name
 
-              // pass className, key, and style props through untouched
-              if (UNTOUCHED_PROPS[name]) {
-                return attr
+            if (excludeProps?.has(name)) {
+              if (shouldPrintDebug) {
+                logger.info(['  excluding prop', name].join(' '))
               }
+              return null
+            }
 
-              if (INLINE_EXTRACTABLE[name]) {
-                inlined.set(name, INLINE_EXTRACTABLE[name])
-                return attr
+            if (inlineProps.has(name)) {
+              inlined.set(name, name)
+              if (shouldPrintDebug) {
+                logger.info(['  ! inlining, inline prop', name].join(' '))
               }
+              return attr
+            }
 
-              if (name.startsWith('data-')) {
-                return attr
+            // can still optimize the object... see hoverStyle on native
+            if (deoptProps.has(name)) {
+              shouldDeopt = true
+              inlined.set(name, name)
+              if (shouldPrintDebug) {
+                logger.info(['  ! inlining, deopted 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-')) {
+              return attr
+            }
+
+            // shorthand media queries
+            if (name[0] === '$' && t.isJSXExpressionContainer(attribute?.value)) {
+              const shortname = name.slice(1)
+              if (mediaQueryConfig[shortname]) {
+                if (target === 'native') {
+                  shouldDeopt = true
+                }
 
-              // shorthand media queries
-              if (name[0] === '$' && t.isJSXExpressionContainer(attribute?.value)) {
                 // allow disabling this extraction
                 if (disableExtractInlineMedia) {
                   return attr
                 }
 
-                const shortname = name.slice(1)
-                if (mediaQueryConfig[shortname]) {
-                  const expression = attribute.value.expression
-                  if (!t.isJSXEmptyExpression(expression)) {
-                    const ternaries = createTernariesFromObjectProperties(
-                      t.stringLiteral(shortname),
-                      expression,
-                      {
-                        inlineMediaQuery: shortname,
-                      }
-                    )
-                    if (ternaries) {
-                      return ternaries.map((value) => ({
-                        type: 'ternary',
-                        value,
-                      }))
+                const expression = attribute.value.expression
+                if (!t.isJSXEmptyExpression(expression)) {
+                  const ternaries = createTernariesFromObjectProperties(
+                    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
-                } else {
-                  return [attribute.value!, path.get('value')!] as const
-                }
-              })()
-
-              const remove = () => {
-                Array.isArray(valuePath) ? valuePath.map((p) => p.remove()) : valuePath.remove()
+            const [value, valuePath] = (() => {
+              if (t.isJSXExpressionContainer(attribute?.value)) {
+                return [attribute.value.expression!, path.get('value')!] as const
+              } else {
+                return [attribute.value!, path.get('value')!] as const
               }
+            })()
 
-              if (name === 'ref') {
-                if (shouldPrintDebug) {
-                  console.log('  ! inlining, ref', name)
-                }
-                inlined.set('ref', 'ref')
-                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 === 'tag') {
-                return {
-                  type: 'attr',
-                  value: path.node,
-                }
+            if (name === 'tag') {
+              return {
+                type: 'attr',
+                value: path.node,
               }
+            }
 
-              // native shouldn't extract variables
-              if (disableExtractVariables) {
-                if (value) {
-                  if (value.type === 'StringLiteral' && value.value[0] === '$') {
-                    if (shouldPrintDebug) {
-                      console.log(`  ! inlining, native disable extract: ${name} =`, value.value)
-                    }
-                    inlined.set(name, true)
-                    return attr
+            // 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
-              }
-
-              // if value can be evaluated, extract it and filter it out
-              const styleValue = attemptEvalSafe(value)
-
-              // never flatten if a prop isn't a valid static attribute
-              // only post prop-mapping
-              if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
-                let keys = [name]
-                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
-                out = staticConfig.propMapper(
-                  name,
-                  styleValue,
-                  defaultTheme,
-                  staticConfig.defaultProps,
-                  { resolveVariablesAs: 'auto' },
-                  undefined,
-                  shouldPrintDebug
-                )
+            if (name === 'theme') {
+              inlined.set('theme', attr.value)
+              return attr
+            }
 
-                if (out) {
-                  if (!Array.isArray(out)) {
-                    console.warn(`Error expected array but got`, out)
-                    couldntParse = true
-                    shouldDeopt = true
-                  } else {
-                    out = Object.fromEntries(out)
-                    keys = Object.keys(out)
-                  }
-                }
-                if (out) {
-                  if (isTargetingHTML) {
-                    // translate to DOM-compat
-                    out = createDOMProps(isTextView ? 'span' : 'div', out)
-                    // remove className - we dont use rnw styling
-                    delete out.className
-                  }
+            // if value can be evaluated, extract it and filter it out
+            const styleValue = attemptEvalSafe(value)
+
+            // never flatten if a prop isn't a valid static attribute
+            // only post prop-mapping
+            if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
+              let keys = [name]
+              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
+              out = staticConfig.propMapper(
+                name,
+                styleValue,
+                defaultTheme,
+                staticConfig.defaultProps,
+                { resolveVariablesAs: 'auto' },
+                undefined,
+                undefined,
+                shouldPrintDebug
+              )
 
+              if (out) {
+                if (!Array.isArray(out)) {
+                  logger.warn(`Error expected array but got`, out)
+                  couldntParse = true
+                  shouldDeopt = true
+                } else {
+                  out = Object.fromEntries(out)
                   keys = Object.keys(out)
                 }
-
-                let didInline = false
-                const attributes = keys.map((key) => {
-                  const val = out[key]
-                  if (isValidStyleKey(key, staticConfig)) {
-                    return {
-                      type: 'style',
-                      value: { [key]: styleValue },
-                      name: key,
-                      attr: path.node,
-                    } as const
-                  }
-                  if (
-                    validHTMLAttributes[key] ||
-                    key.startsWith('aria-') ||
-                    key.startsWith('data-')
-                  ) {
-                    return attr
-                  }
-                  if (shouldPrintDebug) {
-                    console.log('  ! inlining, non-static', key)
-                  }
-                  didInline = true
-                  inlined.set(key, val)
-                  return val
-                })
-
-                // weird logic whats going on here
-                if (didInline) {
-                  if (shouldPrintDebug) {
-                    console.log('  bailing flattening due to attributes', attributes)
-                  }
-                  // bail
-                  return attr
+              }
+              if (out) {
+                if (isTargetingHTML) {
+                  // translate to DOM-compat
+                  out = createDOMProps(isTextView ? 'span' : 'div', out)
+                  // remove className - we dont use rnw styling
+                  delete out.className
                 }
 
-                // return evaluated attributes
-                return attributes
+                keys = Object.keys(out)
               }
 
-              // 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)) {
-                  if (shouldPrintDebug) {
-                    console.log(`  style: ${name} =`, styleValue)
-                  }
-                  if (!(name in staticConfig.defaultProps)) {
-                    if (!hasSetOptimized) {
-                      res.optimized++
-                      hasSetOptimized = true
-                    }
-                  }
+              let didInline = false
+              const attributes = keys.map((key) => {
+                const val = out[key]
+                if (isValidStyleKey(key, staticConfig)) {
                   return {
                     type: 'style',
-                    value: { [name]: styleValue },
-                    name,
+                    value: { [key]: styleValue },
+                    name: key,
                     attr: path.node,
-                  }
-                } else {
-                  if (variants[name]) {
-                    variantValues.set(name, styleValue)
-                  }
-                  inlined.set(name, true)
+                  } 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'
+                ) {
                   return attr
                 }
-              }
-
-              // ternaries!
+                if (shouldPrintDebug) {
+                  logger.info('  ! inlining, non-static ' + key)
+                }
+                didInline = true
+                inlined.set(key, val)
+                return val
+              })
 
-              // 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)) {
+              // weird logic whats going on here
+              if (didInline) {
                 if (shouldPrintDebug) {
-                  console.log(` binary expression ${name} = `, value)
+                  logger.info(`  bailing flattening due to attributes ${attributes}`)
                 }
-                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)
+                // 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)) {
                 if (shouldPrintDebug) {
-                  console.log(`  evalBinaryExpression lVal ${String(lVal)}, rVal ${String(rVal)}`)
+                  logger.info(`  style: ${name} = ${styleValue}`)
                 }
-                if (lVal !== FAILED_EVAL && t.isConditionalExpression(right)) {
-                  const ternary = addBinaryConditional(operator, left, right)
-                  if (ternary) return ternary
+                if (!(name in staticConfig.defaultProps)) {
+                  if (!hasSetOptimized) {
+                    res.optimized++
+                    hasSetOptimized = true
+                  }
                 }
-                if (rVal !== FAILED_EVAL && t.isConditionalExpression(left)) {
-                  const ternary = addBinaryConditional(operator, right, left)
-                  if (ternary) return ternary
+                return {
+                  type: 'style',
+                  value: { [name]: styleValue },
+                  name,
+                  attr: path.node,
                 }
-                if (shouldPrintDebug) {
-                  console.log(`  evalBinaryExpression cant extract`)
+              } else {
+                if (variants[name]) {
+                  variantValues.set(name, styleValue)
                 }
                 inlined.set(name, true)
                 return attr
               }
+            }
 
-              const staticConditional = getStaticConditional(value)
-              if (staticConditional) {
-                if (shouldPrintDebug === 'verbose') {
-                  console.log(` static conditional ${name}`, value)
-                }
-                return { type: 'ternary', value: staticConditional }
+            // 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 staticLogical = getStaticLogical(value)
-              if (staticLogical) {
-                if (shouldPrintDebug === 'verbose') {
-                  console.log(` static ternary ${name} = `, value)
-                }
-                return { type: 'ternary', value: staticLogical }
+            const staticConditional = getStaticConditional(value)
+            if (staticConditional) {
+              if (shouldPrintDebug === 'verbose') {
+                logger.info(` static conditional ${name} ${value}`)
               }
+              return { type: 'ternary', value: staticConditional }
+            }
 
-              // if we've made it this far, the prop stays inline
-              inlined.set(name, true)
-              if (shouldPrintDebug) {
-                console.log(` ! inline no match ${name}`, value)
+            const staticLogical = getStaticLogical(value)
+            if (staticLogical) {
+              if (shouldPrintDebug === 'verbose') {
+                logger.info(` static ternary ${name} =  ${value}`)
               }
+              return { type: 'ternary', value: staticLogical }
+            }
 
-              //
-              // RETURN ATTR
-              //
-              return attr
+            // if we've made it this far, the prop stays inline
+            inlined.set(name, true)
+            if (shouldPrintDebug) {
+              logger.info(` ! inline no match ${name} ${value}`)
+            }
 
-              // 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)
-                  )
+            //
+            // 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) {
-                    console.log('  binaryConditional', cond.test, cons, alt)
+                    const type = value.test.type
+                    logger.info(['      static ternary', type, cVal, aVal].join(' '))
                   }
                   return {
-                    type: 'ternary',
-                    value: {
-                      test: cond.test,
-                      remove,
-                      alternate: { [name]: alt },
-                      consequent: { [name]: cons },
-                    },
+                    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
               }
+              return null
+            }
 
-              function getStaticConditional(value: t.Node): Ternary | null {
-                if (t.isConditionalExpression(value)) {
+            function getStaticLogical(value: t.Node): Ternary | null {
+              if (t.isLogicalExpression(value)) {
+                if (value.operator === '&&') {
                   try {
-                    const aVal = attemptEval(value.alternate)
-                    const cVal = attemptEval(value.consequent)
+                    const val = attemptEval(value.right)
                     if (shouldPrintDebug) {
-                      const type = value.test.type
-                      console.log('      static ternary', type, cVal, aVal)
+                      logger.info(['  staticLogical', value.left, name, val].join(' '))
                     }
                     return {
-                      test: value.test,
+                      test: value.left,
                       remove,
-                      consequent: { [name]: cVal },
-                      alternate: { [name]: aVal },
+                      consequent: { [name]: val },
+                      alternate: null,
                     }
-                  } catch (err: any) {
+                  } catch (err) {
                     if (shouldPrintDebug) {
-                      console.log('       cant eval ternary', err.message)
+                      logger.info(['  cant static eval logical', err].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) {
-                        console.log('  staticLogical', value.left, name, val)
-                      }
-                      return {
-                        test: value.left,
-                        remove,
-                        consequent: { [name]: val },
-                        alternate: null,
-                      }
-                    } catch (err) {
-                      if (shouldPrintDebug) {
-                        console.log('  cant static eval logical', err)
-                      }
-                    }
-                  }
+              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)) {
+                  logger.info(['not object prop', prop].join(' '))
+                  return false
                 }
-                return null
-              }
-            } // END function evaluateAttribute
-
-            function isExtractable(obj: t.Node): obj is t.ObjectExpression {
-              return (
-                t.isObjectExpression(obj) &&
-                obj.properties.every((prop) => {
-                  if (!t.isObjectProperty(prop)) {
-                    console.log('not object prop', prop)
-                    return false
-                  }
-                  const propName = prop.key['name']
-                  if (!isValidStyleKey(propName, staticConfig) && propName !== 'tag') {
-                    if (shouldPrintDebug) {
-                      console.log('  not a valid style prop!', propName)
-                    }
-                    return false
+                const propName = prop.key['name']
+                if (!isValidStyleKey(propName, staticConfig) && propName !== 'tag') {
+                  if (shouldPrintDebug) {
+                    logger.info(['  not a valid style prop!', propName].join(' '))
                   }
-                  return true
-                })
-              )
-            }
+                  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 createTernariesFromObjectProperties(
-              test: t.Expression,
-              side: t.Expression | null,
-              ternaryPartial: Partial<Ternary> = {}
-            ): null | Ternary[] {
-              if (!side) {
-                return null
-              }
-              if (!isExtractable(side)) {
-                throw new Error('not extractable')
+          // 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 createTernariesFromObjectProperties(
+            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')
               }
-              return side.properties.flatMap((property) => {
-                if (!t.isObjectProperty(property)) {
-                  throw new Error('expected object property')
-                }
-                // handle media queries inside spread/conditional objects
-                if (t.isIdentifier(property.key)) {
-                  const key = property.key.name
-                  const mediaQueryKey = key.slice(1)
-                  const isMediaQuery = key[0] === '$' && mediaQueryConfig[mediaQueryKey]
-                  if (isMediaQuery) {
-                    if (t.isExpression(property.value)) {
-                      const ternaries = createTernariesFromObjectProperties(
-                        t.stringLiteral(mediaQueryKey),
-                        property.value,
-                        {
-                          inlineMediaQuery: mediaQueryKey,
-                        }
-                      )
-                      if (ternaries) {
-                        return ternaries.map((value) => ({
-                          ...ternaryPartial,
-                          ...value,
-                          // ensure media query test stays on left side (see getMediaQueryTernary)
-                          test: t.logicalExpression('&&', value.test, test),
-                        }))
-                      } else {
-                        console.log('⚠️ no ternaries?', property)
+              // handle media queries inside spread/conditional objects
+              if (t.isIdentifier(property.key)) {
+                const key = property.key.name
+                const mediaQueryKey = key.slice(1)
+                const isMediaQuery = key[0] === '$' && mediaQueryConfig[mediaQueryKey]
+                if (isMediaQuery) {
+                  if (t.isExpression(property.value)) {
+                    const ternaries = createTernariesFromObjectProperties(
+                      t.stringLiteral(mediaQueryKey),
+                      property.value,
+                      {
+                        inlineMediaQuery: mediaQueryKey,
                       }
+                    )
+                    if (ternaries) {
+                      return ternaries.map((value) => ({
+                        ...ternaryPartial,
+                        ...value,
+                        // ensure media query test stays on left side (see getMediaQueryTernary)
+                        test: t.logicalExpression('&&', value.test, test),
+                      }))
                     } else {
-                      console.log('⚠️ not expression', property)
+                      logger.info(['⚠️ no ternaries?', property].join(' '))
                     }
+                  } else {
+                    logger.info(['⚠️ not expression', property].join(' '))
                   }
                 }
-                // 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,
-                })
-              })
-            }
-
-            // now update to new values
-            node.attributes = attrs.filter(isAttr).map((x) => x.value)
-
-            if (couldntParse || shouldDeopt) {
-              if (shouldPrintDebug) {
-                console.log(`  avoid optimizing:`, { couldntParse, shouldDeopt })
               }
-              node.attributes = ogAttributes
-              return
-            }
+              // 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,
+              })
+            })
+          }
 
-            // before deopt, can still optimize
-            const parentFn = findTopmostFunction(traversePath)
-            if (parentFn) {
-              modifiedComponents.add(parentFn)
+          if (couldntParse || shouldDeopt) {
+            if (shouldPrintDebug) {
+              logger.info([`  avoid optimizing:`, { couldntParse, shouldDeopt }].join(' '))
             }
+            node.attributes = ogAttributes
+            return
+          }
 
-            // 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) {
-                      console.log(
-                        `    normalizeTernaries (${ternaries.length} => ${normalized.length})`
-                      )
+          // now update to new values
+          node.attributes = attrs.filter(isAttr).map((x) => x.value)
+
+          // before deopt, can still optimize
+          const parentFn = findTopmostFunction(traversePath)
+          if (parentFn) {
+            modifiedComponents.add(parentFn)
+          }
+
+          // 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,
+                      },
                     }
-                    ternaries = []
                   }
+                )
+                try {
+                  return [...out, ...normalized]
+                } finally {
+                  if (shouldPrintDebug) {
+                    logger.info(
+                      `    normalizeTernaries (${ternaries.length} => ${normalized.length})`
+                    )
+                  }
+                  ternaries = []
                 }
-                if (cur.type === 'ternary') {
-                  return out
-                }
-                out.push(cur)
+              }
+              if (cur.type === 'ternary') {
                 return out
-              }, [])
-              .flat()
+              }
+              out.push(cur)
+              return out
+            }, [])
+            .flat()
 
-            // flatten logic!
-            // fairly simple check to see if all children are text
-            const hasSpread = node.attributes.some((x) => t.isJSXSpreadAttribute(x))
+          // flatten logic!
+          // fairly simple check to see if all children are text
+          const hasSpread = node.attributes.some((x) => t.isJSXSpreadAttribute(x))
 
-            const hasOnlyStringChildren =
-              !hasSpread &&
-              (node.selfClosing ||
-                (traversePath.node.children &&
-                  traversePath.node.children.every((x) => x.type === 'JSXText')))
+          const hasOnlyStringChildren =
+            !hasSpread &&
+            (node.selfClosing ||
+              (traversePath.node.children &&
+                traversePath.node.children.every((x) => x.type === 'JSXText')))
+
+          const themeVal = inlined.get('theme')
 
-            const themeVal = inlined.get('theme')
+          // on native we can't flatten when theme prop is set
+          if (target !== 'native') {
             inlined.delete('theme')
+          }
 
-            for (const [key] of [...inlined]) {
-              if (INLINE_EXTRACTABLE[key] || staticConfig.variants?.[key]) {
-                inlined.delete(key)
-              }
+          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
+          const canFlattenProps = inlined.size === 0
 
-            let shouldFlatten =
+          let shouldFlatten = Boolean(
+            flatNode &&
               !shouldDeopt &&
               canFlattenProps &&
               !hasSpread &&
               staticConfig.neverFlatten !== true &&
               (staticConfig.neverFlatten === 'jsx' ? hasOnlyStringChildren : true)
+          )
 
-            const shouldWrapTheme = shouldFlatten && themeVal
+          const shouldWrapTheme = shouldFlatten && themeVal
+          const usedThemeKeys = new Set<string>()
 
-            if (disableExtractVariables) {
-              themeAccessListeners.add((key) => {
-                shouldFlatten = false
-                if (shouldPrintDebug) {
-                  console.log(' ! accessing theme key, avoid flatten', key)
-                }
-              })
-            }
+          if (disableExtractVariables) {
+            // if it accesses any theme values during evaluation
+            themeAccessListeners.add((key) => {
+              shouldFlatten = false
+              usedThemeKeys.add(key)
+              if (shouldPrintDebug === 'verbose') {
+                logger.info([' ! accessing theme key, avoid flatten', key].join(' '))
+              }
+            })
+          }
 
-            if (shouldPrintDebug) {
+          if (shouldPrintDebug) {
+            try {
               // prettier-ignore
-              console.log(' - flatten?', objToStr({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapTheme, hasOnlyStringChildren }), 'inlined', [...inlined])
+              logger.info([' flatten?', objToStr({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapTheme, hasOnlyStringChildren }), 'inlined', [...inlined]].join(' '))
+            } catch {
+              // ok
             }
+          }
 
-            // wrap theme around children on flatten
-            // TODO move this to bottom and re-check shouldFlatten
-            // account for shouldFlatten could change w the above block "if (disableExtractVariables)"
-            if (shouldFlatten && shouldWrapTheme) {
+          // wrap theme around children on flatten
+          // TODO move this to bottom and re-check shouldFlatten
+          // account for shouldFlatten could change w the above block "if (disableExtractVariables)"
+          if (shouldFlatten && shouldWrapTheme) {
+            if (!programPath) {
+              console.warn(
+                `No program path found, avoiding importing flattening / importing theme in ${sourcePath}`
+              )
+            } else {
               if (shouldPrintDebug) {
-                console.log('  - wrapping theme', themeVal)
+                logger.info(['  - wrapping theme', themeVal].join(' '))
               }
 
               // remove theme attribute from flattened node
@@ -1351,578 +1569,539 @@ export function createExtractor() {
                 )
               )
             }
+          }
 
-            // only if we flatten, ensure the default styles are there
-            if (shouldFlatten) {
-              const defaultStyleAttrs = Object.keys(staticConfig.defaultProps).flatMap((key) => {
-                if (!isValidStyleKey(key, staticConfig)) {
-                  return []
-                }
-                const value = staticConfig.defaultProps[key]
-                const name = tamaguiConfig.shorthands[key] || key
-                if (value === undefined) {
-                  console.warn(
-                    `⚠️ Error evaluating default style for component, prop ${key} ${value}`
-                  )
-                  shouldDeopt = true
-                  return
-                }
-                const attr: ExtractedAttrStyle = {
-                  type: 'style',
-                  name,
-                  value: { [name]: value },
-                }
-                return attr
-              }) as ExtractedAttr[]
-
-              if (defaultStyleAttrs.length) {
-                attrs = [...defaultStyleAttrs, ...attrs]
+          // only if we flatten, ensure the default styles are there
+          if (shouldFlatten) {
+            const defaultStyleAttrs = Object.keys(staticConfig.defaultProps).flatMap((key) => {
+              if (!isValidStyleKey(key, staticConfig)) {
+                return []
               }
-            }
-
-            if (shouldDeopt) {
-              node.attributes = ogAttributes
-              return
-            }
-
-            // insert overrides - this inserts null props for things that are set in classNames
-            // only when not flattening, so the downstream component can skip applying those styles
-            const ensureOverridden = {}
-            if (!shouldFlatten) {
-              for (const cur of attrs) {
-                if (cur.type === 'style') {
-                  // TODO need to loop over initial props not just style props
-                  for (const key in cur.value) {
-                    const shouldEnsureOverridden = !!staticConfig.ensureOverriddenProp?.[key]
-                    const isSetInAttrsAlready = attrs.some(
-                      (x) =>
-                        x.type === 'attr' &&
-                        x.value.type === 'JSXAttribute' &&
-                        x.value.name.name === key
-                    )
-
-                    if (!isSetInAttrsAlready) {
-                      const isVariant = !!staticConfig.variants?.[cur.name || '']
-                      if (isVariant || shouldEnsureOverridden) {
-                        ensureOverridden[key] = true
-                      }
-                    }
-                  }
-                }
+              const value = staticConfig.defaultProps[key]
+              const name = tamaguiConfig.shorthands[key] || key
+              if (value === undefined) {
+                logger.warn(`⚠️ Error evaluating default style for component, prop ${key} ${value}`)
+                shouldDeopt = true
+                return
               }
+              const attr: ExtractedAttrStyle = {
+                type: 'style',
+                name,
+                value: { [name]: value },
+              }
+              return attr
+            }) as ExtractedAttr[]
+
+            if (defaultStyleAttrs.length) {
+              attrs = [...defaultStyleAttrs, ...attrs]
             }
+          }
 
+          if (shouldDeopt || !shouldFlatten) {
             if (shouldPrintDebug) {
-              console.log('  - attrs (flattened): \n', logLines(attrs.map(attrStr).join(', ')))
-              console.log('  - ensureOverriden:', Object.keys(ensureOverridden).join(', '))
+              logger.info(`Deopting`)
             }
+            node.attributes = ogAttributes
+            return
+          }
 
-            const state = {
-              noClassNames: false,
-              focus: false,
-              hover: false,
-              mounted: true, // TODO match logic in createComponent
-              press: false,
-              pressIn: false,
-            }
+          if (shouldPrintDebug) {
+            logger.info(
+              ['  - attrs (flattened): \n', logLines(attrs.map(attrStr).join(', '))].join(' ')
+            )
+          }
 
-            // evaluates all static attributes into a simple object
-            let foundStaticProps = {}
-            for (const key in attrs) {
-              const cur = attrs[key]
-              if (cur.type === 'style') {
-                foundStaticProps = {
-                  ...foundStaticProps,
-                  ...expandStyles(cur.value),
-                }
+          const state = {
+            noClassNames: false,
+            focus: false,
+            hover: false,
+            unmounted: false, // TODO match logic in createComponent
+            press: false,
+            pressIn: false,
+          }
+
+          // 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
+              foundStaticProps = {
+                ...foundStaticProps,
+                ...expandStylesWithoutVariants(cur.value),
+              }
+              continue
+            }
+            if (cur.type === 'attr') {
+              if (t.isJSXSpreadAttribute(cur.value)) {
                 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) {
-                  foundStaticProps = {
-                    ...foundStaticProps,
-                    [key]: value,
-                  }
+              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) {
+                foundStaticProps = {
+                  ...foundStaticProps,
+                  [key]: value,
                 }
               }
             }
+          }
 
-            // must preserve exact order
-            const completeProps = {}
-            for (const key in staticConfig.defaultProps) {
-              if (!(key in foundStaticProps)) {
-                completeProps[key] = staticConfig.defaultProps[key]
-              }
-            }
-            for (const key in foundStaticProps) {
-              completeProps[key] = foundStaticProps[key]
+          // must preserve exact order
+          const completeProps = {}
+          for (const key in staticConfig.defaultProps) {
+            if (!(key in foundStaticProps)) {
+              completeProps[key] = staticConfig.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 === 'tag') {
-                      // remove tag=""
-                      return acc
-                    }
+          // 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 === 'tag') {
+                    // remove tag=""
+                    return acc
+                  }
 
-                    // if flattening, expand variants
-                    if (variants[name] && variantValues.has(name)) {
-                      let out = Object.fromEntries(
-                        staticConfig.propMapper(
-                          name,
-                          variantValues.get(name),
-                          defaultTheme,
-                          completeProps,
-                          { ...state, resolveVariablesAs: 'auto' },
-                          undefined,
-                          shouldPrintDebug
-                        ) || []
-                      )
-                      if (out && isTargetingHTML) {
-                        const cn = out.className
-                        // translate to DOM-compat
-                        out = createDOMProps(isTextView ? 'span' : 'div', out)
-                        // remove rnw className use ours
-                        out.className = cn
-                      }
-                      if (shouldPrintDebug) {
-                        console.log(' - expanded variant', name, out)
-                      }
-                      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 flattening, expand variants
+                  if (variants[name] && variantValues.has(name)) {
+                    let out = Object.fromEntries(
+                      staticConfig.propMapper(
+                        name,
+                        variantValues.get(name),
+                        defaultTheme,
+                        completeProps,
+                        { ...state, resolveVariablesAs: 'auto' },
+                        undefined,
+                        undefined,
+                        shouldPrintDebug
+                      ) || []
+                    )
+                    if (out && isTargetingHTML) {
+                      const cn = out.className
+                      // translate to DOM-compat
+                      out = createDOMProps(isTextView ? 'span' : 'div', out)
+                      // remove rnw className use ours
+                      out.className = cn
+                    }
+                    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] === '$') {
-                  if (shouldPrintDebug) {
-                    console.log(`   keeping variable inline: ${key} =`, value)
-                  }
-                  acc.push({
-                    type: 'attr',
-                    value: t.jsxAttribute(
-                      t.jsxIdentifier(key),
-                      t.jsxExpressionContainer(t.stringLiteral(value))
-                    ),
-                  })
-                  return acc
-                }
-              }
-
+            if (cur.type !== 'style') {
               acc.push(cur)
               return acc
-            }, [])
-
-            tm.mark('jsx-element-expanded', shouldPrintDebug === 'verbose')
-            if (shouldPrintDebug) {
-              console.log('  - attrs (expanded): \n', logLines(attrs.map(attrStr).join(', ')))
             }
 
-            // merge styles, leave undefined values
-            let prev: ExtractedAttr | null = null
+            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
+            }
 
-            function mergeStyles(prev: ViewStyle & PseudoStyles, nextIn: ViewStyle & PseudoStyles) {
-              const next = expandStyles(nextIn)
-              for (const key in next) {
-                // merge pseudos
-                if (pseudoDescriptors[key]) {
-                  prev[key] = prev[key] || {}
-                  if (shouldPrintDebug) {
-                    if (!next[key] || !prev[key]) {
-                      console.log('warn: missing', key, prev, next)
-                    }
-                  }
-                  Object.assign(prev[key], next[key])
-                } else {
-                  prev[key] = next[key]
+            // 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
               }
             }
 
-            attrs = attrs.reduce<ExtractedAttr[]>((acc, cur) => {
-              if (cur.type === 'style') {
-                const key = Object.keys(cur.value)[0]
-                const value = cur.value[key]
-
-                const shouldKeepOriginalAttr =
-                  // !isStyleAndAttr[key] &&
-                  !shouldFlatten &&
-                  // de-opt transform styles so it merges properly if not flattened
-                  // we handle this later on
-                  // (stylePropsTransform[key] ||
-                  // de-opt if non-style
-                  !validStyles[key] &&
-                  !pseudoDescriptors[key] &&
-                  !key.startsWith('data-')
-
-                if (shouldKeepOriginalAttr) {
-                  if (shouldPrintDebug) {
-                    console.log('     - keeping as non-style', key)
-                  }
-                  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
-                }
+            acc.push(cur)
+            return acc
+          }, [])
 
-                if (ensureOverridden[key]) {
-                  acc.push({
-                    type: 'attr',
-                    value:
-                      cur.attr ||
-                      t.jsxAttribute(
-                        t.jsxIdentifier(key),
-                        t.jsxExpressionContainer(t.nullLiteral())
-                      ),
-                  })
-                }
+          tm.mark('jsx-element-expanded', !!shouldPrintDebug)
+          if (shouldPrintDebug) {
+            logger.info(
+              ['  - attrs (expanded): \n', logLines(attrs.map(attrStr).join(', '))].join(' ')
+            )
+          }
 
-                if (prev?.type === 'style') {
-                  mergeStyles(prev.value, cur.value)
-                  return acc
-                }
-              }
+          // merge styles, leave undefined values
+          let prev: ExtractedAttr | null = null
 
-              prev = cur
-              acc.push(cur)
-              return acc
-            }, [])
+          function splitVariants(style: any) {
+            const variants = {}
+            const styles = {}
+            for (const key in style) {
+              if (staticConfig.variants?.[key]) {
+                variants[key] = style[key]
+              } else {
+                styles[key] = style[key]
+              }
+            }
+            return {
+              variants,
+              styles,
+            }
+          }
 
-            if (shouldPrintDebug) {
-              console.log('  - attrs (combined 🔀): \n', logLines(attrs.map(attrStr).join(', ')))
-              console.log('  - defaultProps: \n', logLines(objToStr(staticConfig.defaultProps)))
-              // prettier-ignore
-              console.log('  - foundStaticProps: \n', logLines(objToStr(foundStaticProps)))
-              console.log('  - completeProps: \n', logLines(objToStr(completeProps)))
+          function expandStylesWithoutVariants(style: any) {
+            const { variants, styles } = splitVariants(style)
+            return {
+              ...expandStyles(styles),
+              ...variants,
             }
+          }
 
-            // post process
-            const getStyles = (props: Object | null, debugName = '') => {
-              if (!props || !Object.keys(props).length) {
-                if (shouldPrintDebug) console.log(' getStyles() no props')
-                return {}
-              }
-              if (excludeProps && !!excludeProps.size) {
-                for (const key in props) {
-                  if (excludeProps.has(key)) {
-                    if (shouldPrintDebug) console.log(' delete excluded', key)
-                    delete props[key]
+          function mergeStyles(prev: ViewStyle & PseudoStyles, nextIn: ViewStyle & PseudoStyles) {
+            const next = expandStylesWithoutVariants(nextIn)
+            for (const key in next) {
+              // merge pseudos
+              if (pseudoDescriptors[key]) {
+                prev[key] = prev[key] || {}
+                if (shouldPrintDebug) {
+                  if (!next[key] || !prev[key]) {
+                    logger.info(['warn: missing', key, prev, next].join(' '))
                   }
                 }
+                Object.assign(prev[key], next[key])
+              } else {
+                prev[key] = next[key]
               }
-              try {
-                const out = getSplitStyles(
-                  props,
-                  staticConfig,
-                  defaultTheme,
-                  {
-                    ...state,
-                    fallbackProps: completeProps,
-                  },
-                  undefined,
-                  props['debug']
-                )
+            }
+          }
+
+          attrs = attrs.reduce<ExtractedAttr[]>((acc, cur) => {
+            if (cur.type === 'style') {
+              const key = Object.keys(cur.value)[0]
+              const value = cur.value[key]
 
-                // console.log('outout', out)
+              const shouldKeepOriginalAttr =
+                // !isStyleAndAttr[key] &&
+                !shouldFlatten &&
+                // de-opt if non-style
+                !validStyles[key] &&
+                !pseudoDescriptors[key] &&
+                !key.startsWith('data-')
 
-                const outStyle = {
-                  ...out.style,
-                  ...out.pseudos,
+              if (shouldKeepOriginalAttr) {
+                if (shouldPrintDebug) {
+                  logger.info(['     - keeping as non-style', key].join(' '))
                 }
-                // omitInvalidStyles(outStyle)
-                // if (shouldPrintDebug) {
-                //   // prettier-ignore
-                //   console.log(`       getStyles ${debugName} (props):\n`, logLines(objToStr(props)))
-                //   // prettier-ignore
-                //   console.log(`       getStyles ${debugName} (out.viewProps):\n`, logLines(objToStr(out.viewProps)))
-                //   // prettier-ignore
-                //   console.log(`       getStyles ${debugName} (out.style):\n`, logLines(objToStr(outStyle || {}), true))
-                // }
-                return outStyle
-              } catch (err: any) {
-                console.log('error', err.message, err.stack)
-                return {}
+                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
               }
-            }
 
-            function omitInvalidStyles(style: any) {
-              if (staticConfig.validStyles) {
-                for (const key in style) {
-                  if (
-                    stylePropsTransform[key] ||
-                    (!staticConfig.validStyles[key] &&
-                      !pseudoDescriptors[key] &&
-                      !/(hoverStyle|focusStyle|pressStyle)$/.test(key))
-                  ) {
-                    if (shouldPrintDebug) console.log(' delete invalid style', key)
-                    delete style[key]
-                  }
-                }
+              if (prev?.type === 'style') {
+                mergeStyles(prev.value, cur.value)
+                return acc
               }
             }
 
-            // used to ensure we pass the entire prop bundle to getStyles
-            const completeStyles = getStyles(completeProps, 'completeStyles')
-
-            if (!completeStyles) {
-              throw new Error(`Impossible, no styles`)
-            }
+            prev = cur
+            acc.push(cur)
+            return acc
+          }, [])
 
-            // any extra styles added in postprocess should be added to first group as they wont be overriden
-            const addInitialStyleKeys = shouldFlatten
-              ? difference(Object.keys(completeStyles), Object.keys(foundStaticProps))
-              : []
+          if (shouldPrintDebug) {
+            logger.info(
+              ['  - attrs (combined 🔀): \n', logLines(attrs.map(attrStr).join(', '))].join(' ')
+            )
+            logger.info(
+              ['  - defaultProps: \n', logLines(objToStr(staticConfig.defaultProps))].join(' ')
+            )
+            // prettier-ignore
+            logger.info(['  - foundStaticProps: \n', logLines(objToStr(foundStaticProps))].join(' '))
+            logger.info(['  - completeProps: \n', logLines(objToStr(completeProps))].join(' '))
+          }
 
-            if (addInitialStyleKeys.length) {
-              const toAdd = pick(completeStyles, ...addInitialStyleKeys)
-              const firstGroup = attrs.find((x) => x.type === 'style')
-              if (shouldPrintDebug) {
-                console.log('    toAdd', objToStr(toAdd))
+          // post process
+          const getStyles = (props: Object | null, debugName = '') => {
+            if (!props || !Object.keys(props).length) {
+              if (shouldPrintDebug) logger.info([' getStyles() no props'].join(' '))
+              return {}
+            }
+            if (excludeProps && !!excludeProps.size) {
+              for (const key in props) {
+                if (excludeProps.has(key)) {
+                  if (shouldPrintDebug) logger.info([' delete excluded', key].join(' '))
+                  delete props[key]
+                }
               }
-              if (!firstGroup) {
-                attrs.unshift({ type: 'style', value: toAdd })
-              } else {
-                // because were adding fully processed, remove any unprocessed from first group
-                omitInvalidStyles(firstGroup.value)
-                Object.assign(firstGroup.value, toAdd)
+            }
+            try {
+              const out = getSplitStyles(
+                props,
+                staticConfig,
+                defaultTheme,
+                {
+                  ...state,
+                  fallbackProps: completeProps,
+                },
+                undefined,
+                undefined,
+                undefined,
+                debugPropValue
+              )
+
+              const outStyle = {
+                ...out.style,
+                ...out.pseudos,
               }
+              // omitInvalidStyles(outStyle)
+              // if (shouldPrintDebug) {
+              //   // prettier-ignore
+              //   logger.info(`       getStyles ${debugName} (props):\n`, logLines(objToStr(props)))
+              //   // prettier-ignore
+              //   logger.info(`       getStyles ${debugName} (out.viewProps):\n`, logLines(objToStr(out.viewProps)))
+              //   // prettier-ignore
+              //   logger.info(`       getStyles ${debugName} (out.style):\n`, logLines(objToStr(outStyle || {}), true))
+              // }
+              return outStyle
+            } catch (err: any) {
+              logger.info(['error', err.message, err.stack].join(' '))
+              return {}
             }
+          }
+
+          // used to ensure we pass the entire prop bundle to getStyles
+          const completeStyles = getStyles(completeProps, 'completeStyles')
+
+          if (!completeStyles) {
+            throw new Error(`Impossible, no styles`)
+          }
 
+          const isNativeNotFlat = !shouldFlatten && target === 'native'
+          if (isNativeNotFlat) {
             if (shouldPrintDebug) {
-              // prettier-ignore
-              if (shouldFlatten) console.log('   -- addInitialStyleKeys', addInitialStyleKeys.join(', '))
-              // prettier-ignore
-              // console.log('   -- completeStyles:\n', logLines(objToStr(completeStyles)))
+              logger.info(`Disabled flattening except for simple cases on native for now`)
             }
+            node.attributes = ogAttributes
+            return null
+          }
 
-            let getStyleError: any = null
-
-            // fix up ternaries, combine final style values
-            for (const attr of attrs) {
-              try {
-                switch (attr.type) {
-                  case 'ternary':
-                    const a = getStyles(attr.value.alternate, 'ternary.alternate')
-                    const c = getStyles(attr.value.consequent, 'ternary.consequent')
-                    if (a) attr.value.alternate = a
-                    if (c) attr.value.consequent = c
-                    if (shouldPrintDebug) console.log('     => tern ', attrStr(attr))
-                    continue
-                  case 'style':
-                    // expand variants and such
-                    const styles = getStyles(attr.value, 'style')
-                    if (styles) {
-                      attr.value = styles
-                    }
-                    // prettier-ignore
-                    if (shouldPrintDebug) console.log('  * styles (in)', logLines(objToStr(attr.value)))
-                    // prettier-ignore
-                    if (shouldPrintDebug) console.log('  * styles (out)', logLines(objToStr(styles)))
-                    continue
+          let getStyleError: any = null
+
+          // fix up ternaries, combine final style values
+          for (const attr of attrs) {
+            try {
+              switch (attr.type) {
+                case 'ternary': {
+                  const a = getStyles(attr.value.alternate, 'ternary.alternate')
+                  const c = getStyles(attr.value.consequent, 'ternary.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 = getStyles(attr.value, 'style')
+                  if (styles) {
+                    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
                 }
-              } catch (err) {
-                // any error de-opt
-                getStyleError = err
               }
+            } catch (err) {
+              // any error de-opt
+              getStyleError = err
             }
+          }
 
-            if (shouldPrintDebug) {
-              // prettier-ignore
-              console.log('  - attrs (ternaries/combined):\n', logLines(attrs.map(attrStr).join(', ')))
-            }
-
-            tm.mark('jsx-element-styles', shouldPrintDebug === 'verbose')
+          if (shouldPrintDebug) {
+            // prettier-ignore
+            logger.info(['  - attrs (ternaries/combined):\n', logLines(attrs.map(attrStr).join(', '))].join(' '))
+          }
 
-            if (getStyleError) {
-              console.log(' ⚠️ postprocessing error, deopt', getStyleError)
-              node.attributes = ogAttributes
-              return node
-            }
+          tm.mark('jsx-element-styles', !!shouldPrintDebug)
 
-            // final lazy extra loop:
-            const existingStyleKeys = new Set()
-            for (let i = attrs.length - 1; i >= 0; i--) {
-              const attr = attrs[i]
+          if (getStyleError) {
+            logger.info([' ⚠️ postprocessing error, deopt', getStyleError].join(' '))
+            node.attributes = ogAttributes
+            return null
+          }
 
-              // 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]
-                      }
+          // final lazy extra loop:
+          const existingStyleKeys = new Set()
+          for (let i = attrs.length - 1; i >= 0; i--) {
+            const attr = attrs[i]
 
-                      // if flattening expand turn variants into styles
-                      if (staticConfig.variants?.[name]) {
-                        const expanded = getStyles({})
-                        // attrs[i] = {
-                        //   type: 'style',
-                        //   value:
-                        // }
-                      }
+            // 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) {
-                      console.log('  >> delete existing', key)
-                    }
-                    delete attr.value[key]
-                  } else {
-                    existingStyleKeys.add(key)
+            // 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)
                 }
               }
             }
+          }
 
-            // inlineWhenUnflattened
-            if (!shouldFlatten) {
-              if (Object.keys(inlineWhenUnflattenedOGVals).length) {
-                for (const [index, attr] of attrs.entries()) {
-                  if (attr.type === 'style') {
-                    for (const key in attr.value) {
-                      const val = inlineWhenUnflattenedOGVals[key]
-                      if (val) {
-                        // delete the style
-                        delete attr.value[key]
-
-                        // and insert it before
-                        attrs.splice(index - 1, 0, val.attr)
-                      }
+          // 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]
                     }
                   }
                 }
               }
             }
+          }
 
-            if (shouldFlatten) {
-              // DO FLATTEN
-              if (shouldPrintDebug) {
-                console.log('  [✅] flattening', originalNodeName, flatNode)
-              }
-              node.name.name = flatNode
-              res.flattened++
-              if (closingElement) {
-                closingElement.name.name = flatNode
-              }
-            }
-
+          if (shouldFlatten) {
+            // DO FLATTEN
             if (shouldPrintDebug) {
-              // prettier-ignore
-              console.log(` ❊❊ inline props (${inlined.size}):`, shouldDeopt ? ' deopted' : '', hasSpread ? ' has spread' : '', staticConfig.neverFlatten ? 'neverFlatten' : '')
-              console.log('  - attrs (end):\n', logLines(attrs.map(attrStr).join(', ')))
+              logger.info(['  [✅] flattening', originalNodeName, flatNode].join(' '))
             }
-
-            onExtractTag({
-              attrs,
-              node,
-              lineNumbers,
-              filePath,
-              attemptEval,
-              jsxPath: traversePath,
-              originalNodeName,
-              isFlattened: shouldFlatten,
-              programPath,
-            })
-          } finally {
-            if (debugPropValue) {
-              shouldPrintDebug = ogDebug
+            // @ts-ignore
+            node.name.name = flatNode
+            res.flattened++
+            if (closingElement) {
+              // @ts-ignore
+              closingElement.name.name = flatNode
             }
           }
-        },
-      })
 
-      tm.mark('jsx-done', shouldPrintDebug === 'verbose')
+          if (shouldPrintDebug) {
+            // prettier-ignore
+            logger.info([` ❊❊ inline props (${inlined.size}):`, shouldDeopt ? ' deopted' : '', hasSpread ? ' has spread' : '', staticConfig.neverFlatten ? 'neverFlatten' : ''].join(' '))
+            logger.info(`  - attrs (end):\n ${logLines(attrs.map(attrStr).join(', '))}`)
+          }
 
-      /**
-       * Step 3: Remove dead code from removed media query / theme hooks
-       */
-      if (modifiedComponents.size) {
-        const all = Array.from(modifiedComponents)
-        if (shouldPrintDebug) {
-          console.log('  [🪝] hook check', all.length)
-        }
-        for (const comp of all) {
-          removeUnusedHooks(comp, shouldPrintDebug)
+          onExtractTag({
+            parserProps: propsWithFileInfo,
+            attrs,
+            node,
+            lineNumbers,
+            filePath,
+            attemptEval,
+            jsxPath: traversePath,
+            originalNodeName,
+            isFlattened: shouldFlatten,
+            programPath: programPath!,
+            completeProps,
+            staticConfig,
+          })
+        } finally {
+          if (debugPropValue) {
+            shouldPrintDebug = ogDebug
+          }
         }
+      },
+    })
+
+    tm.mark('jsx-done', !!shouldPrintDebug)
+
+    /**
+     * Step 3: Remove dead code from removed media query / theme hooks
+     */
+    if (modifiedComponents.size) {
+      const all = Array.from(modifiedComponents)
+      if (shouldPrintDebug) {
+        logger.info(`  [🪝] hook check ${all.length}`)
       }
+      for (const comp of all) {
+        removeUnusedHooks(comp, shouldPrintDebug)
+      }
+    }
 
-      tm.done(shouldPrintDebug === 'verbose')
+    tm.done(shouldPrintDebug === 'verbose')
 
-      return res
-    },
+    return res
   }
 }