@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.881.1

package/src/helpers/styleStaticConfigCore.ts

@@ -0,0 +1,110 @@
+import {
+  stylePropsInput,
+  stylePropsText,
+  validStyles as validStylesView,
+} from '@tamagui/helpers'
+import type { StaticConfig, StylePiece, TamaguiInternalConfig } from '../types'
+import { createStylePiece } from '../style'
+import type { StyleStaticConfig } from './styleStaticConfig'
+
+const styleStaticConfigCache = new WeakMap<
+  StaticConfig,
+  WeakMap<TamaguiInternalConfig, { revision: number; value: StyleStaticConfig }>
+>()
+
+export function resolveStyleStaticConfig(
+  staticConfig: StaticConfig,
+  conf: TamaguiInternalConfig,
+  revision: number
+): StyleStaticConfig {
+  let configCache = styleStaticConfigCache.get(staticConfig)
+  const cached = configCache?.get(conf)
+  if (cached?.revision === revision) return cached.value
+
+  const normalized = staticConfig.styleFrontend?.normalizeStaticConfig?.(
+    staticConfig,
+    conf
+  )
+  const variants = normalized ? normalized.variants : staticConfig.variants
+  const authoredBaseStyle = normalized ? normalized.baseStyle : staticConfig.baseStyle
+  const authoredDefaultProps = staticConfig.defaultProps
+  let baseStyle: Record<string, any> | undefined
+  let baseVariantProps: Record<string, any> | undefined
+  let defaultProps: Record<string, any> | undefined
+  const validStyles =
+    staticConfig.validStyles ||
+    (staticConfig.isInput
+      ? stylePropsInput
+      : staticConfig.isText
+        ? stylePropsText
+        : validStylesView)
+  if (authoredDefaultProps) {
+    for (const key in authoredDefaultProps) {
+      const isVariant = Boolean(variants?.[key])
+      const isStyle =
+        key !== 'transition' && (key in validStyles || key in conf.shorthands)
+      if (isVariant || isStyle) {
+        ;(baseStyle ||= authoredBaseStyle ? { ...authoredBaseStyle } : {})[key] =
+          authoredDefaultProps[key]
+      }
+      if (isVariant || !isStyle) {
+        ;(defaultProps ||= {})[key] = authoredDefaultProps[key]
+      }
+      if (isVariant) {
+        ;(baseVariantProps ||= {})[key] = authoredDefaultProps[key]
+      }
+    }
+  }
+  const resolvedBaseStyle = baseStyle || authoredBaseStyle
+  let baseStylePiece
+  let baseStylePieces: Record<string, StylePiece> | undefined
+  if (resolvedBaseStyle && !(staticConfig as any).disableBaseStylePiece) {
+    let directBaseStyle: Record<string, any> | undefined
+    let directBaseKeys: string[] | undefined
+    const flushDirectBaseStyle = () => {
+      if (!directBaseStyle || !directBaseKeys) return
+      const piece = createStylePiece(directBaseStyle, 'base')
+      baseStylePiece ||= piece
+      baseStylePieces ||= {}
+      for (const key of directBaseKeys) {
+        baseStylePieces[key] = piece
+      }
+      directBaseStyle = undefined
+      directBaseKeys = undefined
+    }
+    for (const key in resolvedBaseStyle) {
+      const expanded = conf.shorthands[key] || key
+      if (key !== 'transition' && !variants?.[key] && expanded in validStyles) {
+        ;(directBaseStyle ||= {})[key] = resolvedBaseStyle[key]
+        ;(directBaseKeys ||= []).push(key)
+      } else {
+        // A default variant between direct declarations must run at that exact
+        // authored position. Keeping separate contiguous pieces preserves the
+        // base layer's ordinary last-write order while still precompiling it.
+        flushDirectBaseStyle()
+      }
+    }
+    flushDirectBaseStyle()
+  }
+  const keys = staticConfig.contextProps || staticConfig.context?.propKeys
+  const value: StyleStaticConfig = {
+    baseStyle: resolvedBaseStyle,
+    baseVariantProps,
+    baseStylePiece,
+    baseStylePieces,
+    defaultProps,
+    styledContextKeys: keys ? new Set(keys) : null,
+    variants,
+    variantStyleResolver: (staticConfig as any).variantStyleResolver,
+    passthroughClassName: normalized
+      ? normalized.passthroughClassName
+      : staticConfig.passthroughClassName,
+  }
+
+  if (!configCache) {
+    configCache = new WeakMap()
+    styleStaticConfigCache.set(staticConfig, configCache)
+  }
+  configCache.set(conf, { revision, value })
+  return value
+}

package/src/helpers/styledDynamic.ts

