@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/helpers/expandStyle.ts

@@ -113,9 +113,24 @@ export function expandStyle(
         }
         return
       }
+      case 'visibility': {
+        // native has no visibility; map hidden -> opacity:0 + pointerEvents:none
+        // visible/collapse are dropped (collapse is web-only via CSS)
+        if (value === 'hidden') {
+          return [
+            ['opacity', 0],
+            ['pointerEvents', 'none'],
+          ]
+        }
+        // strip the prop entirely on native (returning [] iterates 0 times in normalizeStyle)
+        return []
+      }
       case 'backgroundImage': {
-        // RN 0.76+ uses experimental_backgroundImage
-        // value may be a parsed array (from parseNativeStyle) or a plain string
+        // RN 0.76+ uses experimental_backgroundImage. a STRING stays on the
+        // `backgroundImage` key so it flows whole into the program engine —
+        // the evaluator parses the winning payload and writes the renamed key
+        // itself. only already-parsed arrays rename here
+        if (typeof value === 'string') return
         return [['experimental_backgroundImage', value]]
       }
       case 'border': {

package/src/helpers/extractPseudoState.ts

@@ -0,0 +1,32 @@
+import type { TamaguiComponentState } from '../types'
+
+type PseudoState = {
+  hover?: boolean
+  press?: boolean
+  focus?: boolean
+  groups?: Record<string, { hover?: boolean; press?: boolean; focus?: boolean }>
+}
+
+export function extractPseudoState(state: TamaguiComponentState): PseudoState {
+  const groups: PseudoState['groups'] = {}
+
+  if (state.group) {
+    for (const groupName in state.group) {
+      const pseudo = state.group[groupName]?.pseudo
+      if (pseudo) {
+        groups[groupName] = {
+          hover: pseudo.hover,
+          press: pseudo.press,
+          focus: pseudo.focus,
+        }
+      }
+    }
+  }
+
+  return {
+    hover: state.hover,
+    press: state.press,
+    focus: state.focus,
+    groups,
+  }
+}

package/src/helpers/formatDiagnostic.ts

@@ -0,0 +1,68 @@
+const maxDiagnosticValueLength = 160
+
+function formatDiagnosticValue(
+  value: unknown,
+  depth = 0,
+  seen = new WeakSet<object>()
+): string {
+  if (typeof value === 'string') {
+    const output =
+      value.length > maxDiagnosticValueLength
+        ? `${value.slice(0, maxDiagnosticValueLength - 1)}…`
+        : value
+    return JSON.stringify(output)
+  }
+  if (value == null || typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  if (typeof value === 'bigint') return `${value}n`
+  if (typeof value === 'function') return `[Function ${value.name || 'anonymous'}]`
+  if (typeof value !== 'object') return String(value)
+  if (seen.has(value)) return '[Circular]'
+  if (depth === 2) return Array.isArray(value) ? '[Array]' : '[Object]'
+
+  seen.add(value)
+  if (Array.isArray(value)) {
+    const items = value
+      .slice(0, 5)
+      .map((item) => formatDiagnosticValue(item, depth + 1, seen))
+    if (value.length > 5) items.push(`… ${value.length - 5} more`)
+    return `[${items.join(', ')}]`
+  }
+
+  const keys: string[] = []
+  for (const key in value) {
+    if (Object.prototype.hasOwnProperty.call(value, key)) {
+      keys.push(key)
+      if (keys.length === 6) break
+    }
+  }
+  const hasMore = keys.length === 6
+  if (hasMore) keys.pop()
+  const items = keys.map((key) => {
+    try {
+      return `${key}: ${formatDiagnosticValue((value as Record<string, unknown>)[key], depth + 1, seen)}`
+    } catch {
+      return `${key}: [Unavailable]`
+    }
+  })
+  if (hasMore) items.push('… more')
+  return `{ ${items.join(', ')} }`
+}
+
+export function formatDiagnostic(
+  code: string,
+  component: string,
+  message: string,
+  action: string,
+  prop?: string,
+  received?: unknown
+) {
+  const formattedValue = prop ? formatDiagnosticValue(received) : ''
+  const boundedValue =
+    formattedValue.length > maxDiagnosticValueLength
+      ? `${formattedValue.slice(0, maxDiagnosticValueLength - 1)}…`
+      : formattedValue
+  const value = prop ? ` Received ${prop}=${boundedValue}.` : ''
+  return `${code} ${component}: ${message}.${value} ${action}`
+}

package/src/helpers/frontendProgram.ts

@@ -0,0 +1,48 @@
+// The internal frontend-program contribution channel: another style frontend
+// (the Tailwind package) hands getSplitStyles a pre-parsed (property, program)
+// pair that contributes at the EXACT forward-pass position the equivalent
+// authored string would — same displacement, same decision-21 merge, same
+// clause order and registry spellings, verbatim.
+//
+// Internal BY CONSTRUCTION, not by documentation: values are only recognized
+// through a module-private WeakSet, so the sole way to mint one is
+// createFrontendProgram, which is exported only from the internal-runtime
+// entry. A structurally identical object from user code is not a member and
+// contributes nothing. (A symbol marker would be weaker: symbols can be
+// recovered from a value via getOwnPropertySymbols and reused.)
+
+import type { ParsedValue } from '@tamagui/style-grammar/runtime'
+
+import type { FrontendProgramValue } from '../internalRuntimeTypes'
+import type { GetStyleState } from '../types'
+import { contributeFrontendValue, type MergeStyle } from './directStyle'
+
+export type { FrontendProgramValue } from '../internalRuntimeTypes'
+
+const minted = new WeakSet<FrontendProgramValue>()
+
+export function createFrontendProgram(
+  property: string,
+  value: ParsedValue
+): FrontendProgramValue {
+  const program: FrontendProgramValue = { property, value }
+  minted.add(program)
+  return program
+}
+
+export function isFrontendProgram(value: unknown): value is FrontendProgramValue {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    minted.has(value as FrontendProgramValue)
+  )
+}
+
+/** consumed beside direct flat strings in the forward pass */
+export function contributeFrontendProgram(
+  styleState: GetStyleState,
+  program: FrontendProgramValue,
+  merge: MergeStyle
+): boolean {
+  return contributeFrontendValue(styleState, program.property, program.value, merge)
+}

package/src/helpers/getCSSStylesAtomic.native.ts

@@ -3,5 +3,6 @@ const empty = () => {
 }
 
 export const getCSSStylesAtomic = empty
+export const getCSSStyleAtomic = empty
 export const getStyleAtomic = empty
 export const styleToCSS = empty

package/src/helpers/getCSSStylesAtomic.ts

@@ -6,53 +6,21 @@
 import type { StyleObject } from '@tamagui/helpers'
 import { cssShorthandLonghands, simpleHash } from '@tamagui/helpers'
 import { getConfigMaybe } from '../config'
-import { isMediaKey } from '../hooks/useMedia'
-import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
+import type { TamaguiInternalConfig, ViewStyleObject } from '../types'
 import { defaultOffset } from './defaultOffset'
 import { normalizeColor } from './normalizeColor'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
-import type { PseudoDescriptor } from './pseudoDescriptors'
-import { pseudoDescriptors } from './pseudoDescriptors'
 import { transformsToString } from './transformsToString'
 
 // refactor this file away next...
 
-export function getCSSStylesAtomic(style: ViewStyleWithPseudos) {
+export function getCSSStylesAtomic(style: ViewStyleObject) {
   styleToCSS(style)
   const out: StyleObject[] = []
   for (const key in style) {
     if (key === '$$css') continue
     const val = style[key]
-    if (key in pseudoDescriptors) {
-      if (val) {
-        out.push(...getStyleAtomic(val, pseudoDescriptors[key]))
-      }
-    } else if (isMediaKey(key)) {
-      for (const subKey in val) {
-        const so = getStyleObject(val, subKey)
-        if (so) {
-          so[0] = key // set the property to be eg $platform-web so we can use it above
-          out.push(so)
-        }
-      }
-    } else {
-      const so = getStyleObject(style, key)
-      if (so) {
-        out.push(so)
-      }
-    }
-  }
-  return out
-}
-
-export const getStyleAtomic = (
-  style: ViewStyleWithPseudos,
-  pseudo?: PseudoDescriptor
-): StyleObject[] => {
-  styleToCSS(style)
-  const out: StyleObject[] = []
-  for (const key in style) {
-    const so = getStyleObject(style, key, pseudo)
+    const so = getStyleObject(style, key)
     if (so) {
       out.push(so)
     }
@@ -60,13 +28,50 @@ export const getStyleAtomic = (
   return out
 }
 
+export function getCSSStyleAtomic(
+  key: string,
+  val: any,
+  condition = '',
+  wrappers?: readonly string[],
+  identity?: string,
+  direct = false,
+  identityKey = key,
+  classRepetitions = 1
+): StyleObject | undefined {
+  return getStyleObject(
+    { [key]: val } as ViewStyleObject,
+    key,
+    condition,
+    wrappers,
+    identity,
+    direct,
+    identityKey,
+    classRepetitions
+  )
+}
+
 let conf: TamaguiInternalConfig | null = null
 
-// this could be cached for performance?
+// the direct path rebuilds the same identifier and the same rule strings on
+// every render of every component, and insertStyleRules only ever inserts the
+// FIRST set it sees for an identifier and discards the rest. the accumulated
+// identity is the whole input to both, so one lookup replaces the hash, the
+// identifier build and every rule string. two levels so a lookup allocates
+// nothing. bounded and cleared the same way simpleHash's cache is.
+const directIdentities = new Map<string, Map<string, DirectIdentity>>()
+let directIdentitiesSize = 0
+
+type DirectIdentity = { identifier: string; rules: string[] }
+
 const getStyleObject = (
-  style: ViewStyleWithPseudos,
+  style: ViewStyleObject,
   key: string,
-  pseudo?: PseudoDescriptor
+  condition = '',
+  wrappers?: readonly string[],
+  identity?: string,
+  direct = false,
+  identityKey = key,
+  classRepetitions = 1
 ): StyleObject | undefined => {
   let val = style[key]
   if (val == null) return
@@ -75,22 +80,79 @@ const getStyleObject = (
     val = transformsToString(val)
   }
   const value = normalizeValueWithProperty(val, key)
-  const hash = simpleHash(typeof value === 'string' ? value : `${value}`)
-  const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
-  conf ||= getConfigMaybe()
-  const shortProp = conf?.inverseShorthands[key] || key
-  let identifier = `_${shortProp}-${pseudoPrefix}${hash}`
-  if (key === 'pointerEvents' && !pseudo) {
+  // media queries and shorthands come from the config, so an identity built
+  // under one config says nothing about the rules under another
+  const nextConf = getConfigMaybe()
+  if (nextConf !== conf) {
+    conf = nextConf
+    directIdentities.clear()
+    directIdentitiesSize = 0
+  }
+  // callers own the array they get back: directAtomic splices into it and
+  // addComposition unshifts, so the reuse hands out a copy
+  let byKey: Map<string, DirectIdentity> | undefined
+  if (direct && identity !== undefined) {
+    byKey = directIdentities.get(identityKey)
+    const known = byKey?.get(identity)
+    if (known) {
+      return [key, value, known.identifier, undefined, known.rules.slice()]
+    }
+  }
+  const rawValue = typeof value === 'string' ? value : `${value}`
+  // this content hash is the atomic CSS class identity shared by server output
+  // and client hydration. it is not a parser cache or a runtime lookup key.
+  const hash = simpleHash(identity ?? rawValue, direct ? 'strict' : 10) || '0'
+  let shortProp: string
+  if (direct) {
+    shortProp = ''
+    for (let index = 0; index < identityKey.length; index++) {
+      const code = identityKey.charCodeAt(index)
+      if (
+        (index === 0 ||
+          (code >= 65 && code <= 90) ||
+          identityKey.charCodeAt(index - 1) === 45) &&
+        ((code >= 65 && code <= 90) || (code >= 97 && code <= 122))
+      ) {
+        shortProp += identityKey[index].toLowerCase()
+      }
+    }
+    shortProp ||= 'x'
+  } else {
+    shortProp = conf?.inverseShorthands[key] || key
+  }
+  let identifier = `_${shortProp}-${hash}`
+  if (key === 'pointerEvents' && !condition) {
     if (value === 'box-none') identifier = '_pe-boxnone'
     else if (value === 'box-only') identifier = '_pe-boxonly'
   }
-  const rules = createAtomicRules(identifier, key, value, pseudo)
+  const rules = createAtomicRules(
+    identifier,
+    key,
+    value,
+    condition,
+    wrappers,
+    direct,
+    classRepetitions
+  )
+  if (direct && identity !== undefined) {
+    if (directIdentitiesSize > 10_000) {
+      directIdentities.clear()
+      directIdentitiesSize = 0
+      byKey = undefined
+    }
+    if (!byKey) {
+      byKey = new Map()
+      directIdentities.set(identityKey, byKey)
+    }
+    byKey.set(identity, { identifier, rules: rules.slice() })
+    directIdentitiesSize++
+  }
   return [
     // array for performance
     key,
     value,
     identifier,
-    pseudo?.name as any,
+    undefined,
     rules,
   ]
 }
@@ -137,10 +199,17 @@ export function styleToCSS(style: Record<string, any>) {
   }
 }
 
-function createDeclarationBlock(style: [string, any][], important = false) {
+function createDeclarationBlock(
+  style: [string, any][],
+  important = false,
+  trailingSemicolon = true
+) {
   let next = ''
-  for (const [key, value] of style) {
-    next += `${hyphenateStyleName(key)}:${value}${important ? ' !important' : ''};`
+  for (let index = 0; index < style.length; index++) {
+    const [key, value] = style[index]
+    next += `${hyphenateStyleName(key)}:${value}${important ? ' !important' : ''}${
+      trailingSemicolon || index < style.length - 1 ? ';' : ''
+    }`
   }
   return `{${next}}`
 }
@@ -154,47 +223,24 @@ const hyphenateStyleName = (key: string) => {
   return val
 }
 
-// adding one more :root so we always override react native web styles :/
-const selectorPriority = (() => {
-  const res: Record<string, string> = {}
-  for (const key in pseudoDescriptors) {
-    const pseudo = pseudoDescriptors[key]
-    res[pseudo.name] = `${[...Array(pseudo.priority)].map(() => ':root').join('')} `
-  }
-  return res
-})()
-
 function createAtomicRules(
   identifier: string,
   property: string,
   value: any,
-  pseudo?: PseudoDescriptor
+  condition = '',
+  wrappers?: readonly string[],
+  direct = false,
+  classRepetitions = 1
 ): string[] {
-  const pseudoIdPostfix = pseudo
-    ? pseudo.name === 'disabled'
-      ? `[aria-disabled]`
-      : `:${pseudo.name}`
-    : ''
-  const pseudoSelector = pseudo?.selector
-
   // longhands get .cls.cls for higher specificity over shorthands
-  const cls =
-    property in cssShorthandLonghands ? `.${identifier}.${identifier}` : `.${identifier}`
-
-  let selector = pseudo
-    ? pseudoSelector
-      ? `${pseudoSelector} ${cls}`
-      : `${selectorPriority[pseudo.name]} ${cls}${pseudoIdPostfix}`
-    : `:root ${cls}`
-
-  // enter style on css driver needs both:
-  //   .t_unmounted .selector
-  //   .selector.t_unmounted
-  if (pseudoSelector === pseudoDescriptors.enterStyle.selector) {
-    selector = `${selector}, .${identifier}${pseudoSelector}`
-  }
-
-  const important = !!pseudo
+  const repetitions =
+    direct && classRepetitions > 1
+      ? classRepetitions
+      : !direct && property in cssShorthandLonghands
+        ? 2
+        : 1
+  const cls = `.${identifier}`.repeat(repetitions)
+  const selector = `${cls}${condition}`
 
   let rules: string[] = []
 
@@ -208,7 +254,7 @@ function createAtomicRules(
           ['color', value],
           ['opacity', 1],
         ],
-        important
+        false
       )
       rules.push(`${selector}::placeholder${block}`)
       break
@@ -224,7 +270,7 @@ function createAtomicRules(
           [property, value],
           [webkitProperty, value],
         ],
-        important
+        false
       )
       rules.push(`${selector}${block}`)
       break
@@ -232,6 +278,19 @@ function createAtomicRules(
 
     // Polyfill for additional 'pointer-events' values
     case 'pointerEvents': {
+      if (direct) {
+        const subject = value === 'none' || value === 'box-none' ? 'none' : 'auto'
+        const children = value === 'none' || value === 'box-only' ? 'none' : 'auto'
+        rules.push(
+          `${selector}${createDeclarationBlock([['pointerEvents', subject]], false, false)}`,
+          `${selector}>*${createDeclarationBlock(
+            [['pointerEvents', children]],
+            false,
+            false
+          )}`
+        )
+        break
+      }
       let finalValue = value
       if (value === 'auto' || value === 'box-only') {
         finalValue = 'auto'
@@ -244,20 +303,20 @@ function createAtomicRules(
     }
 
     default: {
-      const block = createDeclarationBlock([[property, value]], important)
+      const block = createDeclarationBlock([[property, value]], false, !direct)
       rules.push(`${selector}${block}`)
       break
     }
   }
 
-  // hover styles need to be conditional
-  // perhaps this can be generalized but for now lets just shortcut
-  // and hardcode for hover styles, if we need to later we can
-  // WEIRD SYNTAX, SEE:
-  //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover
-  if (pseudo?.name === 'hover') {
-    rules = rules.map((r) => `@media (hover) {${r}}`)
+  if (wrappers?.length) {
+    for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+      let rule = rules[ruleIndex]
+      for (let index = wrappers.length - 1; index >= 0; index--) {
+        rule = `${wrappers[index]} {${rule}}`
+      }
+      rules[ruleIndex] = rule
+    }
   }
-
   return rules
 }

package/src/helpers/getDefaultProps.ts

@@ -1,28 +1,3 @@
-import { getConfig } from '../config'
 import type { StaticConfig } from '../types'
 
-// merge both default props, styled context props, and default text props
-export const getDefaultProps = (
-  staticConfig: StaticConfig,
-  propsComponentName?: string
-) => {
-  let defaultProps = staticConfig?.defaultProps
-
-  const conf = getConfig()
-  const name =
-    propsComponentName ||
-    staticConfig?.componentName ||
-    // important: this is how we end up getting the defaultProps we set in createTamagui
-    (staticConfig.isText ? 'Text' : 'View')
-
-  const userDefaultProps = conf?.defaultProps?.[name]
-
-  if (userDefaultProps) {
-    // component's staticConfig.defaultProps wins over global config defaults
-    defaultProps = defaultProps
-      ? { ...userDefaultProps, ...defaultProps }
-      : userDefaultProps
-  }
-
-  return defaultProps
-}
+export const getDefaultProps = (staticConfig: StaticConfig) => staticConfig.defaultProps

package/src/helpers/getExpandedShorthands.ts

@@ -1,21 +1,4 @@
 import { getConfig } from '../config'
-import type { Shorthands } from '../types'
-
-/**
- * @deprecated use useProps instead
- */
-export function getExpandedShorthands<A extends object>(
-  props: A
-): Omit<A, keyof Shorthands> {
-  const shorthands = getConfig().shorthands
-  if (!shorthands) return props
-  const res = {} as A
-  for (const key in props) {
-    // @ts-ignore
-    res[shorthands[key] || key] = props[key]
-  }
-  return res
-}
 
 export function getExpandedShorthand(propKey: string, props: object) {
   const shorthands = getConfig().inverseShorthands