@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/helpers/getTokenForKey.ts

@@ -1,236 +0,0 @@
-import { tokenCategories } from '@tamagui/helpers'
-import { getConfig } from '../config'
-import { isVariable } from '../createVariable'
-import type {
-  GetStyleState,
-  ResolveVariableAs,
-  SplitStyleProps,
-  Variable,
-} from '../types'
-import { getFontsForLanguage } from './getVariantExtras'
-import { normalizeColor } from './normalizeColor'
-
-const fontShorthand = {
-  fontSize: 'size',
-  fontWeight: 'weight',
-}
-
-let didLogMissingToken = false
-const colorKeys = tokenCategories.color
-
-// flat reverse-lookup: tokenCategoryByKey[propName] → category name.
-// replaces an O(categories) for-in scan at the hot path below that
-// iterates every category on every `$token` prop resolve. a sootsim
-// scroll profile of Uniswap spent material worker CPU walking five
-// categories per prop per render — one `key in tokenCategoryByKey`
-// lookup collapses that to O(1). tokenCategories is module-constant so
-// it's safe to flatten once at module init.
-const tokenCategoryByKey: Record<string, string> = {}
-for (const _cat in tokenCategories) {
-  for (const _k in tokenCategories[_cat as keyof typeof tokenCategories]) {
-    tokenCategoryByKey[_k] = _cat
-  }
-}
-
-// mutable state for font family tracking across propMapper
-let _lastFontFamilyToken: any = null
-
-export function getLastFontFamilyToken() {
-  return _lastFontFamilyToken
-}
-
-export function setLastFontFamilyToken(value: any) {
-  _lastFontFamilyToken = value
-}
-
-export const getTokenForKey = (
-  key: string,
-  value: string,
-  styleProps: SplitStyleProps,
-  styleState: Partial<GetStyleState>
-) => {
-  let resolveAs = styleProps.resolveValues || 'none'
-
-  if (resolveAs === 'none') {
-    return value
-  }
-
-  // parse opacity modifier: $token/50 → base token + 50% opacity
-  // only for color-related style properties
-  let opacityModifier: number | undefined
-  if (key in colorKeys) {
-    const slashIdx = value.indexOf('/')
-    if (slashIdx > 0) {
-      const raw = value.slice(slashIdx + 1)
-      // reject empty string after slash ($color/) to avoid Number("") === 0
-      if (raw.length > 0) {
-        const num = Number(raw)
-        if (!Number.isNaN(num)) {
-          opacityModifier = Math.max(0, Math.min(1, num / 100))
-          value = value.slice(0, slashIdx)
-        }
-      }
-    }
-  }
-
-  const { theme, conf = getConfig(), context, fontFamily, staticConfig } = styleState
-
-  const themeValue = theme ? theme[value] || theme[value.slice(1)] : undefined
-
-  const tokensParsed = conf.tokensParsed
-  let valOrVar: any
-  let hasSet = false
-
-  const customTokenAccept = staticConfig?.accept?.[key]
-  if (customTokenAccept) {
-    const val = themeValue ?? tokensParsed[customTokenAccept]?.[value]
-    if (val != null) {
-      resolveAs = 'value' // always resolve custom tokens as values
-      valOrVar = val
-      hasSet = true
-    }
-  }
-
-  if (themeValue) {
-    if (resolveAs === 'except-theme') {
-      return value
-    }
-
-    valOrVar = themeValue
-    if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-      globalThis.tamaguiAvoidTracking = true
-      console.info(
-        ` - resolving ${key} to theme value ${value} resolveAs ${resolveAs}`,
-        valOrVar
-      )
-      globalThis.tamaguiAvoidTracking = false
-    }
-    hasSet = true
-  } else {
-    if (value in conf.specificTokens) {
-      hasSet = true
-      valOrVar = conf.specificTokens[value]
-    } else {
-      switch (key) {
-        case 'fontFamily': {
-          const fontsParsed = context?.language
-            ? getFontsForLanguage(conf.fontsParsed, context.language)
-            : conf.fontsParsed
-          valOrVar = fontsParsed[value]?.family || value
-          setLastFontFamilyToken(value)
-          hasSet = true
-          break
-        }
-        case 'fontSize':
-        case 'lineHeight':
-        case 'letterSpacing':
-        case 'fontWeight': {
-          const fam = fontFamily || conf.defaultFontToken
-          if (fam) {
-            const fontsParsed = context?.language
-              ? getFontsForLanguage(conf.fontsParsed, context.language)
-              : conf.fontsParsed
-            const font = fontsParsed[fam] || fontsParsed[conf.defaultFontToken]
-            valOrVar = font?.[fontShorthand[key] || key]?.[value] || value
-            hasSet = true
-          }
-          break
-        }
-      }
-      const cat = tokenCategoryByKey[key]
-      if (cat !== undefined) {
-        const res = tokensParsed[cat]?.[value]
-
-        if (res != null) {
-          valOrVar = res
-          hasSet = true
-        } else {
-          if (process.env.NODE_ENV === 'development') {
-            if (process.env.TAMAGUI_DISABLE_MISSING_TOKEN_LOG !== '1') {
-              if (!didLogMissingToken) {
-                didLogMissingToken = true
-                console.groupCollapsed(
-                  `[tamagui] Warning: missing token ${key} in category ${cat} - ${value} (open for details)`
-                )
-                console.info(
-                  `Note: this could just be due to you not setting all the theme tokens Tamagui expects, which is harmless, but
-                    it also often can be because you have a duplicated Tamagui in your bundle, which can cause tricky bugs.`
-                )
-                console.info(
-                  `To see if you have duplicated dependencies, in Chrome DevTools hit CMD+P and type TamaguiProvider.
-                    If you see both a .cjs and a .mjs entry, it's duplicated.`
-                )
-                console.info(
-                  `You can debug that issue by opening the .mjs and .cjs files and setting a breakpoint at the top of each.`
-                )
-                console.info(
-                  `We only log this warning one time as it's sometimes harmless, to disable this log entirely set process.env.TAMAGUI_DISABLE_MISSING_TOKEN_LOG=1.`
-                )
-                console.groupEnd()
-              }
-            }
-          }
-        }
-      }
-    }
-
-    if (!hasSet) {
-      const spaceVar = tokensParsed.space[value]
-      if (spaceVar != null) {
-        valOrVar = spaceVar
-        hasSet = true
-      }
-    }
-  }
-
-  if (hasSet) {
-    let out = resolveVariableValue(key, valOrVar, resolveAs)
-
-    // apply opacity modifier via color-mix (web) or rgba (native)
-    if (opacityModifier !== undefined && opacityModifier < 1) {
-      out = normalizeColor(String(out), opacityModifier) ?? out
-    }
-
-    if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-      globalThis.tamaguiAvoidTracking = true
-      console.info(`resolved`, resolveAs, valOrVar, out)
-      globalThis.tamaguiAvoidTracking = false
-    }
-    return out
-  }
-
-  // they didn't define this token don't return anything, we could warn?
-
-  if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-    console.warn(`Warning: no token found for ${key}, omitting`)
-  }
-}
-
-export function resolveVariableValue(
-  key: string,
-  valOrVar: Variable | any,
-  resolveValues?: ResolveVariableAs
-) {
-  if (resolveValues === 'none') {
-    return valOrVar
-  }
-  if (isVariable(valOrVar)) {
-    if (resolveValues === 'value') {
-      return valOrVar.val
-    }
-
-    // @ts-expect-error this is fine until we can type better
-    const get = valOrVar?.get
-
-    // shadowColor doesn't support dynamic style
-    if (process.env.TAMAGUI_TARGET !== 'native' || key !== 'shadowColor') {
-      if (typeof get === 'function') {
-        const resolveDynamicFor = resolveValues === 'web' ? 'web' : undefined
-        return get(resolveDynamicFor)
-      }
-    }
-
-    return process.env.TAMAGUI_TARGET === 'native' ? valOrVar.val : valOrVar.variable
-  }
-  return valOrVar
-}