@@ -0,0 +1,191 @@
+import { getSetting } from '../config'
+import { getVariableValue } from '../createVariable'
+import type {
+  GenericFonts,
+  GetStyleState,
+  LanguageContextType,
+  StyledDynamic,
+  StyledDynamicEnv,
+  StyledDynamicFn,
+  StyledDynamicProp,
+} from '../types'
+import { styledDynamicSymbol } from '../types'
+
+const fontLanguageCache = new WeakMap()
+
+export function getFontsForLanguage(fonts: GenericFonts, language: LanguageContextType) {
+  if (fontLanguageCache.has(language)) return fontLanguageCache.get(language)
+  const next = { ...fonts }
+  for (const name in language) {
+    const lang = language[name]
+    if (lang !== 'default') next[name] = fonts[`${name}_${lang}`]
+  }
+  fontLanguageCache.set(language, next)
+  return next
+}
+
+export function isStyledDynamic(value: unknown): value is StyledDynamic {
+  return (
+    !!value &&
+    (typeof value === 'function' || typeof value === 'object') &&
+    styledDynamicSymbol in (value as object)
+  )
+}
+
+const bareStyledDynamic: StyledDynamicProp = { [styledDynamicSymbol]: true }
+const dynamicSpreadProbe = Symbol('tamagui.dynamicSpreadProbe')
+const dynamicComputedProbe = '__tamagui_dynamic_computed_key__'
+const dynamicComputedNumberProbe = 712_367_821
+const dynamicShapeProbeValues = new WeakSet<object>()
+
+function createDynamicShapeProbe(): any {
+  const target = function () {}
+  let probe: any
+  probe = new Proxy(target, {
+    apply: () => probe,
+    construct: () => probe,
+    get: (_target, key) => {
+      if (key === Symbol.toPrimitive) {
+        return (hint: string) =>
+          hint === 'number' ? dynamicComputedNumberProbe : dynamicComputedProbe
+      }
+      if (key === Symbol.iterator) {
+        return function* () {
+          yield dynamicComputedProbe
+        }
+      }
+      if (key === dynamicSpreadProbe) return true
+      return probe
+    },
+    getOwnPropertyDescriptor: (target, key) =>
+      key === dynamicSpreadProbe
+        ? { configurable: true, enumerable: true, value: true }
+        : Reflect.getOwnPropertyDescriptor(target, key),
+    ownKeys: (target) => [...Reflect.ownKeys(target), dynamicSpreadProbe],
+  })
+  dynamicShapeProbeValues.add(probe)
+  return probe
+}
+
+function findDynamicShapeViolation(value: unknown) {
+  if (!value || (typeof value !== 'object' && typeof value !== 'function')) return
+  const seen = new WeakSet<object>()
+  let spread = false
+  let computed = false
+  const visit = (current: object) => {
+    // A proxy used as an ordinary scalar/local value is valid. Its enumerable
+    // marker only means "spread" after object spread copies that descriptor
+    // onto a returned literal.
+    if (dynamicShapeProbeValues.has(current) || seen.has(current)) return
+    seen.add(current)
+    let descriptors: PropertyDescriptorMap
+    try {
+      descriptors = Object.getOwnPropertyDescriptors(current)
+    } catch {
+      return
+    }
+    for (const key of Reflect.ownKeys(descriptors)) {
+      if (key === dynamicSpreadProbe) spread = true
+      if (
+        typeof key === 'string' &&
+        (key.includes(dynamicComputedProbe) || key === String(dynamicComputedNumberProbe))
+      ) {
+        computed = true
+      }
+      const nested = descriptors[key as keyof typeof descriptors]?.value
+      if (nested && (typeof nested === 'object' || typeof nested === 'function')) {
+        visit(nested)
+      }
+    }
+  }
+  visit(value)
+  if (spread || computed) return { spread, computed }
+}
+
+function validateDynamicShape(fn: Function) {
+  try {
+    const probe = createDynamicShapeProbe()
+    // Helpers may diagnose the deliberately-invalid proxy value (for example a
+    // token resolver saying it is not a known size). Those are probe artifacts,
+    // not definition warnings; only the shape warning below should escape.
+    const warn = console.warn
+    let output
+    try {
+      console.warn = () => {}
+      output = fn(probe, probe)
+    } finally {
+      console.warn = warn
+    }
+    const violation = findDynamicShapeViolation(output)
+    if (!violation) return
+    const reasons = [
+      violation.spread ? 'a spread from a dynamic input' : '',
+      violation.computed ? 'a computed key from a dynamic input' : '',
+    ].filter(Boolean)
+    console.warn(
+      `[tamagui] styled.dynamic${fn.name ? ` (${fn.name})` : ''} returned ${reasons.join(' and ')} during its development shape check. Dynamic style bodies require static object keys for extraction; this definition will deopt instead.`
+    )
+  } catch {
+    // The probe is intentionally best-effort. A body may depend on a concrete
+    // runtime value the proxy cannot model; definition must never fail for it.
+  }
+}
+
+/**
+ * `styled.dynamic<T>()` declares a typed variant prop that is consumed by
+ * styling (given style by a component `.resolve`). `styled.dynamic<T>(fn)`
+ * maps the value to a style fragment; it is invoked per clause payload so
+ * responsive/conditional values work, and the branded function stays callable
+ * inside other dynamics or resolvers.
+ */
+export function styledDynamic<Val>(): StyledDynamicProp<Val>
+export function styledDynamic<Val>(
+  fn: (value: Val, env: StyledDynamicEnv) => Record<string, any> | null | undefined
+): StyledDynamicFn<Val>
+export function styledDynamic(fn?: any) {
+  if (!fn) return bareStyledDynamic
+  if (process.env.NODE_ENV === 'development') validateDynamicShape(fn)
+  fn[styledDynamicSymbol] = true
+  return fn
+}
+
+/**
+ * the env for `styled.dynamic` callbacks and `.resolve` resolvers: tokens,
+ * theme, fonts, and the active font. Built once per style pass.
+ */
+export function getDynamicEnv(styleState: GetStyleState): StyledDynamicEnv {
+  const cached = (styleState as any).flatDynamicEnv
+  if (cached) return cached
+
+  const { props, conf, context, theme } = styleState
+  let fonts = conf.fontsParsed
+  if (context?.language) {
+    fonts = getFontsForLanguage(conf.fontsParsed, context.language)
+  }
+
+  const next = {
+    fonts,
+    tokens: conf.tokensParsed,
+    theme,
+    get fontFamily() {
+      return (
+        getVariableValue(styleState.fontFamily || props.fontFamily) ||
+        props.fontFamily ||
+        getVariableValue(getSetting('defaultFont'))
+      )
+    },
+    get font() {
+      const found = fonts[this.fontFamily as string]
+      if (found) return found
+
+      const className = props.className
+      if (typeof className === 'string') {
+        const name = /(?:^|\s)font_(\S+)/.exec(className)?.[1]
+        if (name && fonts[name]) return fonts[name]
+      }
+      return fonts[conf.defaultFontToken]
+    },
+  } as StyledDynamicEnv
+
+  return ((styleState as any).flatDynamicEnv = next)
+}

