@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/helpers/propMapper.ts

@@ -1,5 +1,6 @@
 import { isAndroid } from '@tamagui/constants'
-import { getVariableValue, isVariable } from '../createVariable'
+import { scanFlatValue } from '@tamagui/style-grammar/runtime'
+import { isVariable } from '../createVariable'
 import type {
   GetStyleState,
   PropMapper,
@@ -9,32 +10,39 @@ import type {
   Variable,
   VariantSpreadFunction,
 } from '../types'
+import { variantResolverNames } from '../types'
+import { getCondition } from './directStyle'
 import { expandStyle } from './expandStyle'
-import {
-  getLastFontFamilyToken,
-  getTokenForKey,
-  resolveVariableValue,
-  setLastFontFamilyToken,
-} from './getTokenForKey'
+import { resolveVariableValue } from './resolveVariableValue'
 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 { expandSafeAreaValue, isSafeAreaKey } from './resolveSafeArea'
 import { skipProps } from './skipProps'
 import { styleOriginalValues } from './styleOriginalValues'
 
-export { getTokenForKey } from './getTokenForKey'
+// reduces a conditional variant clause back to flat-value string form
+// (`"20 sm:40"`) so the ordinary string parser applies it downstream. returns
+// undefined when either side is not string-representable, so the caller can
+// drop the clause with a diagnostic instead of emitting garbage
+export function appendFlatClause(
+  prev: unknown,
+  conditionSource: string,
+  value: unknown
+): string | undefined {
+  if (prev != null && typeof prev !== 'string' && typeof prev !== 'number') return
+  if (typeof value !== 'string' && typeof value !== 'number') return
+  return prev == null
+    ? `${conditionSource}:${value}`
+    : `${prev} ${conditionSource}:${value}`
+}
 
 export const propMapper: PropMapper = (key, value, styleState, disabled, map) => {
   if (disabled) {
     return map(key, value)
   }
 
-  setLastFontFamilyToken(null)
-
   if (!(process.env.TAMAGUI_TARGET === 'native' && isAndroid)) {
     // this shouldnt be necessary and handled in the outer loop
     if (key === 'elevationAndroid') return
@@ -70,9 +78,9 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
     if (variants && key in variants) {
       const variantValue = resolveVariants(key, value, styleProps, styleState, '')
       if (variantValue) {
-        variantValue.forEach(([key, value, originalValue]) => {
-          map(key, value, originalValue)
-        })
+        for (const entry of variantValue) {
+          map(entry[0], entry[1], entry[2], entry[3])
+        }
         return
       }
     }
@@ -88,15 +96,23 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
   // Capture original value before resolution (for context prop tracking)
   const originalValue = value
 
+  // "safe" value -> env(safe-area-inset-*) on web, numeric inset on native.
+  // expands multi-edge props (padding, inset, marginHorizontal, ...) into
+  // per-side keys so each side gets its own edge value.
+  if (value === 'safe' && isSafeAreaKey(key)) {
+    const expanded = expandSafeAreaValue(key)
+    if (expanded) {
+      for (let i = 0; i < expanded.length; i++) {
+        const [nkey, nvalue] = expanded[i]
+        map(nkey, nvalue, originalValue)
+      }
+      return
+    }
+  }
+
   if (value != null) {
     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
-      }
+      value = isRemValue(value) ? resolveRem(value) : value
     } else if (isVariable(value)) {
       value = resolveVariableValue(key, value, styleProps.resolveValues)
     } else if (isRemValue(value)) {
@@ -104,36 +120,21 @@ 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
-    }
-  }
+  // strings stay whole so the direct scanner can distinguish CSS components
+  // from modifier clauses before it emits them.
 
   if (value != null) {
-    const fontToken = getLastFontFamilyToken()
-    if (key === 'fontFamily' && fontToken) {
-      styleState.fontFamily = fontToken
+    if (key === 'fontFamily' && typeof originalValue === 'string') {
+      if (originalValue in conf.fontsParsed) {
+        styleState.fontFamily = originalValue
+      }
     }
 
-    const expanded = styleProps.noExpand
-      ? null
-      : expandStyle(key, value, conf.settings.styleCompat || 'web')
+    // strings stay whole for the direct flat-value scanner
+    const expanded =
+      styleProps.noExpand || typeof value === 'string'
+        ? null
+        : expandStyle(key, value, conf.settings.styleCompat || 'web')
 
     if (expanded) {
       const max = expanded.length
@@ -153,12 +154,97 @@ const resolveVariants: StyleResolver = (
   styleProps,
   styleState,
   parentVariantKey
+) => {
+  const variantDefinition = styleState.staticConfig.variants?.[key]
+  if (
+    typeof value === 'string' &&
+    value.indexOf(':') !== -1 &&
+    // a variant can define a literal colon key like "16:9" — an exact match
+    // wins over clause parsing
+    !(
+      variantDefinition &&
+      typeof variantDefinition === 'object' &&
+      value in variantDefinition
+    )
+  ) {
+    // `scanFlatValue` is the same lexer `contributeStyleString` and the
+    // canonical `parseValue` run, and `getCondition` is the same modifier
+    // resolver the style path uses. Both matter: the two paths used to lose
+    // different amounts of a value the grammar refuses, so which one styled a
+    // component decided how much of a typo survived.
+    const starts: number[] = []
+    const ends: number[] = []
+    const modifiers: (string | undefined)[] = []
+    let pendingModifier: string | undefined
+    let sawClause = false
+    let refused = false
+
+    scanFlatValue(value, {
+      segment(start, end, isBase) {
+        if (start === end) {
+          if (!isBase) refused = true
+          return
+        }
+        starts.push(start)
+        ends.push(end)
+        modifiers.push(pendingModifier)
+      },
+      chain(start, end) {
+        if (refused) return false
+        const source = value.slice(start, end)
+        if (!getCondition(styleState, source)) {
+          refused = true
+          return false
+        }
+        pendingModifier = source
+        sawClause = true
+        return true
+      },
+      error() {
+        refused = true
+      },
+    })
+
+    if (refused) return []
+    if (sawClause) {
+      let entries: [string, any, any?, string?][] | undefined
+      for (let index = 0; index < starts.length; index++) {
+        const resolved = resolveVariantValue(
+          key,
+          value.slice(starts[index], ends[index]),
+          styleProps,
+          styleState,
+          parentVariantKey
+        )
+        if (!resolved) continue
+        entries ||= []
+        const modifier = modifiers[index]
+        for (const entry of resolved) {
+          if (modifier !== undefined) entry[3] = modifier
+          entries.push(entry)
+        }
+      }
+      return entries || []
+    }
+    // no clause structure found: the colon belongs to the value itself
+  }
+
+  return resolveVariantValue(key, value, styleProps, styleState, parentVariantKey)
+}
+
+const resolveVariantValue: StyleResolver = (
+  key,
+  value,
+  styleProps,
+  styleState,
+  parentVariantKey
 ) => {
   const { staticConfig, conf, debug } = styleState
   const { variants } = staticConfig
   if (!variants) return
 
-  let variantValue = getVariantDefinition(variants[key], value, conf, styleState)
+  const variant = variants[key]
+  let variantValue = getVariantDefinition(variant, value, conf, styleState)
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     console.groupCollapsed(`♦️♦️♦️ resolve variant ${key}`)
@@ -177,7 +263,7 @@ const resolveVariants: StyleResolver = (
     if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === '1') {
       // don't warn on missing booleans
       if (typeof value !== 'boolean') {
-        const name = staticConfig.componentName || '[UnnamedComponent]'
+        const name = styleState.styleProps.displayName || '[UnnamedComponent]'
         console.warn(
           `No variant found: ${name} has variant "${key}", but no matching value "${value}"`
         )
@@ -232,15 +318,14 @@ const resolveVariants: StyleResolver = (
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       console.info(`   expanding styles from `, variantValue, `to`, expanded)
     }
-    const next = Object.entries(expanded)
     const originalValues = styleOriginalValues.get(expanded)
 
     // store any changed font family (only support variables for now)
-    if (fontFamilyResult && fontFamilyResult[0] === '$') {
-      setLastFontFamilyToken(getVariableValue(fontFamilyResult))
+    const next: [string, any, any, string?][] = []
+    for (const key in expanded) {
+      next.push([key, expanded[key], originalValues?.[key]])
     }
-
-    return next.map(([key, value]) => [key, value, originalValues?.[key]])
+    return next
   }
 }
 
@@ -259,10 +344,8 @@ export function getFontFamilyFromNameOrVariable(input: any, conf: TamaguiInterna
         }
       }
     }
-  } else if (typeof input === 'string') {
-    if (input[0] === '$') {
-      return input
-    }
+  } else if (typeof input === 'string' && input in conf.fontsParsed) {
+    return input
   }
 }
 
@@ -275,7 +358,7 @@ const resolveTokensAndVariants: StyleResolver<object> = (
   styleState,
   parentVariantKey
 ) => {
-  const { conf, staticConfig, debug, theme } = styleState
+  const { conf, staticConfig, debug } = styleState
   const { variants } = staticConfig
   const res = {}
   let originalValues: Record<string, any> | undefined
@@ -296,12 +379,23 @@ const resolveTokensAndVariants: StyleResolver<object> = (
     originalValues[subKey] = val
 
     // Track context overrides for any key that's in context props (issues #3670, #3676)
-    // Store the ORIGINAL token value (like '$8') before resolution so that
+    // Store the ORIGINAL token value (like '8') before resolution so that
     // children's functional variants can look up token values
     if (staticConfig) {
       const contextProps =
         staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props
-      if (contextProps && subKey in contextProps) {
+      const inheritedContextPropKeys =
+        !staticConfig.context ||
+        staticConfig.context === staticConfig.parentStaticConfig?.context
+          ? staticConfig.parentStaticConfig?.contextProps
+          : undefined
+      const contextPropKeys = staticConfig.contextProps || inheritedContextPropKeys
+      const isContextProp =
+        (contextProps && subKey in contextProps) ||
+        contextPropKeys?.includes(subKey) ||
+        staticConfig.context?.propKeys?.includes(subKey) ||
+        staticConfig.parentStaticConfig?.context?.propKeys?.includes(subKey)
+      if (isContextProp) {
         styleState.overriddenContextProps ||= {}
         styleState.overriddenContextProps[subKey] = val
         // Also track the original token value separately
@@ -317,31 +411,31 @@ const resolveTokensAndVariants: StyleResolver<object> = (
         // avoids infinite loop if variant is matching a style prop
         // eg: { variants: { flex: { true: { flex: 2 } } } }
         if (parentVariantKey && parentVariantKey === key) {
-          res[subKey] =
-            val[0] === '$' ? getTokenForKey(subKey, val, styleProps, styleState) : val
+          res[subKey] = val
         } else {
           const variantOut = resolveVariants(subKey, val, styleProps, styleState, key)
 
-          // apply, merging sub-styles
+          // apply variant output in authored order
           if (variantOut) {
-            for (const [key, val, originalVal] of variantOut) {
+            for (const [key, val, originalVal, conditionSource] of variantOut) {
               if (val == null) continue
-              if (key in pseudoDescriptors) {
-                res[key] ??= {}
-                Object.assign(res[key], val)
-                const subOriginalValues = styleOriginalValues.get(val)
-                if (subOriginalValues) {
-                  styleOriginalValues.set(res[key], {
-                    ...styleOriginalValues.get(res[key]),
-                    ...subOriginalValues,
-                  })
-                }
-              } else {
-                res[key] = val
-                if (originalVal !== undefined) {
-                  originalValues ||= {}
-                  originalValues[key] = originalVal
+              if (conditionSource !== undefined) {
+                const appended = appendFlatClause(res[key], conditionSource, val)
+                if (appended === undefined) {
+                  if (process.env.NODE_ENV === 'development') {
+                    console.warn(
+                      `[tamagui] conditional variant value for "${key}" is not string-representable; dropping the clause`
+                    )
+                  }
+                  continue
                 }
+                res[key] = appended
+                continue
+              }
+              res[key] = val
+              if (originalVal !== undefined) {
+                originalValues ||= {}
+                originalValues[key] = originalVal
               }
             }
           }
@@ -360,12 +454,7 @@ const resolveTokensAndVariants: StyleResolver<object> = (
     }
 
     if (typeof val === 'string') {
-      const fVal =
-        val[0] === '$'
-          ? getTokenForKey(subKey, val, styleProps, styleState)
-          : resolveCompoundTokens(subKey, val, styleProps, styleState)
-
-      res[subKey] = fVal === val && isRemValue(val) ? resolveRem(val) : fVal
+      res[subKey] = isRemValue(val) ? resolveRem(val) : val
       continue
     }
 
@@ -376,33 +465,22 @@ const resolveTokensAndVariants: StyleResolver<object> = (
         console.info(`object`, subKey, subObject)
       }
 
-      // sub-objects: media queries, pseudos, shadowOffset
+      // structured style values such as shadowOffset
       res[subKey] ??= {}
       Object.assign(res[subKey], subObject)
       const subOriginalValues = styleOriginalValues.get(subObject)
       if (subOriginalValues) {
-        styleOriginalValues.set(res[subKey], {
-          ...styleOriginalValues.get(res[subKey]),
-          ...subOriginalValues,
-        })
+        const existing = styleOriginalValues.get(res[subKey])
+        if (existing) {
+          Object.assign(existing, subOriginalValues)
+        } else {
+          styleOriginalValues.set(res[subKey], { ...subOriginalValues })
+        }
       }
     } else {
       // nullish values cant be tokens, need no extra parsing
       res[subKey] = val
     }
-
-    if (process.env.NODE_ENV === 'development') {
-      if (debug) {
-        if (res[subKey]?.[0] === '$') {
-          console.warn(
-            `⚠️ Missing token in theme ${theme.name}:`,
-            subKey,
-            res[subKey],
-            theme
-          )
-        }
-      }
-    }
   }
 
   if (originalValues) {
@@ -412,10 +490,9 @@ const resolveTokensAndVariants: StyleResolver<object> = (
   return res
 }
 
-const tokenCats = ['size', 'color', 'radius', 'space', 'zIndex'].map((name) => ({
-  name,
-  spreadName: `...${name}`,
-}))
+// the prop -> token-category tables live in their own module; re-exported
+// here because they have always been part of this module's public surface
+export * from './tokenCategories'
 
 // goes through specificity finding best matching variant function
 function getVariantDefinition(
@@ -423,37 +500,173 @@ function getVariantDefinition(
   value: any,
   conf: TamaguiInternalConfig,
   { theme }: Partial<GetStyleState>
-) {
+): any {
   if (!variant) return
+  if (value === undefined) return
   if (typeof variant === 'function') {
     return variant
   }
-  const exact = variant[value]
-  if (exact) {
-    return exact
+  if (Object.prototype.hasOwnProperty.call(variant, value)) {
+    return variant[value]
   }
-  if (value != null) {
-    const { tokensParsed } = conf
-    for (const { name, spreadName } of tokenCats) {
-      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]
-          }
-        }
+  for (const { key, parts } of getCompiledVariantResolvers(variant)) {
+    for (const part of parts) {
+      if (matchesVariantResolver(part, value, conf, theme)) {
+        return variant[key]
       }
     }
-    const fontSizeVariant = variant['...fontSize']
-    if (fontSizeVariant && conf.fontSizeTokens.has(value)) {
-      return fontSizeVariant
+  }
+
+  return
+}
+
+type VariantResolverName = (typeof variantResolverNames)[number]
+
+const variantResolverNameSet = new Set<string>(variantResolverNames)
+
+type CompiledVariantResolver = {
+  key: string
+  parts: VariantResolverName[]
+}
+
+const variantResolverCache = new WeakMap<object, readonly CompiledVariantResolver[]>()
+
+function getCompiledVariantResolvers(variant: object) {
+  let cached = variantResolverCache.get(variant)
+  if (cached) {
+    return cached
+  }
+  const compiled: CompiledVariantResolver[] = []
+  for (const key of Object.keys(variant)) {
+    const parts = parseVariantResolverKey(key)
+    if (parts) {
+      compiled.push({ key, parts })
+    }
+  }
+  variantResolverCache.set(variant, compiled)
+  return compiled
+}
+
+function parseVariantResolverKey(key: string): VariantResolverName[] | null {
+  if (!key) return null
+  const parts = key.split('|').map((part) => part.trim())
+  if (!parts.length) return null
+  for (const part of parts) {
+    if (!variantResolverNameSet.has(part)) {
+      return null
+    }
+  }
+  return parts as VariantResolverName[]
+}
+
+const numberStringPattern =
+  /[+-]?(?:(?:\d+\.?\d*)|(?:\.\d+))(?:[eE][+-]?\d+)?|[+-]?0[xX][\da-fA-F]+|[+-]?0[bB][01]+|[+-]?0[oO][0-7]+/
+const remStringPattern = new RegExp(`^(?:${numberStringPattern.source})rem$`)
+const viewportValuePattern = new RegExp(
+  `^(?:${numberStringPattern.source})(vw|dvw|lvw|svw|vh|dvh|lvh|svh)$`
+)
+
+function isAllowedStyleValue(
+  category: 'size' | 'space' | 'radius' | 'zIndex',
+  value: any,
+  conf: TamaguiInternalConfig,
+  string: boolean,
+  number: boolean,
+  rem: boolean
+) {
+  const hasSetting = Object.prototype.hasOwnProperty.call(
+    conf.settings,
+    'allowedStyleValues'
+  )
+  const configured = conf.settings.allowedStyleValues
+  const setting =
+    configured && typeof configured === 'object' ? configured[category] : configured
+  const web =
+    value === 'unset' ||
+    value === 'inherit' ||
+    (string && /^var\(.*\)$/.test(value)) ||
+    ((category === 'size' || category === 'space') &&
+      (value === 'max-content' ||
+        value === 'min-content' ||
+        (string &&
+          (viewportValuePattern.test(value) || /^(calc|min|max)\(.*\)$/.test(value)))))
+  const somewhat =
+    category === 'size' || category === 'space'
+      ? value === 'auto' || number || rem || (string && value.endsWith('%'))
+      : number
+  if (setting === 'strict') return false
+  if (setting === 'strict-web') return web
+  if (setting === 'somewhat-strict') return somewhat
+  if (setting === 'somewhat-strict-web') return somewhat || web
+  return (
+    number || (string && (category === 'size' || category === 'space' || !hasSetting))
+  )
+}
+
+function matchesVariantResolver(
+  resolverName: VariantResolverName,
+  value: any,
+  conf: TamaguiInternalConfig,
+  theme: Partial<GetStyleState>['theme']
+) {
+  const string = typeof value === 'string'
+  const number = typeof value === 'number'
+  const rem = string && remStringPattern.test(value)
+
+  switch (resolverName) {
+    case 'Size':
+    case 'Space':
+    case 'Radius':
+    case 'ZIndex': {
+      const category =
+        resolverName === 'ZIndex'
+          ? 'zIndex'
+          : (resolverName.toLowerCase() as 'size' | 'space' | 'radius')
+      return (
+        value === true ||
+        (value != null && value in conf.tokensParsed[category]) ||
+        ((resolverName === 'Space' ||
+          resolverName === 'Radius' ||
+          resolverName === 'ZIndex') &&
+          isVariable(value)) ||
+        ((resolverName === 'Radius' || resolverName === 'ZIndex') && (number || rem)) ||
+        isAllowedStyleValue(category, value, conf, string, number, rem)
+      )
     }
+    // a token or theme color, otherwise any string is taken to be a raw CSS
+    // color and left for the browser to resolve. checking that against a CSS
+    // color-name table costs 2.3KB gzip to reject values that were never valid
+    // anyway. `red/50` opacity modifiers stay limited to token and theme
+    // colors, which the branches above already covered.
+    case 'Color':
+      return (value != null && value in conf.tokensParsed.color) || string
+    case 'Theme':
+      return string && !!theme && value in theme
+    case 'FontSize':
+      return value === true || !!conf.fontsParsed.body?.size?.[value] || number || rem
+    case 'FontStyle':
+      return (
+        !!conf.fontsParsed.body?.style?.[value] ||
+        value === 'normal' ||
+        value === 'italic'
+      )
+    case 'FontTransform':
+      return (
+        !!conf.fontsParsed.body?.transform?.[value] ||
+        value === 'none' ||
+        value === 'capitalize' ||
+        value === 'uppercase' ||
+        value === 'lowercase'
+      )
+    case 'FontLineHeight':
+      return !!conf.fontsParsed.body?.lineHeight?.[value] || number || rem
+    case 'FontLetterSpacing':
+      return !!conf.fontsParsed.body?.letterSpacing?.[value] || number || rem
+    case 'number':
+    case 'string':
+    case 'boolean':
+      return typeof value === resolverName
+    case 'any':
+      return true
   }
-  // fallback to catch all | size
-  return variant[`:${typeof value}`] || variant['...']
 }