package/src/helpers/isActivePlatform.ts

@@ -1,43 +0,0 @@
-import { currentPlatform, isAndroid, isIos, isTV } from '@tamagui/constants'
-
-/**
- * Returns the specificity bump for a platform media key so that more specific
- * platform selectors reliably override more general ones regardless of the order
- * props are declared.
- *
- * Cascade (low → high importance):
- *   $platform-native / $platform-web         → bump 0  (widest)
- *   $platform-android / $platform-ios        → bump 1  (OS-specific)
- *   $platform-tv                             → bump 2  (TV subset of Android/iOS)
- *   $platform-androidtv / $platform-tvos     → bump 3  (most specific)
- *
- * @param mediaKeyShort - Platform media key without the leading '$' (e.g. 'platform-tv', 'platform-androidtv')
- */
-export function getPlatformSpecificityBump(mediaKeyShort: string): number {
-  if (mediaKeyShort === 'platform-androidtv' || mediaKeyShort === 'platform-tvos')
-    return 3
-  if (mediaKeyShort === 'platform-tv') return 2
-  if (mediaKeyShort === 'platform-android' || mediaKeyShort === 'platform-ios') return 1
-  return 0
-}
-
-export function isActivePlatform(key: string) {
-  if (!key.startsWith('$platform')) {
-    return true
-  }
-  const platform = key.slice(10)
-  return (
-    // exact platform match (web, ios, android)
-    platform === currentPlatform ||
-    // native matches all non-web platforms (iOS, Android, tvOS, Android TV)
-    (platform === 'native' && currentPlatform !== 'web') ||
-    // TAMAGUI_TARGET fallback (web or native build target)
-    platform === process.env.TAMAGUI_TARGET ||
-    // tv matches both Android TV and tvOS
-    (platform === 'tv' && isTV) ||
-    // androidtv matches Android TV specifically
-    (platform === 'androidtv' && isAndroid && isTV) ||
-    // tvos matches tvOS specifically
-    (platform === 'tvos' && isIos && isTV)
-  )
-}

