@tamagui/web 2.0.0-rc.3 → 2.0.0-rc.31

package/src/helpers/propMapper.ts

@@ -1,11 +1,8 @@
 import { isAndroid } from '@tamagui/constants'
-import { tokenCategories } from '@tamagui/helpers'
-import { getConfig } from '../config'
 import { getVariableValue, isVariable } from '../createVariable'
 import type {
   GetStyleState,
   PropMapper,
-  ResolveVariableAs,
   SplitStyleProps,
   StyleResolver,
   TamaguiInternalConfig,
@@ -13,20 +10,29 @@ import type {
   VariantSpreadFunction,
 } from '../types'
 import { expandStyle } from './expandStyle'
+import {
+  getLastFontFamilyToken,
+  getTokenForKey,
+  resolveVariableValue,
+  setLastFontFamilyToken,
+} from './getTokenForKey'
 import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
 import { isObj } from './isObj'
 import { normalizeStyle } from './normalizeStyle'
+import { parseNativeStyle } from './parseNativeStyle'
 import { pseudoDescriptors } from './pseudoDescriptors'
+import { resolveCompoundTokens } from './resolveCompoundTokens'
 import { isRemValue, resolveRem } from './resolveRem'
-// import { resolveSafeAreaValue } from './resolveSafeArea'
 import { skipProps } from './skipProps'
 
+export { getTokenForKey } from './getTokenForKey'
+
 export const propMapper: PropMapper = (key, value, styleState, disabled, map) => {
   if (disabled) {
     return map(key, value)
   }
 
-  lastFontFamilyToken = null
+  setLastFontFamilyToken(null)
 
   if (!(process.env.TAMAGUI_TARGET === 'native' && isAndroid)) {
     // this shouldnt be necessary and handled in the outer loop
@@ -57,26 +63,14 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
   const originalValue = value
 
   if (value != null) {
-    if (typeof value === 'string' && value[0] === '$') {
-      value = getTokenForKey(key, value, styleProps, styleState)
-    } else if (
-      (key === 'boxShadow' ||
-        key === 'textShadow' ||
-        key === 'filter' ||
-        key === 'backgroundImage' ||
-        key === 'border') &&
-      typeof value === 'string' &&
-      value.includes('$')
-    ) {
-      // boxShadow/filter/backgroundImage/border with embedded $tokens - resolve each token
-      // Try size first (for dimensions), then color (for the color value)
-      value = value.replace(/(\$[\w.-]+)/g, (t) => {
-        let r = getTokenForKey('size', t, styleProps, styleState)
-        if (r == null) {
-          r = getTokenForKey('color', t, styleProps, styleState)
-        }
-        return r != null ? String(r) : t
-      })
+    if (typeof value === 'string') {
+      if (value[0] === '$') {
+        value = getTokenForKey(key, value, styleProps, styleState)
+      } else {
+        const resolved = resolveCompoundTokens(key, value, styleProps, styleState)
+        value =
+          resolved !== value ? resolved : isRemValue(value) ? resolveRem(value) : value
+      }
     } else if (isVariable(value)) {
       value = resolveVariableValue(key, value, styleProps.resolveValues)
     } else if (isRemValue(value)) {
@@ -84,9 +78,31 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
     }
   }
 
+  // on native, parse string backgroundImage/boxShadow/textShadow to RN object format
+  // this handles both token-resolved strings and plain strings without tokens
+  if (
+    process.env.TAMAGUI_TARGET === 'native' &&
+    value != null &&
+    typeof value === 'string' &&
+    (key === 'backgroundImage' || key === 'boxShadow' || key === 'textShadow')
+  ) {
+    const parsed = parseNativeStyle(key, value)
+    if (parsed) {
+      // textShadow returns [key, value] pairs to expand into separate properties
+      if (key === 'textShadow' && Array.isArray(parsed) && Array.isArray(parsed[0])) {
+        for (const [nkey, nvalue] of parsed) {
+          map(nkey, nvalue, originalValue)
+        }
+        return
+      }
+      value = parsed
+    }
+  }
+
   if (value != null) {
-    if (key === 'fontFamily' && lastFontFamilyToken) {
-      styleState.fontFamily = lastFontFamilyToken
+    const fontToken = getLastFontFamilyToken()
+    if (key === 'fontFamily' && fontToken) {
+      styleState.fontFamily = fontToken
     }
 
     const expanded = styleProps.noExpand ? null : expandStyle(key, value)
@@ -114,7 +130,7 @@ const resolveVariants: StyleResolver = (
   const { variants } = staticConfig
   if (!variants) return
 
-  let variantValue = getVariantDefinition(variants[key], value, conf)
+  let variantValue = getVariantDefinition(variants[key], value, conf, styleState)
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     console.groupCollapsed(`♦️♦️♦️ resolve variant ${key}`)
@@ -192,7 +208,7 @@ const resolveVariants: StyleResolver = (
 
     // store any changed font family (only support variables for now)
     if (fontFamilyResult && fontFamilyResult[0] === '$') {
-      lastFontFamilyToken = getVariableValue(fontFamilyResult)
+      setLastFontFamilyToken(getVariableValue(fontFamilyResult))
     }
 
     return next
@@ -269,7 +285,6 @@ const resolveTokensAndVariants: StyleResolver<object> = (
         // eg: { variants: { flex: { true: { flex: 2 } } } }
         if (parentVariantKey && parentVariantKey === key) {
           res[subKey] =
-            // SYNC WITH *1
             val[0] === '$' ? getTokenForKey(subKey, val, styleProps, styleState) : val
         } else {
           const variantOut = resolveVariants(subKey, val, styleProps, styleState, key)
@@ -301,15 +316,12 @@ const resolveTokensAndVariants: StyleResolver<object> = (
     }
 
     if (typeof val === 'string') {
-      // SYNC WITH *1
       const fVal =
         val[0] === '$'
           ? getTokenForKey(subKey, val, styleProps, styleState)
-          : isRemValue(val)
-            ? resolveRem(val)
-            : val
+          : resolveCompoundTokens(subKey, val, styleProps, styleState)
 
-      res[subKey] = fVal
+      res[subKey] = fVal === val && isRemValue(val) ? resolveRem(val) : fVal
       continue
     }
 
@@ -351,7 +363,12 @@ const tokenCats = ['size', 'color', 'radius', 'space', 'zIndex'].map((name) => (
 }))
 
 // goes through specificity finding best matching variant function
-function getVariantDefinition(variant: any, value: any, conf: TamaguiInternalConfig) {
+function getVariantDefinition(
+  variant: any,
+  value: any,
+  conf: TamaguiInternalConfig,
+  { theme }: Partial<GetStyleState>
+) {
   if (!variant) return
   if (typeof variant === 'function') {
     return variant
@@ -363,8 +380,18 @@ function getVariantDefinition(variant: any, value: any, conf: TamaguiInternalCon
   if (value != null) {
     const { tokensParsed } = conf
     for (const { name, spreadName } of tokenCats) {
-      if (spreadName in variant && name in tokensParsed && value in tokensParsed[name]) {
-        return variant[spreadName]
+      if (spreadName in variant) {
+        // check tokens first
+        if (name in tokensParsed && value in tokensParsed[name]) {
+          return variant[spreadName]
+        }
+        // or check theme (only color lives in theme, others are in tokens)
+        if (name === 'color' && theme && typeof value === 'string' && value[0] === '$') {
+          const themeKey = value.slice(1)
+          if (themeKey in theme) {
+            return variant[spreadName]
+          }
+        }
       }
     }
     const fontSizeVariant = variant['...fontSize']
@@ -375,186 +402,3 @@ function getVariantDefinition(variant: any, value: any, conf: TamaguiInternalCon
   // fallback to catch all | size
   return variant[`:${typeof value}`] || variant['...']
 }
-
-const fontShorthand = {
-  fontSize: 'size',
-  fontWeight: 'weight',
-}
-
-let lastFontFamilyToken: any = null
-let didLogMissingToken = false
-
-export const getTokenForKey = (
-  key: string,
-  value: string,
-  styleProps: SplitStyleProps,
-  styleState: Partial<GetStyleState>
-) => {
-  let resolveAs = styleProps.resolveValues || 'none'
-
-  if (resolveAs === 'none') {
-    return value
-  }
-
-  // handle safe area tokens: $safeAreaTop, $safeAreaBottom, $safeAreaLeft, $safeAreaRight
-  // const safeAreaValue = resolveSafeAreaValue(value)
-  // if (safeAreaValue !== undefined) {
-  //   return safeAreaValue
-  // }
-
-  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
-          lastFontFamilyToken = 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) {
-    const out = resolveVariableValue(key, valOrVar, resolveAs)
-    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`)
-  }
-}
-
-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/pseudoTransitions.ts

@@ -0,0 +1,97 @@
+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/resolveAnimationDriver.ts

@@ -0,0 +1,23 @@
+import type { AnimationDriver } from '../types'
+
+/**
+ * Resolves a value that might be an AnimationDriver or a multi-driver config object
+ * like { default: motionDriver, css: cssDriver } into an actual AnimationDriver.
+ */
+export function resolveAnimationDriver(
+  driver: AnimationDriver | Record<string, AnimationDriver> | null | undefined
+): AnimationDriver | null {
+  if (!driver) return null
+  // valid driver
+  if (typeof (driver as any).useAnimations === 'function') {
+    return driver as AnimationDriver
+  }
+  // multi-driver object - extract default
+  if (
+    'default' in driver &&
+    typeof (driver as any).default?.useAnimations === 'function'
+  ) {
+    return (driver as any).default
+  }
+  return null
+}

package/src/helpers/resolveCompoundTokens.ts

@@ -0,0 +1,28 @@
+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/helpers/skipProps.ts

@@ -9,6 +9,7 @@ export const skipProps = {
   transition: 1,
   space: 1,
   animateOnly: 1,
+  animatedBy: 1,
   disableClassName: 1,
   debug: 1,
   componentName: 1,

package/src/helpers/themeable.tsx

@@ -13,6 +13,8 @@ export function themeable<ComponentType extends (props: any) => any>(
     props: ThemeableProps,
     ref
   ) {
+    'use no memo'
+
     const userDefaults = getDefaultProps(staticConfig, props.componentName)
     const defaultTheme = userDefaults?.theme
     const defaultResetTheme = userDefaults?.themeReset
@@ -24,7 +26,7 @@ export function themeable<ComponentType extends (props: any) => any>(
       for (const key in context.props) {
         const val = props[key]
         if (val !== undefined) {
-          overriddenContextProps ||= {}
+          overriddenContextProps = overriddenContextProps || {}
           overriddenContextProps[key] = val
         }
       }
@@ -48,19 +50,19 @@ export function themeable<ComponentType extends (props: any) => any>(
 
     const compName = componentName || staticConfig?.componentName
     if (compName) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.componentName = compName
     }
     if ('debug' in props) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.debug = props.debug
     }
     if ('theme' in props || defaultTheme) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.name = 'theme' in props ? props.theme : defaultTheme
     }
     if ('themeReset' in props || defaultResetTheme) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.reset = 'themeReset' in props ? themeReset : defaultResetTheme
     }
 

package/src/helpers/useRenderElement.tsx

@@ -31,6 +31,13 @@ export function evaluateRenderProp(
 
   // String tag - swap element type, reuse props from defaultElement
   if (typeof render === 'string') {
+    // on native, ignore lowercase tags (html/jsx elements like "div", "span")
+    if (
+      process.env.TAMAGUI_TARGET === 'native' &&
+      render[0] === render[0].toLowerCase()
+    ) {
+      return defaultElement
+    }
     return createElement(render, props, defaultChildren)
   }
 

package/src/hooks/useComponentState.ts

@@ -27,6 +27,8 @@ export const useComponentState = (
   staticConfig: StaticConfig,
   config: TamaguiInternalConfig
 ) => {
+  'use no memo'
+
   const isHydrated = useDidFinishSSR()
   const needsHydration = !useIsClientOnly()
 
@@ -53,10 +55,8 @@ export const useComponentState = (
     (props.style && hasAnimatedStyleValue(props.style))
   )
 
-  // for backwards compat, derive from supportsCSS if new props not set
-  const inputStyle =
-    animationDriver?.inputStyle ?? (animationDriver?.supportsCSS ? 'css' : 'inline')
-  const supportsCSS = inputStyle === 'css'
+  const inputStyle = animationDriver?.inputStyle ?? 'css'
+  const outputStyle = animationDriver?.outputStyle ?? 'css'
   const curStateRef = stateRef.current
 
   if (!needsHydration && hasAnimationProp) {
@@ -92,7 +92,9 @@ export const useComponentState = (
   const hasEnterStyle = !!props.enterStyle
 
   const hasAnimationThatNeedsHydrate =
-    hasAnimationProp && !isHydrated && (animationDriver?.isReactNative || !supportsCSS)
+    hasAnimationProp &&
+    !isHydrated &&
+    (animationDriver?.isReactNative || inputStyle !== 'css')
 
   const canImmediatelyEnter = hasEnterStyle || isEntering
 
@@ -206,8 +208,8 @@ export const useComponentState = (
       const isDisabledManually = disableClassName && !state.unmounted
 
       if (
-        // Only disable className for animation drivers that need inline styles
-        (isAnimatedAndHydrated && !animationDriver?.classNameAnimation) ||
+        // Only disable className for animation drivers that output inline styles (not css)
+        (isAnimatedAndHydrated && outputStyle !== 'css') ||
         isDisabledManually ||
         isClassNameDisabled
       ) {
@@ -241,7 +243,8 @@ export const useComponentState = (
     noClass,
     state,
     stateRef,
-    supportsCSS,
+    inputStyle,
+    outputStyle,
     willBeAnimated,
     willBeAnimatedClient,
   }