@tamagui/web 3.0.0-beta.924.1 → 3.0.0

package/src/helpers/nativeOnlyProps.ts

@@ -10,7 +10,6 @@ export const nativeOnlyProps = {
   android_hyphenationFrequency: 1,
   dataDetectorType: 1,
   dynamicTypeRamp: 1,
-  elevationAndroid: 1,
   ellipsizeMode: 1,
   hapticFeedback: 1,
   hapticStyle: 1,

package/src/helpers/nativeTextMetrics.ts

@@ -0,0 +1,77 @@
+import { isVariable } from '../createVariable'
+import { resolveVariableValue } from './resolveVariableValue'
+
+export type NativeTextMetrics = {
+  fontSize?: number
+  inheritsFontSize?: boolean
+  // numbers retain a ratio; lengths retain their unit until host finalization.
+  lineHeight?: number | `${number}px` | 'normal'
+}
+
+export type AnimatedTextChannel = {
+  fontSize: unknown
+  driver: string
+}
+
+export type NativeTextContext = {
+  parentFontSize?: number
+  parentLineHeight?: NativeTextMetrics['lineHeight']
+  animatedText?: AnimatedTextChannel | null
+}
+
+// called after the winning font size and line height are known, on both native frontends.
+export function resolveTextMetrics(
+  style: Record<string, unknown>,
+  lineHeight: unknown,
+  parent?: NativeTextContext,
+  isStatic = false,
+  apply = true
+): NativeTextMetrics {
+  if (isVariable(lineHeight))
+    lineHeight = resolveVariableValue('lineHeight', lineHeight, 'value')
+  let fontSize =
+    typeof style.fontSize === 'number' ? style.fontSize : parent?.parentFontSize
+  const inheritsFontSize = style.fontSize == null && !!parent?.animatedText
+  if (apply && style.fontSize == null && fontSize !== undefined && !inheritsFontSize)
+    style.fontSize = fontSize
+  let leading: NativeTextMetrics['lineHeight']
+  if (lineHeight == null || lineHeight === 'inherit' || lineHeight === 'unset') {
+    leading = parent?.parentLineHeight
+  } else if (lineHeight === 'normal' || lineHeight === 'initial') {
+    leading = 'normal'
+  } else if (typeof lineHeight === 'number') {
+    leading = lineHeight
+  } else if (typeof lineHeight === 'string') {
+    if (/^(?:\d+\.?\d*|\.\d+)px$/.test(lineHeight)) {
+      leading = lineHeight as `${number}px`
+    } else if (lineHeight.trim() !== '' && Number.isFinite(+lineHeight)) {
+      leading = +lineHeight
+    }
+  }
+
+  if (typeof leading === 'number' && (!Number.isFinite(leading) || leading < 0)) {
+    delete style.lineHeight
+    return { fontSize, ...(inheritsFontSize && { inheritsFontSize }) }
+  }
+
+  if (!apply)
+    return {
+      fontSize,
+      lineHeight: leading,
+      ...(inheritsFontSize && { inheritsFontSize }),
+    }
+
+  if (typeof leading === 'number') {
+    if (fontSize === undefined && !isStatic && !inheritsFontSize) {
+      fontSize = 14
+      style.fontSize = fontSize
+    }
+    if (inheritsFontSize || fontSize === undefined) delete style.lineHeight
+    else style.lineHeight = fontSize * leading
+  } else if (leading && leading !== 'normal') {
+    style.lineHeight = Number.parseFloat(leading)
+  } else if (lineHeight != null || leading === 'normal') {
+    delete style.lineHeight
+  }
+  return { fontSize, lineHeight: leading, ...(inheritsFontSize && { inheritsFontSize }) }
+}

package/src/helpers/normalizeColor.native.ts

@@ -2,10 +2,33 @@ import { normalizeCSSColor, rgba } from '@tamagui/normalize-css-color'
 
 export { rgba } from '@tamagui/normalize-css-color'
 
-export const normalizeColor = (color?: string | null, opacity?: number) => {
+// a theme value on native can be a DynamicColorIOS object rather than a string
+type DynamicColor = { dynamic: Record<string, string> }
+
+const isDynamicColor = (color: any): color is DynamicColor =>
+  typeof color.dynamic === 'object' && color.dynamic !== null
+
+export const normalizeColor = (
+  color?: string | DynamicColor | null,
+  opacity?: number
+) => {
   if (!color) return
-  // handle dynamic color objects
-  if (typeof color !== 'string') return color
+  // DynamicColorIOS carries one color per appearance, so an opacity has to reach
+  // each variant. returning the object untouched is what made `$color/50` resolve
+  // to the fully opaque color on native.
+  //
+  // opacity 1 means "no override" here, not "make it opaque": the shadow call
+  // site in getSplitStyles defaults its opacity argument to 1, so applying it
+  // would drop a shadow token's own alpha and paint solid black.
+  if (typeof color !== 'string') {
+    if (opacity === undefined || opacity === 1 || !isDynamicColor(color)) return color
+    const dynamic: Record<string, string> = {}
+    for (const key in color.dynamic) {
+      const variant = normalizeColor(color.dynamic[key], opacity)
+      if (typeof variant === 'string') dynamic[key] = variant
+    }
+    return { ...color, dynamic }
+  }
 
   const rgbaVal = getRgba(color)
   if (rgbaVal) {
@@ -21,7 +44,9 @@ export const normalizeColor = (color?: string | null, opacity?: number) => {
 export const getRgba = (color: string) => {
   // handle dynamic color objects
   if (typeof color !== 'string') return
-  const colorNum = normalizeCSSColor(color)
+  // RN accepts the alpha forms with a slash, but requires the `a` function name.
+  const nativeColor = color.replace(/^(rgb|hsl)\((?=[^)]*\/)/, '$1a(')
+  const colorNum = normalizeCSSColor(nativeColor)
   if (colorNum != null) {
     return rgba(colorNum)
   }

package/src/helpers/normalizeValueWithProperty.ts

@@ -13,7 +13,7 @@ import { stylePropsAll, stylePropsUnitless } from '@tamagui/helpers'
 // every lookup on this hot path a slow one
 const unitfulProps = new Set(
   [...Object.keys(stylePropsAll), 'translateX', 'translateY'].filter(
-    (key) => !stylePropsUnitless[key]
+    (key) => key !== 'lineHeight' && !stylePropsUnitless[key]
   )
 )
 
@@ -23,6 +23,7 @@ const pxStringRe = /^-?\d*\.?\d+px$/
 
 export function normalizeValueWithProperty(value: any, property = ''): any {
   if (!isWeb) {
+    if (property === 'lineHeight') return value
     if (typeof value === 'string' && pxStringRe.test(value)) {
       return Number.parseFloat(value)
     }

package/src/helpers/{parseNativeStyle.native.ts → parseNativeStyle.ts}

@@ -9,6 +9,8 @@
  * so this code is dead-code-eliminated on web builds.
  */
 
+import { normalizeColor } from './normalizeColor'
+
 type TokenMap = Map<string, any>
 
 export function parseNativeStyle(
@@ -32,7 +34,7 @@ function resolveColor(raw: string, tokenMap?: TokenMap): any {
   if (tokenMap && tokenMap.has(raw)) {
     return tokenMap.get(raw)
   }
-  return raw
+  return raw.includes('(') && !raw.includes(',') ? normalizeColor(raw) : raw
 }
 
 // the direction grammar React Native itself accepts, sourced from
@@ -54,6 +56,11 @@ function gradientPosition(token: string): number | string | undefined {
 
 // parse "linear-gradient(direction, color1 pos1, color2 pos2, ...)"
 function parseBackgroundImage(css: string, tokenMap?: TokenMap): any[] | undefined {
+  // React Native represents `background-image: none` as an empty processed
+  // background list. Returning the list here also routes the Tailwind utility
+  // to RN's `experimental_backgroundImage` host key instead of leaking the web
+  // `backgroundImage` alias into native styles.
+  if (css.trim() === 'none') return []
   const match = css.match(/^linear-gradient\((.+)\)$/s)
   if (!match) return undefined
 

package/src/helpers/proxyThemeToParents.ts

@@ -1,11 +1,13 @@
 import type { DedupedThemes, ThemeParsed } from '../types'
+import { copyAuthoredThemeScheme } from './themes'
 
 const themesRaw: Record<string, ThemeParsed> = {}
 
 // this seems expensive but its necessary to do two loops unless we want to refactor a variety of things again
 // not *too* much work but not a big cost doing the two loops
 export function proxyThemesToParents(
-  dedupedThemes: DedupedThemes
+  dedupedThemes: DedupedThemes,
+  declarationOrder?: string[]
 ): Record<string, ThemeParsed> {
   // fill it in so we can look it up next
   for (const { names, theme } of dedupedThemes) {
@@ -27,6 +29,15 @@ export function proxyThemesToParents(
     }
   }
 
+  // dedupedThemes is sorted for deterministic CSS cascade, but TamaguiProvider
+  // falls back to Object.keys(themes)[0] — reorder to match config (#3764)
+  if (declarationOrder) {
+    const ordered: Record<string, ThemeParsed> = {}
+    for (const k of declarationOrder) if (k in themes) ordered[k] = themes[k]
+    for (const k in themes) if (!(k in ordered)) ordered[k] = themes[k]
+    return ordered
+  }
+
   return themes
 }
 
@@ -48,5 +59,5 @@ export function proxyThemeToParents(themeName: string, theme: ThemeParsed) {
     Object.assign(out, themesRaw[parent])
   }
   Object.assign(out, theme)
-  return out
+  return copyAuthoredThemeScheme(out, theme)
 }

package/src/helpers/resolveNativeUnits.native.ts

@@ -0,0 +1,247 @@
+import { Dimensions, PixelRatio } from 'react-native'
+
+export interface UnitContext {
+  windowWidth: number
+  windowHeight: number
+  fontScale: number
+  remBaseFontSize: number
+  containerWidth: number
+  containerHeight: number
+  elementFontSize: number
+  isFontSizeProp: boolean
+}
+
+const UNIT_RE =
+  /^([+-]?\s*\d*\.?\d+)(px|rem|em|[dls]?vw|[dls]?vh|vmin|vmax|cqi|cqw|cqh|cqb)?$/i
+
+export function isDynamicUnitValue(value: unknown): boolean {
+  if (typeof value !== 'string') return false
+  const trimmed = value.trim()
+  if (
+    trimmed.startsWith('clamp(') ||
+    trimmed.startsWith('CLAMP(') ||
+    trimmed.startsWith('calc(') ||
+    trimmed.startsWith('CALC(')
+  )
+    return true
+  // a unit suffix only counts when a number precedes it. matching the suffix
+  // alone turns every word ending in one into a length: 'System' ends in `em`
+  // and resolved to 0, wiping out fontFamily
+  return !!UNIT_RE.exec(trimmed.replace(/\s+/g, ''))?.[2]
+}
+
+function getUnitContext(key: string, styleState?: any): UnitContext {
+  const window = Dimensions.get('window')
+  const fontScale =
+    typeof PixelRatio !== 'undefined' && PixelRatio.getFontScale
+      ? PixelRatio.getFontScale()
+      : 1
+  const remBaseFontSize = styleState?.conf?.settings?.remBaseFontSize ?? 16
+  const isFontSizeProp = key === 'fontSize'
+  const elementFontSize =
+    typeof styleState?.style?.fontSize === 'number'
+      ? styleState.style.fontSize
+      : remBaseFontSize
+
+  // Look up container layout from group context or component state
+  const groupContext = styleState?.flatGroupContext
+  const groupEntry = groupContext?.['@']
+  const groupLayout =
+    groupEntry?.state?.layout || styleState?.componentState?.group?.['@']?.layout
+
+  let containerWidth = groupLayout?.width
+  let containerHeight = groupLayout?.height
+
+  // First-frame seed if unmeasured
+  if (containerWidth === undefined || containerWidth === 0) {
+    const maxWidth =
+      typeof styleState?.style?.maxWidth === 'number'
+        ? styleState.style.maxWidth
+        : undefined
+    containerWidth = Math.min(window.width, maxWidth ?? Infinity)
+  }
+
+  if (containerHeight === undefined || containerHeight === 0) {
+    containerHeight = window.height
+  }
+
+  return {
+    windowWidth: window.width,
+    windowHeight: window.height,
+    fontScale,
+    remBaseFontSize,
+    containerWidth,
+    containerHeight,
+    elementFontSize,
+    isFontSizeProp,
+  }
+}
+
+export function resolveSingleUnit(val: string, ctx: UnitContext): number {
+  const trimmed = val.replace(/\s+/g, '')
+  const match = UNIT_RE.exec(trimmed)
+  if (!match) return Number(trimmed) || 0
+
+  const num = Number.parseFloat(match[1])
+  if (Number.isNaN(num)) return 0
+
+  const unit = (match[2] || 'px').toLowerCase()
+
+  switch (unit) {
+    case 'px':
+      return num
+    case 'rem':
+      // Accessibility: layout props scale with OS fontScale; fontSize leaves scaling to RN Text
+      return num * ctx.remBaseFontSize * (ctx.isFontSizeProp ? 1 : ctx.fontScale)
+    case 'em':
+      return num * ctx.elementFontSize
+    // a native window has no collapsing browser chrome, so the dynamic, large
+    // and small viewports are all the window
+    case 'vw':
+    case 'dvw':
+    case 'lvw':
+    case 'svw':
+      return (num / 100) * ctx.windowWidth
+    case 'vh':
+    case 'dvh':
+    case 'lvh':
+    case 'svh':
+      return (num / 100) * ctx.windowHeight
+    case 'vmin':
+      return (num / 100) * Math.min(ctx.windowWidth, ctx.windowHeight)
+    case 'vmax':
+      return (num / 100) * Math.max(ctx.windowWidth, ctx.windowHeight)
+    case 'cqi':
+    case 'cqw':
+      return (num / 100) * ctx.containerWidth
+    case 'cqh':
+    case 'cqb':
+      return (num / 100) * ctx.containerHeight
+    default:
+      return num
+  }
+}
+
+export function evaluateCalc(expr: string, ctx: UnitContext): number {
+  let s = expr.trim()
+  if (s.toLowerCase().startsWith('calc(') && s.endsWith(')')) {
+    s = s.slice(5, -1).trim()
+  }
+
+  const tokens = s.match(/[()*/+-]|[^\s()*/+-]+/g) || []
+  let pos = 0
+  const peek = () => tokens[pos]
+  const consume = () => tokens[pos++]
+
+  function parseExpression(): number {
+    let left = parseTerm()
+    while (peek() === '+' || peek() === '-') {
+      const op = consume()
+      const right = parseTerm()
+      if (op === '+') left += right
+      else left -= right
+    }
+    return left
+  }
+
+  function parseTerm(): number {
+    let left = parseFactor()
+    while (peek() === '*' || peek() === '/') {
+      const op = consume()
+      const right = parseFactor()
+      if (op === '*') left *= right
+      else left = right !== 0 ? left / right : 0
+    }
+    return left
+  }
+
+  function parseFactor(): number {
+    if (peek() === '+') {
+      consume()
+      return parseFactor()
+    }
+    if (peek() === '-') {
+      consume()
+      return -parseFactor()
+    }
+    return parsePrimary()
+  }
+
+  function parsePrimary(): number {
+    if (peek() === '(') {
+      consume()
+      const val = parseExpression()
+      if (peek() === ')') consume()
+      return val
+    }
+    const token = consume()
+    return token ? resolveSingleUnit(token, ctx) : 0
+  }
+
+  return parseExpression()
+}
+
+export function resolveClamp(val: string, ctx: UnitContext): number {
+  // Extract content between first '(' and last ')'
+  const start = val.indexOf('(')
+  const end = val.lastIndexOf(')')
+  if (start === -1 || end === -1 || end <= start) return 0
+
+  let inner = val.slice(start + 1, end).trim()
+  const args = splitClampArgs(inner)
+  if (args.length < 3) return 0
+
+  const min = resolveSingleUnit(args[0], ctx)
+  const max = resolveSingleUnit(args[2], ctx)
+  const pref = evaluateCalc(args[1], ctx)
+
+  const lower = Math.min(min, max)
+  const upper = Math.max(min, max)
+  return Math.min(Math.max(pref, lower), upper)
+}
+
+function splitClampArgs(inner: string): string[] {
+  const parts: string[] = []
+  let depth = 0
+  let current = ''
+
+  for (let i = 0; i < inner.length; i++) {
+    const char = inner[i]
+    if (char === '(') depth++
+    else if (char === ')') depth--
+
+    if (char === ',' && depth === 0) {
+      parts.push(current.trim())
+      current = ''
+    } else {
+      current += char
+    }
+  }
+
+  if (current.trim()) {
+    parts.push(current.trim())
+  }
+
+  return parts
+}
+
+export function resolveNativeUnits(key: string, value: any, styleState?: any): any {
+  if (typeof value !== 'string') return value
+
+  const trimmed = value.trim()
+  if (!isDynamicUnitValue(trimmed)) {
+    return value
+  }
+
+  const ctx = getUnitContext(key, styleState)
+
+  if (trimmed.startsWith('clamp(') || trimmed.startsWith('CLAMP(')) {
+    return resolveClamp(trimmed, ctx)
+  }
+
+  if (trimmed.startsWith('calc(') || trimmed.startsWith('CALC(')) {
+    return evaluateCalc(trimmed, ctx)
+  }
+
+  return resolveSingleUnit(trimmed, ctx)
+}

package/src/helpers/resolveNativeUnits.ts

@@ -0,0 +1,10 @@
+/**
+ * Web pass-through: browsers resolve clamp(), cqi, vw, and rem natively.
+ */
+export function resolveNativeUnits(_key: string, value: any, _styleState?: any): any {
+  return value
+}
+
+export function isDynamicUnitValue(_value: unknown): boolean {
+  return false
+}

package/src/helpers/resolveRem.native.ts

@@ -1,44 +1,43 @@
 import { PixelRatio } from 'react-native'
 import { getConfig } from '../config'
 
-const remRegex = /(-?[\d.]+)rem/g
+const remRegex = /^-?(\d*\.?\d+)rem$/i
 
 /**
  * Resolves rem values to pixel values on native platforms.
- * Uses PixelRatio.getFontScale() to account for user's font size preferences.
+ * Uses PixelRatio.getFontScale() for layout props (margin, padding, radius).
+ * For fontSize, leaves OS scaling to React Native Text component to avoid double-scaling.
  *
- * @param value - A string value that may contain rem units (e.g., "1.5rem" or "calc(1rem + 2rem)")
+ * @param value - A string value containing rem units (e.g. "1.5rem")
+ * @param isFontSize - Whether the target property is fontSize
  * @returns The numeric pixel value
  */
-export function resolveRem(value: string): number {
-  const config = getConfig()
-  const baseFontSize = config?.settings?.remBaseFontSize ?? 16
-
-  // Handle simple rem value like "1.5rem"
-  if (value.endsWith('rem') && !value.includes(' ')) {
-    const numericValue = Number.parseFloat(value)
-    if (!Number.isNaN(numericValue)) {
-      return PixelRatio.getFontScale() * baseFontSize * numericValue
+export function resolveRem(value: string, isFontSize = false): number {
+  let baseFontSize = 16
+  try {
+    const config = getConfig()
+    if (config?.settings?.remBaseFontSize) {
+      baseFontSize = config.settings.remBaseFontSize
     }
-  }
+  } catch {}
+  const trimmed = value.trim()
+  const match = remRegex.exec(trimmed)
+  if (!match) return 0
 
-  // Handle multiple rem values in a string (e.g., in calc expressions)
-  let result = 0
-  let match: RegExpExecArray | null
-  while ((match = remRegex.exec(value)) !== null) {
-    const numericValue = Number.parseFloat(match[1])
-    if (!Number.isNaN(numericValue)) {
-      result += PixelRatio.getFontScale() * baseFontSize * numericValue
-    }
-  }
-  remRegex.lastIndex = 0 // Reset regex state
+  const numericValue = Number.parseFloat(match[1])
+  if (Number.isNaN(numericValue)) return 0
 
-  return result
+  const scale =
+    isFontSize || typeof PixelRatio === 'undefined' || !PixelRatio.getFontScale
+      ? 1
+      : PixelRatio.getFontScale()
+  const sign = trimmed.startsWith('-') ? -1 : 1
+  return sign * numericValue * baseFontSize * scale
 }
 
 /**
- * Checks if a value is a rem string
+ * Checks if a value is a strict rem string (e.g. "1.5rem", "-0.5rem")
  */
 export function isRemValue(value: unknown): value is string {
-  return typeof value === 'string' && value.includes('rem')
+  return typeof value === 'string' && remRegex.test(value.trim())
 }