package/src/helpers/isActiveTheme.ts

@@ -1,4 +0,0 @@
-export function isActiveTheme(key: string, activeThemeName: string) {
-  if (!key.startsWith('$theme-')) return
-  return key.slice(7).startsWith(activeThemeName)
-}

package/src/helpers/platformResolveValue.native.ts

@@ -1,75 +0,0 @@
-import type { GetStyleState, SplitStyleProps } from '../types'
-import { getTokenForKey } from './getTokenForKey'
-import { parseNativeStyle } from './parseNativeStyle'
-
-// includes the optional `/NN` opacity-modifier suffix ($color9/50) so
-// getTokenForKey receives it and can apply the alpha — without it the token
-// resolves but the bare `/50` is left behind in the parsed gradient string
-const tokenPattern = /(\$[\w.-]+(?:\/[\d.]+)?)/g
-
-// keys that need native object parsing (DynamicColorIOS support)
-const nativeParseKeys: Record<string, boolean> = {
-  backgroundImage: true,
-  boxShadow: true,
-  textShadow: true,
-}
-
-function replaceTokens(
-  value: string,
-  styleProps: SplitStyleProps,
-  styleState: Partial<GetStyleState>
-): string {
-  return value.replace(tokenPattern, (t) => {
-    let r = getTokenForKey('size', t, styleProps, styleState)
-    if (r == null) {
-      r = getTokenForKey('color', t, styleProps, styleState)
-    }
-    return r != null ? String(r) : t
-  })
-}
-
-/**
- * native: resolves embedded $tokens, with DynamicColorIOS placeholder
- * support for boxShadow/textShadow/backgroundImage.
- */
-export function platformResolveValue(
-  key: string,
-  value: string,
-  styleProps: SplitStyleProps,
-  styleState: Partial<GetStyleState>
-): any {
-  if (!nativeParseKeys[key]) {
-    return replaceTokens(value, styleProps, styleState)
-  }
-
-  // for backgroundImage (gradients), force 'web' resolution to avoid DynamicColorIOS
-  // gradients don't support dynamic color updates - RN resolves colors once at render time
-  // so we need plain values and must let the component re-render on scheme changes
-  const effectiveStyleProps =
-    key === 'backgroundImage'
-      ? { ...styleProps, resolveValues: 'web' as const }
-      : styleProps
-
-  // preserve DynamicColorIOS objects through parsing (for boxShadow/textShadow)
-  const tokenMap = new Map<string, any>()
-  let placeholderIdx = 0
-  const withPlaceholders = value.replace(tokenPattern, (t) => {
-    let r = getTokenForKey('size', t, effectiveStyleProps, styleState)
-    if (r == null) {
-      r = getTokenForKey('color', t, effectiveStyleProps, styleState)
-    }
-    if (r == null) return t
-    if (typeof r !== 'string' && typeof r !== 'number') {
-      const placeholder = `__tk${placeholderIdx++}__`
-      tokenMap.set(placeholder, r)
-      return placeholder
-    }
-    return String(r)
-  })
-
-  const parsed = parseNativeStyle(key, withPlaceholders, tokenMap)
-  if (parsed) return parsed
-
-  // fallback to plain string resolution
-  return replaceTokens(value, styleProps, styleState)
-}

