@tamagui/core 1.0.0-alpha.0

package/src/createTamagui.ts

@@ -0,0 +1,207 @@
+import { getStyleRules } from '@tamagui/helpers'
+
+import { Variable, createVariable, isVariable } from './createVariable'
+import { createTamaguiProvider } from './helpers/createTamaguiProvider'
+import { configureMedia } from './hooks/useMedia'
+import {
+  CreateTamaguiConfig,
+  GenericTamaguiConfig,
+  MediaQueryKey,
+  TamaguiInternalConfig,
+  TamaguiProviderProps,
+} from './types'
+
+export type CreateTamaguiProps = TamaguiProviderProps &
+  // we omit and re-declare it because we need to allow instantation types to be flexible
+  // user then re-defines the types after createTamagui returns the typed object they want
+  Omit<GenericTamaguiConfig, 'themes'> & {
+    themes: {
+      [key: string]: {
+        [key: string]: string | number | Variable
+      }
+    }
+    // for ssr/native, will default to active
+    mediaQueryDefaultActive?: MediaQueryKey[]
+  }
+
+let conf: TamaguiInternalConfig | null
+
+export const getHasConfigured = () => !!conf
+export const getTamaguiConfig = () => conf!
+
+type ConfigListener = (conf: TamaguiInternalConfig) => void
+const configListeners = new Set<ConfigListener>()
+export const onConfiguredOnce = (cb: ConfigListener) => {
+  if (conf) {
+    cb(conf)
+  } else {
+    configListeners.add(cb)
+  }
+}
+
+const PREFIX = `theme--`
+
+export function createTamagui<Conf extends CreateTamaguiProps>(
+  config: Conf
+): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>
+  ? TamaguiInternalConfig<A, B, C, D>
+  : unknown {
+  // test env loads a few times as it runs diff tests
+  if (conf) {
+    console.warn('Called createTamagui twice! Should never do so')
+    // throw new Error(`#000 createTamagui called twice`)
+  }
+
+  configureMedia({
+    queries: config.media as any,
+    defaultActive: config.mediaQueryDefaultActive,
+  })
+
+  // TODO can avoid some of this CSS creation on native
+  const themeConfig = (() => {
+    let cssRules: string[] = []
+
+    // tokens
+    let tokenRule = `:root {`
+    const varsByValue = new Map<string, Variable>()
+    const addVar = (v: Variable) => {
+      varsByValue[v.val] = v
+      const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`
+      tokenRule += rule
+    }
+
+    for (const key in config.tokens) {
+      for (const skey in config.tokens[key]) {
+        const val = config.tokens[key][skey]
+        if (key === 'font') {
+          for (const fkey in val) {
+            if (fkey === 'family') {
+              addVar(val[fkey])
+            } else {
+              for (const fskey in val[fkey]) {
+                addVar(val[fkey][fskey])
+              }
+            }
+          }
+        } else {
+          addVar(val)
+        }
+      }
+    }
+    cssRules.push(`${tokenRule}\n}`)
+
+    // themes
+    for (const themeName in config.themes) {
+      // to allow using the same theme with diff names, be sure we don't mutate!
+      config.themes[themeName] = { ...config.themes[themeName] }
+      const theme = config.themes[themeName]
+      let vars = ''
+      for (const themeKey in theme) {
+        const val = theme[themeKey]
+        const getVariableCSS = (inv: any) => {
+          const v = varsByValue[inv] ?? inv
+          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`
+        }
+        vars += getVariableCSS(val)
+        // TODO sanity check is necessary
+        // make everything a variable that gets put into css
+        if (!isVariable(val)) {
+          theme[themeKey] = createVariable({
+            name: themeKey,
+            val,
+          })
+        }
+      }
+
+      const [themeClassName, parentName] = themeName.includes('-')
+        ? themeName.split('-')
+        : [themeName, '']
+      // tiny hack for now assuming light/dark are typical parentName
+      const oppositeName = parentName === 'dark' ? 'light' : 'dark'
+      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''
+      const cssChildSel = `.${PREFIX}${themeClassName}`
+      const cssSel = `${cssParentSel} ${cssChildSel}`
+      // we need to force specificity
+      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\n${vars}\n}`
+      cssRules.push(cssRule)
+    }
+
+    Object.freeze(cssRules)
+
+    return {
+      cssRules,
+      css: cssRules.join('\n'),
+    }
+  })()
+
+  // faster lookups token keys become $keys to match input
+  const tokensParsed: any = parseTokens(config.tokens)
+  // all themes should match key and we just need variable name
+  // TODO once w react native we'd want to have a reverse lookup back to value
+  const themeParsed: any = {}
+  const firstKey = Object.keys(config.themes)[0]
+  for (const key in config.themes[firstKey]) {
+    // themeParsed[`$${key}`] = config.themes[firstKey][key]
+    const val = config.themes[firstKey][key].val
+    themeParsed[`$${key}`] = new Variable({ val, name: key })
+  }
+
+  const next: TamaguiInternalConfig = {
+    // @ts-ignore
+    shorthands: {},
+    ...config,
+    Provider: createTamaguiProvider({
+      defaultTheme: 'light',
+      ...config,
+    }),
+    themeConfig,
+    themeParsed,
+    tokensParsed,
+    getCSS() {
+      return `${themeConfig.css}\n${[...getStyleRules()].join('\n')}`
+    },
+  }
+  conf = next
+
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(next))
+    configListeners.clear()
+  }
+
+  // @ts-expect-error
+  return next
+}
+
+export function getThemeParentClassName(themeName?: string | null) {
+  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`
+}
+
+const parseTokens = (tokens: any) => {
+  const res: any = {}
+  for (const key in tokens) {
+    res[key] = {}
+    if (key === 'font') {
+      for (const family in tokens.font) {
+        const obj = {}
+        res.font[`$${family}`] = obj
+        for (const attrKey in tokens.font[family]) {
+          const attr = tokens.font[family][attrKey]
+          if (attrKey === 'family') {
+            obj[attrKey] = attr
+            continue
+          }
+          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+            acc[`$${cur}`] = attr[cur]
+            return acc
+          }, {})
+        }
+      }
+      continue
+    }
+    for (const skey in tokens[key]) {
+      res[key][`$${skey}`] = tokens[key][skey]
+    }
+  }
+
+  return res
+}

