@tamagui/web 2.0.0-rc.8 → 2.0.0

package/src/helpers/getTokenForKey.ts

@@ -0,0 +1,236 @@
+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

@@ -2,11 +2,12 @@ import { getSetting } from '../config'
 import { getVariableValue } from '../createVariable'
 import type { GenericFonts, GetStyleState, LanguageContextType } from '../types'
 
-const cache = new WeakMap()
+const cache = new WeakMap<GetStyleState, { props: GetStyleState['props']; value: any }>()
 
 export const getVariantExtras = (styleState: GetStyleState) => {
-  if (cache.has(styleState)) {
-    return cache.get(styleState)
+  const cached = cache.get(styleState)
+  if (cached?.props === styleState.props) {
+    return cached.value
   }
 
   const { props, conf, context, theme, styleProps } = styleState
@@ -39,7 +40,7 @@ export const getVariantExtras = (styleState: GetStyleState) => {
     props,
   }
 
-  cache.set(styleState, next)
+  cache.set(styleState, { props, value: next })
 
   return next as any
 }

package/src/helpers/insertStyleRule.tsx

@@ -81,7 +81,7 @@ function trackInsertedStyle(id: string) {
 }
 
 const bailAfterEnv = process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES
-const bailAfter = bailAfterEnv ? +bailAfterEnv : 400
+const bailAfter = bailAfterEnv ? +bailAfterEnv : 8000
 
 function updateSheetStyles(
   sheet: CSSStyleSheet,

package/src/helpers/isActivePlatform.ts

@@ -1,4 +1,25 @@
-import { currentPlatform } from '@tamagui/constants'
+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')) {
@@ -6,9 +27,17 @@ export function isActivePlatform(key: string) {
   }
   const platform = key.slice(10)
   return (
-    // web, ios, android
+    // exact platform match (web, ios, android)
     platform === currentPlatform ||
-    // web, native
-    platform === process.env.TAMAGUI_TARGET
+    // 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/mainThreadPressEvents.native.ts

@@ -1,40 +1,137 @@
 /**
- * Fallback press handling using React Native's usePressability
- * Split into separate file to avoid deep import warnings when RNGH is enabled
+ * Fallback press handling when RNGH is not available.
  *
- * NOTE: This hook must be called unconditionally in the parent to avoid
- * rules of hooks violations when disabled toggles. The `enabled` param
- * controls whether the pressability events are actually applied.
+ * Implements the responder-based press detection that usePressability provides,
+ * without the deep RN internal import. Supports pressIn/pressOut delays,
+ * long press, cancellation, and min press duration.
  */
 
-import { composeEventHandlers } from '@tamagui/helpers'
+import { useRef } from 'react'
 
-const dontComposePressabilityKeys: Record<string, boolean> = {
-  onBlur: true,
-  onFocus: true,
+type PressState =
+  | 'idle'
+  | 'pressing' // responder granted, waiting for delay
+  | 'active' // pressIn fired
+  | 'longPressed' // long press detected
+
+interface PressRef {
+  state: PressState
+  pressInTimer: ReturnType<typeof setTimeout> | null
+  pressOutTimer: ReturnType<typeof setTimeout> | null
+  longPressTimer: ReturnType<typeof setTimeout> | null
+  activateTime: number
 }
 
-// empty config for when disabled - usePressability still needs to be called
-const emptyConfig = {}
+const DEFAULT_LONG_PRESS_DELAY = 500
+const DEFAULT_MIN_PRESS_DURATION = 130
+
+export function useMainThreadPressEvents(
+  events: any,
+  viewProps: any,
+  enabled = true,
+  debugName?: string | null
+) {
+  const ref = useRef<PressRef>(null as any)
+  if (!ref.current) {
+    ref.current = {
+      state: 'idle',
+      pressInTimer: null,
+      pressOutTimer: null,
+      longPressTimer: null,
+      activateTime: 0,
+    }
+  }
+
+  if (!enabled || !events) return
+
+  const delayPressIn = Math.max(0, events.delayPressIn ?? 0)
+  const delayPressOut = Math.max(0, events.delayPressOut ?? 0)
+  const delayLongPress = Math.max(0, events.delayLongPress ?? DEFAULT_LONG_PRESS_DELAY)
+  const minPressDuration = Math.max(
+    0,
+    events.minPressDuration ?? DEFAULT_MIN_PRESS_DURATION
+  )
+
+  function activate(e: any) {
+    ref.current.state = 'active'
+    ref.current.activateTime = Date.now()
+    events.onPressIn?.(e)
+  }
+
+  function deactivate(e: any) {
+    const pressDuration = Date.now() - ref.current.activateTime
+    const remaining = Math.max(minPressDuration - pressDuration, delayPressOut)
+
+    if (remaining > 0) {
+      ref.current.pressOutTimer = setTimeout(() => {
+        events.onPressOut?.(e)
+      }, remaining)
+    } else {
+      events.onPressOut?.(e)
+    }
+  }
+
+  function cleanup() {
+    if (ref.current.pressInTimer) clearTimeout(ref.current.pressInTimer)
+    if (ref.current.pressOutTimer) clearTimeout(ref.current.pressOutTimer)
+    if (ref.current.longPressTimer) clearTimeout(ref.current.longPressTimer)
+    ref.current.pressInTimer = null
+    ref.current.pressOutTimer = null
+    ref.current.longPressTimer = null
+  }
+
+  viewProps.onStartShouldSetResponder = () => !events.disabled
 
-let usePressability: any = null
+  viewProps.onResponderGrant = (e: any) => {
+    cleanup()
+    ref.current.state = 'pressing'
 
-export function useMainThreadPressEvents(events: any, viewProps: any, enabled = true) {
-  usePressability ||=
-    require('react-native/Libraries/Pressability/usePressability').default
+    if (delayPressIn > 0) {
+      ref.current.pressInTimer = setTimeout(() => activate(e), delayPressIn)
+    } else {
+      activate(e)
+    }
 
-  // always call the hook to maintain consistent hook order
-  const pressability = usePressability(enabled ? events : emptyConfig)
+    if (events.onLongPress) {
+      ref.current.longPressTimer = setTimeout(() => {
+        if (ref.current.state === 'active') {
+          ref.current.state = 'longPressed'
+          events.onLongPress?.(e)
+        }
+      }, delayLongPress + delayPressIn)
+    }
+  }
+
+  viewProps.onResponderRelease = (e: any) => {
+    const wasLongPressed = ref.current.state === 'longPressed'
+    cleanup()
+
+    // if pressIn hasn't fired yet (was in delay), fire it now then immediately deactivate
+    if (ref.current.state === 'pressing') {
+      activate(e)
+    }
 
-  if (enabled && pressability) {
-    if (viewProps.hitSlop && events) {
-      events.hitSlop = viewProps.hitSlop
+    if (!wasLongPressed) {
+      events.onPress?.(e)
     }
-    for (const key in pressability) {
-      const og = viewProps[key]
-      const val = pressability[key]
-      viewProps[key] =
-        og && !dontComposePressabilityKeys[key] ? composeEventHandlers(og, val) : val
+
+    deactivate(e)
+    ref.current.state = 'idle'
+  }
+
+  viewProps.onResponderTerminate = (e: any) => {
+    cleanup()
+    if (ref.current.state === 'active' || ref.current.state === 'longPressed') {
+      deactivate(e)
     }
+    ref.current.state = 'idle'
+  }
+
+  viewProps.onResponderTerminationRequest = () => {
+    return events.cancelable !== false
+  }
+
+  viewProps.onResponderMove = (e: any) => {
+    events.onPressMove?.(e)
   }
 }

package/src/helpers/mainThreadPressEvents.ts

@@ -2,5 +2,6 @@
 export function useMainThreadPressEvents(
   _events: any,
   _viewProps: any,
-  _enabled?: boolean
+  _enabled?: boolean,
+  _debugName?: string | null
 ) {}

package/src/helpers/normalizeColor.ts

@@ -1,17 +1,16 @@
-// web-only: use color-mix for opacity, no parsing needed
-// browsers handle named colors, hex, rgb, hsl natively
+// web: use color-mix for opacity (CSS-native, works with variables and named colors)
+// animation drivers that need rgba handle their own conversion
+
+import { normalizeCSSColor, rgba } from '@tamagui/normalize-css-color'
 
 export const normalizeColor = (color?: string | null, opacity?: number) => {
   if (!color) return
-  // handle dynamic color objects (from $theme-dark/$theme-light)
   if (typeof color !== 'string') return color
 
-  // convert "transparent" to rgba for animation compatibility (motion.dev requires rgba)
   if (color === 'transparent') {
     return 'rgba(0, 0, 0, 0)'
   }
 
-  // apply opacity via color-mix (widely supported: Chrome 111+, Safari 16.2+, Firefox 113+)
   if (typeof opacity === 'number' && opacity < 1) {
     return `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent)`
   }
@@ -19,7 +18,12 @@ export const normalizeColor = (color?: string | null, opacity?: number) => {
   return color
 }
 
-// stub for native compat - native uses normalizeColor.native.ts which has real impl
 export const getRgba = (
-  _color: string
-): { r: number; g: number; b: number; a: number } | undefined => undefined
+  color: string
+): { r: number; g: number; b: number; a: number } | undefined => {
+  if (typeof color !== 'string') return
+  const colorNum = normalizeCSSColor(color)
+  if (colorNum != null) {
+    return rgba(colorNum)
+  }
+}

package/src/helpers/normalizeStyle.ts

@@ -3,6 +3,7 @@ import { fixStyles } from './expandStyles'
 import { isObj } from './isObj'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import { pseudoDescriptors } from './pseudoDescriptors'
+import { styleOriginalValues } from './styleOriginalValues'
 
 /**
  * This is what you want to run before Object.assign() a style onto another.
@@ -14,29 +15,50 @@ import { pseudoDescriptors } from './pseudoDescriptors'
 
 export function normalizeStyle(style: Record<string, any>, disableNormalize = false) {
   const res: Record<string, any> = {}
+  const originalValues = styleOriginalValues.get(style)
+  let nextOriginalValues: Record<string, any> | undefined
 
   for (let key in style) {
     const prop = style[key]
     if (prop == null) continue
+    const originalValue = originalValues?.[key]
     if (
       key in pseudoDescriptors ||
       // this should capture all parent-based styles like media, group, etc
       (key[0] === '$' && isObj(prop))
     ) {
       res[key] = normalizeStyle(prop, disableNormalize)
+      if (originalValue !== undefined) {
+        nextOriginalValues ||= {}
+        nextOriginalValues[key] = originalValue
+      }
       continue
     }
     const value = disableNormalize ? prop : normalizeValueWithProperty(prop, key)
     // expand react-native shorthands
     const out = expandStyle(key, value)
     if (out) {
-      Object.assign(res, Object.fromEntries(out))
+      for (const [nextKey, nextValue] of out) {
+        res[nextKey] = nextValue
+        if (originalValue !== undefined) {
+          nextOriginalValues ||= {}
+          nextOriginalValues[nextKey] = originalValue
+        }
+      }
     } else {
       res[key] = value
+      if (originalValue !== undefined) {
+        nextOriginalValues ||= {}
+        nextOriginalValues[key] = originalValue
+      }
     }
   }
 
   fixStyles(res)
 
+  if (nextOriginalValues) {
+    styleOriginalValues.set(res, nextOriginalValues)
+  }
+
   return res
 }

package/src/helpers/parseNativeStyle.ts

@@ -57,7 +57,8 @@ function parseBackgroundImage(css: string, tokenMap?: TokenMap): any[] | undefin
 
   const colorStops: any[] = []
   for (let i = startIdx; i < parts.length; i++) {
-    const stopParts = parts[i].trim().split(/\s+/)
+    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)
@@ -69,7 +70,7 @@ function parseBackgroundImage(css: string, tokenMap?: TokenMap): any[] | undefin
   }
 
   const gradient: any = {
-    type: 'linearGradient',
+    type: 'linear-gradient',
     colorStops,
   }
   if (direction) {
@@ -177,18 +178,16 @@ function parseDimension(s: string): number | undefined {
 function splitOutsideParens(s: string): string[] {
   const parts: string[] = []
   let depth = 0
-  let current = ''
+  let start = 0
   for (let i = 0; i < s.length; i++) {
-    const ch = s[i]
-    if (ch === '(') depth++
-    else if (ch === ')') depth--
-    if (ch === ',' && depth === 0) {
-      parts.push(current)
-      current = ''
-    } else {
-      current += ch
+    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
     }
   }
-  if (current) parts.push(current)
+  parts.push(s.slice(start))
   return parts
 }