@tamagui/web 3.0.0-beta.831.1 → 3.0.0-beta.889.1

package/src/helpers/grammarConfig.ts

@@ -1,12 +1,26 @@
+import { platformMatches } from '@tamagui/constants'
 import { simpleHash } from '@tamagui/helpers'
 import {
+  canonicalStateModifierNames,
   compileModifierVocabulary,
   configRevisionSymbol,
+  isContainerSizeQueryText,
+  modifierKindMedia,
+  modifierKindPlatform,
+  modifierKindState,
+  parseFlatValue,
+  stateModifierSelectors,
   type CompiledModifierVocabulary,
 } from '@tamagui/style-grammar/runtime'
 
-import type { TamaguiInternalConfig } from '../types'
+import type { StaticConfig, TamaguiInternalConfig } from '../types'
+import { classifyBorderComponents, splitComponents } from './borderComponents'
 import { mediaObjectToString } from './mediaObjectToString'
+import { getTokenCategoryForProperty, type RuntimeTokenCategory } from './tokenCategories'
+import { expandSafeAreaValue } from './resolveSafeArea'
+import { resolveSafeAreaVariable } from './resolveSafeAreaVariable'
+import { resolveStyleStaticConfig } from './styleStaticConfigCore'
+import type { StyleStaticConfig } from './styleStaticConfig'
 
 export type ConfigRevisionPart =
   | 'media'
@@ -27,9 +41,37 @@ export interface ConfigRevisionState {
   revision: number
   modifiers: CompiledModifierVocabulary
   mediaQueries: Readonly<Record<string, string>>
+  resolveCondition(name: string): ConditionModifier | null
+  tokenCategory(property: string): RuntimeTokenCategory | undefined
+  expandSafeArea: typeof expandSafeAreaValue
+  safeAreaVariable: typeof resolveSafeAreaVariable
+  parseFlatValue: typeof parseFlatValue
+  styleStaticConfig(
+    staticConfig: StaticConfig,
+    conf: TamaguiInternalConfig
+  ): StyleStaticConfig
+  propertyKind(property: string): number
+  compositeValue(
+    property: string,
+    raw: string,
+    context: any,
+    resolve: (context: any, property: string, raw: string) => any
+  ): string | undefined
+  normalizeTransition(value: string): string
+  embeddedTokens(value: string, resolve: (token: string) => any): string
   snapshot?: ConfigRevisionSnapshot
 }
 
+export type ConditionModifier = [
+  name: string,
+  kind: number,
+  rank: number,
+  selectorOrQuery?: string,
+  groupOrSize?: string,
+  containerName?: string,
+  platformActive?: boolean,
+]
+
 type ConfigWithRevision = TamaguiInternalConfig & {
   [configRevisionSymbol]?: ConfigRevisionState
 }