package/src/createTheme.ts

@@ -0,0 +1,19 @@
+import { Variable, createVariable } from './createVariable'
+
+export const createTheme = <Theme extends { [key: string]: string | Variable }>(
+  theme: Theme
+): {
+  [key in keyof Theme]: Variable
+} => {
+  const res = {} as any
+  for (const key in theme) {
+    const val = theme[key]
+    if (!(val instanceof Variable)) {
+      res[key] = createVariable({
+        name: key,
+        val,
+      })
+    }
+  }
+  return res
+}

package/src/createTokens.ts

@@ -0,0 +1,83 @@
+import { Variable, createVariable } from './createVariable'
+import { CreateTokens } from './types'
+
+// tokens.color.dark.red ===>{ var: `color-dark-red`, val: '' }
+
+export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  return setupTokens(tokens) as any
+}
+
+function setupTokens(tokens: any) {
+  return mapTokensToVariables(tokens)
+}
+
+export const mapTokensToVariables = (
+  tokens: CreateTokens,
+  parentPath = ''
+): CreateTokens<Variable> => {
+  const res = {}
+  for (const key in tokens) {
+    const val = tokens[key]
+    const name = parentPath ? `${parentPath}-${key}` : key
+    if (val && typeof val === 'object') {
+      res[key] = mapTokensToVariables(tokens[key], name)
+    } else {
+      res[key] = createVariable({ val, name })
+    }
+  }
+  // @ts-expect-error
+  return res
+}
+
+// verbose but gives us nice types...
+type MakeTokens<T> = T extends {
+  font: {
+    [key in infer A]: {
+      size: infer B
+      lineHeight: infer C
+      letterSpacing: infer D
+      weight: infer Z
+      family: infer Y
+    }
+  }
+  color: infer E
+  space: infer F
+  size: infer G
+  radius: infer H
+  zIndex: infer J
+}
+  ? {
+      font: {
+        [key in A]: {
+          size: {
+            [key in keyof B]: Variable
+          }
+          lineHeight: {
+            [key in keyof C]: Variable
+          }
+          letterSpacing: {
+            [key in keyof D]: Variable
+          }
+          weight: {
+            [key in keyof Z]: Variable
+          }
+          family: Y
+        }
+      }
+      color: {
+        [key in keyof E]: Variable
+      }
+      space: {
+        [key in keyof F]: Variable
+      }
+      size: {
+        [key in keyof G]: Variable
+      }
+      radius: {
+        [key in keyof H]: Variable
+      }
+      zIndex: {
+        [key in keyof J]: Variable
+      }
+    }
+  : never

package/src/createVariable.ts

@@ -0,0 +1,22 @@
+import { isWeb } from './constants/platform'
+
+export class Variable {
+  name: string
+  val: string | number
+  variable: string | number
+
+  constructor({ val, name }: VariableIn) {
+    // converting to px breaks rn
+    this.val = val //typeof val === 'string' ? val : `${val}px`
+    this.name = name
+    this.variable = isWeb ? `var(--${name})` : this.val
+  }
+}
+
+type VariableIn = { val: string | number; name: string }
+
+export const createVariable = (props: VariableIn) => new Variable(props)
+
+export function isVariable(v: Variable | any): v is Variable {
+  return v instanceof Variable
+}

