@tamagui/core 1.2.4 → 1.2.6

package/src/helpers/getStylesAtomic.native.ts

@@ -1,8 +0,0 @@
-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

@@ -1,274 +0,0 @@
-/**
- * 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

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

package/src/helpers/getThemeCSSRules.ts

@@ -1,120 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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
-}