package/src/helpers/tokenCategories.ts

@@ -1,88 +1,4 @@
-// The prop -> token-category tables.
-//
-// Its own module because both `propMapper` and `directStyle` bind props to
-// these categories, and `propMapper` needs `directStyle`'s condition resolver:
-// leaving the tables where the resolver's consumer lives made the two files
-// import each other.
-
-import { tokenCategories } from '@tamagui/helpers'
-
 export type StyleTokenCategory = 'size' | 'space' | 'radius' | 'zIndex' | 'fontSize'
-
-function mapTokenCategory(keys: Record<string, boolean>, category: StyleTokenCategory) {
-  return Object.fromEntries(Object.keys(keys).map((key) => [key, category]))
-}
-
-// exported so the flat-value grammar adapter binds props to the same token
-// categories the bare-token path already uses, rather than keeping a second table
-export const tokenCategoryByProperty: Record<string, StyleTokenCategory> = {
-  ...mapTokenCategory(tokenCategories.size, 'size'),
-  ...mapTokenCategory(tokenCategories.radius, 'radius'),
-  ...mapTokenCategory(tokenCategories.zIndex, 'zIndex'),
-  // the transform family's x/y are lengths from the space scale (v6 decision:
-  // `x="4"` resolves like `p="4"`), never the size category
-  x: 'space',
-  y: 'space',
-  fontSize: 'fontSize',
-  borderWidth: 'space',
-  borderTopWidth: 'space',
-  borderRightWidth: 'space',
-  borderBottomWidth: 'space',
-  borderLeftWidth: 'space',
-  borderBlockWidth: 'space',
-  borderBlockStartWidth: 'space',
-  borderBlockEndWidth: 'space',
-  borderInlineWidth: 'space',
-  borderInlineStartWidth: 'space',
-  borderInlineEndWidth: 'space',
-  outlineOffset: 'space',
-  outlineWidth: 'space',
-  gap: 'space',
-  rowGap: 'space',
-  columnGap: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  margin: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginEnd: 'space',
-  marginLeft: 'space',
-  marginHorizontal: 'space',
-  marginStart: 'space',
-  marginVertical: 'space',
-  padding: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingEnd: 'space',
-  paddingLeft: 'space',
-  paddingHorizontal: 'space',
-  paddingStart: 'space',
-  paddingVertical: 'space',
-}
-
 export type RuntimeTokenCategory = StyleTokenCategory | 'color' | 'font' | 'fontFamily'
 
 export function getTokenCategoryForProperty(
@@ -97,8 +13,36 @@ export function getTokenCategoryForProperty(
   ) {
     return 'font'
   }
-  return (
-    tokenCategoryByProperty[property] ||
-    (property in tokenCategories.color ? 'color' : undefined)
-  )
+  if (property === 'zIndex') return 'zIndex'
+  if (property === 'color' || property.endsWith('Color')) return 'color'
+  if (property.endsWith('Radius')) {
+    return property === 'shadowRadius' ? 'size' : 'radius'
+  }
+  if (
+    /^(?:width|height|(?:min|max)(?:Width|Height))$/.test(property) ||
+    property.endsWith('BlockSize') ||
+    property.endsWith('InlineSize') ||
+    property === 'blockSize' ||
+    property === 'inlineSize'
+  ) {
+    return 'size'
+  }
+  if (
+    property === 'x' ||
+    property === 'y' ||
+    property === 'top' ||
+    property === 'right' ||
+    property === 'bottom' ||
+    property === 'left' ||
+    property === 'outlineOffset' ||
+    property === 'gap' ||
+    property.endsWith('Gap') ||
+    property.startsWith('margin') ||
+    property.startsWith('padding') ||
+    property.startsWith('inset') ||
+    ((property.startsWith('border') || property === 'outlineWidth') &&
+      property.endsWith('Width'))
+  ) {
+    return 'space'
+  }
 }

