@tamagui/static 1.0.1-beta.141 → 1.0.1-beta.144

package/src/extractor/createExtractor.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { basename, relative } from 'path'
 
 import traverse, { NodePath, Visitor } from '@babel/traverse'
@@ -5,7 +6,6 @@ import * as t from '@babel/types'
 import {
   PseudoStyles,
   StaticConfigParsed,
-  TamaguiInternalConfig,
   createDOMProps,
   expandStyles,
   getSplitStyles,
@@ -21,16 +21,18 @@ import {
   ExtractedAttr,
   ExtractedAttrAttr,
   ExtractedAttrStyle,
+  ExtractorOptions,
   ExtractorParseProps,
+  TamaguiOptions,
   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 { cleanupBeforeExit, getStaticBindingsForScope } from './getStaticBindingsForScope'
 import { literalToAst } from './literalToAst'
-import { loadTamagui } from './loadTamagui'
+import { TamaguiProjectInfo, loadTamagui, loadTamaguiSync } from './loadTamagui'
 import { logLines } from './logLines'
 import { normalizeTernaries } from './normalizeTernaries'
 import { removeUnusedHooks } from './removeUnusedHooks'
@@ -55,18 +57,19 @@ const INLINE_EXTRACTABLE = {
   }),
 }
 
-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() {
+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,1842 +82,1899 @@ 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
+  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 projectInfo?.tamaguiConfig
+    },
+    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 isValidStyleKey(name: string, staticConfig: StaticConfigParsed) {
+    if (!projectInfo) {
+      throw new Error(`Tamagui extractor not loaded yet`)
+    }
     return !!(
       !!staticConfig.validStyles?.[name] ||
       !!pseudoDescriptors[name] ||
       // dont disable variants or else you lose many things flattening
       staticConfig.variants?.[name] ||
-      loadedTamaguiConfig.shorthands[name] ||
+      projectInfo?.tamaguiConfig.shorthands[name] ||
       (name[0] === '$' ? !!mediaQueryConfig[name.slice(1)] : false)
     )
   }
 
-  return {
-    getTamagui() {
-      return loadedTamaguiConfig
-    },
-    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
-      }
-      if (sourcePath === '') {
-        throw new Error(`Must provide a source file name`)
-      }
-      if (!Array.isArray(props.components)) {
-        throw new Error(`Must provide components array with list of Tamagui component modules`)
-      }
-
-      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 })
-      }
-
-      tm.mark('load-tamagui', shouldPrintDebug === 'verbose')
-
-      loadedTamaguiConfig = tamaguiConfig as any
-
-      const proxiedTheme = proxyThemeVariables(
-        tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]
-      )
-
-      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)
-        },
-      })
-
-      const body = fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
-
-      /**
-       * Step 1: Determine if importing any statically extractable components
-       */
-      const isInternalImport = (importStr: string) => {
-        return isInsideTamagui(sourcePath) && importStr[0] === '.'
-      }
-
-      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 (shouldPrintDebug === 'verbose') {
-        console.log('validComponents', Object.keys(validComponents))
-      }
-
-      let doesUseValidImport = false
-      let hasImportedTheme = false
+  function parseWithConfig(
+    { components, tamaguiConfig }: TamaguiProjectInfo,
+    fileOrPath: FileOrPath,
+    {
+      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
+    }
+    if (sourcePath === '') {
+      throw new Error(`Must provide a source file name`)
+    }
+    if (!components) {
+      throw new Error(`Must provide components`)
+    }
+
+    const isTargetingHTML = target === 'html'
+    const ogDebug = shouldPrintDebug
+    const tm = timer()
+
+    if (shouldPrintDebug === 'verbose') {
+      console.log('tamagui.config.ts:', { components, config })
+    }
+
+    tm.mark('load-tamagui', !!shouldPrintDebug)
+
+    const proxiedTheme = proxyThemeVariables(
+      tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]
+    )
 
-      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
-            }
-          }
+    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)))
         }
