@tamagui/web 3.0.0-beta.765.1 → 3.0.0-beta.804.1

package/src/helpers/getCSSStylesAtomic.ts

@@ -7,15 +7,17 @@ import type { StyleObject } from '@tamagui/helpers'
 import { cssShorthandLonghands, simpleHash } from '@tamagui/helpers'
 import { getConfigMaybe } from '../config'
 import type { TamaguiInternalConfig, ViewStyleObject } from '../types'
-import { defaultOffset } from './defaultOffset'
 import { getConfigRevisionState } from './grammarConfig'
-import { normalizeColor } from './normalizeColor'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { styleToCSS } from './styleToCSS'
 import { transformsToString } from './transformsToString'
 
+export { styleToCSS } from './styleToCSS'
+
 // refactor this file away next...
 
 export function getCSSStylesAtomic(style: ViewStyleObject) {
+  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return []
   styleToCSS(style)
   const out: StyleObject[] = []
   for (const key in style) {
@@ -39,6 +41,7 @@ export function getCSSStyleAtomic(
   identityKey = key,
   classRepetitions = 1
 ): StyleObject | undefined {
+  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return
   return getStyleObject(
     val,
     key,
@@ -54,16 +57,13 @@ export function getCSSStyleAtomic(
 let conf: TamaguiInternalConfig | null = null
 let confRevision = 0
 
-// 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[] }
+export type SlotIdentity = {
+  identifier: string
+  rules: string[]
+  value: any
+  /** finished wrapper, cached so a repeat build allocates nothing */
+  styleObject?: unknown
+}
 
 const getStyleObject = (
   val: any,
@@ -81,33 +81,8 @@ const getStyleObject = (
     val = transformsToString(val)
   }
   const value = normalizeValueWithProperty(val, key)
-  // 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()
-  const nextRevision = nextConf ? getConfigRevisionState(nextConf).revision : 0
-  if (nextConf !== conf || nextRevision !== confRevision) {
-    conf = nextConf
-    confRevision = nextRevision
-    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) {
-      // directStyle takes ownership before mutation or public exposure.
-      return [
-        key,
-        value,
-        known.identifier,
-        undefined,
-        direct === 2 ? known.rules : known.rules.slice(),
-      ]
-    }
-  }
+  // shorthand-derived class prefixes come from the config
+  const nextConf = syncAtomicConfig()
   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.
@@ -144,19 +119,6 @@ const getStyleObject = (
     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: direct === 2 ? rules : rules.slice() })
-    directIdentitiesSize++
-  }
   return [
     // array for performance
     key,
@@ -167,46 +129,164 @@ const getStyleObject = (
   ]
 }
 
-export function styleToCSS(style: Record<string, any>) {
-  // box-shadow
-  const { shadowOffset, shadowRadius, shadowColor, shadowOpacity } = style
-  if (
-    shadowRadius != null ||
-    shadowColor ||
-    shadowOffset != null ||
-    shadowOpacity != null
-  ) {
-    const offset = shadowOffset || defaultOffset
-    const width = normalizeValueWithProperty(offset.width)
-    const height = normalizeValueWithProperty(offset.height)
-    const radius = normalizeValueWithProperty(shadowRadius)
-    const color = normalizeColor(shadowColor, shadowOpacity)
-    if (color) {
-      const shadow = `${width} ${height} ${radius} ${color}`
-      style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow
-    }
-    delete style.shadowOffset
-    delete style.shadowRadius
-    delete style.shadowColor
-    delete style.shadowOpacity
+// ── frame slot builder ───────────────────────────────────────────────────────
+// Build the css for one completed frame slot in a single shot: the identifier
+// hashes the slot's WINNING content, the base rule comes first, and
+// conditional rules follow in ascending precedence (later rules win the
+// cascade at equal specificity). Cached per (atomicKey, signature): a slot
+// that resolves to the same content is the same class, however it got there.
+
+export interface AtomicSlotEntry {
+  property: string
+  value: any
+  condition: number
+  identity: string
+  selector: string
+  wrappers: readonly string[] | undefined
+  /** authored value, carried only on deferred platform-pseudo passes so an
+   * inline conversion preserves provenance */
+  original?: any
+}
+
+const slotIdentities = new Map<string, Map<string, SlotIdentity>>()
+let slotIdentitiesSize = 0
+
+// raw-value memo in front of the normalized identity: a repeat authored value
+// skips normalization and signature building entirely. pure memoization - two
+// raw spellings that normalize alike still share one identity through the
+// normalized signature they both resolve to.
+const rawSlotIdentities = new Map<string, Map<unknown, SlotIdentity>>()
+let rawSlotIdentitiesSize = 0
+
+export function probeRawSlotIdentity(
+  property: string,
+  raw: unknown
+): SlotIdentity | undefined {
+  syncAtomicConfig()
+  return rawSlotIdentities.get(property)?.get(raw)
+}
+
+export function storeRawSlotIdentity(
+  property: string,
+  raw: unknown,
+  identity: SlotIdentity
+) {
+  if (rawSlotIdentitiesSize > 10_000) {
+    rawSlotIdentities.clear()
+    rawSlotIdentitiesSize = 0
+  }
+  let byRaw = rawSlotIdentities.get(property)
+  if (!byRaw) {
+    byRaw = new Map()
+    rawSlotIdentities.set(property, byRaw)
   }
+  byRaw.set(raw, identity)
+  rawSlotIdentitiesSize++
+}
+
+function syncAtomicConfig() {
+  const nextConf = getConfigMaybe()
+  const nextRevision = nextConf ? getConfigRevisionState(nextConf).revision : 0
+  if (nextConf !== conf || nextRevision !== confRevision) {
+    conf = nextConf
+    confRevision = nextRevision
+    slotIdentities.clear()
+    slotIdentitiesSize = 0
+    rawSlotIdentities.clear()
+    rawSlotIdentitiesSize = 0
+  }
+  return nextConf
+}
+
+function slotClassRepetitions(atomicKey: string, condition: number): number {
+  const base =
+    atomicKey === 'containerName' || atomicKey === 'containerType'
+      ? condition
+        ? Math.max(
+            2,
+            1 +
+              ((Math.floor(condition / 256) >>> 23) & 7) +
+              (Math.floor(condition / 256) >>> 26) * 6 -
+              ((condition >>> 5) & 7)
+          )
+        : 2
+      : condition
+        ? 1 +
+          ((Math.floor(condition / 256) >>> 23) & 7) +
+          (Math.floor(condition / 256) >>> 26) * 6 -
+          ((condition >>> 5) & 7)
+        : 1
+  return base
+}
+
+export function buildAtomicSlotCSS(
+  atomicKey: string,
+  entries: readonly AtomicSlotEntry[],
+  signature: string
+): SlotIdentity | undefined {
+  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return
+  // media queries and shorthands come from the config, so an identity built
+  // under one config says nothing about the rules under another
+  syncAtomicConfig()
+  let byKey = slotIdentities.get(atomicKey)
+  const known = byKey?.get(signature)
+  if (known) return known
 
-  // text-shadow
-  const { textShadowColor, textShadowOffset, textShadowRadius } = style
-  if (textShadowColor || textShadowOffset || textShadowRadius) {
-    const { height, width } = textShadowOffset || defaultOffset
-    const radius = textShadowRadius || 0
-    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')
-    if (color && (height !== 0 || width !== 0 || radius !== 0)) {
-      const blurRadius = normalizeValueWithProperty(radius)
-      const offsetX = normalizeValueWithProperty(width)
-      const offsetY = normalizeValueWithProperty(height)
-      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
+  const hash = simpleHash(signature, 'strict') || '0'
+  let shortProp = ''
+  for (let index = 0; index < atomicKey.length; index++) {
+    const code = atomicKey.charCodeAt(index)
+    if (
+      (index === 0 ||
+        (code >= 65 && code <= 90) ||
+        atomicKey.charCodeAt(index - 1) === 45) &&
+      ((code >= 65 && code <= 90) || (code >= 97 && code <= 122))
+    ) {
+      shortProp += atomicKey[index].toLowerCase()
     }
-    delete style.textShadowColor
-    delete style.textShadowOffset
-    delete style.textShadowRadius
   }
+  shortProp ||= 'x'
+  let identifier = `_${shortProp}-${hash}`
+  if (atomicKey === 'pointerEvents' && entries.length === 1 && !entries[0].condition) {
+    const value = entries[0].value
+    if (value === 'box-none') identifier = '_pe-boxnone'
+    else if (value === 'box-only') identifier = '_pe-boxonly'
+  }
+
+  // entries arrive ordered (base first, conditionals ascending precedence)
+  // and normalized: the slot signature was built from exactly this sequence
+  const rules: string[] = []
+  let lastValue: any
+  for (const entry of entries) {
+    // values arrive normalized: the slot signature normalized them so the
+    // identity hash and the rule text agree
+    const value = entry.value
+    lastValue = value
+    const entryRules = createAtomicRules(
+      identifier,
+      entry.property,
+      value,
+      entry.selector,
+      entry.wrappers,
+      2,
+      slotClassRepetitions(atomicKey, entry.condition)
+    )
+    for (const rule of entryRules) rules.push(rule)
+  }
+
+  const built: SlotIdentity = { identifier, rules, value: lastValue }
+  if (slotIdentitiesSize > 10_000) {
+    slotIdentities.clear()
+    slotIdentitiesSize = 0
+    byKey = undefined
+  }
+  if (!byKey) {
+    byKey = new Map()
+    slotIdentities.set(atomicKey, byKey)
+  }
+  byKey.set(signature, built)
+  slotIdentitiesSize++
+  return built
 }
 
 function createDeclarationBlock(

package/src/helpers/getCSSStylesAtomicCompiled.ts

@@ -0,0 +1,9 @@
+import type { ViewStyleObject } from '../types'
+
+export function getCSSStylesAtomic(_style: ViewStyleObject) {
+  return []
+}
+
+export function getCSSStyleAtomic() {
+  return undefined
+}