@tamagui/web 2.0.0-rc.4 → 2.0.0-rc.40

package/src/helpers/getThemeCSSRules.ts

@@ -113,13 +113,10 @@ export function getThemeCSSRules(props: {
     const selectorsString =
       selectors
         .map((x) => {
-          const rootSep =
-            isBaseTheme(x) &&
-            (getSetting('addThemeClassName') === 'html' ||
-              getSetting('addThemeClassName') === 'body')
-              ? ''
-              : ' '
-          return `:root${rootSep}${x}`
+          const addTo = getSetting('addThemeClassName')
+          const isOnRoot = isBaseTheme(x) && (addTo === 'html' || addTo === 'body')
+          if (!isOnRoot) return `:root ${x}`
+          return `${addTo === 'body' ? 'body' : ':root'}${x}`
         })
         .join(', ') + `, .tm_xxt`
 
@@ -127,11 +124,6 @@ export function getThemeCSSRules(props: {
     cssRuleSets.push(css)
 
     if (getSetting('shouldAddPrefersColorThemes')) {
-      const bgString = theme.background
-        ? `background:${variableToString(theme.background)};`
-        : ''
-      const fgString = theme.color ? `color:${variableToString(theme.color)}` : ''
-      const bodyRules = `body{${bgString}${fgString}}`
       const isDark = themeName.startsWith('dark')
       const baseName = isDark ? 'dark' : 'light'
       const lessSpecificSelectors = selectors
@@ -148,10 +140,20 @@ export function getThemeCSSRules(props: {
         .filter(Boolean)
         .join(', ')
 
+      // only emit body background/color for base themes, not every sub-theme
+      const isBase = !themeName.includes('_')
+      let bodyRulesString = ''
+      if (isBase) {
+        const bgString = theme.background
+          ? `background:${variableToString(theme.background)};`
+          : ''
+        const fgString = theme.color ? `color:${variableToString(theme.color)}` : ''
+        bodyRulesString = bgString || fgString ? `body{${bgString}${fgString}}\n    ` : ''
+      }
+
       const themeRules = `${lessSpecificSelectors} {${vars}}`
       const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
-    ${bodyRules}
-    ${themeRules}
+    ${bodyRulesString}${themeRules}
   }`
       cssRuleSets.push(prefersMediaSelectors)
     }

package/src/helpers/getTokenForKey.ts

@@ -0,0 +1,223 @@
+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
+
+// 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
+        }
+      }
+      for (const cat in tokenCategories) {
+        if (key in tokenCategories[cat]) {
+          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/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/mediaObjectToString.ts

@@ -0,0 +1,30 @@
+import type { MediaQueryObject } from '../types'
+
+function camelToHyphen(str: string) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()
+}
+
+const cache = new WeakMap<any, string>()
+
+export function mediaObjectToString(query: string | MediaQueryObject) {
+  if (typeof query === 'string') {
+    return query
+  }
+  if (cache.has(query)) {
+    return cache.get(query)!
+  }
+  const res = Object.entries(query)
+    .map(([feature, value]) => {
+      feature = camelToHyphen(feature)
+      if (typeof value === 'string') {
+        return `(${feature}: ${value})`
+      }
+      if (typeof value === 'number' && /[height|width]$/.test(feature)) {
+        value = `${value}px`
+      }
+      return `(${feature}: ${value})`
+    })
+    .join(' and ')
+  cache.set(query, res)
+  return res
+}

package/src/helpers/mediaState.ts

@@ -0,0 +1,32 @@
+import type { MediaQueries, MediaQueryState } from '../types'
+
+export let mediaState: MediaQueryState =
+  // development only safeguard
+  process.env.NODE_ENV === 'development'
+    ? new Proxy(
+        {},
+        {
+          get(target, key) {
+            if (
+              typeof key === 'string' &&
+              key[0] === '$' &&
+              // dont error on $$typeof
+              key[1] !== '$'
+            ) {
+              throw new Error(`Access mediaState should not use "$": ${key}`)
+            }
+            return Reflect.get(target, key)
+          },
+        }
+      )
+    : ({} as any)
+
+export const setMediaState = (next: MediaQueryState) => {
+  mediaState = next
+}
+
+export const mediaQueryConfig: MediaQueries = {}
+
+export const getMedia = () => mediaState
+
+export const mediaKeys = new Set<string>() // with $ prefix

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/normalizeValueWithProperty.ts

@@ -23,8 +23,15 @@ export function normalizeValueWithProperty(value: any, property = ''): any {
   ) {
     return value
   }
+  if (value && typeof value === 'object') {
+    if (typeof value.__getValue === 'function') {
+      // resolve Animated.Value objects
+      value = value.__getValue()
+    } else {
+      return value
+    }
+  }
   let res = value
-  if (value && typeof value === 'object') return value
   if (typeof value === 'number') {
     res = `${value}px`
   } else if (property) {