@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/src/eventHandling.native.ts

@@ -11,13 +11,13 @@ import type { StaticConfig, TamaguiComponentStateRef } from './types'
 
 const isFabric = !!(globalThis as any).nativeFabricUIManager
 
-// Android (new arch + RNGH 2.30) freezes the JS thread when many pressStyle
+// Android (new arch + RNGH 2.30) freezes the JS thread when many press clauses
 // components each attach a Gesture.Manual()...onTouchesDown observer (e.g. a
 // sheet with several buttons / inputs). Each handler opts into RNGH's
 // pointer-data pipeline (needsPointerData), and the combined coordination
 // cost recreates the same setJSResponder freeze c345b5fc28 was supposed to
 // have killed. iOS Fabric absorbs the cost; Android Fabric doesn't.
-// Skip the observer + wrap on Android — pressStyle visuals fall through to
+// Skip the observer + wrap on Android — press-clause visuals fall through to
 // the standard responder path via the synthesized event handlers.
 // computed lazily: the native core bundle is also loaded by the compiler for
 // static extraction, where Platform's init runs after this module's. A
@@ -75,9 +75,9 @@ export function useEvents(
     }
   }
 
-  // hasPressEvents includes events.onPress synthesized just for pressStyle
+  // hasPressEvents includes events.onPress synthesized just for press clauses
   // visuals; hasRealPressEvents is true only when the caller passed a real
-  // handler. the distinction matters for arbitration: pressStyle-only gestures
+  // handler. the distinction matters for arbitration: press-clause-only gestures
   // must not steal ownership from a real-handler ancestor (e.g. Link asChild's
   // navigate handler merged onto a child View by Slot).
   const hasPressEvents = events?.onPress