-        const isValidImport = props.components.includes(from) || isInternalImport(from)
+        return Reflect.get(target, key)
+      },
+    })
+
+    // @ts-ignore
+    const body = fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
+
+    /**
+     * Step 1: Determine if importing any statically extractable components
+     */
+    const isInternalImport = (importStr: string) => {
+      return isInsideTamagui(sourcePath) && importStr[0] === '.'
+    }
+
+    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 (shouldPrintDebug === 'verbose') {
+      logger.info(`validComponents ${Object.keys(validComponents).join(', ')}`)
+    }
+
+    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()
+      const isValidImport =
+        props.components.includes(from) ||
+        isInternalImport(from) ||
+        from === '@tamagui/core' ||
+        from === 'tamagui'
+
+      if (extractStyledDefinitions) {
         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 (
+            node.specifiers.some((specifier) => {
+              return specifier.local.name === 'styled'
+            })
+          ) {
             doesUseValidImport = true
             break
           }
         }
       }
 
-      if (shouldPrintDebug) {
-        console.log(sourcePath, { doesUseValidImport })
-      }
-
-      if (!doesUseValidImport) {
-        return null
+      if (isValidImport) {
+        const isValidComponent = node.specifiers.some((specifier) => {
+          const name = specifier.local.name
+          return !!(validComponents[name] || validHooks[name])
+        })
+        if (shouldPrintDebug === 'verbose') {
+          logger.info(`import from ${from} isValidComponent ${isValidComponent}`)
+        }
+        if (isValidComponent) {
+          doesUseValidImport = true
+          break
+        }
       }
+    }
 
-      tm.mark('import-check', shouldPrintDebug === 'verbose')
-
-      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> = {}
+    if (shouldPrintDebug) {
+      logger.info(`source: ${sourcePath} doesUseValidImport ${doesUseValidImport}`)
+    }
 
-      const callTraverse = (a: Visitor<{}>) => {
-        return fileOrPath.type === 'File' ? traverse(fileOrPath, a) : fileOrPath.traverse(a)
-      }
+    if (!doesUseValidImport) {
+      return null
+    }
 
-      /**
-       * Step 2: Statically extract from JSX < /> nodes
-       */
-      let programPath: NodePath<t.Program>
-
-      const res = {
-        styled: 0,
-        flattened: 0,
-        optimized: 0,
-        modified: 0,
-        found: 0,
-      }
+    tm.mark('import-check', !!shouldPrintDebug)
 