package/src/helpers/platformResolveValue.ts

@@ -1,26 +0,0 @@
-import type { GetStyleState, SplitStyleProps } from '../types'
-import { getTokenForKey } from './getTokenForKey'
-
-// includes the optional `/NN` opacity-modifier suffix ($color9/50) so
-// getTokenForKey receives it and can apply the alpha — without it the token
-// resolves but the bare `/50` is left behind in the CSS string, which makes
-// the whole declaration invalid
-const tokenPattern = /(\$[\w.-]+(?:\/[\d.]+)?)/g
-
-/**
- * web: resolves embedded $tokens in compound CSS strings via simple regex replacement.
- */
-export function platformResolveValue(
-  _key: string,
-  value: string,
-  styleProps: SplitStyleProps,
-  styleState: Partial<GetStyleState>
-): string {
-  return value.replace(tokenPattern, (t) => {
-    let r = getTokenForKey('size', t, styleProps, styleState)
-    if (r == null) {
-      r = getTokenForKey('color', t, styleProps, styleState)
-    }
-    return r != null ? String(r) : t
-  })
-}

package/src/helpers/proxyThemeVariables.tsx

@@ -1,13 +0,0 @@
-export function proxyThemeVariables<A extends object>(obj: A): A {
-  return new Proxy<A>(obj || {}, {
-    has(target, key) {
-      return Reflect.has(target, removeStarting$(key))
-    },
-    get(target, key) {
-      return Reflect.get(target, removeStarting$(key))
-    },
-  })
-}
-
-const removeStarting$ = (str: string | symbol) =>
-  typeof str === 'string' && str[0] === '$' ? str.slice(1) : str

package/src/helpers/pseudoDescriptors.ts

@@ -1,74 +0,0 @@
-// *0 order matches to *1
-
-export const pseudoDescriptorsBase = {
-  // order of keys here important! in priority order
-  hoverStyle: {
-    name: 'hover',
-    priority: 2,
-  },
-  pressStyle: {
-    name: 'active',
-    stateKey: 'press',
-    priority: 3,
-  },
-  focusVisibleStyle: {
-    name: 'focus-visible',
-    priority: 4,
-    stateKey: 'focusVisible',
-  },
-  focusStyle: {
-    name: 'focus',
-    priority: 4,
-  },
-  focusWithinStyle: {
-    name: 'focus-within',
-    priority: 4,
-    stateKey: 'focusWithin',
-  },
-  disabledStyle: {
-    name: 'disabled',
-    priority: 5,
-    stateKey: 'disabled',
-  },
-} as const
-
-export const pseudoPriorities = {
-  hover: pseudoDescriptorsBase.hoverStyle.priority,
-  press: pseudoDescriptorsBase.pressStyle.priority,
-  focus: pseudoDescriptorsBase.focusStyle.priority,
-  focusVisible: pseudoDescriptorsBase.focusVisibleStyle.priority,
-  focusWithin: pseudoDescriptorsBase.focusWithinStyle.priority,
-  disabled: pseudoDescriptorsBase.disabledStyle.priority,
-}
-
-export type PseudoDescriptorKey = keyof typeof pseudoDescriptorsBase
-
-export const pseudoDescriptors: Record<
-  PseudoDescriptorKey | 'enterStyle' | 'exitStyle',
-  PseudoDescriptor
-> = {
-  ...pseudoDescriptorsBase,
-  enterStyle: {
-    name: 'enter',
-    selector: '.t_unmounted',
-    priority: 4,
-  },
-  exitStyle: {
-    name: 'exit',
-    priority: 5,
-  },
-}
-
-export type PseudoDescriptor = {
-  name: string
-  priority: number
-  stateKey?: string
-  selector?: string
-}
-
-export type PseudoDescriptors = {
-  [Key in keyof typeof pseudoDescriptors]: PseudoDescriptor
-}
-
-// media always above pseudos
-export const defaultMediaImportance = Object.keys(pseudoDescriptors).length

