@tamagui/web 1.2.5

package/src/createFont.ts

@@ -0,0 +1,50 @@
+import { FontWeightSteps, GenericFont } from './types'
+
+const fontWeights: FontWeightSteps[] = [
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+]
+
+const processSection = <T>(
+  section: string | Record<string, T>,
+  keys: string[],
+  defaultValue?: any
+): string | Record<string, T> => {
+  if (typeof section === 'string') return section
+
+  const sectionKeys = Object.keys(section)
+  let fillValue = section[sectionKeys[0]]
+
+  return Object.fromEntries(
+    [...new Set([...keys, ...sectionKeys])].map((key) => {
+      const value = section[key] ?? defaultValue ?? fillValue
+      fillValue = value
+      defaultValue = value
+      return [key, value]
+    })
+  )
+}
+
+export const createFont = <A extends GenericFont>(font: A): A => {
+  const sizeKeys = Object.keys(font.size)
+  const processedFont = Object.fromEntries(
+    Object.entries(font).map(([key, section]) => {
+      return [
+        key,
+        processSection(
+          section as any,
+          key === 'face' ? fontWeights : sizeKeys,
+          key === 'face' ? { normal: font.family } : undefined
+        ),
+      ]
+    })
+  )
+  return Object.freeze(processedFont) as A
+}

package/src/createShorthands.ts

@@ -0,0 +1,7 @@
+import { CreateShorthands } from './types'
+
+// just a type helper util
+
+export function createShorthands<A extends CreateShorthands>(shorthands: A): A {
+  return Object.freeze(shorthands) as any
+}

package/src/createTamagui.ts

