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

package/src/helpers/getCSSStylesAtomic.ts

@@ -3,18 +3,149 @@
  * Copyright (c) Nicolas Gallagher licensed under the MIT license.
  */
 
-import type { StyleObject } from '@tamagui/helpers'
-import { cssShorthandLonghands, simpleHash } from '@tamagui/helpers'
+import {
+  type StyleObject,
+  StyleObjectIdentifier,
+  StyleObjectRules,
+  cssShorthandLonghands,
+  simpleHash,
+} from '@tamagui/helpers'
 import { getConfigMaybe } from '../config'
-import type { TamaguiInternalConfig, ViewStyleObject } from '../types'
+import type { GetStyleState, TamaguiInternalConfig, ViewStyleObject } from '../types'
 import { getConfigRevisionState } from './grammarConfig'
+import { shouldInsertStyleRules, updateRules } from './insertStyleRule'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import { styleToCSS } from './styleToCSS'
 import { transformsToString } from './transformsToString'
 
 export { styleToCSS } from './styleToCSS'
 
-// refactor this file away next...
+export const canGenerateCSS =
+  process.env.TAMAGUI_TARGET === 'web' && !process.env.TAMAGUI_DID_OUTPUT_CSS
+
+type DirectAtomicState = GetStyleState & {
+  flatAtomics?: Map<string, StyleObject>
+}
+
+export type AtomicSlotEntry = [
+  property: string,
+  value: any,
+  condition: number,
+  identity: string,
+  selector: string,
+  wrappers: readonly string[] | undefined,
+  original?: any,
+  flags?: number,
+]
+
+export type SlotIdentity = [
+  identifier: string,
+  rules: string[],
+  value: any,
+  styleObject?: unknown,
+]
+
+function directStyleSignature(property: string, value: unknown, conditionKey = '') {
+  return '\u001f' + property + '\u001f' + conditionKey + '\u001e' + String(value)
+}
+
+function getShortProp(key: string) {
+  let short = ''
+  for (let i = 0; i < key.length; i++) {
+    const code = key.charCodeAt(i)
+    if (
+      (i === 0 || (code >= 65 && code <= 90) || key.charCodeAt(i - 1) === 45) &&
+      ((code >= 65 && code <= 90) || (code >= 97 && code <= 122))
+    ) {
+      short += key[i].toLowerCase()
+    }
+  }
+  return short || 'x'
+}
+
+export function registerAtomicSlot(
+  state: DirectAtomicState,
+  atomicKey: string,
+  entries: readonly AtomicSlotEntry[]
+) {
+  let signature = ''
+  for (let index = 0; index < entries.length; index++) {
+    const entry = entries[index]
+    let value = entry[1]
+    if (entry[0] === 'transform' && Array.isArray(value)) {
+      value = transformsToString(value)
+    }
+    entry[1] = normalizeValueWithProperty(value, entry[0])
+    signature += directStyleSignature(
+      entry[0],
+      entry[1],
+      `${entry[3]}\u001d${entry[7]! >> 5}`
+    )
+  }
+  const built = buildAtomicSlotCSS(atomicKey, entries, signature)
+  if (!built) return
+  let styleObjectProperty = entries[0]![0]
+  for (let index = 1; index < entries.length; index++) {
+    if (entries[index]![0] !== styleObjectProperty) {
+      styleObjectProperty = atomicKey
+      break
+    }
+  }
+  const styleObject = (built[3] ||= [
+    styleObjectProperty,
+    built[2],
+    built[0],
+    undefined,
+    built[1],
+  ]) as StyleObject
+  ;(state.flatAtomics ||= new Map()).set(atomicKey, styleObject)
+  state.classNames[atomicKey] = built[0]
+}
+
+export function flushDirectStyles(state: GetStyleState, clear = false) {
+  if (!canGenerateCSS) {
+    if (clear) (state as DirectAtomicState).flatAtomics = undefined
+    return
+  }
+  const direct = state as DirectAtomicState
+  const atomics = direct.flatAtomics
+  if (!atomics) return
+  for (const styleObject of atomics.values()) {
+    const identifier = styleObject[StyleObjectIdentifier]
+    if (shouldInsertStyleRules(identifier)) {
+      const rules = styleObject[StyleObjectRules].slice()
+      styleObject[StyleObjectRules] = rules
+      updateRules(identifier, rules)
+      state.flatRulesToInsert![identifier] = styleObject
+    }
+  }
+  if (clear) direct.flatAtomics = undefined
+}
+
+export function addComposition(state: GetStyleState, property: 'translate' | 'scale') {
+  if (!canGenerateCSS || state.classNames[property]) return
+  const isTranslate = property === 'translate'
+  const identifier = isTranslate ? '_t-compose' : '_s-compose'
+  const value = isTranslate
+    ? 'var(--t-x, 0px) var(--t-y, 0px)'
+    : 'var(--t-scale-x, 1) var(--t-scale-y, 1)'
+  const defaults = isTranslate ? '--t-x:0px;--t-y:0px' : '--t-scale-x:1;--t-scale-y:1'
+  const rules = [
+    `:where(.${identifier}){${defaults}}`,
+    `.${identifier}{${property}:${value}}`,
+  ]
+  if (shouldInsertStyleRules(identifier)) {
+    updateRules(identifier, rules)
+    state.flatRulesToInsert![identifier] = [
+      property,
+      value,
+      identifier,
+      undefined,
+      rules,
+    ] as any
+  }
+  state.classNames[property] = identifier
+}
 
 export function getCSSStylesAtomic(style: ViewStyleObject) {
   if (process.env.TAMAGUI_DID_OUTPUT_CSS) return []
@@ -57,14 +188,6 @@ export function getCSSStyleAtomic(
 let conf: TamaguiInternalConfig | null = null
 let confRevision = 0
 
-export type SlotIdentity = [
-  identifier: string,
-  rules: string[],
-  value: any,
-  /** finished wrapper, cached so a repeat build allocates nothing */
-  styleObject?: unknown,
-]
-
 const getStyleObject = (
   val: any,
   key: string,
@@ -76,35 +199,16 @@ const getStyleObject = (
   classRepetitions = 1
 ): StyleObject | undefined => {
   if (val == null) return
-  // transform
   if (key === 'transform' && Array.isArray(val)) {
     val = transformsToString(val)
   }
   const value = normalizeValueWithProperty(val, key)
-  // shorthand-derived class prefixes come from the config
-  const nextConf = syncAtomicConfig()
+  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.
   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
-  }
+  const shortProp = direct
+    ? getShortProp(identityKey)
+    : conf?.inverseShorthands[key] || key
   let identifier = `_${shortProp}-${hash}`
   if (key === 'pointerEvents' && !condition) {
     if (value === 'box-none') identifier = '_pe-boxnone'
@@ -119,72 +223,13 @@ const getStyleObject = (
     direct,
     classRepetitions
   )
-  return [
-    // array for performance
-    key,
-    value,
-    identifier,
-    undefined,
-    rules,
-  ]
+  return [key, value, identifier, undefined, rules]
 }
 
-// ── 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 type AtomicSlotEntry = [
-  property: string,
-  value: any,
-  condition: number,
-  identity: string,
-  selector: string,
-  wrapperSource: readonly string[] | undefined,
-  wrapperStart: number,
-  wrapperCount: number,
-  /** authored value, carried only on deferred platform-pseudo passes so an
-   * inline conversion preserves provenance */
-  original?: any,
-]
-
+// atomic key -> signature -> identity. two levels so a pass never builds and
+// hashes one long combined key per slot
 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++
-}
+let slotIdentityCount = 0
 
 function syncAtomicConfig() {
   const nextConf = getConfigMaybe()
@@ -193,32 +238,8 @@ function syncAtomicConfig() {
     conf = nextConf
     confRevision = nextRevision
     slotIdentities.clear()
-    slotIdentitiesSize = 0
-    rawSlotIdentities.clear()
-    rawSlotIdentitiesSize = 0
+    slotIdentityCount = 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(
@@ -227,27 +248,14 @@ export function buildAtomicSlotCSS(
   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)
+  let bySignature = slotIdentities.get(atomicKey)
+  if (!bySignature) slotIdentities.set(atomicKey, (bySignature = new Map()))
+  const known = bySignature.get(signature)
   if (known) return known
 
   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()
-    }
-  }
-  shortProp ||= 'x'
+  const shortProp = getShortProp(atomicKey)
   let identifier = `_${shortProp}-${hash}`
   if (atomicKey === 'pointerEvents' && entries.length === 1 && !entries[0][2]) {
     const value = entries[0][1]
@@ -255,13 +263,16 @@ export function buildAtomicSlotCSS(
     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
+  let layered = false
+  for (let index = 1; index < entries.length; index++) {
+    if (entries[index][0] !== entries[0][0]) {
+      layered = true
+      break
+    }
+  }
   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[1]
     lastValue = value
     const entryRules = createAtomicRules(
@@ -271,43 +282,25 @@ export function buildAtomicSlotCSS(
       entry[4],
       entry[5],
       2,
-      slotClassRepetitions(atomicKey, entry[2]),
-      entry[6],
-      entry[7]
+      Math.max(
+        layered ? 1 + (entry[7]! >> 5) : 1,
+        atomicKey === 'containerName' || atomicKey === 'containerType' ? 2 : 1
+      )
     )
     for (const rule of entryRules) rules.push(rule)
   }
 
   const built: SlotIdentity = [identifier, rules, lastValue]
-  if (slotIdentitiesSize > 10_000) {
+  if (slotIdentityCount > 10_000) {
     slotIdentities.clear()
-    slotIdentitiesSize = 0
-    byKey = undefined
-  }
-  if (!byKey) {
-    byKey = new Map()
-    slotIdentities.set(atomicKey, byKey)
+    slotIdentityCount = 0
+    slotIdentities.set(atomicKey, (bySignature = new Map()))
   }
-  byKey.set(signature, built)
-  slotIdentitiesSize++
+  slotIdentityCount++
+  bySignature.set(signature, built)
   return built
 }
 
-function createDeclarationBlock(
-  style: [string, any][],
-  important = false,
-  trailingSemicolon = true
-) {
-  let next = ''
-  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}}`
-}
-
 const hcache = {}
 const toHyphenLower = (match: string) => `-${match.toLowerCase()}`
 const hyphenateStyleName = (key: string) => {
@@ -317,6 +310,10 @@ const hyphenateStyleName = (key: string) => {
   return val
 }
 
+function declaration(key: string, value: any, important = false) {
+  return `${hyphenateStyleName(key)}:${value}${important ? ' !important' : ''};`
+}
+
 function createAtomicRules(
   identifier: string,
   property: string,
@@ -324,11 +321,8 @@ function createAtomicRules(
   condition = '',
   wrappers?: readonly string[],
   direct: boolean | 2 = false,
-  classRepetitions = 1,
-  wrapperStart = 0,
-  wrapperCount = wrappers?.length || 0
+  classRepetitions = 1
 ): string[] {
-  // longhands get .cls.cls for higher specificity over shorthands
   const repetitions =
     direct && classRepetitions > 1
       ? classRepetitions
@@ -339,51 +333,42 @@ function createAtomicRules(
   const selector = `${cls}${condition}`
 
   let rules: string[] = []
-
-  // Handle non-standard properties and object values that require multiple
-  // CSS rules to be created.
   switch (property) {
-    // Equivalent to using '::placeholder'
     case 'placeholderTextColor': {
-      const block = createDeclarationBlock(
-        [
-          ['color', value],
-          ['opacity', 1],
-        ],
-        false
+      rules.push(
+        `${selector}::placeholder{${declaration('color', value)}${declaration('opacity', 1)}}`
       )
-      rules.push(`${selector}::placeholder${block}`)
       break
     }
 
-    // all webkit prefixed rules
+    case 'selectionColor': {
+      rules.push(`${selector}::selection{${declaration('backgroundColor', value)}}`)
+      break
+    }
+
+    case 'cursorColor':
+    case 'selectionHandleColor': {
+      rules.push(`${selector}{${declaration('caretColor', value)}}`)
+      break
+    }
+
     case 'backgroundClip':
     case 'userSelect': {
       const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`
       const webkitProperty = `Webkit${propertyCapitalized}`
-      const block = createDeclarationBlock(
-        [
-          [property, value],
-          [webkitProperty, value],
-        ],
-        false
+      rules.push(
+        `${selector}{${declaration(property, value)}${declaration(webkitProperty, value)}}`
       )
-      rules.push(`${selector}${block}`)
       break
     }
 
-    // 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
-          )}`
+          `${selector}{pointer-events:${subject}}`,
+          `${selector}>*{pointer-events:${children}}`
         )
         break
       }
@@ -393,22 +378,22 @@ function createAtomicRules(
       } else if (value === 'none' || value === 'box-none') {
         finalValue = 'none'
       }
-      const block = createDeclarationBlock([['pointerEvents', finalValue]], true)
-      rules.push(`${selector}${block}`)
+      rules.push(`${selector}{${declaration('pointerEvents', finalValue, true)}}`)
       break
     }
 
     default: {
-      const block = createDeclarationBlock([[property, value]], false, !direct)
-      rules.push(`${selector}${block}`)
+      let output = declaration(property, value)
+      if (direct) output = output.slice(0, -1)
+      rules.push(`${selector}{${output}}`)
       break
     }
   }
 
-  if (wrappers && wrapperCount) {
+  if (wrappers) {
     for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
       let rule = rules[ruleIndex]
-      for (let index = wrapperStart + wrapperCount - 1; index >= wrapperStart; index--) {
+      for (let index = wrappers.length - 1; index >= 0; index--) {
         rule = `${wrappers[index]} {${rule}}`
       }
       rules[ruleIndex] = rule

package/src/helpers/getCSSStylesAtomicCompiled.ts

@@ -1,4 +1,16 @@
-import type { ViewStyleObject } from '../types'
+import type { GetStyleState, ViewStyleObject } from '../types'
+
+export const canGenerateCSS = false
+
+export function flushDirectStyles(_state: GetStyleState, _clear = false) {}
+
+export function addComposition(_state: GetStyleState, _property: 'translate' | 'scale') {}
+
+export function registerAtomicSlot() {}
+
+export function buildAtomicSlotCSS() {
+  return undefined
+}
 
 export function getCSSStylesAtomic(_style: ViewStyleObject) {
   return []

package/src/helpers/getDynamicVal.ts

@@ -28,6 +28,10 @@ const colorStyleKeys: Record<string, boolean> = {
   textShadowColor: true,
   tintColor: true,
   outlineColor: true,
+  placeholderTextColor: true,
+  selectionColor: true,
+  cursorColor: true,
+  selectionHandleColor: true,
 }
 
 /**