package/src/helpers/pseudoTransitions.ts

@@ -1,97 +0,0 @@
-import type { TransitionProp, PseudoTransitions, TamaguiComponentState } from '../types'
-
-/**
- * Pseudo state for tracking enter/exit transitions
- */
-export type PseudoState = {
-  hover?: boolean
-  press?: boolean
-  focus?: boolean
-  // track group pseudo states: { groupName: { hover: boolean, press: boolean } }
-  groups?: Record<string, { hover?: boolean; press?: boolean; focus?: boolean }>
-}
-
-/**
- * Resolves the effective transition based on pseudo state changes.
- * When entering a pseudo state (e.g., hover), use that pseudo's transition.
- * When exiting (returning to base), use the base transition.
- *
- * CSS-like semantics:
- * - Enter hover: Uses hover's transition (fast snap)
- * - Exit hover: Uses base transition (slow fade)
- */
-export function resolveEffectivePseudoTransition(
-  prev: PseudoState | undefined,
-  next: TamaguiComponentState,
-  pseudoTransitions: PseudoTransitions | undefined | null,
-  baseTransition: TransitionProp | undefined | null
-): TransitionProp | undefined | null {
-  if (!pseudoTransitions) {
-    return baseTransition
-  }
-
-  // treat undefined prev as all-false so first interaction detects entering
-  const prevState = prev || { hover: false, press: false, focus: false, groups: {} }
-
-  // check which pseudo states are being entered (priority: press > hover > focus)
-  if (next.press && !prevState.press && pseudoTransitions.pressStyle) {
-    return pseudoTransitions.pressStyle
-  }
-  if (next.hover && !prevState.hover && pseudoTransitions.hoverStyle) {
-    return pseudoTransitions.hoverStyle
-  }
-  if (next.focus && !prevState.focus && pseudoTransitions.focusStyle) {
-    return pseudoTransitions.focusStyle
-  }
-
-  // check group pseudo transitions (e.g., $group-scenario4-hover)
-  for (const key in pseudoTransitions) {
-    if (key.startsWith('$group-')) {
-      // parse $group-{name}-{pseudo} format
-      const match = key.match(/^\$group-(.+)-(hover|press|focus)$/)
-      if (!match) continue
-
-      const groupName = match[1]
-      const pseudoType = match[2] as 'hover' | 'press' | 'focus'
-
-      // get current and previous group pseudo state
-      const nextGroupPseudo = next.group?.[groupName]?.pseudo
-      const prevGroupPseudo = prevState.groups?.[groupName]
-
-      // check if entering this group pseudo state
-      if (nextGroupPseudo?.[pseudoType] && !prevGroupPseudo?.[pseudoType]) {
-        return pseudoTransitions[key as `$group-${string}-${'hover' | 'press' | 'focus'}`]
-      }
-    }
-  }
-
-  // exiting uses base transition
-  return baseTransition
-}
-
-/**
- * Extracts pseudo state from TamaguiComponentState for storage in prevPseudoState
- */
-export function extractPseudoState(state: TamaguiComponentState): PseudoState {
-  const groups: PseudoState['groups'] = {}
-
-  if (state.group) {
-    for (const groupName in state.group) {
-      const pseudo = state.group[groupName]?.pseudo
-      if (pseudo) {
-        groups[groupName] = {
-          hover: pseudo.hover,
-          press: pseudo.press,
-          focus: pseudo.focus,
-        }
-      }
-    }
-  }
-
-  return {
-    hover: state.hover,
-    press: state.press,
-    focus: state.focus,
-    groups,
-  }
-}

