@tamagui/web 2.7.7 → 3.0.0-beta.1093.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/getVariantExtras.tsx

@@ -1,68 +0,0 @@
-import { getSetting } from '../config'
-import { getVariableValue } from '../createVariable'
-import type { GenericFonts, GetStyleState, LanguageContextType } from '../types'
-
-const cache = new WeakMap<GetStyleState, { props: GetStyleState['props']; value: any }>()
-
-export const getVariantExtras = (styleState: GetStyleState) => {
-  const cached = cache.get(styleState)
-  if (cached?.props === styleState.props) {
-    return cached.value
-  }
-
-  const { props, conf, context, theme, styleProps } = styleState
-  const styledContext = styleProps.styledContext
-  let fonts = conf.fontsParsed
-  if (context?.language) {
-    fonts = getFontsForLanguage(conf.fontsParsed, context.language)
-  }
-
-  const next = {
-    fonts,
-    tokens: conf.tokensParsed,
-    theme,
-    context: styledContext,
-    get fontFamily() {
-      return (
-        getVariableValue(styleState.fontFamily || styleState.props.fontFamily) ||
-        props.fontFamily ||
-        getVariableValue(getSetting('defaultFont'))
-      )
-    },
-    get font() {
-      return (
-        fonts[this.fontFamily] ||
-        (!props.fontFamily || props.fontFamily[0] === '$'
-          ? fonts[getSetting('defaultFont') || '']
-          : undefined)
-      )
-    },
-    props,
-  }
-
-  cache.set(styleState, { props, value: next })
-
-  return next as any
-}
-
-const fontLanguageCache = new WeakMap()
-
-export function getFontsForLanguage(fonts: GenericFonts, language: LanguageContextType) {
-  if (fontLanguageCache.has(language)) {
-    return fontLanguageCache.get(language)
-  }
-  const next = {
-    ...fonts,
-    ...Object.fromEntries(
-      Object.entries(language).flatMap(([name, lang]) => {
-        if (lang === 'default') {
-          return []
-        }
-        const langKey = `$${name}_${lang}`
-        return [[`$${name}`, fonts[langKey]]]
-      })
-    ),
-  }
-  fontLanguageCache.set(language, next)
-  return next
-}

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/normalizeStylePropKeys.native.ts

@@ -1,12 +0,0 @@
-export const normalizeStylePropKeys = {
-  backgroundColor: true,
-  borderColor: true,
-  borderTopColor: true,
-  borderRightColor: true,
-  borderBottomColor: true,
-  borderLeftColor: true,
-  color: true,
-  shadowColor: true,
-  textDecorationColor: true,
-  textShadowColor: true,
-}

package/src/helpers/normalizeStylePropKeys.ts

@@ -1,3 +0,0 @@
-// none for web, all for native
-
-export const normalizeStylePropKeys = {}

package/src/helpers/parseNativeStyle.ts

