@tamagui/web 1.2.5

package/src/helpers/getStylesAtomic.native.ts

@@ -0,0 +1,8 @@
+const empty = () => {
+  // eslint-disable-next-line no-console
+  console.warn('no-op native')
+}
+
+export const getStylesAtomic = empty
+export const getAtomicStyle = empty
+export const styleToCSS = empty

package/src/helpers/getStylesAtomic.ts

@@ -0,0 +1,274 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
+
+import { StyleObject, simpleHash } from '@tamagui/helpers'
+import type { TextStyle, ViewStyle } from 'react-native'
+
+import { getConfig } from '../config'
+import { TamaguiInternalConfig } from '../types'
+import { defaultOffset } from './expandStyles'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
+import { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'
+
+// refactor this file away next...
+
+type ViewOrTextStyle = ViewStyle | TextStyle
+
+export type ViewStyleWithPseudos = ViewOrTextStyle & {
+  hoverStyle?: ViewOrTextStyle
+  pressStyle?: ViewOrTextStyle
+  focusStyle?: ViewOrTextStyle
+}
+
+// matching order of the below *0
+const pseudosOrdered = [
+  pseudoDescriptors.hoverStyle,
+  pseudoDescriptors.pressStyle,
+  pseudoDescriptors.focusStyle,
+]
+
+export function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {
+  // performance optimization
+  if (!(stylesIn.hoverStyle || stylesIn.pressStyle || stylesIn.focusStyle)) {
+    return getAtomicStyle(stylesIn)
+  }
+
+  // only for pseudos
+  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn
+  let res: StyleObject[] = []
+  // *1 order matched to *0
+  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {
+    if (!style) continue
+    const pseudo = pseudosOrdered[index]
+    res = [...res, ...getAtomicStyle(style, pseudo)]
+  }
+  return res
+}
+
+const cache = new Map()
+
+export function getAtomicStyle(
+  style: ViewOrTextStyle,
+  pseudo?: PseudoDescriptor
+): StyleObject[] {
+  if (!style) return []
+  const key = JSON.stringify(style) + (pseudo ? JSON.stringify(pseudo) : '')
+  if (cache.has(key)) {
+    return cache.get(key)
+  }
+  if (cache.size > 800) {
+    cache.clear()
+  }
+  if (process.env.NODE_ENV === 'development') {
+    if (!style || typeof style !== 'object') {
+      throw new Error(`Wrong style type: "${typeof style}": ${style}`)
+    }
+  }
+  const out = generateAtomicStyles(style, pseudo)
+  cache.set(key, out)
+  return out
+}
+
+let conf: TamaguiInternalConfig
+
+const generateAtomicStyles = (
+  styleIn: ViewStyle & TextStyle,
+  pseudo?: PseudoDescriptor
+): StyleObject[] => {
+  conf = conf || getConfig()
+
+  // were converting to css styles
+  const style = styleIn as Record<string, string | null | undefined>
+
+  // transform
+  if (style.transform && Array.isArray(style.transform)) {
+    style.transform = style.transform
+      .map(
+        // { scale: 2 } => 'scale(2)'
+        // { translateX: 20 } => 'translateX(20px)'
+        // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+        (transform) => {
+          const type = Object.keys(transform)[0]
+          const value = transform[type]
+          if (type === 'matrix' || type === 'matrix3d') {
+            return `${type}(${value.join(',')})`
+          }
+          return `${type}(${normalizeValueWithProperty(value, type)})`
+        }
+      )
+      .join(' ')
+  }
+
+  styleToCSS(style)
+
+  const out: StyleObject[] = []
+  for (const key in style) {
+    const value = style[key]
+    if (value == null || value == undefined) continue
+    const hash = presetHashes[value]
+      ? value
+      : typeof value === 'string'
+      ? simpleHash(value)
+      : `${value}`.replace('.', 'dot')
+
+    const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
+    const shortProp = conf.inverseShorthands[key] || key
+    const identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+    const rules = createAtomicRules(identifier, key, value, pseudo)
+    const styleObject: StyleObject = {
+      property: key,
+      pseudo: pseudo?.name as any,
+      value,
+      identifier,
+      rules,
+    }
+    out.push(styleObject)
+  }
+
+  return out
+}
+
+const presetHashes = {
+  none: true,
+}
+
+const n = normalizeValueWithProperty
+
+export function styleToCSS(style: Record<string, any>) {
+  // box-shadow
+  const { shadowOffset, shadowRadius, shadowColor } = style
+  if (style.shadowRadius !== undefined) {
+    const offset = shadowOffset || defaultOffset
+    const shadow = `${n(offset.width)} ${n(offset.height)} ${n(
+      shadowRadius
+    )} ${shadowColor}`
+    style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow
+    style.shadowOffset = undefined
+    style.shadowRadius = undefined
+    style.shadowColor = undefined
+  }
+
+  // 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}`
+    }
+    style.textShadowColor = undefined
+    style.textShadowOffset = undefined
+    style.textShadowRadius = undefined
+  }
+}
+
+function createDeclarationBlock(style: Record<string, any>, important = false) {
+  let next = ''
+  for (const key in style) {
+    const prop = hyphenateStyleName(key)
+    const value = style[key]
+    next += `${prop}:${value}${important ? ' !important' : ''};`
+  }
+  return `{${next}}`
+}
+
+const hcache = {}
+const toHyphenLower = (match: string) => `-${match.toLowerCase()}`
+const hyphenateStyleName = (key: string) => {
+  let val = hcache[key]
+  if (val) return val
+  hcache[key] = val = key.replace(/[A-Z]/g, toHyphenLower)
+  return val
+}
+
+const pseudoSelectorPrefixes = (() => {
+  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
+): string[] {
+  const selector = pseudo
+    ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}`
+    : `.${identifier}`
+  const important = !!pseudo
+
+  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 }, important)
+      rules.push(`${selector}::placeholder${block}`)
+      break
+    }
+
+    // all webkit prefixed rules
+    case 'backgroundClip':
+    case 'userSelect': {
+      const propertyCapitalized = `${property[0].toUpperCase()}${property.slice(1)}`
+      const webkitProperty = `Webkit${propertyCapitalized}`
+      const block = createDeclarationBlock(
+        { [property]: value, [webkitProperty]: value },
+        important
+      )
+      rules.push(`${selector}${block}`)
+      break
+    }
+
+    // Polyfill for additional 'pointer-events' values
+    case 'pointerEvents': {
+      let finalValue = value
+      if (value === 'auto' || value === 'box-only') {
+        finalValue = 'auto'
+        if (value === 'box-only') {
+          rules.push(`${selector}>*${boxOnly}`)
+        }
+      } else if (value === 'none' || value === 'box-none') {
+        finalValue = 'none'
+        if (value === 'box-none') {
+          rules.push(`${selector}>*${boxNone}`)
+        }
+      }
+      const block = createDeclarationBlock({ pointerEvents: finalValue }, true)
+      rules.push(`${selector}${block}`)
+      break
+    }
+
+    default: {
+      const block = createDeclarationBlock({ [property]: value }, important)
+      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 && pseudo.name === 'hover') {
+    rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)
+  }
+
+  return rules
+}
+
+const boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)
+const boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)

package/src/helpers/getThemeCSSRules.native.ts

@@ -0,0 +1,3 @@
+export function getThemeCSSRules() {
+  return []
+}

package/src/helpers/getThemeCSSRules.ts

@@ -0,0 +1,120 @@
+import { simpleHash } from '@tamagui/helpers'
+
+import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
+import { Variable, variableToString } from '../createVariable'
+import { CreateTamaguiProps, ThemeParsed } from '../types'
+import { tokensValueToVariable } from './registerCSSVariable'
+
+export function getThemeCSSRules({
+  config,
+  themeName,
+  theme,
+  names,
+}: {
+  config: CreateTamaguiProps
+  themeName: string
+  theme: ThemeParsed
+  names: string[]
+}) {
+  const cssRuleSets: string[] = []
+
+  // special case for SSR
+  const hasDarkLight = 'light' in config.themes && 'dark' in config.themes
+  const CNP = `.${THEME_CLASSNAME_PREFIX}`
+  let vars = ''
+
+  // themeToVariableToValueMap.set(theme, {})
+  // const varToValMap = themeToVariableToValueMap.get(theme)
+  for (const themeKey in theme) {
+    const variable = theme[themeKey] as Variable
+    let value: any = null
+    // if (varToValMap) {
+    //   varToValMap[variable.variable] = variable.val
+    // }
+    if (!tokensValueToVariable.has(variable.val)) {
+      value = variable.val
+    } else {
+      value = tokensValueToVariable.get(variable.val)!.variable
+    }
+    // Hash themeKey in case it has invalid chars too
+    vars += `--${simpleHash(themeKey, 40)}:${value};`
+  }
+
+  const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'
+  const selectors = names.map((name) => {
+    return `${CNP}${name}`
+  })
+
+  // since we dont specify dark/light in classnames we have to do an awkward specificity war
+  // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
+  if (hasDarkLight) {
+    for (const subName of names) {
+      const isDark = isDarkOrLightBase || subName.startsWith('dark_')
+      const max = config.maxDarkLightNesting ?? 3
+
+      if (!(isDark || subName.startsWith('light_'))) {
+        // neither light nor dark subtheme, just generate one selector with :root:root which
+        // will override all :root light/dark selectors generated below
+        selectors.push(`:root:root ${CNP}${subName}`)
+        continue
+      }
+
+      const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`
+      const order = isDark ? ['dark', 'light'] : ['light', 'dark']
+      if (isDarkOrLightBase) {
+        order.reverse()
+      }
+      const [stronger, weaker] = order
+      const numSelectors = Math.round(max * 1.5)
+
+      for (let pi = 0; pi < numSelectors; pi++) {
+        const isOdd = pi % 2 === 1
+        if (isOdd && pi < 3) continue
+        const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {
+          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`
+        })
+        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents
+        if (isOdd) {
+          const [_first, second, ...rest] = parentSelectors
+          parentSelectors = [second, ...rest, second]
+        }
+        // avoid .t_light .t_light at the end (make sure child is unique from last parent)
+        const lastParentSelector = parentSelectors[parentSelectors.length - 1]
+        selectors.push(
+          `${parentSelectors.join(' ')} ${
+            childSelector === lastParentSelector ? '' : childSelector
+          }`
+        )
+      }
+    }
+  }
+
+  const selectorsString = selectors.map((x) => {
+    // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
+    // this isBaseTheme logic could probably be done more efficiently above
+    const isBaseTheme =
+      x === '.t_dark' ||
+      x === '.t_light' ||
+      x.startsWith('.t_dark ') ||
+      x.startsWith('.t_light ')
+    const rootSep = isBaseTheme && config.themeClassNameOnRoot ? '' : ' '
+    return `:root${rootSep}${x}`
+  })
+  const css = `${selectorsString.join(', ')} {${vars}}`
+  cssRuleSets.push(css)
+
+  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {
+    // add media prefers for dark/light base
+    const isDark = themeName.startsWith('dark')
+    cssRuleSets.push(
+      `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {
+body { background:${variableToString(theme.background)}; color: ${variableToString(
+        theme.color
+      )} }
+:root {${vars} } 
+}`
+    )
+  }
+
+  return cssRuleSets
+}

package/src/helpers/getVariantExtras.tsx

@@ -0,0 +1,85 @@
+import { getConfig } from '../config'
+import { GenericFonts } from '../types'
+import { LanguageContextType } from '../views/FontLanguage.types'
+import { createProxy } from './createProxy'
+
+const extrasCache = new WeakMap()
+
+export function getVariantExtras(
+  props: any,
+  languageContext?: LanguageContextType,
+  theme?: any,
+  defaultProps?: any,
+  avoidDefaultProps = false
+) {
+  const conf = getConfig()
+
+  if (extrasCache.has(props)) {
+    return extrasCache.get(props)
+  }
+
+  let fonts = conf.fontsParsed
+  if (languageContext) {
+    fonts = getFontsForLanguage(conf.fontsParsed, languageContext)
+  }
+
+  const next = {
+    fonts,
+    tokens: conf.tokensParsed,
+    theme,
+    // TODO do this in splitstlye
+    // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
+    props: avoidDefaultProps
+      ? props
+      : createProxy(props, {
+          // handles shorthands
+          get(target, key) {
+            const shorthand = conf.inverseShorthands[key as any]
+            // shorthands before longhand because a styled() with longhand combined with inline shorthand
+            // shorthand will always be the overriding key
+            if (shorthand && Reflect.has(target, shorthand)) {
+              return Reflect.get(target, shorthand)
+            }
+            if (Reflect.has(target, key)) {
+              return Reflect.get(target, key)
+            }
+            // these props may be extracted into classNames, but we still want to access them
+            // at runtime, so we proxy back to defaultProps but don't pass them
+            if (defaultProps) {
+              if (shorthand && Reflect.has(defaultProps, shorthand)) {
+                return Reflect.get(defaultProps, shorthand)
+              }
+              if (Reflect.has(defaultProps, key)) {
+                return Reflect.get(defaultProps, key)
+              }
+            }
+          },
+        }),
+  }
+
+  extrasCache.set(props, next)
+
+  return next
+}
+
+const fontLanguageCache = new WeakMap()
+
+export function getFontsForLanguage(fonts: GenericFonts, language: LanguageContextType) {
+  if (fontLanguageCache.has(language)) {
+    return fontLanguageCache.get(language)
+  }
+  const next = {
+    ...fonts,
+    ...Object.fromEntries(
+      Object.entries(language).map(([name, lang]) => {
+        if (lang === 'default') {
+          return []
+        }
+        const langKey = `$${name}_${lang}`
+        return [`$${name}`, fonts[langKey]]
+      })
+    ),
+  }
+  fontLanguageCache.set(language, next)
+  return next
+}

package/src/helpers/insertStyleRule.tsx

@@ -0,0 +1,218 @@
+import type { StyleObject } from '@tamagui/helpers'
+
+import { PartialStyleObject, RulesToInsert } from '../types'
+
+const allSelectors: Record<string, string> = {}
+const allRules: Record<string, string> = {}
+export const insertedTransforms = {}
+
+export const getAllSelectors = () => allSelectors
+export const getAllRules = () => Object.values(allRules)
+export const getAllTransforms = () => insertedTransforms
+
+// keep transforms in map for merging later
+function addTransform(identifier: string, css: string, rule?: CSSRule) {
+  const s = css.indexOf('transform:')
+  if (s === -1) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error(`❌ Invalid transform, likely used deg/% improperly ${identifier}`)
+    }
+    return false
+  }
+  const startI = s + 'transform:'.length
+  const endI = css.indexOf(';')
+  const value = css.slice(startI, endI)
+  if (!insertedTransforms[identifier]) {
+    insertedTransforms[identifier] = value
+    return true
+  }
+  return false
+}
+
+const isClient = typeof document !== 'undefined'
+
+// gets existing ones (client side)
+// takes ~0.1ms for a fairly large page
+// used now for three things:
+//   1. debugging at dev time
+//   2. avoid duplicate insert styles at runtime
+//   3. used now for merging transforms atomically
+
+// multiple sheets could have the same ids so we have to count
+
+// only cache tamagui styles
+const scannedCache = new WeakMap<CSSStyleSheet, string>()
+const totalSheetSelectors = new Map<string, number>()
+
+export function listenForSheetChanges() {
+  if (!isClient) return
+  function handleNode(node: Node, remove = false) {
+    if (node instanceof HTMLStyleElement && node.sheet) {
+      updateSheetStyles(node.sheet, remove)
+    }
+  }
+  const mo = new MutationObserver((entries) => {
+    for (const entry of entries) {
+      entry.addedNodes.forEach((node) => handleNode(node))
+      entry.removedNodes.forEach((node) => handleNode(node, true))
+    }
+  })
+  mo.observe(document.head, {
+    childList: true,
+  })
+}
+
+export function scanAllSheets() {
+  if (process.env.NODE_ENV === 'test') return
+  if (!isClient) return
+  const sheets = document.styleSheets
+  if (!sheets) return
+  for (let i = 0; i < sheets.length; i++) {
+    const sheet = sheets[i]
+    if (!sheet) continue
+    updateSheetStyles(sheet)
+  }
+}
+
+function track(id: string, remove = false) {
+  const next = (totalSheetSelectors.get(id) || 0) + (remove ? -1 : 1)
+  totalSheetSelectors.set(id, next)
+  return next
+}
+
+function updateSheetStyles(sheet: CSSStyleSheet, remove = false) {
+  // avoid errors on cross origin sheets
+  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
+  let rules: CSSRuleList
+  try {
+    rules = sheet.cssRules
+  } catch {
+    return
+  }
+
+  // not tamagui stylesheet
+  const firstSelector = getTamaguiSelector(rules[0])?.[0]
+  if (!firstSelector) {
+    return
+  }
+
+  const lastSelector = getTamaguiSelector(rules[rules.length - 1])?.[0]
+
+  const cacheKey = `${rules.length}${firstSelector}${lastSelector}`
+  const lastScanned = scannedCache.get(sheet)
+  if (!remove) {
+    // avoid re-scanning
+    if (lastScanned === cacheKey) {
+      return
+    }
+  }
+
+  const len = rules.length
+  for (let i = 0; i < len; i++) {
+    const rule = rules[i]
+    const response = getTamaguiSelector(rule)
+    if (!response) {
+      return
+    }
+
+    const [identifier, cssRule] = response
+
+    // track references
+    const total = track(identifier, remove)
+
+    if (remove) {
+      if (total === 0) {
+        delete allSelectors[identifier]
+      }
+    } else {
+      if (!(identifier in allSelectors)) {
+        const isTransform = identifier.startsWith('_transform')
+        const shouldInsert = isTransform
+          ? addTransform(identifier, cssRule.cssText, cssRule)
+          : true
+        if (shouldInsert) {
+          allSelectors[identifier] = cssRule.cssText
+        }
+      }
+    }
+  }
+
+  scannedCache.set(sheet, cacheKey)
+}
+
+function getTamaguiSelector(
+  rule: CSSRule | null
+): readonly [string, CSSStyleRule] | null {
+  if (rule instanceof CSSStyleRule) {
+    const text = rule.selectorText
+    if (text[0] === '.' && text[1] === '_') {
+      return [text.slice(1), rule]
+    }
+    if (text.startsWith(':root') && text.includes('._')) {
+      return [getIdentifierFromTamaguiSelector(text), rule]
+    }
+  } else if (rule instanceof CSSMediaRule) {
+    // tamagui only ever inserts 1 rule per media
+    if (rule.cssRules.length > 1) return null
+    return getTamaguiSelector(rule.cssRules[0])
+  }
+  return null
+}
+
+const getIdentifierFromTamaguiSelector = (selector: string) =>
+  selector
+    .replace(/(:root)+\s+/, '')
+    .replace(/:[a-z]+$/, '')
+    .slice(1)
+
+const sheet = isClient
+  ? document.head.appendChild(document.createElement('style')).sheet
+  : null
+
+export function updateRules(identifier: string, rules: string[]) {
+  if (allRules[identifier]) return false
+  allRules[identifier] = rules.join(' ')
+  if (identifier.startsWith('_transform')) {
+    return addTransform(identifier, rules[0])
+  }
+  return true
+}
+
+export function insertStyleRules(rulesToInsert: RulesToInsert) {
+  if (!rulesToInsert.length) return
+  if (isClient && !sheet) {
+    if (process.env.NODE_ENV === 'development') throw 'impossible'
+    return
+  }
+  for (const { identifier, rules } of rulesToInsert) {
+    if (identifier in allSelectors) continue
+    allSelectors[identifier] =
+      process.env.NODE_ENV === 'development' ? rules.join('\n') : ' '
+    updateRules(identifier, rules)
+    if (sheet) {
+      for (const rule of rules) {
+        try {
+          sheet.insertRule(rule, sheet.cssRules.length)
+        } catch (err) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.groupCollapsed(
+              `Error inserting rule into CSSStyleSheet: ${String(err)}`
+            )
+            console.log({ rule, rulesToInsert })
+            console.trace()
+            console.groupEnd()
+          }
+        }
+      }
+    }
+  }
+}
+
+const IS_STATIC = process.env.IS_STATIC === 'is_static'
+
+export function shouldInsertStyleRules(styleObject: PartialStyleObject) {
+  if (IS_STATIC) {
+    return true
+  }
+  return !(styleObject.identifier in allSelectors)
+}