-      callTraverse({
-        Program: {
-          enter(path) {
-            programPath = path
-          },
-        },
+    let couldntParse = false
+    const modifiedComponents = new Set<NodePath<any>>()
 
-        // styled() calls
-        CallExpression(path) {
-          if (disable || disableExtraction || extractStyledDefinitions === false) {
-            return
-          }
+    // only keeping a cache around per-file, reset it if it changes
+    const bindingCache: Record<string, string | null> = {}
 
-          if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== 'styled') {
-            return
-          }
+    const callTraverse = (a: Visitor<{}>) => {
+      return fileOrPath.type === 'File' ? traverse(fileOrPath, a) : fileOrPath.traverse(a)
+    }
 
-          const name =
-            t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id)
-              ? path.parent.id.name
-              : 'unknown'
-          const definition = path.node.arguments[1]
+    /**
+     * Step 2: Statically extract from JSX < /> nodes
+     */
+    let programPath: NodePath<t.Program>
 
-          if (!name || !definition || !t.isObjectExpression(definition)) {
-            return
-          }
+    const res = {
+      styled: 0,
+      flattened: 0,
+      optimized: 0,
+      modified: 0,
+      found: 0,
+    }
 
-          const Component = validComponents[name] as
-            | { staticConfig: StaticConfigParsed }
-            | undefined
+    callTraverse({
+      Program: {
+        enter(path) {
+          programPath = path
+        },
+      },
 
-          if (!Component) {
-            if (shouldPrintDebug) {
-              console.log(
-                `Didn't recognize styled(${name}), ${name} isn't in design system provided to tamagui.config.ts`
-              )
-            }
-            return
-          }
+      // styled() calls
+      CallExpression(path) {
+        if (disable || disableExtraction || extractStyledDefinitions === false) {
+          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',
-          ])
+        if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== 'styled') {
+          return
+        }
 
-          // for now dont parse variants, spreads, etc
-          const skipped: (t.ObjectProperty | t.SpreadElement | t.ObjectMethod)[] = []
-          const styles = {}
+        const name =
+          t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id)
+            ? path.parent.id.name
+            : 'unknown'
+        const definition = path.node.arguments[1]
 
-          // Generate scope object at this level
-          const staticNamespace = getStaticBindingsForScope(
-            path.scope,
-            importsWhitelist,
-            sourcePath,
-            bindingCache,
-            shouldPrintDebug
-          )
+        if (!name || !definition || !t.isObjectExpression(definition)) {
+          return
+        }
 
-          const attemptEval = !evaluateVars
-            ? evaluateAstNode
-            : createEvaluator({
-                tamaguiConfig,
-                staticNamespace,
-                sourcePath,
-                shouldPrintDebug,
-              })
-          const attemptEvalSafe = createSafeEvaluator(attemptEval)
+        let Component = validComponents[name] as { staticConfig: StaticConfigParsed } | undefined
 
-          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
-            }
+        if (!Component) {
+          if (shouldPrintDebug) {
+            logger.info(
+              `Didn't recognize styled(${name}), ${name} isn't in design system provided to tamagui.config.ts. Will attempt to build isolated and analyze.. ${programPath}`
+            )
           }
 
-          // turn parsed styles into CSS
-          const out = getSplitStyles(styles, Component.staticConfig, defaultTheme, {
-            focus: false,
-            hover: false,
-            mounted: false,
-            press: false,
-            pressIn: false,
-            resolveVariablesAs: 'variable',
+          const out = loadTamaguiSync({
+            components: [sourcePath],
           })
 
-          const classNames = {
-            ...out.classNames,
+          if (out.components?.[name]) {
+            // add new components
+            // TODO dont Clobber, do by file
+            Object.assign(validComponents, out.components)
           }
 
-          // add in the style object as classnames
-          const atomics = getStylesAtomic(out.style)
+          Component = validComponents[name]
 
           if (shouldPrintDebug) {
-            console.log('Exctacting styled()', styles, out, 'to', atomics)
+            logger.info([`Loaded`, Object.keys(out.components).join(', '), !!Component].join(' '))
           }
+        }
 
-          for (const atomic of atomics) {
-            out.rulesToInsert = out.rulesToInsert || []
-            out.rulesToInsert.push(atomic)
-            classNames[atomic.property] = atomic.identifier
+        if (!Component) {
+          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',
+        ])
+
+        // 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({
+              tamaguiConfig,
+              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
+          }
+        }
 
-          // leave only un-parsed props...
-          definition.properties = skipped
+        // turn parsed styles into CSS
+        const out = getSplitStyles(styles, Component.staticConfig, defaultTheme, {
+          focus: false,
+          hover: false,
+          mounted: false,
+          press: false,
+          pressIn: false,
+          resolveVariablesAs: 'variable',
+        })
+
+        const classNames = {
+          ...out.classNames,
+        }
 
-          // ... + 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)))
+        // 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
+        }
+
+        if (shouldPrintDebug) {
+          // prettier-ignore
+          logger.info([`Extracted styled(${name})\n`, JSON.stringify(styles, null, 2), '\n=>\n', out.rulesToInsert.flatMap((rule) => rule.rules).join('\n')].join(' '))
+        }
+
+        // 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)))
+        }
 