@@ -0,0 +1,253 @@
+import { isRSC, isWeb } from '@tamagui/constants'
+
+import { configListeners, setConfig } from './config'
+import { createVariables, tokensKeysOrdered } from './createVariables'
+import { getThemeCSSRules } from './helpers/getThemeCSSRules'
+import {
+  getAllRules,
+  listenForSheetChanges,
+  scanAllSheets,
+} from './helpers/insertStyleRule'
+import {
+  registerCSSVariable,
+  tokensValueToVariable,
+  variableToCSS,
+} from './helpers/registerCSSVariable'
+import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
+import { configureMedia } from './hooks/useMedia'
+import { parseFont, registerFontVariables } from './insertFont'
+import { Tamagui } from './Tamagui'
+import {
+  CreateTamaguiProps,
+  InferTamaguiConfig,
+  TamaguiInternalConfig,
+  ThemeParsed,
+} from './types'
+
+// config is re-run by the @tamagui/static, dont double validate
+const createdConfigs = new WeakMap<any, boolean>()
+
+export function createTamagui<Conf extends CreateTamaguiProps>(
+  configIn: Conf
+): InferTamaguiConfig<Conf> {
+  if (createdConfigs.has(configIn)) {
+    return configIn as any
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!configIn.tokens) {
+      throw new Error('Must define tokens')
+    }
+    if (!configIn.themes) {
+      throw new Error('Must define themes')
+    }
+    if (!configIn.fonts) {
+      throw new Error('Must define fonts')
+    }
+  }
+
+  scanAllSheets()
+  listenForSheetChanges()
+
+  const fontTokens = Object.fromEntries(
+    Object.entries(configIn.fonts!).map(([k, v]) => {
+      return [k, createVariables(v, 'f', true)]
+    })
+  )
+
+  const fontsParsed = (() => {
+    const res = {} as typeof fontTokens
+    for (const familyName in fontTokens) {
+      res[`$${familyName}`] = parseFont(fontTokens[familyName])
+    }
+    return res!
+  })()
+
+  const themeConfig = (() => {
+    const themes = { ...configIn.themes }
+    const cssRuleSets: string[] = []
+
+    if (isWeb) {
+      const declarations: string[] = []
+      const fontDeclarations: Record<
+        string,
+        { name: string; declarations: string[]; language?: string }
+      > = {}
+
+      for (const key in configIn.tokens) {
+        for (const skey in configIn.tokens[key]) {
+          const val = configIn.tokens[key][skey]
+          registerCSSVariable(val)
+          declarations.push(variableToCSS(val))
+        }
+      }
+
+      for (const key in fontsParsed) {
+        const fontParsed = fontsParsed[key]
+        const [name, language] = key.includes('_') ? key.split('_') : [key]
+        const fontVars = registerFontVariables(fontParsed)
+        fontDeclarations[key] = {
+          name: name.slice(1),
+          declarations: fontVars,
+          language,
+        }
+      }
+
+      const sep =
+        process.env.NODE_ENV === 'development' ? configIn.cssStyleSeparator || ' ' : ''
+
+      function declarationsToRuleSet(decs: string[], selector = '') {
+        return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`
+      }
+
+      // non-font
+      cssRuleSets.push(declarationsToRuleSet(declarations))
+
+      // fonts
+      if (fontDeclarations) {
+        for (const key in fontDeclarations) {
+          const { name, declarations, language = 'default' } = fontDeclarations[key]
+          const fontSelector = `.font_${name}`
+          const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
+          const selectors =
+            language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
+          const specificRuleSet = declarationsToRuleSet(declarations, selectors)
+          cssRuleSets.push(specificRuleSet)
+        }
+      }
+    }
+
+    // dedupe themes to avoid duplicate CSS generation
+    type DedupedTheme = {
+      names: string[]
+      theme: ThemeParsed
+    }
+    const dedupedThemes: {
+      [key: string]: DedupedTheme
+    } = {}
+    const existing = new WeakMap<ThemeParsed, DedupedTheme>()
+
+    // first, de-dupe and parse them
+    for (const themeName in themes) {
+      const rawTheme = themes[themeName] as ThemeParsed
+
+      // if existing, avoid
+      if (existing.has(rawTheme)) {
+        const e = existing.get(rawTheme)!
+        themes[themeName] = e.theme
+        e.names.push(themeName)
+        continue
+      }
+
+      // ensure each theme object unique for dedupe
+      const theme = { ...rawTheme }
+      // parse into variables
+      for (const key in theme) {
+        // make sure properly names theme variables
+        ensureThemeVariable(theme, key)
+      }
+      themes[themeName] = theme
+
+      // set deduped
+      dedupedThemes[themeName] = {
+        names: [themeName],
+        theme,
+      }
+
+      existing.set(rawTheme, dedupedThemes[themeName])
+    }
+
+    // then, generate CSS from de-duped
+    let themeRuleSets: string[] = []
+
+    if (isWeb || isRSC) {
+      for (const themeName in dedupedThemes) {
+        themeRuleSets = [
+          ...themeRuleSets,
+          ...getThemeCSSRules({
+            config: configIn,
+            themeName,
+            ...dedupedThemes[themeName],
+          }),
+        ]
+      }
+    }
+
+    // proxy upwards to get parent variables (themes are subset going down)
+    for (const themeName in themes) {
+      themes[themeName] = proxyThemeToParents(themeName, themes[themeName], themes)
+    }
+
+    tokensValueToVariable.clear()
+
+    return {
+      themes,
+      cssRuleSets,
+      themeRuleSets,
+    }
+  })()
+
+  // faster $lookups
+  const tokensParsed: any = Object.fromEntries(
+    Object.entries(configIn.tokens).map(([k, v]) => {
+      const val = Object.fromEntries(Object.entries(v).map(([k, v]) => [`$${k}`, v]))
+      tokensKeysOrdered.set(val, tokensKeysOrdered.get(v))
+      return [k, val]
+    })
+  )
+
+  const shorthands = configIn.shorthands || {}
+
+  const config: TamaguiInternalConfig = {
+    fontLanguages: [],
+    animations: {} as any,
+    media: {},
+    ...configIn,
+    // already processed by createTokens()
+    tokens: configIn.tokens as any,
+    // vite made this into a function if it wasn't set
+    shorthands: { ...shorthands },
+    inverseShorthands: shorthands
+      ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))
+      : {},
+    themes: themeConfig.themes as any,
+    fontsParsed,
+    themeConfig,
+    tokensParsed,
+    parsed: true,
+    getCSS: (separator = '\n') => {
+      return `
+._ovs-contain {overscroll-behavior:contain;}
+.t_unmounted .t_will-mount {opacity:0;visibility:hidden;}
+.is_Text .is_Text {display:inline-flex;}
+._dsp_contents {display:contents;}
+${themeConfig.cssRuleSets.join(separator)}
+${themeConfig.themeRuleSets.join(separator)}
+${getAllRules().join(separator)}`
+    },
+    // const tokens = [...getToken(tokens.size[0])]
+    // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
+  }
+
+  configureMedia(config)
+  setConfig(config)
+
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(config))
+    configListeners.clear()
+  }
+
+  createdConfigs.set(config, true)
+
+  if (process.env.NODE_ENV === 'development') {
+    if (process.env.DEBUG?.startsWith('tamagui')) {
+      // eslint-disable-next-line no-console
+      console.log('Tamagui config:', config)
+    }
+    if (!globalThis['Tamagui']) {
+      globalThis['Tamagui'] = Tamagui
+    }
+  }
+
+  return config as any
+}

package/src/createTheme.ts

@@ -0,0 +1,13 @@
+import type { Variable } from './createVariable'
+
+type GenericTheme = { [key: string]: string | Variable }
+
+// export const themeToVariableToValueMap = new WeakMap<any, Record<string, string>>()
+
+export const createTheme = <Theme extends GenericTheme>(
+  theme: Theme
+): {
+  [K in keyof Theme]: Theme[K] | string | Variable
+} => {
+  return theme
+}

package/src/createTokens.ts

@@ -0,0 +1,46 @@
+import { Variable } from './createVariable'
+import { createVariables } from './createVariables'
+import { CreateTokens } from './types'
+
+// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
+export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  return createVariables(tokens) as any
+}
+
+// verbose but gives us nice types...
+type MakeTokens<T> = T extends {
+  color: infer E
+  space: infer F
+  size: infer G
+  radius: infer H
+  zIndex: infer J
+}
+  ? {
+      color: {
+        // removes $ prefix allowing for defining either as $1: or 1:,
+        // which is important because Chrome re-orders numerical-seeming keys :/
+        [Key in keyof E extends `$${infer X}` ? X : keyof E]: Variable<string>
+      }
+      space: {
+        [Key in keyof F extends `$${infer X}` ? X : keyof F]: Variable<number>
+      }
+      size: {
+        [Key in keyof G extends `$${infer X}` ? X : keyof G]: Variable<number>
+      }
+      radius: {
+        [Key in keyof H extends `$${infer X}` ? X : keyof H]: Variable<number>
+      }
+      zIndex: {
+        [Key in keyof J extends `$${infer X}` ? X : keyof J]: Variable<number>
+      }
+    }
+  : never
+
+// test
+const tokens = createTokens({
+  size: { 0: 1 },
+  space: { 0: 1 },
+  radius: { 0: 1 },
+  zIndex: { 0: 1 },
+  color: { 0: 'hi' },
+})

package/src/createVariable.ts

@@ -0,0 +1,93 @@
+import { isWeb } from '@tamagui/constants'
+import { simpleHash } from '@tamagui/helpers'
+
+import { getConfig } from './config'
+
+/**
+ * Should rename this to Token
+ * Moving to objects for React Server Components support
+ */
+
+const IS_VAR = 'isVar'
+
+export interface Variable<A = any> {
+  [IS_VAR]?: true
+  variable?: string
+  val: A
+  name: string
+  key: string
+}
+
+export type MakeVariable<A = any> = A extends string | number ? Variable<A> : A
+
+type VariableIn<A = any> = Pick<Variable<A>, 'key' | 'name' | 'val'>
+export const createVariable = <A extends string | number | Variable = any>(
+  props: VariableIn<A>
+): Variable<A> => {
+  if (isVariable(props)) return props
+  const { key, name, val } = props
+  return {
+    [IS_VAR]: true,
+    key: key!,
+    name: simpleHash(name, 40),
+    val: val as any,
+    variable: isWeb ? createCSSVariable(name) : '',
+  }
+}
+
+// could do weakmap cache
+export function variableToString(vrble?: any, getValue = false) {
+  if (isVariable(vrble)) {
+    if (!getValue && isWeb && vrble.variable) {
+      return vrble.variable
+    }
+    return `${vrble.val}`
+  }
+  return `${vrble || ''}`
+}
+
+export function isVariable(v: Variable | any): v is Variable {
+  return v && typeof v === 'object' && IS_VAR in v
+}
+
+export function getVariable(nameOrVariable: Variable | string) {
+  setDidGetVariableValue(true)
+  if (isVariable(nameOrVariable)) {
+    return variableToString(nameOrVariable)
+  }
+  const tokens = getConfig().tokensParsed
+  return variableToString(tokens[nameOrVariable] ?? nameOrVariable)
+}
+
+let accessed = false
+export const setDidGetVariableValue = (val: boolean) => (accessed = val)
+export const didGetVariableValue = () => accessed
+
+export function getVariableValue(v: Variable | any) {
+  if (isVariable(v)) {
+    setDidGetVariableValue(true)
+    return v.val
+  }
+  return v
+}
+
+export function getVariableName(v: Variable | any) {
+  if (isVariable(v)) return v.name
+  return v
+}
+
+export function getVariableVariable(v: Variable | any) {
+  if (isVariable(v)) return v.variable
+  return v
+}
+
+// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):
+export const createCSSVariable = (nameProp: string, includeVar = true) => {
+  if (process.env.NODE_ENV === 'development') {
+    if (!nameProp || typeof nameProp !== 'string') {
+      throw new Error(`createCSSVariable expected string: ${nameProp}`)
+    }
+  }
+  const name = simpleHash(nameProp, 60)
+  return includeVar ? `var(--${name})` : name
+}

package/src/createVariables.ts

@@ -0,0 +1,55 @@
+import { simpleHash } from '@tamagui/helpers'
+
+import { Variable, createVariable, isVariable } from './createVariable'
+
+type DeepTokenObject<Val extends string | number = any> = {
+  [key: string]: Val | DeepTokenObject<Val>
+}
+
+export type DeepVariableObject<A extends DeepTokenObject> = {
+  [Key in keyof A]: A[Key] extends string | number
+    ? Variable<A[Key]>
+    : A[Key] extends DeepTokenObject
+    ? DeepVariableObject<A[Key]>
+    : never
+}
+
+export const tokensKeysOrdered = new WeakMap()
+
+export const createVariables = <A extends DeepTokenObject>(
+  tokens: A,
+  parentPath = '',
+  isFont = false
+): DeepVariableObject<A> => {
+  const res: any = {}
+  let i = 0
+  for (let key in tokens) {
+    i++
+    const val = tokens[key]
+    // always remove $ prefix
+    if (key[0] === '$') {
+      // @ts-ignore
+      key = key.slice(1)
+    }
+    if (isVariable(val)) {
+      res[key] = val
+      continue
+    }
+    const niceKey = simpleHash(key)
+    let name = isFont ? niceKey.slice(0, 2) : i
+    name = parentPath ? `${parentPath}-${name}` : niceKey
+    if (val && typeof val === 'object') {
+      // recurse
+      res[key] = createVariables(tokens[key] as any, name)
+      continue
+    }
+    res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey })
+  }
+
+  // ordering for relative sizing for now just size/space
+  if (parentPath === 'size' || parentPath === 'space') {
+    tokensKeysOrdered.set(res, Object.keys(tokens))
+  }
+
+  return res
+}

package/src/helpers/RNComponents.tsx

@@ -0,0 +1,14 @@
+import { Image, Text, TextInput, View } from 'react-native'
+
+// limited support
+export const RNComponents = new Set<any>([
+  Image,
+  TextInput,
+  Text,
+  View,
+  // see fake-react-native + styled() check
+  'Image',
+  'TextInput',
+  'Text',
+  'View',
+])