package/src/helpers/addStylesUsingClassname.tsx

@@ -0,0 +1,60 @@
+// @ts-ignore
+import { useInsertionEffect } from 'react'
+
+import { getStylesAtomic } from './getStylesAtomic'
+import { insertStyleRule } from './insertStyleRule'
+
+// uses new useInsertionEffect for better perf if available
+
+// could be cleared occasionally
+let added = new Set<string>()
+
+export function useStylesAsClassname(styles: any[]) {
+  if (!useInsertionEffect) {
+    return addStylesUsingClassname(styles)
+  } else {
+    const insertions: any[] = []
+    const className = addStylesUsingClassname(styles, (_, rules) => {
+      for (const rule of rules) {
+        insertions.push(rule)
+      }
+    })
+
+    useInsertionEffect(() => {
+      for (const ruleset of insertions) {
+        insertStyleRule(ruleset)
+      }
+    })
+
+    return className
+  }
+}
+
+export function addStylesUsingClassname(
+  styles: any[],
+  onAdd?: (identifier: string, rules: string[]) => any
+) {
+  let className = ''
+  for (const style of styles) {
+    if (!style) continue
+    if (Array.isArray(style)) {
+      className += ' ' + addStylesUsingClassname(style)
+      continue
+    }
+    for (const { identifier, rules } of getStylesAtomic(style)) {
+      className += ` ${identifier}`
+      if (added.has(identifier)) {
+        continue
+      }
+      added.add(identifier)
+      if (onAdd) {
+        onAdd(identifier, rules)
+      } else {
+        for (const rule of rules) {
+          insertStyleRule(rule)
+        }
+      }
+    }
+  }
+  return className
+}

package/src/helpers/createMediaStyle.ts

@@ -0,0 +1,46 @@
+import { StyleObject } from '@tamagui/helpers'
+
+import { mediaObjectToString } from '../hooks/useMedia'
+import { MediaQueries } from '../types'
+
+// TODO have this be used by extractMediaStyle in tamagui static
+
+// not synced to static/constants for now
+export const MEDIA_SEP = '_'
+
+export const createMediaStyle = (
+  { identifier, rules }: StyleObject,
+  mediaKey: string,
+  mediaQueries: MediaQueries,
+  negate?: boolean,
+  importance = 0
+) => {
+  const mediaKeys = Object.keys(mediaQueries)
+  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
+    acc[cur] = new Array(importance + 1).fill(':root').join('')
+    return acc
+  }, {})
+  const negKey = negate ? '0' : ''
+  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
+  const nextIdentifier = `${identifier.replace(
+    ogPrefix,
+    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`
+  )}`
+  const screenStr = negate ? 'not all' : 'screen'
+  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])
+  const mediaQuery = `${screenStr} and ${mediaSelector}`
+  const precendencePrefix = mediaKeyPrecendence[mediaKey]
+  const styleInner = rules[0].replace(identifier, nextIdentifier)
+  // combines media queries if they already exist
+  let styleRule = ''
+  if (styleInner.includes('@media')) {
+    // combine
+    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)
+  } else {
+    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`
+  }
+  return {
+    styleRule,
+    identifier: nextIdentifier,
+  }
+}

package/src/helpers/createPropMapper.ts