@@ -124,9 +124,9 @@ export function useEvents(
   // component handles gesture detection at its own level.
   //
   // Composite component special case - when styled() wraps a non-Tamagui component
-  // (e.g. React.forwardRef), the elementType becomes that composite component.
+  // (e.g. component wrappers), the elementType becomes that composite component.
   // GestureDetector/responder wrapping around a composite component breaks during
-  // re-renders triggered by pressStyle state changes (the gesture/responder loses
+  // re-renders triggered by press-clause state changes (the gesture/responder loses
   // attachment to the native view through the composite layers). Pass events as props
   // so they flow through to the inner native View.
   const isCompositeComponent =
@@ -159,7 +159,7 @@ export function useEvents(
     // claims responder but never finalizes. The responder path is the source of
     // truth RN already uses for innermost press ownership.
     //
-    // Android pressStyle-only fallback: wire synthesized press handlers to the
+    // Android press-clause-only fallback: wire synthesized press handlers to the
     // responder system on viewProps instead of an RNGH Manual observer (which
     // freezes Android — see top-of-file isAndroid comment). Hook is called
     // unconditionally here for stable hooks order; useMainThreadPressEvents
@@ -182,7 +182,7 @@ export function useEvents(
 
       if (hasRealPressEvents && !isInsideNativeMenu) {
         // Real handlers are delivered by useMainThreadPressEvents above. Clear
-        // any cached pressStyle observer from an earlier render so it cannot
+        // any cached press-clause observer from an earlier render so it cannot
         // double-fire after onPress appears dynamically.
         gestureRef.current = null
         return null
@@ -211,17 +211,17 @@ export function useEvents(
             })
           gestureRef.current = manual
         } else if (!getIsAndroid()) {
-          // pressStyle-only (events.onPress was synthesized to drive pressStyle
+          // press-clause-only (events.onPress was synthesized to drive press state
           // visuals, no user handler): use Manual + manualActivation. Touch
-          // observation runs on the UI thread for fast pressStyle feedback,
+          // observation runs on the UI thread for fast press-clause feedback,
           // but the gesture never activates → never claims responder/ownership,
           // so a real-handler ancestor still wins arbitration. This is the fix
           // for nested press scenarios like <Link asChild><View><Button/></View></Link>
           // where the View carries the merged navigate onPress and the inner
-          // pressStyled Button must not steal the press.
+          // press-styled Button must not steal the press.
           //
           // Android: skipped — see isAndroid comment at top. Synthesized
-          // pressStyle handlers fall through to viewProps responder events.
+          // press-clause handlers fall through to viewProps responder events.
           gestureRef.current = Gesture.Manual()
             .runOnJS(true)
             .manualActivation(true)
@@ -270,12 +270,12 @@ export function wrapWithGestureDetector(
     return content
   }
 
-  // pressStyle-only observers (Manual + manualActivation gesture) must never
-  // claim the responder — otherwise a nested pressStyle Tamagui child would
+  // press-clause-only observers (Manual + manualActivation gesture) must never
+  // claim the responder — otherwise a nested press-styled Tamagui child would
   // preempt a real-handler ancestor (e.g. <Link asChild><View><Button/></View></Link>
   // where the View carries the merged navigate handler and the inner Button
-  // has only pressStyle). The Manual gesture observes touches on the UI thread
-  // for fast pressStyle visuals without participating in arbitration.
+  // has only press clauses). The Manual gesture observes touches on the UI thread
+  // for fast press-clause visuals without participating in arbitration.
   if (!hasRealPressEvents) {
     return React.createElement(GestureDetector, { gesture }, content)
   }

package/src/helpers/borderComponents.ts

@@ -0,0 +1,62 @@
+// the one classifier for border/outline shorthand components. every parser
+// (web composite lowering, native border emission, native normalizeStyle
+// expansion) routes through it so they cannot disagree on what counts as a
+// width, a line style, or a color
+
+export const lineStyles = new Set([
+  'none',
+  'hidden',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+])
+
+// splits on whitespace outside parens and quotes, so `rgb(1, 2, 3)` and
+// `calc(1px + 1px)` stay single components
+export function splitComponents(value: string): string[] {
+  return (
+    value.match(
+      /(?:[^\s("']+|\((?:[^()]|\([^)]*\))*\)|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')+/g
+    ) || []
+  )
+}
+
+export function startsValueFunction(value: string): boolean {
+  return /^-?[a-z][a-z0-9-]*\(/i.test(value)
+}
+
+const colorFunction =
+  /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\(/i
+
+export type BorderComponents = {
+  width?: string
+  style?: string
+  color?: string
+}
+
+export function classifyBorderComponents(raw: string, allowAuto = false) {
+  const out: BorderComponents = {}
+  for (const part of splitComponents(raw)) {
+    if (lineStyles.has(part) || (allowAuto && part === 'auto')) {
+      out.style = part
+    } else if (colorFunction.test(part)) {
+      out.color = part
+    } else if (
+      part === 'thin' ||
+      part === 'medium' ||
+      part === 'thick' ||
+      /^[+-]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)?$/.test(part) ||
+      startsValueFunction(part)
+    ) {
+      out.width = part
+    } else {
+      out.color = part
+    }
+  }
+  return out
+}

package/src/helpers/componentDisplayName.ts

@@ -0,0 +1,3 @@
+export const componentDisplayName = /* @__PURE__ */ Symbol.for(
+  'tamagui.componentDisplayName'
+)

package/src/helpers/configVariables.ts

@@ -0,0 +1,64 @@
+import { createVariable, isVariable } from '../createVariable'
+import type { GenericVariables, TokensParsed, Variable } from '../types'
+import { findVariableToken, isUnitlessVariableKey } from './variableValue'
+import { warnOnce } from './warnOnce'
+
+export function mergeConfigVariablesIntoTheme(
+  theme: Record<string, Variable>,
+  themeName: string,
+  variables: GenericVariables,
+  tokensParsed: TokensParsed
+) {
+  const scheme = themeName.startsWith('dark') ? 'dark' : 'light'
+  const resolving = new Set<string>()
+
+  const resolveRawValue = (key: string, value: unknown): unknown => {
+    if (typeof value === 'object' && value !== null) {
+      if (isVariable(value)) return value.val
+      if ('needsPx' in value) return value
+      if ('light' in value || 'dark' in value) {
+        return resolveRawValue(key, (value as any)[scheme] ?? (value as any).light)
+      }
+      return
+    }
+    if (typeof value === 'string') {
+      const name = value
+      if (name in variables && !(name in theme)) {
+        if (resolving.has(name)) {
+          warnOnce(
+            `config-cycle:${name}`,
+            `createTamagui variables: reference cycle at "${name}". Dropping.`
+          )
+          return
+        }
+        resolving.add(name)
+        const res = resolveRawValue(name, variables[name])
+        resolving.delete(name)
+        return res
+      }
+      const themeValue = theme[name]
+      if (themeValue !== undefined) {
+        return isVariable(themeValue) ? themeValue.val : themeValue
+      }
+      const token = findVariableToken(tokensParsed, name)
+      return token ? token.val : value
+    }
+    return value
+  }
+
+  for (const key in variables) {
+    if (key in theme) continue
+    let raw = resolveRawValue(key, variables[key])
+    if (raw === undefined) continue
+    let needsPx = typeof raw === 'number' && !isUnitlessVariableKey(key)
+    if (typeof raw === 'object' && raw !== null && 'needsPx' in raw) {
+      needsPx = true
+      raw = (raw as unknown as { val: number }).val
+    }
+    const variable = createVariable({ key, name: key, val: raw as any })
+    if (needsPx) {
+      variable.needsPx = true
+    }
+    theme[key] = variable
+  }
+}

package/src/helpers/createDesignSystem.ts

@@ -1,47 +1,20 @@
 import { isWeb } from '@tamagui/constants'
 import type { CreateTamaguiProps, Variable } from '../types'
-import { getVariableVariable, isVariable } from '../createVariable'
-import { autoVariables, registerCSSVariable, variableToCSS } from './registerCSSVariable'
+import {
+  getAutoVariableCSS,
+  getVariableGeneration,
+  registerCSSVariable,
+  variableToCSS,
+} from './registerCSSVariable'
+import { getConfigMaybe } from '../config'
 import { getThemeCSSRules } from './getThemeCSSRules'
-import { getAllRules } from './insertStyleRule'
+import { getAllRules, wrapStyleRules } from './insertStyleRule'
 
 type ThemeConfig = {
   cssRuleSets: string[]
   getThemeRulesSets: () => string[]
 }
 
-// helper to get font property CSS declarations
-function getFontPropertyDeclarations(
-  fontParsed: any,
-  tokenKey: string = '$true'
-): string[] {
-  const props: string[] = ['font-family: var(--f-family)']
-
-  const getVarRef = (obj: any) => {
-    const val = obj?.[tokenKey]
-    if (isVariable(val)) {
-      return getVariableVariable(val)
-    }
-    return undefined
-  }
-
-  const letterSpacing = getVarRef(fontParsed.letterSpacing)
-  if (letterSpacing) props.push(`letter-spacing: ${letterSpacing}`)
-
-  const lineHeight = getVarRef(fontParsed.lineHeight)
-  if (lineHeight) props.push(`line-height: ${lineHeight}`)
-
-  const fontStyle = getVarRef(fontParsed.style)
-  if (fontStyle) props.push(`font-style: ${fontStyle}`)
-
-  const fontWeight = getVarRef(fontParsed.weight)
-  if (fontWeight) props.push(`font-weight: ${fontWeight}`)
-
-  return props
-}
-
-export { getFontPropertyDeclarations }
-
 /**
  * Generates CSS for tokens - registers CSS variables and builds declaration strings
  */
@@ -97,7 +70,7 @@ export function createFontCSS(
       const [name, language] = key.includes('_') ? key.split('_') : [key]
       const fontVars = registerFontVariables(fontParsed)
       fontDeclarations[key] = {
-        name: name.slice(1),
+        name,
         declarations: fontVars,
         language,
         fontParsed,
@@ -118,7 +91,7 @@ export function buildCSSRuleSets(
     string,
     { name: string; declarations: string[]; language?: string; fontParsed: any }
   >,
-  defaultFontToken: string = '$true'
+  defaultFontToken = ''
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
@@ -148,16 +121,15 @@ export function buildCSSRuleSets(
     }
 
     // shared rule: all font_* classes + is_View apply font properties
-    // this resets fonts on Views like React Native does
+    // this resets fonts on Views like React Native does; the declarations must
+    // follow settings.defaultFont, never the sorted selector order
     if (fontSelectors.length) {
-      const firstFont = fontDeclarations[sortedFontDeclarationKeys[0]]
-      if (firstFont?.fontParsed) {
-        const fontProps = getFontPropertyDeclarations(
-          firstFont.fontParsed,
-          defaultFontToken
-        )
-        const sharedSelectors = [...fontSelectors, '.is_View'].join(', ')
-        cssRuleSets.push(`${sharedSelectors} {${fontProps.join('; ')}}`)
+      const defaultFont = fontDeclarations[defaultFontToken]
+      if (defaultFont?.fontParsed) {
+        // These are defaults, so an atomic style prop must be able to override
+        // them regardless of stylesheet insertion order.
+        const sharedSelectors = `:where(${[...fontSelectors, '.is_View'].join(', ')})`
+        cssRuleSets.push(`${sharedSelectors} {font-family: var(--f-family)}`)
       }
     }
 
@@ -194,71 +166,137 @@ export function createThemeCSS(
 }
 
 /**
- * Gets all generated CSS - design system + runtime styles
+ * Everything `getCSS` emits ahead of the runtime rules. It is a pure function of
+ * the config, so a per-config slot holds it across calls and SSR stops
+ * regenerating every theme's variable block per request. It is NOT hoisted to
+ * `createTamagui` time: generating theme rules is what mints auto variables, so
+ * doing it eagerly would renumber them whenever a process builds more than one
+ * config, and the point of this cache is that nothing about the output moves.
  */
-export function getCSS(
-  themeConfig: ThemeConfig,
-  opts: {
-    separator?: string
-    sinceLastCall?: boolean
-    exclude?: 'themes' | 'design-system' | string | null
-  } = {},
-  lastIndex: { value: number }
-): string {
-  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET === 'web') {
-    const { separator = '\n', sinceLastCall, exclude } = opts
+type StaticCSS = {
+  /** the variable generation these were built against */
+  generation: number
+  /** the config whose settings `getThemeCSSRules` read while building them */
+  config: unknown
+  /** keyed by separator and whether the theme rules are in the string */
+  byKey: Map<string, string>
+}
 
-    if (sinceLastCall && lastIndex.value >= 0) {
-      const rules = getAllRules()
-      const newRules = rules.slice(lastIndex.value)
-      lastIndex.value = rules.length
-      return newRules.join(separator)
-    }
+export type GetCSSState = {
+  /** index into the sorted rule list that `sinceLastCall` slices from */
+  lastIndex: number
+  static: StaticCSS | null
+}
 
-    lastIndex.value = 0
+// a request only ever asks for one or two shapes; anything past that is a caller
+// passing separators it makes up, and dropping the lot just costs a rebuild
+const MAX_STATIC_SHAPES = 8
 
-    const runtimeStyles = getAllRules().join(separator)
+const getStaticCSS = (
+  themeConfig: ThemeConfig,
+  separator: string,
+  withThemes: boolean,
+  state: GetCSSState
+): string => {
+  const key = withThemes ? separator : `\u0000${separator}`
+  const config = getConfigMaybe()
+  let cached = state.static
+
+  if (
+    !cached ||
+    cached.generation !== getVariableGeneration() ||
+    cached.config !== config
+  ) {
+    cached = { generation: getVariableGeneration(), config, byKey: new Map() }
+    state.static = cached
+  }
 
-    if (exclude === 'design-system') {
-      return runtimeStyles
-    }
+  const hit = cached.byKey.get(key)
+  if (hit !== undefined) {
+    return hit
+  }
 
-    const themeRules = exclude ? '' : themeConfig.getThemeRulesSets().join(separator)
+  // must run before getAutoVariableCSS: generating theme rules is what creates
+  // the auto variables that block declares
+  const themeRules = withThemes ? themeConfig.getThemeRulesSets().join(separator) : ''
 
-    // auto-generated vars from theme values not in tokens
-    const autoVarCSS = autoVariables.length
-      ? `:root{${autoVariables.map((v) => `--${v.name}:${v.val}`).join(';')}}`
-      : ''
+  // auto-generated vars from theme values not in tokens
+  const autoVariableCSS = getAutoVariableCSS()
+  const autoVarCSS = autoVariableCSS ? `:root{${autoVariableCSS}}` : ''
 
-    // notes:
-    // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
-    // display: inline breaks css transform styles
+  // notes:
+  // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
+  // display: inline breaks css transform styles
 
-    // !important or else random css easily overrides, the prop is absolute (local-first styling)
-    const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
+  // !important or else random css easily overrides, the prop is absolute (local-first styling)
+  const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
 ._hsb-y::-webkit-scrollbar:vertical { display: none !important; }
 ._hsb-x { scrollbar-width: none !important; }
 ._hsb-y { scrollbar-width: none !important; }`
-    const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
+  const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
 :root ._pe-boxnone>* {pointer-events:auto;}`
 
-    const designSystem = `._ovs-contain {overscroll-behavior:contain;}
+  const designSystem = `._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
-.is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
-.is_Text { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
-@scope (.is_Text) to (.is_View) { .is_Text { white-space: inherit; word-wrap: inherit; } }
+:where(.is_View) { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
+:where(.is_Text) { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
+@scope (.is_Text) to (.is_View) { :where(.is_Text) { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
-.is_Input::selection, .is_TextArea::selection {background-color: var(--t_selectionColor);}
-.is_Input::placeholder, .is_TextArea::placeholder {color: var(--t_placeholderColor);}
 ${pointerEventsCSS}
 ${hideScrollBarsCSS}
 ${autoVarCSS}
 ${themeConfig.cssRuleSets.join(separator)}`
 
-    return `${designSystem}
-${themeRules}
-${runtimeStyles}`
+  const css = `${designSystem}\n${themeRules}\n`
+
+  // generating theme rules is what mints auto variables, so the generation this
+  // was built against is the one standing now, not the one read on the way in
+  if (cached.generation !== getVariableGeneration()) {
+    cached = { generation: getVariableGeneration(), config, byKey: new Map() }
+    state.static = cached
+  }
+  if (cached.byKey.size >= MAX_STATIC_SHAPES) {
+    cached.byKey.clear()
+  }
+  cached.byKey.set(key, css)
+
+  return css
+}
+
+/**
+ * Gets all generated CSS - design system + runtime styles
+ */
+export function getCSS(
+  themeConfig: ThemeConfig,
+  opts: {
+    separator?: string
+    sinceLastCall?: boolean
+    exclude?: 'themes' | 'design-system' | string | null
+  } = {},
+  state: GetCSSState
+): string {
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET === 'web') {
+    const { separator = '\n', sinceLastCall, exclude } = opts
+
+    if (sinceLastCall && state.lastIndex >= 0) {
+      const rules = getAllRules()
+      const newRules = rules.slice(state.lastIndex)
+      state.lastIndex = rules.length
+      return wrapStyleRules(newRules.join(separator))
+    }
+
+    state.lastIndex = 0
+
+    const runtimeStyles = getAllRules().join(separator)
+
+    if (exclude === 'design-system') {
+      return wrapStyleRules(runtimeStyles)
+    }
+
+    return wrapStyleRules(
+      `${getStaticCSS(themeConfig, separator, !exclude, state)}${runtimeStyles}`
+    )
   }
   return ''
 }