@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/src/helpers/nativeTransitionTarget.native.ts

@@ -0,0 +1,22 @@
+import { Platform } from 'react-native'
+import type { NativeTransitionTarget } from '@tamagui/style-grammar/runtime'
+
+// the native transition capability matrix is version-gated with NO default:
+// an unknown React Native minor is a diagnostic upstream, never a guessed
+// literal (CODEX-1's recorded wiring precondition). detection reads the
+// platform's own constants; null means "could not detect".
+export function detectNativeTransitionTarget(): NativeTransitionTarget | null {
+  if (Platform.OS !== 'ios' && Platform.OS !== 'android') return null
+  const version = (Platform.constants as any)?.reactNativeVersion
+  const minor = version?.minor
+  if (typeof minor !== 'number' || !Number.isInteger(minor)) return null
+  const target: NativeTransitionTarget = {
+    platform: Platform.OS,
+    reactNativeMinor: minor,
+  }
+  if (Platform.OS === 'android') {
+    const api = Number(Platform.Version)
+    if (Number.isInteger(api)) target.androidApi = api
+  }
+  return target
+}

package/src/helpers/nativeTransitionTarget.ts

@@ -0,0 +1,6 @@
+import type { NativeTransitionTarget } from '@tamagui/style-grammar/runtime'
+
+// web build: there is no native target to detect
+export function detectNativeTransitionTarget(): NativeTransitionTarget | null {
+  return null
+}

package/src/helpers/normalizeColor.native.ts

@@ -4,9 +4,8 @@ export { 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)
+  // handle dynamic color objects
   if (typeof color !== 'string') return color