package/src/helpers/resolveCompoundTokens.ts

@@ -1,28 +0,0 @@
-import type { GetStyleState, SplitStyleProps } from '../types'
-import { platformResolveValue } from './platformResolveValue'
-
-const compoundKeys: Record<string, boolean> = {
-  boxShadow: true,
-  textShadow: true,
-  filter: true,
-  backgroundImage: true,
-  border: true,
-  outline: true,
-}
-
-/**
- * resolves embedded $tokens in compound CSS string values like
- * boxShadow, textShadow, filter, backgroundImage, border, outline.
- *
- * returns the original value unchanged if no resolution is needed.
- */
-export function resolveCompoundTokens(
-  key: string,
-  value: string,
-  styleProps: SplitStyleProps,
-  styleState: Partial<GetStyleState>
-): any {
-  if (!value.includes('$')) return value
-  if (!compoundKeys[key]) return value
-  return platformResolveValue(key, value, styleProps, styleState)
-}

package/src/opacityModifier.test-d.ts

@@ -1,65 +0,0 @@
-/**
- * type tests for the opacity modifier syntax (e.g., $color/50)
- *
- * the runtime already supports this syntax in getTokenForKey, but the types
- * were not accepting it. these tests verify that color tokens with opacity
- * modifiers are now type-safe.
- */
-
-import { expectTypeOf, describe, test } from 'vitest'
-import type { ColorTokens, FontColorTokens, GetThemeValueForKey } from './types'
-
-type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
-type ColorTokenKey = `color${Digit}${Digit}${Digit}`
-
-describe('opacity modifier types', () => {
-  test('ColorTokens accepts opacity modifier syntax', () => {
-    // should accept token with opacity modifier
-    const colorWithOpacity: ColorTokens = '$color/50'
-    const colorWithFullOpacity: ColorTokens = '$color/100'
-    const colorWithLowOpacity: ColorTokens = '$color/10'
-
-    // should still accept regular tokens
-    const regularToken: ColorTokens = '$color'
-    const colorName: ColorTokens = 'red'
-
-    expectTypeOf(colorWithOpacity).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(colorWithFullOpacity).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(colorWithLowOpacity).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(regularToken).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(colorName).toMatchTypeOf<ColorTokens>()
-  })
-
-  test('FontColorTokens accepts opacity modifier syntax', () => {
-    const fontColorNumber: FontColorTokens = 42
-    const fontColorWithOpacity: FontColorTokens = '$bodyColor/50'
-
-    expectTypeOf(fontColorNumber).toMatchTypeOf<FontColorTokens>()
-    expectTypeOf(fontColorWithOpacity).toMatchTypeOf<FontColorTokens>()
-    expectTypeOf<number>().toMatchTypeOf<FontColorTokens>()
-  })
-
-  test('opacity modifier requires token prefix', () => {
-    const validOpacity: ColorTokens = '$color/75'
-    expectTypeOf(validOpacity).toMatchTypeOf<ColorTokens>()
-
-    // @ts-expect-error opacity modifiers only apply to token-like values.
-    const cssColorWithOpacity: ColorTokens = 'red/75'
-    expectTypeOf(cssColorWithOpacity).toMatchTypeOf<ColorTokens>()
-  })
-
-  test('color props accept opacity without expanding large token unions', () => {
-    type LargeColorTokens = `$${ColorTokenKey}` | ColorTokens
-
-    const colorToken: LargeColorTokens = '$color123'
-    const colorTokenWithOpacity: LargeColorTokens = '$color123/50'
-    const propColorTokenWithOpacity: GetThemeValueForKey<'backgroundColor'> =
-      '$color123/50'
-
-    expectTypeOf(colorToken).toMatchTypeOf<LargeColorTokens>()
-    expectTypeOf(colorTokenWithOpacity).toMatchTypeOf<LargeColorTokens>()
-    expectTypeOf(propColorTokenWithOpacity).toMatchTypeOf<
-      GetThemeValueForKey<'backgroundColor'>
-    >()
-  })
-})