@@ -0,0 +1,184 @@
+import { getTamaguiConfig } from '../createTamagui'
+import { Variable } from '../createVariable'
+import { StaticConfig, TamaguiInternalConfig } from '../types'
+import { isObj } from './isObj'
+
+export const createPropMapper = (c: StaticConfig) => {
+  const variants = c.variants
+  let variantsParsed
+  const defaultProps = c.defaultProps || {}
+
+  return (key: string, value: any, theme: any, props: any) => {
+    const conf = getTamaguiConfig()
+    if (!conf) {
+      console.trace('no conf! err')
+      return
+    }
+    if (variants && !variantsParsed) {
+      variantsParsed = parseVariants(variants, conf)
+    }
+
+    // handled here because we need to resolve this off tokens, its the only one-off like this
+    let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'
+
+    // expand variants
+    const variant = variantsParsed?.[key]
+    if (variant && typeof value !== 'undefined') {
+      const val =
+        value === true
+          ? variant['$true'] || variant['true']
+          : variant[value] ?? variant['...'] ?? value
+
+      const res =
+        typeof val === 'function'
+          ? val(value, { tokens: conf.tokensParsed, theme, props })
+          : isObj(val)
+          ? { ...val }
+          : val
+
+      if (isObj(res)) {
+        resolveTokens(res, conf, fontFamily)
+      }
+
+      return res
+    }
+
+    let shouldReturn = false
+
+    // handle shorthands
+    if (conf.shorthands[key]) {
+      shouldReturn = true
+      key = conf.shorthands[key]
+    }
+
+    if (value && value[0] === '$') {
+      shouldReturn = true
+      value = getToken(key, value, conf, fontFamily)
+    }
+
+    if (value instanceof Variable) {
+      shouldReturn = true
+      value = value.variable
+    }
+
+    if (shouldReturn) {
+      return {
+        [key]: value,
+      }
+    }
+  }
+}
+
+const resolveTokens = (res: any, conf: TamaguiInternalConfig, fontFamily: any) => {
+  for (const rKey in res) {
+    const fKey = conf.shorthands[rKey] || rKey
+    const val = res[rKey]
+    if (val instanceof Variable) {
+      res[fKey] = val.variable
+    } else if (typeof val === 'string') {
+      const fVal = val[0] === '$' ? getToken(fKey, val, conf, fontFamily) : val
+      res[fKey] = fVal
+    } else {
+      if (isObj(val)) {
+        // for things like shadowOffset which is a sub-object
+        resolveTokens(val, conf, fontFamily)
+      }
+      // nullish values cant be tokens so need no exrta parsing
+    }
+  }
+}
+
+const getToken = (
+  key: string,
+  value: string,
+  { tokensParsed, themeParsed }: TamaguiInternalConfig,
+  fontFamily: string | undefined = '$body'
+) => {
+  if (themeParsed[value]) {
+    return themeParsed[value].variable
+  }
+  let valOrVar: any
+  if (key === 'fontFamily') {
+    valOrVar = tokensParsed.font[value]?.family || value
+  }
+  if (key === 'fontSize') {
+    valOrVar = tokensParsed.font[fontFamily]?.size[value] || value
+  }
+  if (key === 'lineHeight') {
+    valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value
+  }
+  if (key === 'letterSpacing') {
+    valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value
+  }
+  if (key === 'fontWeight') {
+    valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value
+  }
+  if (typeof valOrVar !== 'undefined') {
+    if (valOrVar instanceof Variable) {
+      return valOrVar.variable
+    } else {
+      return valOrVar
+    }
+  }
+  for (const cat in tokenCategories) {
+    if (tokenCategories[cat][key]) {
+      const res = tokensParsed[cat][value]
+      if (res) {
+        return res.variable
+      } else {
+        const themeVar = themeParsed[value]
+        if (themeVar) {
+          return themeVar.variable
+        }
+      }
+    }
+  }
+  const spaceVar = tokensParsed.space[value]
+  if (spaceVar) {
+    return spaceVar.variable
+  }
+  return value
+}
+
+// just specificy the least costly, all else go to `space` (most keys - we can exclude)
+const tokenCategories = {
+  size: {
+    width: true,
+    height: true,
+    minWidth: true,
+    minHeight: true,
+    maxWidth: true,
+    maxHeight: true,
+  },
+  color: {
+    color: true,
+    backgroundColor: true,
+    borderColor: true,
+    borderBottomColor: true,
+    borderTopColor: true,
+    borderLeftColor: true,
+    borderRightColor: true,
+  },
+}
+
+// turns variant spreads into individual lookups
+function parseVariants(variants: any, conf: TamaguiInternalConfig) {
+  return Object.keys(variants).reduce((acc, key) => {
+    acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {
+      const variantVal = variants[key][vkey]
+      if (vkey.startsWith('...')) {
+        // set the default one at '...' for easy fallback on non-exact-variant-match
+        vacc['...'] = variantVal
+        const tokenKey = vkey.slice(3)
+        const tokens = conf.tokens[tokenKey]
+        for (const tkey in tokens) {
+          vacc[`$${tkey}`] = variantVal
+        }
+      } else {
+        vacc[vkey] = variantVal
+      }
+      return vacc
+    }, {})
+    return acc
+  }, {})
+}

package/src/helpers/createTamaguiProvider.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+import { TamaguiProviderProps } from '../types'
+import { TextAncestorProvider } from '../views/TextAncestorContext'
+import { ThemeProvider, ThemeProviderProps } from '../views/ThemeProvider'
+
+export function createTamaguiProvider(themeProps: ThemeProviderProps) {
+  return function TamaguiProvider({
+    initialWindowMetrics,
+    fallback,
+    children,
+    ...themePropsProvider
+  }: TamaguiProviderProps) {
+    return (
+      <TextAncestorProvider>
+        <ThemeProvider {...themeProps} {...themePropsProvider}>
+          <React.Suspense fallback={fallback || null}>{children}</React.Suspense>
+        </ThemeProvider>
+      </TextAncestorProvider>
+    )
+  }
+}