@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.211

package/src/helpers/getStylesAtomic.native.ts

@@ -0,0 +1,3 @@
+export function getStylesAtomic() {
+  console.warn('no-op native')
+}

package/src/helpers/getStylesAtomic.ts

@@ -0,0 +1,272 @@
+/**
+ * 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 '@tamagui/types-react-native'
+
+import { getConfig } from '../config'
+import { TamaguiInternalConfig } from '../types'
+import { Style, cache } from './cache'
+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
+}
+
+const pseudosOrdered = Object.values(pseudoDescriptors)
+
+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
+}
+
+export function getAtomicStyle(style: ViewOrTextStyle, pseudo?: PseudoDescriptor): StyleObject[] {
+  if (process.env.NODE_ENV === 'development') {
+    if (!style || typeof style !== 'object') {
+      throw new Error(`Wrong style type: "${typeof style}": ${style}`)
+    }
+  } else {
+    if (!style) {
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.warn(`Invalid style`)
+      }
+      return []
+    }
+  }
+
+  return generateAtomicStyles(style, pseudo)
+}
+
+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) {
+    if (Array.isArray(style.transform)) {
+      style.transform = style.transform.map(mapTransform).join(' ')
+    }
+  }
+
+  styleToCSS(style)
+
+  const out: StyleObject[] = []
+  for (const key in style) {
+    const value = style[key]
+    if (value != null && value != undefined) {
+      const uid = key + (pseudo?.name || '')
+      const cachedResult = cache.get(uid, value)
+      if (cachedResult != undefined) {
+        out.push(cachedResult)
+      } else {
+        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,
+          value,
+          identifier,
+          rules,
+        }
+
+        cache.set(uid, value, styleObject)
+        out.push(styleObject)
+      }
+    }
+  }
+  return out
+}
+
+const presetHashes = {
+  none: true,
+}
+
+const n = (val: any) => normalizeValueWithProperty(val)
+
+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
+    delete style.shadowOffset
+    delete style.shadowRadius
+    delete style.shadowColor
+  }
+
+  // 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}`
+    }
+    delete style.textShadowColor
+    delete style.textShadowOffset
+    delete style.textShadowRadius
+  }
+}
+
+// { scale: 2 } => 'scale(2)'
+// { translateX: 20 } => 'translateX(20px)'
+// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+const mapTransform = (transform) => {
+  const type = Object.keys(transform)[0]
+  const value = transform[type]
+  if (type === 'matrix' || type === 'matrix3d') {
+    return `${type}(${value.join(',')})`
+  } else {
+    const normalizedValue = normalizeValueWithProperty(value, type)
+    return `${type}(${normalizedValue})`
+  }
+}
+
+function createDeclarationBlock(style: Style, 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,105 @@
+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 (variable.isFloating || !tokensValueToVariable.has(variable.val)) {
+      value = variable.val
+    } else {
+      value = tokensValueToVariable.get(variable.val)!.variable
+    }
+    vars += `--${themeKey}:${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 rootSep = config.themeClassNameOnRoot ? '' : ' '
+  const css = `${selectors.map((x) => `:root${rootSep}${x}`).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,163 @@
+// this needs to check if its inserted already? 99% of the time it is
+// this should avoid re-inserts, but need to test the perf trade-offs
+// i tested with the site itself and the initial insert was trivial
+
+import type { StyleObject } from '@tamagui/helpers'
+
+const allSelectors: Record<string, string> = {}
+const allRules: Record<string, boolean | 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') {
+      // eslint-disable-next-line no-console
+      console.groupCollapsed(`❌ Invalid transform, likely used deg/% improperly ${identifier}`)
+      // eslint-disable-next-line no-console
+      console.log('rule:', rule)
+      // eslint-disable-next-line no-console
+      console.trace()
+      // eslint-disable-next-line no-console
+      console.groupEnd()
+    } else {
+      // missing transform
+    }
+    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
+const scannedNum = new WeakMap<CSSStyleSheet, number>()
+
+export function updateInserted() {
+  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
+
+    // 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 {
+      continue
+    }
+
+    const len = rules.length
+    const lastScanned = scannedNum.get(sheet) ?? 0
+    if (lastScanned === len) {
+      continue
+    }
+    for (let i = lastScanned; i < len; i++) {
+      const rule = rules[i]
+      const response = getTamaguiSelector(rule)
+      if (!response) {
+        continue
+      }
+      const [identifier, cssRule] = response
+      if (!allSelectors[identifier]) {
+        const isTransform = identifier.startsWith('_transform')
+        const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true
+        if (shouldInsert) {
+          allSelectors[identifier] = cssRule.cssText
+        }
+      }
+    }
+    scannedNum.set(sheet, i)
+  }
+}
+
+function getTamaguiSelector(rule: CSSRule | null): readonly [string, CSSStyleRule] | null {
+  if (rule instanceof CSSStyleRule) {
+    const text = rule.selectorText
+    if (text.startsWith('._')) {
+      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)
+
+// move this to probably inside createTamagui
+updateInserted()
+
+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
+  if (identifier.startsWith('_transform')) {
+    return addTransform(identifier, rules[0])
+  }
+  return true
+}
+
+// [property, identifier, rules]
+export type PartialStyleObject = Pick<StyleObject, 'identifier' | 'property' | 'rules'>
+export type RulesToInsert = PartialStyleObject[]
+
+export function insertStyleRules(rulesToInsert: RulesToInsert) {
+  if (isClient && !sheet) {
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(`Missing sheet`)
+    }
+    return
+  }
+  for (const { identifier, rules } of rulesToInsert) {
+    if (allSelectors[identifier]) continue
+    allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rules.join('\n') : ''
+    updateRules(identifier, rules)
+    if (sheet) {
+      for (const rule of rules) {
+        sheet.insertRule(rule, sheet.cssRules.length)
+      }
+    }
+  }
+}
+
+const IS_STATIC = process.env.IS_STATIC === 'is_static'
+
+export function shouldInsertStyleRules(styleObject: PartialStyleObject) {
+  if (IS_STATIC) {
+    return true
+  }
+  return !allSelectors[styleObject.identifier]
+}

package/src/helpers/isObj.ts

@@ -0,0 +1 @@
+export const isObj = (x: any) => x && !Array.isArray(x) && typeof x === 'object'

package/src/helpers/isTamaguiComponent.tsx

@@ -0,0 +1,15 @@
+import { StaticConfig, StaticConfigParsed } from '../types'
+
+export function isTamaguiComponent<A>(
+  comp: A,
+  name?: string
+): comp is A & {
+  staticConfig: StaticConfig
+} {
+  const config = comp && (comp['staticConfig'] as StaticConfigParsed | undefined)
+  if (!config || !config.parsed) return false
+  if (name) {
+    return name === config.componentName
+  }
+  return true
+}

package/src/helpers/isTamaguiElement.tsx

@@ -0,0 +1,12 @@
+import React, { isValidElement } from 'react'
+
+import { TamaguiComponent } from '../types'
+import { isTamaguiComponent } from './isTamaguiComponent'
+
+export type TamaguiReactElement<P = any> = React.ReactElement<P> & {
+  type: TamaguiComponent
+}
+
+export const isTamaguiElement = (child: any, name?: string): child is TamaguiReactElement => {
+  return isValidElement(child) && isTamaguiComponent(child.type, name)
+}

package/src/helpers/matchMedia.native.ts

@@ -0,0 +1,6 @@
+import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
+
+export const matchMedia = (media: string) => new MediaQueryList(media)
+
+// @ts-ignore
+globalThis['matchMedia'] = matchMedia

package/src/helpers/matchMedia.ts

@@ -0,0 +1,17 @@
+export const matchMedia = (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback
+
+function matchMediaFallback(query: string): MediaQueryList {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    !process.env.IS_STATIC &&
+    process.env.TAMAGUI_TARGET !== 'web'
+  ) {
+    // eslint-disable-next-line no-console
+    console.log('warning: matchMedia not loading! Native not picking up .native.js files?')
+  }
+  return {
+    addListener() {},
+    removeListener() {},
+    matches: false,
+  } as any
+}