@tamagui/core 1.2.4 → 1.2.6

package/src/helpers/insertStyleRule.tsx

@@ -1,220 +0,0 @@
-import type { StyleObject } from '@tamagui/helpers'
-
-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
-}
-
-// [property, identifier, rules]
-export type PartialStyleObject = Pick<StyleObject, 'identifier' | 'property' | 'rules'>
-export type RulesToInsert = PartialStyleObject[]
-
-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)
-}

package/src/helpers/isObj.ts

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

package/src/helpers/isTamaguiComponent.tsx

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

package/src/helpers/isTamaguiElement.tsx

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

@@ -1,23 +0,0 @@
-import { MatchMedia, MediaQueryList } from '../types'
-
-let matchMediaImpl: MatchMedia = matchMediaFallback
-
-export const matchMedia: MatchMedia = (...args) => matchMediaImpl(...args)
-
-function matchMediaFallback(query: string): MediaQueryList {
-  if (process.env.NODE_ENV === 'development') {
-    // eslint-disable-next-line no-console
-    console.warn('warning: matchMedia implementation is not provided.')
-  }
-  return {
-    addListener: () => {},
-    removeListener: () => {},
-    matches: false,
-  }
-}
-
-export function setupMatchMedia(_: MatchMedia) {
-  matchMediaImpl = _
-  // @ts-ignore
-  globalThis['matchMedia'] = _
-}

package/src/helpers/matchMedia.ts

