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

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

@@ -20,7 +20,8 @@ const emptyConfig = {}
 let usePressability: any = null
 
 export function useMainThreadPressEvents(events: any, viewProps: any, enabled = true) {
-  usePressability ||=
+  usePressability =
+    usePressability ||
     require('react-native/Libraries/Pressability/usePressability').default
 
   // always call the hook to maintain consistent hook order

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

package/src/helpers/parseNativeStyle.ts

@@ -0,0 +1,193 @@
+/**
+ * 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/parseOutlineShorthand.native.ts

@@ -0,0 +1,62 @@
+import type { PropMappedValue } from '../types'
+
+// outline style keywords
+const outlineStyles = new Set([
+  'solid',
+  'dashed',
+  'dotted',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+  'none',
+  'hidden',
+])
+
+// parses CSS outline shorthand: "<width> <style> <color>"
+// components can appear in any order, all are optional
+// on native, expands directly to individual outline properties
+export function parseOutlineShorthand(value: string): PropMappedValue | undefined {
+  if (value === 'none' || value === '0') {
+    return [
+      ['outlineWidth', 0],
+      ['outlineStyle', 'none'],
+    ]
+  }
+
+  const parts = value.trim().split(/\s+/)
+  let outlineWidth: string | number | undefined
+  let outlineStyle: string | undefined
+  let outlineColor: string | undefined
+
+  for (const part of parts) {
+    // check if it's an outline style keyword
+    if (outlineStyles.has(part)) {
+      outlineStyle = part
+    }
+    // check if it's a length (number or ends with px/em/rem/etc)
+    else if (/^[\d.]+(?:px|em|rem|%|pt|vw|vh)?$/.test(part)) {
+      const num = parseFloat(part)
+      outlineWidth = part.endsWith('px') || !part.match(/[a-z%]/i) ? num : part
+    }
+    // otherwise assume it's a color
+    else {
+      outlineColor = part
+    }
+  }
+
+  const result: PropMappedValue = []
+
+  if (outlineWidth !== undefined) {
+    result.push(['outlineWidth', outlineWidth])
+  }
+  if (outlineStyle !== undefined) {
+    result.push(['outlineStyle', outlineStyle])
+  }
+  if (outlineColor !== undefined) {
+    result.push(['outlineColor', outlineColor])
+  }
+
+  return result.length > 0 ? result : undefined
+}

package/src/helpers/parseOutlineShorthand.ts

@@ -0,0 +1,6 @@
+import type { PropMappedValue } from '../types'
+
+// no-op on web - outline shorthand is passed through as CSS
+export function parseOutlineShorthand(_value: string): PropMappedValue | undefined {
+  return undefined
+}

package/src/helpers/platformResolveValue.native.ts

@@ -0,0 +1,72 @@
+import type { GetStyleState, SplitStyleProps } from '../types'
+import { getTokenForKey } from './getTokenForKey'
+import { parseNativeStyle } from './parseNativeStyle'
+
+const tokenPattern = /(\$[\w.-]+)/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)
+}