@@ -1,193 +0,0 @@
-/**
- * parses CSS string values into RN object format on native,
- * preserving DynamicColorIOS objects from the token map.
- *
- * supports: backgroundImage (linear-gradient), boxShadow, textShadow
- * filter has no RN object equivalent, returns undefined (falls back to string)
- *
- * only called inside process.env.TAMAGUI_TARGET === 'native' checks,
- * so this code is dead-code-eliminated on web builds.
- */
-
-type TokenMap = Map<string, any>
-
-export function parseNativeStyle(
-  key: string,
-  cssString: string,
-  tokenMap?: TokenMap
-): any | undefined {
-  switch (key) {
-    case 'backgroundImage':
-      return parseBackgroundImage(cssString, tokenMap)
-    case 'boxShadow':
-      return parseBoxShadow(cssString, tokenMap)
-    case 'textShadow':
-      return parseTextShadow(cssString, tokenMap)
-    default:
-      return undefined
-  }
-}
-
-function resolveColor(raw: string, tokenMap?: TokenMap): any {
-  if (tokenMap && tokenMap.has(raw)) {
-    return tokenMap.get(raw)
-  }
-  return raw
-}
-
-// parse "linear-gradient(direction, color1 pos1, color2 pos2, ...)"
-function parseBackgroundImage(css: string, tokenMap?: TokenMap): any[] | undefined {
-  const match = css.match(/^linear-gradient\((.+)\)$/s)
-  if (!match) return undefined
-
-  const inner = match[1]
-  // split on commas that are not inside parentheses
-  const parts = splitOutsideParens(inner)
-  if (parts.length < 2) return undefined
-
-  let direction: string | undefined
-  let startIdx = 0
-
-  const firstPart = parts[0].trim()
-  // check if first part is a direction (starts with "to " or ends with "deg/rad/turn/grad")
-  if (firstPart.startsWith('to ') || /^\d+(\.\d+)?(deg|rad|turn|grad)$/.test(firstPart)) {
-    direction = firstPart
-    startIdx = 1
-  }
-
-  const colorStops: any[] = []
-  for (let i = startIdx; i < parts.length; i++) {
-    const stopParts = parts[i].trim().match(/\S+\([^)]*\)|\S+/g)
-    if (!stopParts) continue
-    const colorRaw = stopParts[0]
-    const color = resolveColor(colorRaw, tokenMap)
-    const positions = stopParts.slice(1)
-    const stop: any = { color }
-    if (positions.length > 0) {
-      stop.positions = positions
-    }
-    colorStops.push(stop)
-  }
-
-  const gradient: any = {
-    type: 'linear-gradient',
-    colorStops,
-  }
-  if (direction) {
-    gradient.direction = direction
-  }
-
-  return [gradient]
-}
-
-// parse "offsetX offsetY [blur [spread]] [color]" (comma-separated for multiple)
-function parseBoxShadow(css: string, tokenMap?: TokenMap): any[] | undefined {
-  // split on commas for multiple shadows
-  const shadowStrings = splitOutsideParens(css)
-  const shadows: any[] = []
-
-  for (const raw of shadowStrings) {
-    const s = raw.trim()
-    if (!s) continue
-
-    const tokens = s.split(/\s+/)
-    if (tokens.length < 2) return undefined
-
-    let startIdx = 0
-    let inset = false
-    if (tokens[0] === 'inset') {
-      inset = true
-      startIdx = 1
-    }
-
-    // find where the color starts - numbers/dimensions come first
-    const numericParts: number[] = []
-    let colorParts: string[] = []
-
-    for (let i = startIdx; i < tokens.length; i++) {
-      const n = parseDimension(tokens[i])
-      if (n !== undefined) {
-        numericParts.push(n)
-      } else {
-        // rest is color (could be "rgba(..." which was split, so rejoin)
-        colorParts = tokens.slice(i)
-        break
-      }
-    }
-
-    if (numericParts.length < 2) return undefined
-
-    const shadow: any = {
-      offsetX: numericParts[0],
-      offsetY: numericParts[1],
-    }
-    if (inset) {
-      shadow.inset = true
-    }
-    if (numericParts.length >= 3) {
-      shadow.blurRadius = numericParts[2]
-    }
-    if (numericParts.length >= 4) {
-      shadow.spreadDistance = numericParts[3]
-    }
-    if (colorParts.length > 0) {
-      const colorStr = colorParts.join(' ')
-      shadow.color = resolveColor(colorStr, tokenMap)
-    }
-
-    shadows.push(shadow)
-  }
-
-  return shadows.length > 0 ? shadows : undefined
-}
-
-// parse "offsetX offsetY blur color"
-function parseTextShadow(css: string, tokenMap?: TokenMap): [string, any][] | undefined {
-  const tokens = css.trim().split(/\s+/)
-  if (tokens.length < 3) return undefined
-
-  const offsetX = parseDimension(tokens[0])
-  const offsetY = parseDimension(tokens[1])
-  const blur = parseDimension(tokens[2])
-
-  if (offsetX === undefined || offsetY === undefined || blur === undefined) {
-    return undefined
-  }
-
-  const result: [string, any][] = [
-    ['textShadowOffset', { width: offsetX, height: offsetY }],
-    ['textShadowRadius', blur],
-  ]
-
-  if (tokens.length >= 4) {
-    const colorStr = tokens.slice(3).join(' ')
-    result.push(['textShadowColor', resolveColor(colorStr, tokenMap)])
-  }
-
-  return result
-}
-
-function parseDimension(s: string): number | undefined {
-  // strip px/dp suffix
-  const cleaned = s.replace(/px$|dp$/, '')
-  const n = Number(cleaned)
-  return Number.isFinite(n) ? n : undefined
-}
-
-// split a string on commas that are not inside parentheses
-function splitOutsideParens(s: string): string[] {
-  const parts: string[] = []
-  let depth = 0
-  let start = 0
-  for (let i = 0; i < s.length; i++) {
-    const ch = s.charCodeAt(i)
-    if (ch === 40 /* ( */) depth++
-    else if (ch === 41 /* ) */) depth--
-    else if (ch === 44 /* , */ && depth === 0) {
-      parts.push(s.slice(start, i))
-      start = i + 1
-    }
-  }
-  parts.push(s.slice(start))
-  return parts
-}

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
-  })
-}