@@ -1,16 +0,0 @@
-import { MatchMedia, MediaQueryList } from '../types'
-
-export const matchMedia =
-  (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback
-
-function matchMediaFallback(_: string): MediaQueryList {
-  return {
-    addListener() {},
-    removeListener() {},
-    matches: false,
-  }
-}
-
-export function setupMatchMedia(_: MatchMedia) {
-  // no-op web
-}

package/src/helpers/mergeProps.ts

@@ -1,56 +0,0 @@
-/**
- * Preserves prop ordering, so that the order most closely matches the last spread objects
- * Useful for having { ...defaultProps, ...props } that ensure props ordering is always kept
- *
- *    Given:
- *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })
- *    The final key order will be:
- *      b, a
- *
- * Handles a couple special tamagui cases
- *   - classNames can be extracted out separately
- *   - shorthands can be expanded before merging
- */
-
-type AnyRecord = Record<string, any>
-
-export const mergeProps = (
-  a: Object,
-  b: Object,
-  leaveOutClassNames = false,
-  inverseShorthands?: AnyRecord
-) => {
-  const out: AnyRecord = {}
-  const outCns: AnyRecord = leaveOutClassNames ? {} : (null as any)
-  for (const key in a) {
-    mergeProp(out, outCns, a, b, key, leaveOutClassNames, inverseShorthands)
-  }
-  for (const key in b) {
-    mergeProp(out, outCns, b, undefined, key, leaveOutClassNames, inverseShorthands)
-  }
-  return [out, outCns] as const
-}
-
-function mergeProp(
-  out: AnyRecord,
-  outCns: AnyRecord,
-  a: Object,
-  b: Object | undefined,
-  key: string,
-  leaveOutClassNames: boolean,
-  inverseShorthands?: AnyRecord
-) {
-  const val = a[key]
-  const shorthand = inverseShorthands?.[key] || null
-  if (b && (key in b || (shorthand && shorthand in b))) {
-    return
-  }
-  if (shorthand) {
-    key = shorthand
-  }
-  if (leaveOutClassNames && val?.[0] === '_') {
-    outCns[key] = val
-  } else {
-    out[key] = val
-  }
-}

package/src/helpers/mergeTransform.ts

@@ -1,30 +0,0 @@
-import type { ViewStyle } from 'react-native'
-
-export type FlatTransforms = Record<string, any>
-
-export const mergeTransform = (
-  obj: ViewStyle,
-  key: string,
-  val: any,
-  backwards = false
-) => {
-  obj.transform ||= []
-  obj.transform[backwards ? 'unshift' : 'push']({
-    [mapTransformKeys[key] || key]: val,
-  } as any)
-}
-
-export const mergeTransforms = (
-  obj: ViewStyle,
-  flatTransforms: FlatTransforms,
-  backwards = false
-) => {
-  Object.entries(flatTransforms).forEach(([key, val]) => {
-    mergeTransform(obj, key, val, backwards)
-  })
-}
-
-export const mapTransformKeys = {
-  x: 'translateX',
-  y: 'translateY',
-}

package/src/helpers/normalizeColor.ts

@@ -1,38 +0,0 @@
-import { isWeb } from '@tamagui/constants'
-import * as NCC from '@tamagui/normalize-css-color'
-
-export const rgba = NCC.rgba
-
-export const normalizeColor = (color?: string | null, opacity?: number) => {
-  if (color === null || color === undefined) {
-    return
-  }
-  if (color === 'transparent') {
-    return `rgba(0,0,0,0)`
-  }
-  if (
-    color[0] === '$' ||
-    (isWeb && (webColors[color] || color[0] === '_' || color.startsWith('var(')))
-  ) {
-    return color
-  }
-  const colorProcessed = NCC.normalizeCSSColor(color)
-  if (colorProcessed !== null) {
-    const { r, g, b, a } = rgba(colorProcessed)
-    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`
-  }
-
-  if (isWeb) {
-    return color
-  } else {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn(`Unknown color value: ${color}`)
-    }
-  }
-}
-
-const webColors = {
-  currentColor: true,
-  currentcolor: true,
-  inherit: true,
-}

package/src/helpers/normalizeValueWithProperty.ts

@@ -1,129 +0,0 @@
-/**
- * Some parts adapted from react-native-web
- * Copyright (c) Nicolas Gallagher licensed under the MIT license.
- */
-
-import { isWeb } from '@tamagui/constants'
-
-import { getAllSelectors } from './insertStyleRule'
-import { normalizeColor } from './normalizeColor'
-
-const cache = {}
-
-export function normalizeValueWithProperty(value: any, property?: string): any {
-  const cached = cache[value]
-  if (cached !== undefined) {
-    return cached
-  }
-  if (property && property in unitlessNumbers) {
-    return value
-  }
-  let res = value
-  if (
-    process.env.TAMAGUI_TARGET === 'web' &&
-    typeof value === 'number' &&
-    (property === undefined || !(unitlessNumbers[property] || stringNumbers[property]))
-  ) {
-    res = `${value}px`
-  } else if (isWeb && property !== undefined && stringNumbers[property]) {
-    res = `${res}`
-  } else if (property && property in colorProps) {
-    res = normalizeColor(value)
-    cache[value] = res
-  }
-  return res
-}
-
-// TODO react-native-web-lite
-
-const colorProps = {
-  backgroundColor: true,
-  borderColor: true,
-  borderTopColor: true,
-  borderRightColor: true,
-  borderBottomColor: true,
-  borderLeftColor: true,
-  color: true,
-  shadowColor: true,
-  textDecorationColor: true,
-  textShadowColor: true,
-}
-
-const stringNumbers = {
-  zIndex: true,
-}
-
-const unitlessNumbers = {
-  WebkitLineClamp: true,
-  animationIterationCount: true,
-  aspectRatio: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  columnCount: true,
-  flex: true,
-  flexGrow: true,
-  flexOrder: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  fontWeight: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowGap: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnGap: true,
-  gridColumnStart: true,
-  lineClamp: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zoom: true,
-  scale: true,
-  scaleX: true,
-  scaleY: true,
-  scaleZ: true,
-  shadowOpacity: true,
-}
-
-// getting real values for colors for animations (reverse mapped from CSS)
-// this isn't beautiful, but will do relatively fine performance for now
-const rcache = {}
-export function reverseMapClassNameToValue(key: string, className: string) {
-  const selectors = getAllSelectors()
-  const cssRule = selectors[className]
-  if (rcache[cssRule]) return rcache[cssRule]
-  if (!cssRule) {
-    return
-  }
-  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()
-  let res: any
-  if (cssVal.startsWith('var(')) {
-    res = cssVal
-  } else if (unitlessNumbers[key]) {
-    res = +cssVal
-  } else if (cssVal.endsWith('px')) {
-    res = +cssVal.replace('px', '')
-  } else {
-    res = cssVal
-  }
-  rcache[cssRule] = res
-  if (process.env.NODE_ENV === 'development') {
-    // ensure we are parsing properly
-    if (typeof res === 'number' && isNaN(res)) {
-      // eslint-disable-next-line no-console
-      console.log('Tamagui invalid parsed value, NaN:', {
-        res,
-        cssVal,
-        cssRule,
-        key,
-        className,
-      })
-    }
-  }
-  return res
-}

package/src/helpers/proxyThemeVariables.tsx

@@ -1,15 +0,0 @@
-import { createProxy } from './createProxy'
-
-export function proxyThemeVariables<A extends Object>(obj: A): A {
-  return createProxy<A>(obj || {}, {
-    has(target, key) {
-      return Reflect.has(target, removeStarting$(key))
-    },
-    get(target, key) {
-      return Reflect.get(target, removeStarting$(key))
-    },
-  })
-}
-
-const removeStarting$ = (str: string | symbol) =>
-  typeof str === 'string' && str[0] === '$' ? str.slice(1) : str

package/src/helpers/pseudoDescriptors.ts

@@ -1,40 +0,0 @@
-// *0 order matches to *1
-
-export const pseudoDescriptors: Record<
-  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
-  PseudoDescriptor
-> = {
-  hoverStyle: {
-    name: 'hover',
-    priority: 1,
-  },
-  pressStyle: {
-    name: 'active',
-    stateKey: 'press',
-    priority: 2,
-  },
-  focusStyle: {
-    name: 'focus',
-    priority: 3,
-  },
-  enterStyle: {
-    name: 'enter',
-    stateKey: 'unmounted',
-    priority: 4,
-  },
-  exitStyle: {
-    name: 'exit',
-    stateKey: 'isExiting',
-    priority: 5,
-  },
-}
-
-export type PseudoDescriptor = {
-  name: string
-  priority: number
-  stateKey?: string
-}
-
-export type PseudoDescriptors = {
-  [Key in keyof typeof pseudoDescriptors]: PseudoDescriptor
-}

package/src/helpers/registerCSSVariable.ts

@@ -1,13 +0,0 @@
-import { Variable, createCSSVariable } from '../createVariable'
-
-export const registerCSSVariable = (v: Variable) => {
-  tokensValueToVariable.set(v.val, v)
-}
-
-export const variableToCSS = (v: Variable) => {
-  return `--${createCSSVariable(v.name, false)}:${
-    typeof v.val === 'number' ? `${v.val}px` : v.val
-  }`
-}
-
-export const tokensValueToVariable = new Map<any, any>()

package/src/helpers/themeable.tsx

@@ -1,44 +0,0 @@
-import React, { forwardRef, useId } from 'react'
-
-import { ThemeName } from '../types'
-import { Theme } from '../views/Theme'
-
-export interface ThemeableProps {
-  theme?: ThemeName | null
-  themeInverse?: boolean
-  themeReset?: boolean
-  componentName?: string
-  debug?: boolean | 'verbose'
-}
-
-export function themeable<Component extends (props: any) => any>(
-  component: Component,
-  opts?: { componentName?: string }
-) {
-  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
-    const { themeInverse, theme, componentName, themeReset, ...rest } = props
-    const element = React.createElement(component, { ...rest, ref } as any)
-
-    return (
-      <Theme
-        inverse={themeInverse}
-        componentName={componentName || opts?.componentName}
-        name={(theme as any) || null}
-        data-themeable
-        debug={props.debug}
-        reset={props.themeReset}
-      >
-        {element}
-      </Theme>
-    )
-  })
-
-  const withTheme: any = withThemeComponent
-  withTheme.displayName = `Themed(${
-    (component as any)?.displayName || (component as any)?.name || 'Anonymous'
-  })`
-
-  return withTheme as Component extends (props: infer P) => infer R
-    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R
-    : unknown
-}