@tamagui/web 2.7.7 → 3.0.0-beta.1093.1

package/src/helpers/getThemeCSSRules.ts

@@ -44,7 +44,11 @@ export function getThemeCSSRules(props: {
 
     for (const themeKey in theme) {
       const variable = theme[themeKey] as Variable
-      const value = variableCreator(variable.val).variable
+      // needsPx values (px() config variables, "Npx" theme strings) must keep
+      // their unit in CSS while staying numeric for native
+      const value = variableCreator(
+        variable.needsPx ? `${variable.val}px` : variable.val
+      ).variable
       // Hash themeKey in case it has invalid chars too
       vars += `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ''}${simpleHash(
         themeKey,
@@ -57,6 +61,17 @@ export function getThemeCSSRules(props: {
     const baseSelectors = names.map((name) => `${CNP}${name}`)
     const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : [])
 
+    // The full resolved name is authoritative. `:not(#t_theme_full_name)` is
+    // an always-matching specificity anchor: a bounded relative selector for
+    // another scheme can also match through intervening Theme scopes, but it
+    // must never override this exact name. The relative family below remains
+    // only for markup emitted by older runtimes/extractors that lacks the full
+    // class. It can go once mixed-version and previously extracted markup no
+    // longer need that class-shape compatibility.
+    for (const name of names) {
+      selectorsSet.add(`${CNP}${name}:not(#t_theme_full_name)`)
+    }
+
     // since we dont specify dark/light in classnames we have to do an awkward specificity war
     // hardcoded to support 2 levels of nesting (e.g. light > dark or dark > light)
     if (hasDarkLight) {

package/src/helpers/grammarConfig.ts

@@ -0,0 +1,369 @@
+// leaf subpath on purpose: the barrel pulls in the transition parser, which
+// belongs to drivers and the compiler, not to every app that imports core
+import { canonicalTransitionProperty } from '@tamagui/animation-helpers/propertyNames'
+import { platformMatches } from '@tamagui/constants'
+import { simpleHash } from '@tamagui/helpers'
+import {
+  canonicalStateModifierNames,
+  compileModifierVocabulary,
+  configRevisionSymbol,
+  isContainerSizeQueryText,
+  modifierKindMedia,
+  modifierKindPlatform,
+  modifierKindState,
+  parseFlatValue,
+  stateModifierSelectors,
+  type CompiledModifierVocabulary,
+} from '@tamagui/style-grammar/runtime'
+
+import type { StaticConfig, TamaguiInternalConfig } from '../types'
+import { classifyBorderComponents, splitComponents } from './borderComponents'
+import { mediaObjectToString } from './mediaObjectToString'
+import { getTokenCategoryForProperty, type RuntimeTokenCategory } from './tokenCategories'
+import { expandSafeAreaValue } from './resolveSafeArea'
+import { resolveSafeAreaVariable } from './resolveSafeAreaVariable'
+import { resolveStyleStaticConfig } from './styleStaticConfigCore'
+import type { StyleStaticConfig } from './styleStaticConfig'
+
+export type ConfigRevisionPart =
+  | 'media'
+  | 'themeNames'
+  | 'themeVariables'
+  | 'tokens'
+  | 'fonts'
+  | 'shorthands'
+
+export type ConfigRevisionParts = Readonly<Record<ConfigRevisionPart, string>>
+
+export interface ConfigRevisionSnapshot {
+  revision: string
+  parts: ConfigRevisionParts
+}
+
+export interface ConfigRevisionState {
+  revision: number
+  modifiers: CompiledModifierVocabulary
+  mediaQueries: Readonly<Record<string, string>>
+  resolveCondition(name: string): ConditionModifier | null
+  tokenCategory(property: string): RuntimeTokenCategory | undefined
+  expandSafeArea: typeof expandSafeAreaValue
+  safeAreaVariable: typeof resolveSafeAreaVariable
+  parseFlatValue: typeof parseFlatValue
+  styleStaticConfig(
+    staticConfig: StaticConfig,
+    conf: TamaguiInternalConfig
+  ): StyleStaticConfig
+  propertyKind(property: string): number
+  compositeValue(
+    property: string,
+    raw: string,
+    context: any,
+    resolve: (context: any, property: string, raw: string) => any
+  ): string | undefined
+  normalizeTransition(value: string): string
+  embeddedTokens(value: string, resolve: (token: string) => any): string
+  snapshot?: ConfigRevisionSnapshot
+}
+
+export type ConditionModifier = [
+  name: string,
+  kind: number,
+  rank: number,
+  selectorOrQuery?: string,
+  groupOrSize?: string,
+  containerName?: string,
+  platformActive?: boolean,
+]
+
+type ConfigWithRevision = TamaguiInternalConfig & {
+  [configRevisionSymbol]?: ConfigRevisionState
+}
+
+export function prepareConfigRevision(
+  config: TamaguiInternalConfig
+): ConfigRevisionState {
+  const target = config as ConfigWithRevision
+  const previous = target[configRevisionSymbol]
+  const captured = previous
+    ? { ...previous, revision: previous.revision + 1 }
+    : ({ revision: 1 } as ConfigRevisionState)
+  if (previous) {
+    target[configRevisionSymbol] = captured
+  } else {
+    Object.defineProperty(config, configRevisionSymbol, {
+      configurable: true,
+      writable: true,
+      value: captured,
+    })
+  }
+
+  // read each authored grammar section once. everything after this point is
+  // derived from these call-stack locals.
+  const media = config.media || {}
+  const themes = config.themes || {}
+
+  const mediaNames = Object.keys(media)
+  const themeNames = Object.keys(themes)
+  const modifiers = compileModifierVocabulary({ mediaNames, themeNames })
+  const mediaQueries = Object.create(null) as Record<string, string>
+  for (const name of mediaNames) {
+    mediaQueries[name] = mediaObjectToString(media[name])
+  }
+  const conditionModifiers = Object.create(null) as Record<
+    string,
+    ConditionModifier | null
+  >
+  for (const name in modifiers) {
+    const code = modifiers[name]
+    const kind = code & 7
+    const rank = code >> 3
+    conditionModifiers[name] =
+      kind === modifierKindState
+        ? [canonicalStateModifierNames[rank], kind, rank, stateModifierSelectors[rank]]
+        : kind === modifierKindMedia
+          ? [name, kind, rank, mediaQueries[name]]
+          : kind === modifierKindPlatform
+            ? [name, kind, rank, undefined, undefined, undefined, platformMatches(name)]
+            : [name, kind, rank]
+  }
+  const resolveCondition = (authored: string): ConditionModifier | null => {
+    const cached = conditionModifiers[authored]
+    if (cached !== undefined) return cached
+    let result: ConditionModifier | null = null
+    if (authored.startsWith('group-')) {
+      const slash = authored.indexOf('/')
+      const state = authored.slice(6, slash === -1 ? undefined : slash)
+      const code = modifiers[state] || 0
+      const rank = code >> 3
+      const groupName = slash === -1 ? 'true' : authored.slice(slash + 1)
+      if (
+        (code & 7) === modifierKindState &&
+        rank !== 6 &&
+        rank !== 7 &&
+        (slash === -1 || /^[\w-]+$/.test(groupName))
+      ) {
+        result = [
+          `group-${canonicalStateModifierNames[rank]}${slash === -1 ? '' : authored.slice(slash)}`,
+          5,
+          rank,
+          stateModifierSelectors[rank],
+          groupName,
+          canonicalStateModifierNames[rank],
+        ]
+      }
+    } else if (authored.charCodeAt(0) === 64) {
+      const slash = authored.indexOf('/')
+      const size = authored.slice(1, slash === -1 ? undefined : slash)
+      const containerName = slash === -1 ? '' : authored.slice(slash + 1)
+      const code = modifiers[size] || 0
+      const query = mediaQueries[size]
+      if (
+        /^[\w-]+$/.test(size) &&
+        (slash === -1 || /^[\w-]+$/.test(containerName)) &&
+        (code & 7) === modifierKindMedia &&
+        isContainerSizeQueryText(query)
+      ) {
+        result = [authored, 6, code >> 3, query, size, containerName]
+      }
+    }
+    return (conditionModifiers[authored] = result)
+  }
+  const propertyKinds: Record<string, number> = {
+    shadowColor: 1,
+    shadowOffset: 2,
+    shadowOpacity: 3,
+    shadowRadius: 4,
+    matrix: 5,
+    perspective: 5,
+    rotateX: 5,
+    rotateY: 5,
+    rotateZ: 5,
+    scaleZ: 5,
+    skewX: 5,
+    skewY: 5,
+    textShadowColor: 6,
+    textShadowOffset: 6,
+    textShadowRadius: 6,
+    border: 7,
+    borderTop: 7,
+    borderRight: 7,
+    borderBottom: 7,
+    borderLeft: 7,
+    borderBlock: 7,
+    borderInline: 7,
+    outline: 7,
+    padding: 8,
+    paddingBlock: 8,
+    paddingInline: 8,
+    margin: 8,
+    marginBlock: 8,
+    marginInline: 8,
+    inset: 8,
+    insetBlock: 8,
+    insetInline: 8,
+    borderRadius: 8,
+  }
+  const propertyKind = (property: string) => propertyKinds[property] || 0
+  const tokenCategory = (property: string): RuntimeTokenCategory | undefined =>
+    config.tokensParsed[property] ? property : getTokenCategoryForProperty(property)
+  // transition strings are re-normalized on every render of every animated
+  // element; the result only depends on this revision's shorthands
+  const normalizedTransitions = new Map<string, string>()
+  const next: ConfigRevisionState = {
+    revision: captured.revision,
+    modifiers,
+    mediaQueries,
+    resolveCondition,
+    tokenCategory,
+    expandSafeArea: expandSafeAreaValue,
+    safeAreaVariable: resolveSafeAreaVariable,
+    parseFlatValue,
+    styleStaticConfig: (staticConfig, conf) =>
+      resolveStyleStaticConfig(staticConfig, conf, captured.revision),
+    propertyKind,
+    compositeValue: (property, raw, context, resolve) => {
+      const kind = propertyKinds[property]
+      if (kind < 7) return
+      if (kind === 7) {
+        const { width, style, color } = classifyBorderComponents(
+          raw,
+          property === 'outline'
+        )
+        if (style === 'none' && !color) return 'none'
+        const prefix = property === 'outline' ? 'outline' : 'border'
+        return [
+          width && resolve(context, `${prefix}Width`, width),
+          style,
+          color && resolve(context, `${prefix}Color`, color),
+        ]
+          .filter(Boolean)
+          .join(' ')
+      }
+      // a one-component shorthand (margin="4px") has nothing to distribute;
+      // the split is on whitespace, so without any there is nothing to match out
+      if (!/\s/.test(raw)) return
+      const parts = splitComponents(raw)
+      if (parts.length > 1) {
+        let value = ''
+        for (const part of parts) {
+          value += `${value ? ' ' : ''}${resolve(context, property, part)}`
+        }
+        return value
+      }
+    },
+    normalizeTransition: (raw) => {
+      const known = normalizedTransitions.get(raw)
+      if (known !== undefined) return known
+      const out = raw.replace(
+        /\/\*[\s\S]*?\*\/|(["'])(?:\\.|(?!\1)[^\\])*\1|[A-Za-z_][\w-]*/g,
+        (authored, quote, offset) => {
+          if (
+            quote ||
+            raw.charCodeAt(offset + authored.length) === 40 ||
+            (raw.charCodeAt(offset - 1) === 45 && raw.charCodeAt(offset - 2) === 45)
+          ) {
+            return authored
+          }
+          // the drivers file entries under the same names through
+          // canonicalTransitionProperty, so a raw css string and a resolved
+          // transition cannot disagree about what `y` or `rotateX` targets
+          return canonicalTransitionProperty(config.shorthands[authored] || authored)
+        }
+      )
+      if (normalizedTransitions.size > 2048) normalizedTransitions.clear()
+      normalizedTransitions.set(raw, out)
+      return out
+    },
+    embeddedTokens: (raw, resolve) =>
+      raw.replace(
+        /\/\*[\s\S]*?\*\/|(["'])(?:\\.|(?!\1)[^\\])*\1|[$A-Za-z_][\w.$-]*(?:\/\d+)?/g,
+        (word, quote, offset) => {
+          const before = raw.charCodeAt(offset - 1)
+          return quote ||
+            (word[0] !== '$' &&
+              ((before >= 48 && before <= 57) ||
+                before === 35 ||
+                (before === 45 && raw.charCodeAt(offset - 2) === 45) ||
+                raw.charCodeAt(offset + word.length) === 40))
+            ? word
+            : resolve(word)
+        }
+      ),
+  }
+
+  // a getter above may have synchronously mutated and rebuilt this config.
+  // only the build that still owns the captured record may publish.
+  if (target[configRevisionSymbol] === captured) {
+    target[configRevisionSymbol] = next
+    return next
+  }
+  return target[configRevisionSymbol]!
+}
+
+export function getConfigRevisionState(
+  config: TamaguiInternalConfig
+): ConfigRevisionState {
+  return (config as ConfigWithRevision)[configRevisionSymbol]!
+}
+
+export function getConfigRevisionSnapshot(
+  config: TamaguiInternalConfig
+): ConfigRevisionSnapshot {
+  const state = getConfigRevisionState(config)
+  if (state.snapshot) return state.snapshot
+
+  const media = config.media || {}
+  const themes = config.themes || {}
+  const tokensParsed =
+    config.tokensParsed || ({} as TamaguiInternalConfig['tokensParsed'])
+  const fontsParsed = config.fontsParsed || {}
+  const shorthands = config.shorthands || {}
+  const sections: Record<ConfigRevisionPart, string[]> = {
+    media: [],
+    themeNames: [],
+    themeVariables: [],
+    tokens: [],
+    fonts: [],
+    shorthands: [],
+  }
+  for (const name of Object.keys(media).sort()) {
+    sections.media.push(`m:${name}=${mediaObjectToString(media[name])}`)
+  }
+  const themeNames = Object.keys(themes).sort()
+  sections.themeNames.push(`t:${themeNames.join(',')}`)
+  const themeKeys = new Set<string>()
+  for (const name of themeNames) {
+    for (const key of Object.keys(themes[name] || {})) themeKeys.add(key)
+  }
+  sections.themeVariables.push(`v:${[...themeKeys].sort().join(',')}`)
+  for (const category of Object.keys(tokensParsed).sort()) {
+    const tokens = tokensParsed[category]
+    sections.tokens.push(
+      `${category}:${tokens ? Object.keys(tokens).sort().join(',') : ''}`
+    )
+  }
+  for (const family of Object.keys(fontsParsed).sort()) {
+    const font = fontsParsed[family]
+    sections.fonts.push(`f:${family}=${font ? Object.keys(font).sort().join(',') : ''}`)
+  }
+  sections.shorthands.push(
+    `s:${Object.keys(shorthands)
+      .sort()
+      .map((key) => `${key}>${shorthands[key]}`)
+      .join(',')}`
+  )
+
+  const snapshot: ConfigRevisionSnapshot = {
+    revision: simpleHash(Object.values(sections).flat().join('|'), 'strict') || '0',
+    parts: Object.fromEntries(
+      Object.entries(sections).map(([name, values]) => [
+        name,
+        simpleHash(values.join('|'), 'strict') || '0',
+      ])
+    ) as Record<ConfigRevisionPart, string>,
+  }
+  if ((config as ConfigWithRevision)[configRevisionSymbol] === state) {
+    state.snapshot = snapshot
+  }
+  return snapshot
+}

package/src/helpers/insertStyleRule.tsx

@@ -1,5 +1,6 @@
 import { StyleObjectIdentifier, StyleObjectRules } from '@tamagui/helpers'
 import { createVariable } from '../createVariable'
+import { formatDiagnostic } from './formatDiagnostic'
 import type {
   DedupedTheme,
   DedupedThemes,
@@ -14,17 +15,33 @@ const scannedCache = new WeakMap<CSSStyleSheet, string>()
 const totalSelectorsInserted = new Map<string, number>()
 const allSelectors: Record<string, string> = {}
 const allRules: Record<string, string> = {}
+const allRuleSets: Record<string, string[]> = {}
 
 export const getAllSelectors = () => allSelectors
+export const getRulesForIdentifier = (identifier: string) => allRuleSets[identifier]
+
+// updateRules is the only writer, so one flag there covers every change
+let sortedRules: string[] = []
+let sortedRulesStale = true
+
 export const getAllRules = () => {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
-    // Sort by identifier to ensure deterministic CSS output order
-    const sortedKeys = Object.keys(allRules).sort()
-    return sortedKeys.map((key) => allRules[key])
+    if (sortedRulesStale) {
+      // Sort by identifier to ensure deterministic CSS output order
+      const sortedKeys = Object.keys(allRules).sort()
+      sortedRules = sortedKeys.map((key) => allRules[key])
+      sortedRulesStale = false
+    }
+    return sortedRules
   }
   return []
 }
 
+export function wrapStyleRules(css: string): string {
+  const layer = process.env.TAMAGUI_CSS_LAYER
+  return layer && css ? `@layer ${layer} {\n${css}\n}` : css
+}
+
 // once react 19 onyl supported we can remove most of this
 // gets existing ones (client side)
 // takes ~0.1ms for a fairly large page
@@ -41,9 +58,13 @@ export function scanAllSheets(
   collectThemes = false,
   tokens?: TokensParsed
 ): DedupedThemes | undefined {
-  if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
+  // with a proven CSS artifact the style dedup scan is dead weight, but theme
+  // collection must still run: a client config passing empty themes hydrates
+  // its theme values from that same CSS artifact
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS || collectThemes) {
     if (process.env.NODE_ENV === 'test') return
     if (process.env.TAMAGUI_TARGET !== 'web') return
+    if (typeof document === 'undefined') return
 
     let themes: DedupedThemes | undefined
 
@@ -91,12 +112,12 @@ function updateSheetStyles(
 ): DedupedThemes | undefined {
   // avoid errors on cross origin sheets
   // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
-  let rules: CSSRuleList
+  let rules: CSSRule[]
   try {
-    rules = sheet.cssRules
-    if (!rules) {
+    if (!sheet.cssRules) {
       return
     }
+    rules = flattenCSSRules(sheet.cssRules)
   } catch {
     return
   }
@@ -166,6 +187,21 @@ function updateSheetStyles(
   return dedupedThemes
 }
 
+function flattenCSSRules(rules: CSSRuleList, output: CSSRule[] = []): CSSRule[] {
+  for (let index = 0; index < rules.length; index++) {
+    const rule = rules[index]
+    if (rule instanceof CSSStyleRule) {
+      output.push(rule)
+      continue
+    }
+    if ('cssRules' in rule) {
+      const nested = (rule as CSSGroupingRule).cssRules
+      if (nested) flattenCSSRules(nested, output)
+    }
+  }
+  return output
+}
+
 let colorVarToVal: Record<string, string>
 let rootComputedStyle: CSSStyleDeclaration | null = null
 
@@ -231,16 +267,8 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
 
   // loop selectors and build deduped
   for (const selector of selectors) {
-    if (selector === ' .tm_xxt') continue
-    const lastThemeSelectorIndex = selector.lastIndexOf('.t_')
-    const name = selector.slice(lastThemeSelectorIndex).slice(3)
-    const [schemeChar] = selector[lastThemeSelectorIndex - 5]
-    const scheme = schemeChar === 'd' ? 'dark' : schemeChar === 'i' ? 'light' : ''
-    const themeName = scheme && scheme !== name ? `${scheme}_${name}` : name
-    if (!themeName || themeName === 'light_dark' || themeName === 'dark_light') {
-      continue
-    }
-    names.add(themeName)
+    const themeName = getThemeNameFromSelector(selector)
+    if (themeName) names.add(themeName)
   }
 
   return {
@@ -249,6 +277,24 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
   } satisfies DedupedTheme
 }
 
+export function getThemeNameFromSelector(selector: string): string | undefined {
+  if (selector === ' .tm_xxt') return
+  const lastThemeSelectorIndex = selector.lastIndexOf('.t_')
+  if (lastThemeSelectorIndex === -1) return
+
+  // A selector may qualify the class for specificity, for example
+  // `.t_light_blue:not(#t_theme_full_name)`. Only the class identifier is a
+  // theme name; retaining the pseudo-class would double the client theme set.
+  const name = selector.slice(lastThemeSelectorIndex + 3).match(/^[\w-]+/)?.[0]
+  if (!name) return
+
+  const schemeChar = selector[lastThemeSelectorIndex - 5]
+  const scheme = schemeChar === 'd' ? 'dark' : schemeChar === 'i' ? 'light' : ''
+  const themeName = scheme && scheme !== name ? `${scheme}_${name}` : name
+  if (themeName === 'light_dark' || themeName === 'dark_light') return
+  return themeName
+}
+
 const tamaguiSelectorRegex = /\.tm_xxt/
 
 function getTamaguiSelector(
@@ -281,16 +327,24 @@ const getIdentifierFromTamaguiSelector = (selector: string) => {
   return selector.slice(7)
 }
 
-let sheet: CSSStyleSheet | null = null
+let sheet: Pick<CSSStyleSheet, 'cssRules' | 'insertRule'> | null = null
 
+let mountedProviders = 0
 let trackAllRules = true
 export function stopAccumulatingRules() {
+  mountedProviders++
   trackAllRules = false
+  return () => {
+    mountedProviders--
+    trackAllRules = mountedProviders === 0
+  }
 }
 
 export function updateRules(identifier: string, rules: string[]) {
-  if (trackAllRules) {
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && trackAllRules) {
     allRules[identifier] = rules.join(' ')
+    allRuleSets[identifier] = rules
+    sortedRulesStale = true
   }
   return true
 }
@@ -301,7 +355,9 @@ export function setNonce(_: string) {
 }
 
 export function insertStyleRules(rulesToInsert: RulesToInsert) {
-  if (process.env.TAMAGUI_TARGET !== 'web') return
+  if (process.env.TAMAGUI_DID_OUTPUT_CSS || process.env.TAMAGUI_TARGET !== 'web') {
+    return
+  }
 
   if (!sheet && document.head) {
     const styleTag = document.createElement('style')
@@ -309,7 +365,18 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
     if (nonce) {
       styleTag.nonce = nonce
     }
-    sheet = document.head.appendChild(styleTag).sheet
+    const rootSheet = document.head.appendChild(styleTag).sheet
+    const layer = process.env.TAMAGUI_CSS_LAYER
+    if (rootSheet && layer) {
+      rootSheet.insertRule(`@layer ${layer} {}`, rootSheet.cssRules.length)
+      const layerRule = rootSheet.cssRules[rootSheet.cssRules.length - 1]
+      sheet =
+        'cssRules' in layerRule && 'insertRule' in layerRule
+          ? (layerRule as CSSGroupingRule)
+          : rootSheet
+    } else {
+      sheet = rootSheet
+    }
   }
 
   if (!sheet) return
@@ -332,10 +399,28 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
         sheet.insertRule(rule, sheet.cssRules.length)
       }
     } catch (err) {
-      if (process.env.NODE_ENV === 'production') {
-        console.error(`Error inserting style rule`, rules)
+      if (process.env.NODE_ENV === 'development') {
+        const rule = rules[0] || ''
+        const selectorEnd = rule.indexOf('{')
+        const owner =
+          'ownerNode' in sheet ? (sheet.ownerNode as HTMLElement | null) : null
+        console.error(
+          formatDiagnostic(
+            'TAMAGUI_STYLE_INSERT',
+            'insertStyleRules',
+            'the stylesheet rejected a generated rule',
+            'Fix or remove the invalid style declaration',
+            'identifier,selector,target',
+            {
+              identifier,
+              selector: (selectorEnd === -1 ? rule : rule.slice(0, selectorEnd)).trim(),
+              target: owner
+                ? `${owner.nodeName.toLowerCase()}${owner.id ? `#${owner.id}` : ''}`
+                : sheet.constructor?.name || 'CSSStyleSheet',
+            }
+          )
+        )
       }
-      // in dev throw to show error clearly
     }
   }
 }

package/src/helpers/isObj.ts

@@ -1 +1,9 @@
 export const isObj = (x: any) => x && !Array.isArray(x) && typeof x === 'object'
+
+export function isPlainObject(value: unknown): value is Record<string, any> {
+  if (!isObj(value)) {
+    return false
+  }
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}

package/src/helpers/isTamaguiComponent.tsx

@@ -1,11 +1,8 @@
 import type { StaticConfig } from '../types'
 
-export function isTamaguiComponent<A>(
-  comp: A,
-  name?: string
-): comp is A & {
+export function isTamaguiComponent<A>(comp: A): comp is A & {
   staticConfig: StaticConfig
 } {
   const config = comp?.['staticConfig'] as StaticConfig | undefined
-  return Boolean(config && (name ? name === config.componentName : true))
+  return Boolean(config)
 }

package/src/helpers/isTamaguiElement.tsx

@@ -4,8 +4,7 @@ import type { StaticConfig } from '../types'
 import { isTamaguiComponent } from './isTamaguiComponent'
 
 export const isTamaguiElement = (
-  child: any,
-  name?: string
+  child: any
 ): child is React.ReactElement<any> & { type: { staticConfig: StaticConfig } } => {
-  return React.isValidElement(child) && isTamaguiComponent(child.type, name)
+  return React.isValidElement(child) && isTamaguiComponent(child.type)
 }

package/src/helpers/log.ts

@@ -1,17 +1,18 @@
 import { _disableMediaTouch } from '../hooks/useMedia'
 
 export function log(...args: any[]) {
-  if (process.env.NODE_ENV === 'production') return
-  _disableMediaTouch(true)
-  try {
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      return console.info(...args)
+  if (process.env.NODE_ENV === 'development') {
+    _disableMediaTouch(true)
+    try {
+      if (process.env.TAMAGUI_TARGET === 'web') {
+        return console.info(...args)
+      }
+      // react native doesn't log in the cli unless it's log
+      return console.log(...args)
+    } catch (err) {
+      console.error(err)
+    } finally {
+      _disableMediaTouch(false)
     }
-    // react native doesn't log in the cli unless it's log
-    return console.log(...args)
-  } catch (err) {
-    console.error(err)
-  } finally {
-    _disableMediaTouch(false)
   }
 }