-  if (color[0] === '$') return color
 
   const rgbaVal = getRgba(color)
   if (rgbaVal) {
@@ -20,7 +19,7 @@ export const normalizeColor = (color?: string | null, opacity?: number) => {
 }
 
 export const getRgba = (color: string) => {
-  // handle dynamic color objects (from $theme-dark/$theme-light)
+  // handle dynamic color objects
   if (typeof color !== 'string') return
   const colorNum = normalizeCSSColor(color)
   if (colorNum != null) {

package/src/helpers/normalizeColor.ts

@@ -1,7 +1,7 @@
-// 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'
+// web: use color-mix for opacity (CSS-native, works with variables and named
+// colors), so nothing here has to parse a color. animation drivers that need
+// numeric channels handle their own conversion. `getRgba` is native-only, see
+// normalizeColor.native.ts.
 
 export const normalizeColor = (color?: string | null, opacity?: number) => {
   if (!color) return
@@ -17,13 +17,3 @@ export const normalizeColor = (color?: string | null, opacity?: number) => {
 
   return color
 }
-
-export const getRgba = (
-  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/normalizeShadow.native.ts

@@ -1,5 +1,5 @@
 import { defaultOffset } from './defaultOffset'
-import { getRgba, normalizeColor } from './normalizeColor'
+import { getRgba, normalizeColor } from './normalizeColor.native'
 
 export function normalizeShadow({
   shadowColor,

package/src/helpers/normalizeStyle.ts

@@ -1,42 +1,47 @@
+import { isWeb } from '@tamagui/constants'
+import { stylePropsTransform } from '@tamagui/helpers'
+import {
+  addTransformValue,
+  createTransformAccumulator,
+  finalizeTransformAccumulator,
+  type TransformAccumulator,
+} from '@tamagui/style-grammar/runtime'
 import { expandStyle } from './expandStyle'
 import { fixStyles } from './expandStyles'
-import { isObj } from './isObj'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
-import { pseudoDescriptors } from './pseudoDescriptors'
 import { styleOriginalValues } from './styleOriginalValues'
+import { transformsToString } from './transformsToString'
 
 /**
  * This is what you want to run before Object.assign() a style onto another.
  * It does the following:
  *   1. Shorthands into longhands, px = paddingHorizontal
  *   2. Expands flex, borderColor and other properties that can expand into sub-parts
- *   3. Normalizes all sub pseudo-media-etc styles
+ *   3. Preserves original-value provenance across expanded longhands
  */
 
-export function normalizeStyle(style: Record<string, any>, disableNormalize = false) {
+export function normalizeStyle(
+  style: Record<string, any>,
+  disableNormalize = false,
+  mergeTransforms = false
+) {
   const res: Record<string, any> = {}
   const originalValues = styleOriginalValues.get(style)
   let nextOriginalValues: Record<string, any> | undefined
+  let transformAccumulator: TransformAccumulator | 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
-      }
+    if (mergeTransforms && (key === 'transform' || key in stylePropsTransform)) {
+      transformAccumulator ||= createTransformAccumulator()
+      addTransformValue(transformAccumulator, key, prop)
       continue
     }
     const value = disableNormalize ? prop : normalizeValueWithProperty(prop, key)
     // expand react-native shorthands
-    const out = expandStyle(key, value)
+    const out = mergeTransforms ? undefined : expandStyle(key, value)
     if (out) {
       for (const [nextKey, nextValue] of out) {
         res[nextKey] = nextValue
@@ -54,6 +59,12 @@ export function normalizeStyle(style: Record<string, any>, disableNormalize = fa
     }
   }
 
+  if (transformAccumulator) {
+    const transform = finalizeTransformAccumulator(transformAccumulator)
+    res.transform =
+      isWeb && Array.isArray(transform) ? transformsToString(transform) : transform
+  }
+
   fixStyles(res)
 
   if (nextOriginalValues) {

package/src/helpers/normalizeValueWithProperty.ts

@@ -8,21 +8,28 @@ import { stylePropsAll, stylePropsUnitless } from '@tamagui/helpers'
 
 // only doing this on web on native it accepts pixel values
 
-const stylePropsAllPlusTransforms = {
-  ...stylePropsAll,
-  translateX: true,
-  translateY: true,
-}
+// the properties that take a unit: everything normalize can append `px` to.
+// a Set beats a spread object here, which lands in dictionary mode and makes
+// every lookup on this hot path a slow one
+const unitfulProps = new Set(
+  [...Object.keys(stylePropsAll), 'translateX', 'translateY'].filter(
+    (key) => !stylePropsUnitless[key]
+  )
+)
+
+// literal "Npx" values (e.g. fontSize="17px"). react native only accepts
+// numbers, so parse them there; web keeps the string and outputs it as css.
+const pxStringRe = /^-?\d*\.?\d+px$/
 
 export function normalizeValueWithProperty(value: any, property = ''): any {
-  if (!isWeb) return value
-  if (
-    stylePropsUnitless[property] ||
-    (property && !stylePropsAllPlusTransforms[property]) ||
-    typeof value === 'boolean'
-  ) {
+  if (!isWeb) {
+    if (typeof value === 'string' && pxStringRe.test(value)) {
+      return Number.parseFloat(value)
+    }
     return value
   }
+  if (property !== '' && !unitfulProps.has(property)) return value
+  if (typeof value === 'boolean') return value
   if (value && typeof value === 'object') {
     if (typeof value.__getValue === 'function') {
       // resolve Animated.Value objects

package/src/helpers/noteOnce.ts

@@ -0,0 +1,9 @@
+const noted = new Set<string>()
+
+export function noteOnce(message: string): void {
+  if (process.env.NODE_ENV === 'development' && !noted.has(message)) {
+    if (noted.size > 1000) noted.clear()
+    noted.add(message)
+    console.warn(message)
+  }
+}

package/src/helpers/parseBorderShorthand.native.ts

@@ -1,18 +1,14 @@
 import type { PropMappedValue } from '../types'
+import { classifyBorderComponents } from './borderComponents'
 
-// border style keywords
-const borderStyles = new Set([
-  'solid',
-  'dashed',
-  'dotted',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset',
-  'none',
-  'hidden',
-])
+// native width props want numbers: px and unitless become numbers, the CSS
+// width keywords map to their user-agent px values, anything else passes as-is
+export function toNativeBorderWidth(width: string): string | number {
+  if (width === 'thin') return 1
+  if (width === 'medium') return 3
+  if (width === 'thick') return 5
+  return width.endsWith('px') || !/[a-z%]/i.test(width) ? Number.parseFloat(width) : width
+}
 
 // parses CSS border shorthand: "<width> <style> <color>"
 // components can appear in any order, all are optional
@@ -28,46 +24,28 @@ export function parseBorderShorthand(value: string): PropMappedValue | undefined
     ]
   }
 
-  const parts = value.trim().split(/\s+/)
-  let borderWidth: string | number | undefined
-  let borderStyle: string | undefined
-  let borderColor: string | undefined
-
-  for (const part of parts) {
-    // check if it's a border style keyword
-    if (borderStyles.has(part)) {
-      borderStyle = 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)
-      borderWidth = part.endsWith('px') || !part.match(/[a-z%]/i) ? num : part
-    }
-    // otherwise assume it's a color
-    else {
-      borderColor = part
-    }
-  }
+  const { width, style, color } = classifyBorderComponents(value)
 
   const result: PropMappedValue = []
 
   // expand to individual width props (RN doesn't support borderWidth shorthand)
-  if (borderWidth !== undefined) {
-    result.push(['borderTopWidth', borderWidth])
-    result.push(['borderRightWidth', borderWidth])
-    result.push(['borderBottomWidth', borderWidth])
-    result.push(['borderLeftWidth', borderWidth])
+  if (width !== undefined) {
+    const nativeWidth = toNativeBorderWidth(width)
+    result.push(['borderTopWidth', nativeWidth])
+    result.push(['borderRightWidth', nativeWidth])
+    result.push(['borderBottomWidth', nativeWidth])
+    result.push(['borderLeftWidth', nativeWidth])
   }
   // borderStyle is supported as-is on native
-  if (borderStyle !== undefined) {
-    result.push(['borderStyle', borderStyle])
+  if (style !== undefined) {
+    result.push(['borderStyle', style])
   }
   // expand to individual color props (RN doesn't support borderColor shorthand)
-  if (borderColor !== undefined) {
-    result.push(['borderTopColor', borderColor])
-    result.push(['borderRightColor', borderColor])
-    result.push(['borderBottomColor', borderColor])
-    result.push(['borderLeftColor', borderColor])
+  if (color !== undefined) {
+    result.push(['borderTopColor', color])
+    result.push(['borderRightColor', color])
+    result.push(['borderBottomColor', color])
+    result.push(['borderLeftColor', color])
   }
 
   return result.length > 0 ? result : undefined

package/src/helpers/parseNativeStyle.native.ts

@@ -0,0 +1,238 @@
+/**
+ * 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
+}
+
+// the direction grammar React Native itself accepts, sourced from
+// react-native/Libraries/StyleSheet/processBackgroundImage.js — signed and
+// leading-decimal angles, case-insensitive units and keywords. what matters
+// is what React Native reads, not what the CSS spec permits
+const gradientAngle = /^([+-]?\d*\.?\d+)(deg|grad|rad|turn)$/i
+const gradientKeyword =
+  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?$/i
+
+// RN's object path accepts a position as a NUMBER (points) or a string
+// ending in % — mirroring its own getPositionFromCSSValue: px becomes
+// parseFloat points, % stays a string, anything else is not a position
+function gradientPosition(token: string): number | string | undefined {
+  if (/px$/i.test(token)) return Number.parseFloat(token)
+  if (token.endsWith('%')) return token
+  return 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
+
+  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()
+  if (gradientAngle.test(firstPart) || gradientKeyword.test(firstPart)) {
+    direction = firstPart
+    startIdx = 1
+  }
+
+  // tokens classify by what they ARE, never by falling through to the color
+  // slot — the direction, position, and transition-hint misreads were all one
+  // assumption ("any unrecognized token is a color") wearing three costumes
+  const colorStops: any[] = []
+  const stops = parts.slice(startIdx)
+  let prevWasHint = false
+  for (let i = 0; i < stops.length; i++) {
+    const stopParts = stops[i].trim().match(/\S+\([^)]*\)|\S+/g)
+    if (!stopParts) continue
+
+    // a lone position is a transition hint (RN string parser case 4):
+    // {color:null, positions:[n]} — invalid first, last, or after another
+    // hint, which invalidates the gradient exactly as RN and the web do
+    if (stopParts.length === 1) {
+      const hint = gradientPosition(stopParts[0])
+      if (hint !== undefined) {
+        if (i === 0 || i === stops.length - 1 || prevWasHint) return undefined
+        colorStops.push({ color: null, positions: [hint] })
+        prevWasHint = true
+        continue
+      }
+    }
+    prevWasHint = false
+
+    const color = resolveColor(stopParts[0], tokenMap)
+    const stop: any = { color }
+    if (stopParts.length > 1) {
+      const positions: (number | string)[] = []
+      for (let p = 1; p < stopParts.length; p++) {
+        const position = gradientPosition(stopParts[p])
+        if (position === undefined) return undefined
+        positions.push(position)
+      }
+      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 (css units are case-insensitive)
+  const cleaned = s.replace(/px$|dp$/i, '')
+  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/parseNativeTransform.native.ts

@@ -0,0 +1,35 @@
+export function parseNativeTransform(raw: string): any[] | null {
+  const out: any[] = []
+  const pattern = /([A-Za-z][\w]*)\(([^()]*)\)/g
+  let end = 0
+  let match: RegExpExecArray | null
+  while ((match = pattern.exec(raw))) {
+    if (raw.slice(end, match.index).trim().replace(/^,/, '').trim()) return null
+    end = pattern.lastIndex
+    const name = match[1]
+    const values = match[2].split(/\s*,\s*|\s+/).filter(Boolean)
+    if (!values.length) return null
+    const converted: (string | number)[] = []
+    for (const value of values) {
+      converted.push(
+        /^-?(?:\d+\.?\d*|\.\d+)(?:px|dp)$/i.test(value)
+          ? Number.parseFloat(value)
+          : /^-?(?:\d+\.?\d*|\.\d+)$/.test(value)
+            ? Number(value)
+            : value
+      )
+    }
+    if (name === 'translate' && converted.length > 1) {
+      out.push({ translateX: converted[0] }, { translateY: converted[1] })
+    } else if (
+      name === 'scale' &&
+      converted.length > 1 &&
+      converted[0] !== converted[1]
+    ) {
+      out.push({ scaleX: converted[0] }, { scaleY: converted[1] })
+    } else {
+      out.push({ [name]: converted[0] })
+    }
+  }
+  return end && !raw.slice(end).trim() ? out : null
+}

package/src/helpers/parseOutlineShorthand.native.ts

@@ -1,18 +1,6 @@
 import type { PropMappedValue } from '../types'
-
-// outline style keywords
-const outlineStyles = new Set([
-  'solid',
-  'dashed',
-  'dotted',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset',
-  'none',
-  'hidden',
-])
+import { classifyBorderComponents } from './borderComponents'
+import { toNativeBorderWidth } from './parseBorderShorthand.native'
 
 // parses CSS outline shorthand: "<width> <style> <color>"
 // components can appear in any order, all are optional
@@ -25,37 +13,18 @@ export function parseOutlineShorthand(value: string): PropMappedValue | undefine
     ]
   }
 
-  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 { width, style, color } = classifyBorderComponents(value, true)
 
   const result: PropMappedValue = []
 
-  if (outlineWidth !== undefined) {
-    result.push(['outlineWidth', outlineWidth])
+  if (width !== undefined) {
+    result.push(['outlineWidth', toNativeBorderWidth(width)])
   }
-  if (outlineStyle !== undefined) {
-    result.push(['outlineStyle', outlineStyle])
+  if (style !== undefined) {
+    result.push(['outlineStyle', style])
   }
-  if (outlineColor !== undefined) {
-    result.push(['outlineColor', outlineColor])
+  if (color !== undefined) {
+    result.push(['outlineColor', color])
   }
 
   return result.length > 0 ? result : undefined

package/src/helpers/proxyThemeToParents.ts

@@ -5,7 +5,8 @@ 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 +28,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
 }