package/src/helpers/variableValue.ts

@@ -24,22 +24,27 @@ export const findVariableToken = (
   tokensParsed: TokensParsed,
   name: string
 ): Variable | undefined => {
-  let found: Variable | undefined
-  let foundCategory: string | undefined
+  if (process.env.NODE_ENV === 'development') {
+    let found: Variable | undefined
+    let foundCategory: string | undefined
+    for (const category of tokenCategoryOrder) {
+      const token = tokensParsed[category]?.[name] as Variable | undefined
+      if (!token) continue
+      if (!found) {
+        found = token
+        foundCategory = category
+      } else {
+        warnOnce(
+          `ambiguous:${name}`,
+          `Theme inline value: "${name}" exists in multiple token categories; using "${foundCategory}". Rename one of the colliding tokens.`
+        )
+        break
+      }
+    }
+    return found
+  }
   for (const category of tokenCategoryOrder) {
     const token = tokensParsed[category]?.[name] as Variable | undefined
-    if (!token) continue
-    if (!found) {
-      found = token
-      foundCategory = category
-      if (process.env.NODE_ENV !== 'development') break
-    } else {
-      warnOnce(
-        `ambiguous:${name}`,
-        `Theme inline value: "${name}" exists in multiple token categories; using "${foundCategory}". Rename one of the colliding tokens.`
-      )
-      break
-    }
+    if (token) return token
   }
-  return found
 }

package/src/helpers/warnOnce.ts

@@ -15,10 +15,11 @@ const warnLimit = 500
 const warned = process.env.NODE_ENV !== 'production' ? new Set<string>() : null
 
 export function warnOnce(key: string, message = key) {
-  if (process.env.NODE_ENV !== 'development') return
-  if (warned!.has(key) || warned!.size >= warnLimit) return
-  warned!.add(key)
-  console.warn(`[tamagui] ${message}`)
+  if (process.env.NODE_ENV === 'development') {
+    if (warned?.has(key) || (warned?.size ?? 0) >= warnLimit) return
+    warned?.add(key)
+    console.warn(`[tamagui] ${message}`)
+  }
 }
 
 /**

package/src/hooks/useAnimationDriver.ts

@@ -16,7 +16,9 @@ export function useAnimationDriver(): AnimationDriver {
   const { animationDriver } = useConfiguration()
   if (!animationDriver || animationDriver.isStub) {
     throw new Error(
-      `No animation driver configured. Pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`
+      process.env.NODE_ENV !== 'production'
+        ? `No animation driver configured. Pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`
+        : '❌ Error 011'
     )
   }
   return animationDriver
@@ -32,7 +34,9 @@ function useAnimatedNumberDriver(): AnimationDriverWithAnimatedNumbers {
     typeof animatedDriver.useAnimatedNumberReaction !== 'function'
   ) {
     throw new Error(
-      `The configured animation driver does not include animated-number hooks. When using the CSS driver, import \`createAnimations\` from \`@tamagui/animations-css/extras\` instead of \`@tamagui/animations-css\`. See: https://tamagui.dev/docs/core/animations-css`
+      process.env.NODE_ENV !== 'production'
+        ? `The configured animation driver does not include animated-number hooks. When using the CSS driver, import \`createAnimations\` from \`@tamagui/animations-css/extras\` instead of \`@tamagui/animations-css\`. See: https://tamagui.dev/docs/core/animations-css`
+        : '❌ Error 012'
     )
   }
   return animatedDriver as AnimationDriverWithAnimatedNumbers