-          if (out.rulesToInsert) {
-            for (const { identifier, rules } of out.rulesToInsert) {
-              onStyleRule?.(identifier, rules)
-            }
+        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) {
+        tm.mark('jsx-element', !!shouldPrintDebug)
 
-          const node = traversePath.node.openingElement
-          const ogAttributes = node.attributes
-          const componentName = findComponentName(traversePath.scope)
-          const closingElement = traversePath.node.closingElement
+        const node = traversePath.node.openingElement
+        const ogAttributes = node.attributes
+        const componentName = findComponentName(traversePath.scope)
+        const closingElement = traversePath.node.closingElement
 
-          // skip non-identifier opening elements (member expressions, etc.)
-          if (t.isJSXMemberExpression(closingElement?.name) || !t.isJSXIdentifier(node.name)) {
-            return
-          }
+        // skip non-identifier opening elements (member expressions, etc.)
+        if (t.isJSXMemberExpression(closingElement?.name) || !t.isJSXIdentifier(node.name)) {
+          return
+        }
 
-          // validate its a proper import from tamagui (or internally inside tamagui)
-          const binding = traversePath.scope.getBinding(node.name.name)
+        // validate its a proper import from tamagui (or internally inside tamagui)
+        const binding = traversePath.scope.getBinding(node.name.name)
 
-          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
-            }
-            if (!validComponents[binding.identifier.name]) {
-              return
-            }
+        if (binding) {
+          if (!t.isImportDeclaration(binding.path.parent)) {
+            return
           }
-
-          const component = validComponents[node.name.name] as { staticConfig?: StaticConfigParsed }
-          if (!component || !component.staticConfig) {
+          const source = binding.path.parent.source
+          if (!props.components.includes(source.value) && !isInternalImport(source.value)) {
             return
           }
+          if (!validComponents[binding.identifier.name]) {
+            return
+          }
+        }
 
-          const originalNodeName = node.name.name
-
-          // found a valid tag
-          res.found++
+        const component = validComponents[node.name.name] as { staticConfig?: StaticConfigParsed }
+        if (!component || !component.staticConfig) {
+          return
+        }
 
-          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 originalNodeName = node.name.name
 
-          const codePosition = `${filePath}:${lineNumbers}`
+        // found a valid tag
+        res.found++
 
-          // debug just one
-          const debugPropValue = node.attributes
-            .filter(
-              (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]
+        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}` : '')
+          : ''
 
-          if (debugPropValue) {
-            shouldPrintDebug = debugPropValue
-          }
+        const codePosition = `${filePath}:${lineNumbers}`
 
-          if (shouldPrintDebug) {
-            console.log('\n')
-            console.log(
-              '\x1b[33m%s\x1b[0m',
-              `${componentName} | ${codePosition} -------------------`
-            )
-            console.log(
-              '\x1b[1m',
-              '\x1b[32m',
-              `<${originalNodeName} />`,
-              disableDebugAttr ? '' : '🐛'
-            )
-          }
+        // debug just one
+        const debugPropValue = node.attributes
+          .filter(
+            (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 (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))
-              )
-            }
+        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(' '))
+        }
 
+        // 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-at'),
-                t.stringLiteral(`${basename(filePath)}:${lineNumbers}`)
-              )
+              t.jsxAttribute(t.jsxIdentifier('data-in'), t.stringLiteral(componentName))
             )
           }
 
-          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
-          }
+          node.attributes.unshift(
+            t.jsxAttribute(
+              t.jsxIdentifier('data-at'),
+              t.stringLiteral(`${basename(filePath)}:${lineNumbers}`)
+            )
+          )
+        }
 
-          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
-              })
+        // 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([
+            ...(props.inlineProps || []),
+            ...(staticConfig.inlineProps || []),
+          ])
 
-            const inlineWhenUnflattened = new Set([...(staticConfig.inlineWhenUnflattened || [])])
+          const deoptProps = new Set([
+            // always de-opt animation
+            'animation',
+            ...(props.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({
+                tamaguiConfig,
+                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
-                  }
-                }
-              })
-
-            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
+                } catch (err) {
+                  logger.warn(`cant parse spread, caught err ${err}`)
+                  couldntParse = true
                 }
-              })
-              .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(['Error extracting attribute', err.message, err.stack].join(' '))
+                  logger.info(`node ${path.node}`)
                 }
+                // 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 && !isExtractable(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
+            }
 
-              // 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,
-                      }))
-                    }
-                  }
-                }
-              }
+            // pass className, key, and style props through untouched
+            if (UNTOUCHED_PROPS[name]) {
+              return attr
+            }
 
-              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 (INLINE_EXTRACTABLE[name]) {
+              inlined.set(name, INLINE_EXTRACTABLE[name])
+              return attr
+            }
 
-              const remove = () => {
-                Array.isArray(valuePath) ? valuePath.map((p) => p.remove()) : valuePath.remove()
-              }
+            if (name.startsWith('data-')) {
+              return attr
+            }
 
-              if (name === 'ref') {
-                if (shouldPrintDebug) {
-                  console.log('  ! inlining, ref', name)
-                }
-                inlined.set('ref', 'ref')
+            // shorthand media queries
+            if (name[0] === '$' && t.isJSXExpressionContainer(attribute?.value)) {
+              // allow disabling this extraction
+              if (disableExtractInlineMedia) {
                 return attr
               }
 
-              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)
+              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,
                     }
-                    inlined.set(name, true)
-                    return attr
+                  )
+                  if (ternaries) {
+                    return ternaries.map((value) => ({
+                      type: 'ternary',
+                      value,
+                    }))
                   }
                 }
               }
+            }
 
-              if (name === 'theme') {
-                inlined.set('theme', attr.value)
-                return attr
+            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 value can be evaluated, extract it and filter it out
-              const styleValue = attemptEvalSafe(value)
+            const remove = () => {
+              Array.isArray(valuePath) ? valuePath.map((p) => p.remove()) : valuePath.remove()
+            }
 
-              // 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
+            if (name === 'ref') {
+              if (shouldPrintDebug) {
+                logger.info(['  ! inlining, ref', name].join(' '))
+              }
+              inlined.set('ref', 'ref')
+              return attr
+            }
 
-                // 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 (name === 'tag') {
+              return {
+                type: 'attr',
+                value: path.node,
+              }
+            }
 
-                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)
+            // native shouldn't extract variables
+            if (disableExtractVariables) {
+              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 (out) {
-                  if (isTargetingHTML) {
-                    // translate to DOM-compat
-                    out = createDOMProps(isTextView ? 'span' : 'div', out)
-                    // remove className - we dont use rnw styling
-                    delete out.className
-                  }
+              }
+            }
 
-                  keys = Object.keys(out)
-                }
+            if (name === 'theme') {
+              inlined.set('theme', attr.value)
+              return attr
+            }
 
-                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
-                })
+            // 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
+              )
 
-                // weird logic whats going on here
-                if (didInline) {
-                  if (shouldPrintDebug) {
-                    console.log('  bailing flattening due to attributes', attributes)
-                  }
-                  // bail
-                  return attr
+              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)
                 }
-
-                // 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 (out) {
+                if (isTargetingHTML) {
+                  // translate to DOM-compat
+                  out = createDOMProps(isTextView ? 'span' : 'div', out)
+                  // remove className - we dont use rnw styling
+                  delete out.className
                 }
 
-                if (isValidStyleKey(name, staticConfig)) {
-                  if (shouldPrintDebug) {
-                    console.log(`  style: ${name} =`, styleValue)
-                  }
-                  if (!(name in staticConfig.defaultProps)) {
-                    if (!hasSetOptimized) {
-                      res.optimized++
-                      hasSetOptimized = true
-                    }
-                  }
+                keys = Object.keys(out)
+              }
+
+              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-')
+                ) {
                   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 isExtractable(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 (!isExtractable(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,
-                })
+              }
+              // 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)
+          // 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
+          if (couldntParse || shouldDeopt) {
+            if (shouldPrintDebug) {
+              logger.info([`  avoid optimizing:`, { couldntParse, shouldDeopt }].join(' '))
             }
+            node.attributes = ogAttributes
+            return
+          }
 
-            // before deopt, can still optimize
-            const parentFn = findTopmostFunction(traversePath)
-            if (parentFn) {
-              modifiedComponents.add(parentFn)
-            }
+          // 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,
-                        },
-                      }
-                    }
-                  )
-                  try {
-                    return [...out, ...normalized]
-                  } finally {
-                    if (shouldPrintDebug) {
-                      console.log(
-                        `    normalizeTernaries (${ternaries.length} => ${normalized.length})`
-                      )
+          // 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()
-
-            // 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 themeVal = inlined.get('theme')
-            inlined.delete('theme')
-
-            for (const [key] of [...inlined]) {
-              const isExtractableVariant = staticConfig.variants?.[key] && variantValues.has(key)
-              if (INLINE_EXTRACTABLE[key] || isExtractableVariant) {
-                inlined.delete(key)
               }
-            }
+              out.push(cur)
+              return out
+            }, [])
+            .flat()
 
-            const canFlattenProps = inlined.size === 0
+          // flatten logic!
+          // fairly simple check to see if all children are text
+          const hasSpread = node.attributes.some((x) => t.isJSXSpreadAttribute(x))
 
-            let shouldFlatten =
-              !shouldDeopt &&
-              canFlattenProps &&
-              !hasSpread &&
-              staticConfig.neverFlatten !== true &&
-              (staticConfig.neverFlatten === 'jsx' ? hasOnlyStringChildren : true)
+          const hasOnlyStringChildren =
+            !hasSpread &&
+            (node.selfClosing ||
+              (traversePath.node.children &&
+                traversePath.node.children.every((x) => x.type === 'JSXText')))
 
-            const shouldWrapTheme = shouldFlatten && themeVal
+          const themeVal = inlined.get('theme')
+          inlined.delete('theme')
 
-            if (disableExtractVariables) {
-              themeAccessListeners.add((key) => {
-                shouldFlatten = false
-                if (shouldPrintDebug) {
-                  console.log(' ! accessing theme key, avoid flatten', key)
-                }
-              })
+          for (const [key] of [...inlined]) {
+            const isExtractableVariant = staticConfig.variants?.[key] && variantValues.has(key)
+            if (INLINE_EXTRACTABLE[key] || isExtractableVariant) {
+              inlined.delete(key)
             }
+          }
 
-            if (shouldPrintDebug) {
-              // prettier-ignore
-              console.log(' - flatten?', objToStr({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapTheme, hasOnlyStringChildren }), 'inlined', [...inlined])
-            }
+          const canFlattenProps = inlined.size === 0
 
-            // 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) {
+          let shouldFlatten =
+            !shouldDeopt &&
+            canFlattenProps &&
+            !hasSpread &&
+            staticConfig.neverFlatten !== true &&
+            (staticConfig.neverFlatten === 'jsx' ? hasOnlyStringChildren : true)
+
+          const shouldWrapTheme = shouldFlatten && themeVal
+
+          if (disableExtractVariables) {
+            themeAccessListeners.add((key) => {
+              shouldFlatten = false
               if (shouldPrintDebug) {
-                console.log('  - wrapping theme', themeVal)
+                logger.info([' ! accessing theme key, avoid flatten', key].join(' '))
               }
+            })
+          }
 
-              // remove theme attribute from flattened node
-              attrs = attrs.filter((x) =>
-                x.type === 'attr' && t.isJSXAttribute(x.value) && x.value.name.name === 'theme'
-                  ? false
-                  : true
-              )
+          if (shouldPrintDebug) {
+            // prettier-ignore
+            logger.info([' - flatten?', objToStr({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapTheme, hasOnlyStringChildren }), 'inlined', [...inlined]].join(' '))
+          }
 
-              // add import
-              if (!hasImportedTheme) {
-                hasImportedTheme = true
-                programPath.node.body.push(
-                  t.importDeclaration(
-                    [t.importSpecifier(t.identifier('_TamaguiTheme'), t.identifier('Theme'))],
-                    t.stringLiteral('@tamagui/core')
-                  )
-                )
-              }
+          // 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 (shouldPrintDebug) {
+              logger.info(['  - wrapping theme', themeVal].join(' '))
+            }
+
+            // remove theme attribute from flattened node
+            attrs = attrs.filter((x) =>
+              x.type === 'attr' && t.isJSXAttribute(x.value) && x.value.name.name === 'theme'
+                ? false
+                : true
+            )
 
-              traversePath.replaceWith(
-                t.jsxElement(
-                  t.jsxOpeningElement(t.jsxIdentifier('_TamaguiTheme'), [
-                    t.jsxAttribute(t.jsxIdentifier('name'), themeVal.value),
-                  ]),
-                  t.jsxClosingElement(t.jsxIdentifier('_TamaguiTheme')),
-                  [traversePath.node]
+            // add import
+            if (!hasImportedTheme) {
+              hasImportedTheme = true
+              programPath.node.body.push(
+                t.importDeclaration(
+                  [t.importSpecifier(t.identifier('_TamaguiTheme'), t.identifier('Theme'))],
+                  t.stringLiteral('@tamagui/core')
                 )
               )
             }
 
-            // 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[]
+            traversePath.replaceWith(
+              t.jsxElement(
+                t.jsxOpeningElement(t.jsxIdentifier('_TamaguiTheme'), [
+                  t.jsxAttribute(t.jsxIdentifier('name'), themeVal.value),
+                ]),
+                t.jsxClosingElement(t.jsxIdentifier('_TamaguiTheme')),
+                [traversePath.node]
+              )
+            )
+          }
 
-              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 []
               }
-            }
+              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 (shouldDeopt) {
-              node.attributes = ogAttributes
-              return
+            if (defaultStyleAttrs.length) {
+              attrs = [...defaultStyleAttrs, ...attrs]
             }
+          }
 
-            // 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 (shouldDeopt) {
+            node.attributes = ogAttributes
+            return
+          }
 
-                    if (!isSetInAttrsAlready) {
-                      const isVariant = !!staticConfig.variants?.[cur.name || '']
-                      if (isVariant || shouldEnsureOverridden) {
-                        ensureOverridden[key] = true
-                      }
+          // 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
                     }
                   }
                 }
               }
             }
+          }
 
-            if (shouldPrintDebug) {
-              console.log('  - attrs (flattened): \n', logLines(attrs.map(attrStr).join(', ')))
-              console.log('  - ensureOverriden:', Object.keys(ensureOverridden).join(', '))
-            }
+          if (shouldPrintDebug) {
+            logger.info(
+              ['  - attrs (flattened): \n', logLines(attrs.map(attrStr).join(', '))].join(' ')
+            )
+            logger.info(
+              ['  - ensureOverriden:', Object.keys(ensureOverridden).join(', ')].join(' ')
+            )
+          }
 
-            const state = {
-              noClassNames: false,
-              focus: false,
-              hover: false,
-              mounted: true, // TODO match logic in createComponent
-              press: false,
-              pressIn: false,
-            }
+          const state = {
+            noClassNames: false,
+            focus: false,
+            hover: false,
+            mounted: true, // 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),
-                }
+          // 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,
-                          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 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]
+            // 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) {
+                  logger.info([`   keeping variable inline: ${key} =`, value].join(' '))
                 }
-              }
-              return {
-                variants,
-                styles,
+                acc.push({
+                  type: 'attr',
+                  value: t.jsxAttribute(
+                    t.jsxIdentifier(key),
+                    t.jsxExpressionContainer(t.stringLiteral(value))
+                  ),
+                })
+                return acc
               }
             }
 
-            function expandStylesWithoutVariants(style: any) {
-              const { variants, styles } = splitVariants(style)
-              return {
-                ...expandStyles(styles),
-                ...variants,
+            acc.push(cur)
+            return acc
+          }, [])
+
+          tm.mark('jsx-element-expanded', !!shouldPrintDebug)
+          if (shouldPrintDebug) {
+            logger.info(
+              ['  - attrs (expanded): \n', logLines(attrs.map(attrStr).join(', '))].join(' ')
+            )
+          }
+
+          // merge styles, leave undefined values
+          let prev: ExtractedAttr | null = null
+
+          function 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,
+            }
+          }
 
-            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]) {
-                      console.log('warn: missing', key, prev, next)
-                    }
-                  }
-                  Object.assign(prev[key], next[key])
-                } else {
-                  prev[key] = next[key]
-                }
-              }
+          function expandStylesWithoutVariants(style: any) {
+            const { variants, styles } = splitVariants(style)
+            return {
+              ...expandStyles(styles),
+              ...variants,
             }
+          }
 
-            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)
+          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(' '))
                   }
-                  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
                 }
+                Object.assign(prev[key], next[key])
+              } else {
+                prev[key] = next[key]
+              }
+            }
+          }
 
-                if (ensureOverridden[key]) {
-                  acc.push({
-                    type: 'attr',
-                    value:
-                      cur.attr ||
-                      t.jsxAttribute(
-                        t.jsxIdentifier(key),
-                        t.jsxExpressionContainer(t.nullLiteral())
-                      ),
-                  })
-                }
+          attrs = attrs.reduce<ExtractedAttr[]>((acc, cur) => {
+            if (cur.type === 'style') {
+              const key = Object.keys(cur.value)[0]
+              const value = cur.value[key]
 
-                if (prev?.type === 'style') {
-                  mergeStyles(prev.value, cur.value)
-                  return acc
+              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) {
+                  logger.info(['     - keeping as non-style', key].join(' '))
                 }
+                prev = cur
+                acc.push({
+                  type: 'attr',
+                  value: t.jsxAttribute(
+                    t.jsxIdentifier(key),
+                    t.jsxExpressionContainer(
+                      typeof value === 'string' ? t.stringLiteral(value) : literalToAst(value)
+                    )
+                  ),
+                })
+                acc.push(cur)
+                return acc
               }
 
-              prev = cur
-              acc.push(cur)
-              return acc
-            }, [])
+              if (ensureOverridden[key]) {
+                acc.push({
+                  type: 'attr',
+                  value:
+                    cur.attr ||
+                    t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(t.nullLiteral())),
+                })
+              }
 
-            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)))
+              if (prev?.type === 'style') {
+                mergeStyles(prev.value, cur.value)
+                return acc
+              }
             }
 
-            // 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]
-                  }
-                }
-              }
-              try {
-                const out = getSplitStyles(
-                  props,
-                  staticConfig,
-                  defaultTheme,
-                  {
-                    ...state,
-                    fallbackProps: completeProps,
-                  },
-                  undefined,
-                  props['debug']
-                )
+            prev = cur
+            acc.push(cur)
+            return acc
+          }, [])
 
-                // console.log('outout', out)
+          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(' '))
+          }
 
-                const outStyle = {
-                  ...out.style,
-                  ...out.pseudos,
+          // 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]
                 }
-                // 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 {}
               }
             }
+            try {
+              const out = getSplitStyles(
+                props,
+                staticConfig,
+                defaultTheme,
+                {
+                  ...state,
+                  fallbackProps: completeProps,
+                },
+                undefined,
+                props['debug']
+              )
 
-            // used to ensure we pass the entire prop bundle to getStyles
-            const completeStyles = getStyles(completeProps, 'completeStyles')
+              // logger.info('outout', out)
 
-            if (!completeStyles) {
-              throw new Error(`Impossible, no styles`)
+              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 {}
             }
+          }
 
-            let getStyleError: any = null
+          // used to ensure we pass the entire prop bundle to getStyles
+          const completeStyles = getStyles(completeProps, 'completeStyles')
 
-            // 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
+          if (!completeStyles) {
+            throw new Error(`Impossible, no styles`)
+          }
+
+          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(', ')))
-            }
+          if (shouldPrintDebug) {
+            // prettier-ignore
+            logger.info(['  - attrs (ternaries/combined):\n', logLines(attrs.map(attrStr).join(', '))].join(' '))
+          }
 
-            tm.mark('jsx-element-styles', shouldPrintDebug === 'verbose')
+          tm.mark('jsx-element-styles', !!shouldPrintDebug)
 
-            if (getStyleError) {
-              console.log(' ⚠️ postprocessing error, deopt', getStyleError)
-              node.attributes = ogAttributes
-              return node
-            }
+          if (getStyleError) {
+            logger.info([' ⚠️ postprocessing error, deopt', getStyleError].join(' '))
+            node.attributes = ogAttributes
+            return node
+          }
 
-            // final lazy extra loop:
-            const existingStyleKeys = new Set()
-            for (let i = attrs.length - 1; i >= 0; i--) {
-              const attr = attrs[i]
+          // final lazy extra loop:
+          const existingStyleKeys = new Set()
+          for (let i = attrs.length - 1; i >= 0; i--) {
+            const attr = attrs[i]
 
-              // if flattening map inline props to proper flattened names
-              if (shouldFlatten) {
-                if (attr.type === 'attr') {
-                  if (t.isJSXAttribute(attr.value)) {
-                    if (t.isJSXIdentifier(attr.value.name)) {
-                      const name = attr.value.name.name
-                      if (INLINE_EXTRACTABLE[name]) {
-                        // map to HTML only name
-                        attr.value.name.name = INLINE_EXTRACTABLE[name]
-                      }
+            // 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 (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]
-                      }
+          // 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,
-              completeProps,
-              staticConfig,
-            })
-          } finally {
-            if (debugPropValue) {
-              shouldPrintDebug = ogDebug
+            node.name.name = flatNode
+            res.flattened++
+            if (closingElement) {
+              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({
+            attrs,
+            node,
+            lineNumbers,
+            filePath,
+            attemptEval,
+            jsxPath: traversePath,
+            originalNodeName,
+            isFlattened: shouldFlatten,
+            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
   }
 }