@@ -64,10 +106,185 @@ export function prepareConfigRevision(
   for (const name of mediaNames) {
     mediaQueries[name] = mediaObjectToString(media[name])
   }
+  const conditionModifiers = Object.create(null) as Record<
+    string,
+    ConditionModifier | null
+  >
+  for (const name in modifiers) {
+    const code = modifiers[name]
+    const kind = code & 7
+    const rank = code >> 3
+    conditionModifiers[name] =
+      kind === modifierKindState
+        ? [canonicalStateModifierNames[rank], kind, rank, stateModifierSelectors[rank]]
+        : kind === modifierKindMedia
+          ? [name, kind, rank, mediaQueries[name]]
+          : kind === modifierKindPlatform
+            ? [name, kind, rank, undefined, undefined, undefined, platformMatches(name)]
+            : [name, kind, rank]
+  }
+  const resolveCondition = (authored: string): ConditionModifier | null => {
+    const cached = conditionModifiers[authored]
+    if (cached !== undefined) return cached
+    let result: ConditionModifier | null = null
+    if (authored.startsWith('group-')) {
+      const slash = authored.indexOf('/')
+      const state = authored.slice(6, slash === -1 ? undefined : slash)
+      const code = modifiers[state] || 0
+      const rank = code >> 3
+      const groupName = slash === -1 ? 'true' : authored.slice(slash + 1)
+      if (
+        (code & 7) === modifierKindState &&
+        rank !== 6 &&
+        rank !== 7 &&
+        (slash === -1 || /^[\w-]+$/.test(groupName))
+      ) {
+        result = [
+          `group-${canonicalStateModifierNames[rank]}${slash === -1 ? '' : authored.slice(slash)}`,
+          5,
+          rank,
+          stateModifierSelectors[rank],
+          groupName,
+          canonicalStateModifierNames[rank],
+        ]
+      }
+    } else if (authored.charCodeAt(0) === 64) {
+      const slash = authored.indexOf('/')
+      const size = authored.slice(1, slash === -1 ? undefined : slash)
+      const containerName = slash === -1 ? '' : authored.slice(slash + 1)
+      const code = modifiers[size] || 0
+      const query = mediaQueries[size]
+      if (
+        /^[\w-]+$/.test(size) &&
+        (slash === -1 || /^[\w-]+$/.test(containerName)) &&
+        (code & 7) === modifierKindMedia &&
+        isContainerSizeQueryText(query)
+      ) {
+        result = [authored, 6, code >> 3, query, size, containerName]
+      }
+    }
+    return (conditionModifiers[authored] = result)
+  }
+  const propertyKinds: Record<string, number> = {
+    shadowColor: 1,
+    shadowOffset: 2,
+    shadowOpacity: 3,
+    shadowRadius: 4,
+    matrix: 5,
+    perspective: 5,
+    rotateX: 5,
+    rotateY: 5,
+    rotateZ: 5,
+    scaleZ: 5,
+    skewX: 5,
+    skewY: 5,
+    textShadowColor: 6,
+    textShadowOffset: 6,
+    textShadowRadius: 6,
+    border: 7,
+    borderTop: 7,
+    borderRight: 7,
+    borderBottom: 7,
+    borderLeft: 7,
+    borderBlock: 7,
+    borderInline: 7,
+    outline: 7,
+    padding: 8,
+    paddingBlock: 8,
+    paddingInline: 8,
+    margin: 8,
+    marginBlock: 8,
+    marginInline: 8,
+    inset: 8,
+    insetBlock: 8,
+    insetInline: 8,
+    borderRadius: 8,
+  }
+  const propertyKind = (property: string) => propertyKinds[property] || 0
+  // transition strings are re-normalized on every render of every animated
+  // element; the result only depends on this revision's shorthands
+  const normalizedTransitions = new Map<string, string>()
   const next: ConfigRevisionState = {
     revision: captured.revision,
     modifiers,
     mediaQueries,
+    resolveCondition,
+    tokenCategory: getTokenCategoryForProperty,
+    expandSafeArea: expandSafeAreaValue,
+    safeAreaVariable: resolveSafeAreaVariable,
+    parseFlatValue,
+    styleStaticConfig: (staticConfig, conf) =>
+      resolveStyleStaticConfig(staticConfig, conf, captured.revision),
+    propertyKind,
+    compositeValue: (property, raw, context, resolve) => {
+      const kind = propertyKinds[property]
+      if (kind < 7) return
+      if (kind === 7) {
+        const { width, style, color } = classifyBorderComponents(
+          raw,
+          property === 'outline'
+        )
+        if (style === 'none' && !color) return 'none'
+        const prefix = property === 'outline' ? 'outline' : 'border'
+        return [
+          width && resolve(context, `${prefix}Width`, width),
+          style,
+          color && resolve(context, `${prefix}Color`, color),
+        ]
+          .filter(Boolean)
+          .join(' ')
+      }
+      // a one-component shorthand (margin="4px") has nothing to distribute;
+      // the split is on whitespace, so without any there is nothing to match out
+      if (!/\s/.test(raw)) return
+      const parts = splitComponents(raw)
+      if (parts.length > 1) {
+        let value = ''
+        for (const part of parts) {
+          value += `${value ? ' ' : ''}${resolve(context, property, part)}`
+        }
+        return value
+      }
+    },
+    normalizeTransition: (raw) => {
+      const known = normalizedTransitions.get(raw)
+      if (known !== undefined) return known
+      const out = raw.replace(
+        /\/\*[\s\S]*?\*\/|(["'])(?:\\.|(?!\1)[^\\])*\1|[A-Za-z_][\w-]*/g,
+        (authored, quote, offset) => {
+          if (
+            quote ||
+            raw.charCodeAt(offset + authored.length) === 40 ||
+            (raw.charCodeAt(offset - 1) === 45 && raw.charCodeAt(offset - 2) === 45)
+          ) {
+            return authored
+          }
+          let property = config.shorthands[authored] || authored
+          if (property === 'x' || property === 'y') property = 'translate'
+          else if (property === 'scaleX' || property === 'scaleY') property = 'scale'
+          else if (propertyKind(property) === 5) property = 'transform'
+          return property.replace(/[A-Z]/g, '-$&').toLowerCase()
+        }
+      )
+      if (normalizedTransitions.size > 2048) normalizedTransitions.clear()
+      normalizedTransitions.set(raw, out)
+      return out
+    },
+    embeddedTokens: (raw, resolve) =>
+      raw.replace(
+        /\/\*[\s\S]*?\*\/|(["'])(?:\\.|(?!\1)[^\\])*\1|[$A-Za-z_][\w.$-]*(?:\/\d+)?/g,
+        (word, quote, offset) => {
+          const before = raw.charCodeAt(offset - 1)
+          return quote ||
+            (word[0] !== '$' &&
+              ((before >= 48 && before <= 57) ||
+                before === 35 ||
+                (before === 45 && raw.charCodeAt(offset - 2) === 45) ||
+                raw.charCodeAt(offset + word.length) === 40))
+            ? word
+            : resolve(word)
+        }
+      ),
   }
 
   // a getter above may have synchronously mutated and rebuilt this config.

package/src/helpers/insertStyleRule.tsx

@@ -15,8 +15,10 @@ const scannedCache = new WeakMap<CSSStyleSheet, string>()
 const totalSelectorsInserted = new Map<string, number>()
 const allSelectors: Record<string, string> = {}
 const allRules: Record<string, string> = {}
+const allRuleSets: Record<string, string[]> = {}
 
 export const getAllSelectors = () => allSelectors
+export const getRulesForIdentifier = (identifier: string) => allRuleSets[identifier]
 
 // updateRules is the only writer, so one flag there covers every change
 let sortedRules: string[] = []
@@ -341,6 +343,7 @@ export function stopAccumulatingRules() {
 export function updateRules(identifier: string, rules: string[]) {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS && trackAllRules) {
     allRules[identifier] = rules.join(' ')
+    allRuleSets[identifier] = rules
     sortedRulesStale = true
   }
   return true
@@ -396,7 +399,7 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
         sheet.insertRule(rule, sheet.cssRules.length)
       }
     } catch (err) {
-      if (process.env.NODE_ENV === 'production') {
+      if (process.env.NODE_ENV === 'development') {
         const rule = rules[0] || ''
         const selectorEnd = rule.indexOf('{')
         const owner =
@@ -418,7 +421,6 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
           )
         )
       }
-      // in dev throw to show error clearly
     }
   }
 }

package/src/helpers/log.ts

@@ -1,17 +1,18 @@
 import { _disableMediaTouch } from '../hooks/useMedia'
 
 export function log(...args: any[]) {
-  if (process.env.NODE_ENV === 'production') return
-  _disableMediaTouch(true)
-  try {
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      return console.info(...args)
+  if (process.env.NODE_ENV === 'development') {
+    _disableMediaTouch(true)
+    try {
+      if (process.env.TAMAGUI_TARGET === 'web') {
+        return console.info(...args)
+      }
+      // react native doesn't log in the cli unless it's log
+      return console.log(...args)
+    } catch (err) {
+      console.error(err)
+    } finally {
+      _disableMediaTouch(false)
     }
-    // react native doesn't log in the cli unless it's log
-    return console.log(...args)
-  } catch (err) {
-    console.error(err)
-  } finally {
-    _disableMediaTouch(false)
   }
 }

package/src/helpers/mergeVariants.ts

@@ -1,23 +1,59 @@
-import { mergeFlatValues } from '@tamagui/style-grammar/runtime'
-
 import type { GenericVariantDefinitions } from '../types'
+import { styledDynamicSymbol } from '../types'
 import { isPlainObject } from './isObj'
 
+function mergeVariantValues(earlier: unknown, later: unknown): unknown {
+  if (typeof earlier !== 'string' || typeof later !== 'string') return later
+  if (!earlier.includes(':') && !later.includes(':')) return later
+
+  const getSlot = (token: string, colon: number) => {
+    const slot: string[] = []
+    for (let modifier of token.slice(0, colon).split(':')) {
+      if (modifier === 'active') modifier = 'press'
+      else if (modifier.startsWith('group-active')) {
+        modifier = modifier.replace('group-active', 'group-press')
+      }
+      let index = 0
+      while (index < slot.length && slot[index] < modifier) index++
+      if (slot[index] !== modifier) slot.splice(index, 0, modifier)
+    }
+    return slot.join(':')
+  }
+
+  const clauses = new Map<string, string>()
+  let base: string | undefined
+  const add = (source: string, reject: boolean) => {
+    for (const token of source.trim().split(/\s+/)) {
+      const colon = token.lastIndexOf(':')
+      if (colon === -1) base = token
+      else {
+        if (colon === token.length - 1) {
+          if (reject) return false
+          continue
+        }
+        const slot = getSlot(token, colon)
+        clauses.delete(slot)
+        clauses.set(slot, token)
+      }
+    }
+    return true
+  }
+  add(earlier, false)
+  if (!add(later, true)) return later
+  return [base, ...clauses.values()].filter(Boolean).join(' ')
+}
+
 // same key ordering as mergeProps (parent keys first, then ours), but a key
 // present on both sides merges its clauses instead of being replaced outright
 function mergeStyleBranch(
   parentBranch: Record<string, any>,
   ourBranch: Record<string, any>
 ) {
-  const out: Record<string, any> = {}
-  for (const key in parentBranch) {
-    if (key in ourBranch) continue
-    out[key] = parentBranch[key]
-  }
+  const out: Record<string, any> = { ...parentBranch }
   for (const key in ourBranch) {
     out[key] =
       key in parentBranch
-        ? mergeFlatValues(parentBranch[key], ourBranch[key])
+        ? mergeVariantValues(parentBranch[key], ourBranch[key])
         : ourBranch[key]
   }
   return out
@@ -35,28 +71,29 @@ export const mergeVariants = (
     return ourVariants || {}
   }
 
-  const variants: Record<string, any> = {}
+  const variants: Record<string, any> = { ...parentVariants }
 
   for (const key in ourVariants) {
     const parentVariant = parentVariants?.[key]
     const ourVariant = ourVariants[key]
-    if (!isPlainObject(parentVariant) || !isPlainObject(ourVariant)) {
+    if (
+      !isPlainObject(parentVariant) ||
+      !isPlainObject(ourVariant) ||
+      // styled.dynamic carriers are atomic: a child redefinition replaces the
+      // parent's outright, never merges (spreading a bare marker's brand into
+      // an enumerated child would turn it into a consumed no-op)
+      styledDynamicSymbol in parentVariant ||
+      styledDynamicSymbol in ourVariant
+    ) {
       variants[key] = ourVariant
     } else {
       if (level === 0) {
         variants[key] = mergeVariants(parentVariant, ourVariant, level + 1)
       } else {
-        // A branch is a style object. Merge per property, and per clause within
-        // a property: a child restating `borderColor="green"` overrides the
-        // parent's base without erasing the parent's `press:transparent`, which
-        // a plain key-level override silently dropped.
         variants[key] = mergeStyleBranch(parentVariant, ourVariant)
       }
     }
   }
 
-  return {
-    ...parentVariants,
-    ...variants,
-  }
+  return variants
 }

package/src/helpers/nativeOnlyProps.ts

@@ -31,7 +31,6 @@ export const nativeOnlyProps = {
   onMagicTap: 1,
   onTextLayout: 1,
   pressRetentionOffset: 1,
-  selectionColor: 1,
   shouldRasterizeIOS: 1,
   suppressHighlighting: 1,
   textBreakStrategy: 1,

package/src/helpers/nativeStyleEngine.ts

@@ -14,6 +14,18 @@
 
 import { getVariableValue } from '../createVariable'
 
+/**
+ * CSS-shaped Input color styles lower back to React Native TextInput props.
+ * Keeping this table beside native color processing makes the runtime and
+ * compiler use one RN compatibility boundary after token resolution.
+ */
+export const nativeTextInputColorProps: Readonly<Record<string, string>> = {
+  placeholderTextColor: 'placeholderTextColor',
+  selectionColor: 'selectionColor',
+  cursorColor: 'cursorColor',
+  selectionHandleColor: 'selectionHandleColor',
+}
+
 export interface NativeStyleEngineLinkHandle {
   id: number
   unlink: () => void
@@ -60,9 +72,17 @@ interface CompiledMappingLink {
   stateThemes: Map<string, object>
 }
 
+interface ResolvedMappingState {
+  theme: object
+  /** raw resolved values, what React renders through RN's own style normalizer */
+  renderProps: Record<string, unknown>
+  /** engine transport form after processStyleColors, never handed back to React */
+  nativeProps: Record<string, unknown>
+}
+
 interface CompiledMapping {
   mapping: NativeStyleThemeMapping
-  states: Map<string, { theme: object; props: Record<string, unknown> }>
+  states: Map<string, ResolvedMappingState>
   links: Set<CompiledMappingLink>
 }
 
@@ -100,24 +120,27 @@ function resolveCompiledMapping(
   compiled: CompiledMapping,
   stateName: string,
   theme: Record<string, unknown>
-): Record<string, unknown> {
+): ResolvedMappingState {
   const cached = compiled.states.get(stateName)
-  if (cached?.theme === theme) return cached.props
+  if (cached?.theme === theme) return cached
 
-  const props: Record<string, unknown> = {}
+  const renderProps: Record<string, unknown> = {}
   for (const styleKey in compiled.mapping) {
     const value = theme[compiled.mapping[styleKey]]
-    props[styleKey] = value === undefined ? null : getVariableValue(value)
+    renderProps[styleKey] = value === undefined ? null : getVariableValue(value)
   }
-  const processed = engine?.processStyleColors(props) ?? props
+  // the engine's color form (srgb maps for Fabric's C++ parser) must not flow
+  // back through React: RN's JS style normalizer misreads it
+  const nativeProps = engine?.processStyleColors(renderProps) ?? renderProps
   if (compiled.states.size >= 10_000) {
     compiled.states.clear()
     for (const link of compiled.links) {
       link.stateThemes.clear()
     }
   }
-  compiled.states.set(stateName, { theme, props: processed })
-  return processed
+  const resolved: ResolvedMappingState = { theme, renderProps, nativeProps }
+  compiled.states.set(stateName, resolved)
+  return resolved
 }
 
 export function setNativeStyleEngine(next: NativeStyleEngine | null): void {
@@ -158,7 +181,7 @@ export function updateNativeStyleScope(
           compiled,
           stateName,
           theme as Record<string, unknown>
-        )
+        ).nativeProps
         entries.push({ id: link.handle.id, state: stateName, props })
         link.stateThemes.set(stateName, theme)
       }
@@ -178,7 +201,7 @@ export function resolveNativeStyleMapping(
   stateName: string,
   theme: Record<string, unknown>
 ): Record<string, unknown> {
-  return resolveCompiledMapping(getCompiledMapping(mapping), stateName, theme)
+  return resolveCompiledMapping(getCompiledMapping(mapping), stateName, theme).renderProps
 }
 
 export function linkNativeStyleMapping(
@@ -192,7 +215,19 @@ export function linkNativeStyleMapping(
   if (!engine) return null
 
   const compiled = getCompiledMapping(mapping)
-  const stateProps = resolveCompiledMapping(compiled, stateName, theme)
+  // a scope can advance (layout effect) after a concurrent render captured its
+  // theme but before that render's host ref links. the engine's link() only
+  // stores tables, it never commits, so link against the live scope state and
+  // commit that table once to correct the stale React commit.
+  const scopeState = scopeStates.get(scopeId)
+  const currentStateName = scopeState?.name ?? stateName
+  const currentTheme = (scopeState?.theme ?? theme) as Record<string, unknown>
+  const stale = currentStateName !== stateName || currentTheme !== theme
+  const stateProps = resolveCompiledMapping(
+    compiled,
+    currentStateName,
+    currentTheme
+  ).nativeProps
   let base = processedBases.get(baseStyle)
   if (!base || base.engine !== engine) {
     base = { engine, props: engine.processStyleColors(baseStyle) }
@@ -201,14 +236,20 @@ export function linkNativeStyleMapping(
   const state: Record<string, Record<string, unknown>> = {}
   const stateThemes = new Map<string, object>()
   for (const [name, cached] of compiled.states) {
-    state[name] = cached.props
+    state[name] = cached.nativeProps
     stateThemes.set(name, cached.theme)
   }
-  state[stateName] = stateProps
-  stateThemes.set(stateName, theme)
+  state[currentStateName] = stateProps
+  stateThemes.set(currentStateName, currentTheme)
   const handle = engine.link(ref, { base: base.props, state }, scopeId)
   if (!handle) return null
 
+  if (stale) {
+    engine.updateViewStateTables([
+      { id: handle.id, state: currentStateName, props: stateProps },
+    ])
+  }
+
   const link: CompiledMappingLink = {
     handle,
     scopeId,

package/src/helpers/normalizeValueWithProperty.ts

@@ -8,11 +8,14 @@ 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.
@@ -25,13 +28,8 @@ export function normalizeValueWithProperty(value: any, property = ''): any {
     }
     return value
   }
-  if (
-    stylePropsUnitless[property] ||
-    (property && !stylePropsAllPlusTransforms[property]) ||
-    typeof value === 'boolean'
-  ) {
-    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