@tamagui/web 1.46.2 → 1.47.0

package/src/helpers/getVariantExtras.tsx

@@ -3,11 +3,7 @@ import { GenericFonts, GetStyleState } from '../types'
 import { LanguageContextType } from '../views/FontLanguage.types'
 import { createProxy } from './createProxy'
 
-export function getVariantExtras(
-  styleState: GetStyleState,
-  defaultProps?: any,
-  avoidDefaultProps = false
-) {
+export function getVariantExtras(styleState: GetStyleState) {
   const { curProps, conf, languageContext, theme } = styleState
   let fonts = conf.fontsParsed
   if (languageContext) {
@@ -27,32 +23,20 @@ export function getVariantExtras(
     font: fonts[fontFamily],
     // TODO do this in splitstlye
     // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
-    props: avoidDefaultProps
-      ? curProps
-      : createProxy(curProps, {
-          // 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)
-              }
-            }
-          },
-        }),
+    props: createProxy(curProps, {
+      // 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)
+        }
+      },
+    }),
   }
 
   return next as any

package/src/helpers/isTamaguiComponent.tsx

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

package/src/helpers/mergeProps.ts

@@ -16,32 +16,24 @@ import { pseudoDescriptors } from './pseudoDescriptors'
 
 type AnyRecord = Record<string, any>
 
-export const mergeProps = (
-  a: Object,
-  b?: Object,
-  leaveOutClassNames = false,
-  inverseShorthands?: AnyRecord
-) => {
+export const mergeProps = (a: Object, b?: Object, 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)
+    mergeProp(out, a, b, key, inverseShorthands)
   }
   if (b) {
     for (const key in b) {
-      mergeProp(out, outCns, b, undefined, key, leaveOutClassNames, inverseShorthands)
+      mergeProp(out, b, undefined, key, inverseShorthands)
     }
   }
-  return [out, outCns] as const
+  return out
 }
 
 function mergeProp(
   out: AnyRecord,
-  outCns: AnyRecord,
   a: Object,
   b: Object | undefined,
   key: string,
-  leaveOutClassNames: boolean,
   inverseShorthands?: AnyRecord
 ) {
   const shorthand = inverseShorthands?.[key] || null
@@ -56,12 +48,5 @@ function mergeProp(
     }
     return
   }
-  if (shorthand) {
-    key = shorthand
-  }
-  if (leaveOutClassNames && val?.[0] === '_') {
-    outCns[key] = val
-  } else {
-    out[key] = val
-  }
+  out[shorthand || key] = val
 }

package/src/helpers/normalizeColor.ts

@@ -11,7 +11,8 @@ export const normalizeColor = (color?: string | null, opacity?: number) => {
   const colorProcessed = NCC.normalizeCSSColor(color)
   if (typeof colorProcessed === 'number') {
     const { r, g, b, a } = rgba(colorProcessed)
-    const alpha = (opacity ?? a ?? 1).toFixed(2)
+    const o = +(opacity ?? a ?? 1)
+    const alpha = o.toFixed(2)
     return `rgba(${r},${g},${b},${alpha})`
   }
   if (process.env.TAMAGUI_TARGET === 'native') {

package/src/helpers/normalizeValueWithProperty.ts

@@ -4,82 +4,26 @@
  */
 
 import { isWeb } from '@tamagui/constants'
+import { stylePropsUnitless } from '@tamagui/helpers'
 
 import { getAllSelectors } from './insertStyleRule'
-import { names, normalizeColor } from './normalizeColor'
-import { normalizeStylePropKeys } from './normalizeStylePropKeys'
 
-const colorCache = new Map()
+// only doing this on web on native it accepts pixel values
 
 export function normalizeValueWithProperty(value: any, property?: string): any {
-  if (property && property in unitlessNumbers) {
-    return value
-  }
+  if (!isWeb) return value
   let res = value
-  if (property && (property in normalizeStylePropKeys || value in names)) {
-    if (colorCache.has(value)) {
-      return colorCache.get(value)
-    }
-    res = normalizeColor(value)
-    // avoid memory pressure
-    if (colorCache.size > 1000) {
-      colorCache.clear()
-    }
-    colorCache.set(value, res)
-  } else if (
-    isWeb &&
-    typeof value === 'number' &&
-    (property === undefined ||
-      !(property in unitlessNumbers || property in stringNumbers))
+  if (
+    (property === undefined || !(property in stylePropsUnitless)) &&
+    typeof value === 'number'
   ) {
     res = `${value}px`
-  } else if (isWeb && property !== undefined && property in stringNumbers) {
+  } else if (property !== undefined) {
     res = `${res}`
   }
   return res
 }
 
-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 = {}
@@ -102,7 +46,7 @@ export function reverseMapClassNameToValue(key: string, className: string) {
   let res: any
   if (cssVal.startsWith('var(')) {
     res = cssVal
-  } else if (unitlessNumbers[key]) {
+  } else if (stylePropsUnitless[key]) {
     res = +cssVal
   } else if (cssVal.endsWith('px')) {
     res = +cssVal.replace('px', '')

package/src/helpers/{createPropMapper.ts → propMapper.ts}

@@ -1,12 +1,12 @@
 import { isAndroid, isWeb } from '@tamagui/constants'
+import { tokenCategories } from '@tamagui/helpers'
 
 import { isDevTools } from '../constants/isDevTools'
 import { Variable, getVariableValue, isVariable } from '../createVariable'
 import type {
-  DebugProp,
   GetStyleState,
   PropMapper,
-  StaticConfigParsed,
+  SplitStyleProps,
   StyleResolver,
   TamaguiInternalConfig,
   VariantSpreadFunction,
@@ -15,99 +15,76 @@ import { expandStyle } from './expandStyle'
 import { expandStylesAndRemoveNullishValues } from './expandStyles'
 import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
 import { isObj } from './isObj'
-import { mergeProps } from './mergeProps'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
 export type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both'
 
-export const createPropMapper = (staticConfig: StaticConfigParsed) => {
-  // temp remove classnames
-  const defaultProps = mergeProps(staticConfig.defaultProps || {}, {}, false)[0]
-
-  const mapper: PropMapper = (
-    key,
-    value,
-    styleStateIn,
-    subPropsIn,
-    avoidDefaultProps = false
-  ) => {
-    if (!(process.env.TAMAGUI_TARGET === 'native' && isAndroid)) {
-      if (key === 'elevationAndroid') return
-    }
+export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) => {
+  if (!(process.env.TAMAGUI_TARGET === 'native' && isAndroid)) {
+    // this shouldnt be necessary and handled in the outer loop
+    if (key === 'elevationAndroid') return
+  }
 
-    // we use this for the sub-props like pseudos so we need to overwrite the "props" in styleState
-    // fallbackProps is awkward thanks to static
-    // also we need to override the props here because subStyles pass in a sub-style props object
-    const subProps = styleStateIn.state.fallbackProps || subPropsIn
-    const styleState = subProps
-      ? {
-          ...styleStateIn,
-          curProps: subProps,
-        }
-      : styleStateIn
+  // we use this for the sub-props like pseudos so we need to overwrite the "props" in styleState
+  // fallbackProps is awkward thanks to static
+  // also we need to override the props here because subStyles pass in a sub-style props object
+  const subProps = styleStateIn.styleProps.fallbackProps || subPropsIn
 
-    const { conf, state, fontFamily } = styleState
-    const returnVariablesAs = state.resolveVariablesAs === 'value' ? 'value' : 'auto'
+  const styleState = subProps
+    ? new Proxy(styleStateIn, {
+        get(_, k) {
+          return k === 'curProps' ? subProps : Reflect.get(_, k)
+        },
+      })
+    : styleStateIn
 
-    // prettier-ignore
-    if (process.env.NODE_ENV === 'development' && fontFamily && fontFamily[0] === '$' && !(fontFamily in conf.fontsParsed)) {
-      // prettier-ignore
-      console.warn(`Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(conf.fontsParsed).join(', ')}`)
-    }
+  const { conf, styleProps, fontFamily, staticConfig } = styleState
+  const { variants } = staticConfig
 
-    const variantValue = resolveVariants(
-      key,
-      value,
-      styleState,
-      defaultProps,
-      returnVariablesAs,
-      '',
-      avoidDefaultProps
-    )
+  // prettier-ignore
+  if (process.env.NODE_ENV === 'development' && fontFamily && fontFamily[0] === '$' && !(fontFamily in conf.fontsParsed)) {
+    // prettier-ignore
+    console.warn(`Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(conf.fontsParsed).join(', ')}`)
+  }
 
+  if (variants && key in variants && value != null) {
+    const variantValue = resolveVariants(key, value, styleProps, styleState, '')
     if (variantValue) {
       return variantValue
     }
+  }
 
-    let shouldReturn = false
-
-    // handle shorthands
-    if (key in conf.shorthands) {
-      shouldReturn = true
-      key = conf.shorthands[key]
-    }
+  let shouldReturn = false
 
-    if (value) {
-      if (value[0] === '$') {
-        value = getToken(key, value, styleState, returnVariablesAs)
-      } else if (isVariable(value)) {
-        value = resolveVariableValue(key, value, returnVariablesAs)
-      }
-    }
+  // handle shorthands
+  if (key in conf.shorthands) {
+    shouldReturn = true
+    key = conf.shorthands[key]
+  }
 
-    if (shouldReturn || value != null) {
-      return expandStyle(key, value) || [[key, value]]
+  if (value) {
+    if (value[0] === '$') {
+      value = getToken(key, value, styleProps, styleState)
+    } else if (isVariable(value)) {
+      value = resolveVariableValue(value, styleProps)
     }
   }
 
-  return mapper
+  if (shouldReturn || value != null) {
+    return expandStyle(key, value) || [[key, value]]
+  }
 }
 
 const resolveVariants: StyleResolver = (
   key,
   value,
+  styleProps,
   styleState,
-  defaultProps,
-  returnVariablesAs,
-  parentVariantKey,
-  avoidDefaultProps = false
+  parentVariantKey
 ) => {
   const { staticConfig, conf, debug } = styleState
   const { variants } = staticConfig
-
-  if (!variants || !(key in variants) || value == null) {
-    return
-  }
+  if (!variants) return
 
   let variantValue = getVariantDefinition(variants[key], key, value, conf)
 
@@ -142,10 +119,7 @@ const resolveVariants: StyleResolver = (
   if (typeof variantValue === 'function') {
     const fn = variantValue as VariantSpreadFunction<any>
 
-    variantValue = fn(
-      value,
-      getVariantExtras(styleState, defaultProps, avoidDefaultProps)
-    )
+    variantValue = fn(value, getVariantExtras(styleState))
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       console.groupCollapsed('   expanded functional variant', key)
@@ -155,23 +129,6 @@ const resolveVariants: StyleResolver = (
     }
   }
 
-  // update curProps for variants expanded:
-  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-    // rome-ignore lint/nursery/noConsoleLog: <explanation>
-    console.log(`   attaching updated curProps`, {
-      new: variantValue,
-      before: styleState.curProps,
-      after: {
-        ...styleState.curProps,
-        ...variantValue,
-      },
-    })
-  }
-  styleState.curProps = {
-    ...styleState.curProps,
-    ...variantValue,
-  }
-
   let fontFamilyResult: any
 
   if (isObj(variantValue)) {
@@ -191,11 +148,9 @@ const resolveVariants: StyleResolver = (
     variantValue = resolveTokensAndVariants(
       key,
       variantValue,
+      styleProps,
       styleState,
-      defaultProps,
-      returnVariablesAs,
-      parentVariantKey,
-      avoidDefaultProps
+      parentVariantKey
     )
   }
 
@@ -228,7 +183,7 @@ export function getFontFamilyFromNameOrVariable(input: any, conf: TamaguiInterna
       }
     }
   } else if (typeof input === 'string') {
-    if (input?.[0] === '$') {
+    if (input[0] === '$') {
       return input
     }
   }
@@ -245,11 +200,9 @@ export const getPropMappedFontFamily = (expanded?: any) => {
 const resolveTokensAndVariants: StyleResolver<Object> = (
   key, // we dont use key assume value is object instead
   value,
+  styleProps,
   styleState,
-  defaultProps,
-  returnVariablesAs,
-  parentVariantKey,
-  avoidDefaultProps
+  parentVariantKey
 ) => {
   const { conf, staticConfig, debug, theme } = styleState
   const { variants } = staticConfig
@@ -265,22 +218,17 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
     const val = value[rKey]
 
     if (variants && fKey in variants) {
+      // if its a variant expanded, attach to curProps
+      styleState.curProps[fKey] = val
+
       // avoids infinite loop if variant is matching a style prop
       // eg: { variants: { flex: { true: { flex: 2 } } } }
       if (parentVariantKey && parentVariantKey === key) {
         res[fKey] =
           // SYNC WITH *1
-          val[0] === '$' ? getToken(fKey, val, styleState, returnVariablesAs) : val
+          val[0] === '$' ? getToken(fKey, val, styleProps, styleState) : val
       } else {
-        const variantOut = resolveVariants(
-          fKey,
-          val,
-          styleState,
-          defaultProps,
-          returnVariablesAs,
-          key,
-          avoidDefaultProps
-        )
+        const variantOut = resolveVariants(fKey, val, styleProps, styleState, key)
 
         // apply, merging sub-styles
         if (variantOut) {
@@ -299,28 +247,20 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
     }
 
     if (isVariable(val)) {
-      res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable
+      res[fKey] = resolveVariableValue(val, styleProps)
       continue
     }
 
     if (typeof val === 'string') {
       const fVal =
         // SYNC WITH *1
-        val[0] === '$' ? getToken(fKey, val, styleState, returnVariablesAs) : val
+        val[0] === '$' ? getToken(fKey, val, styleProps, styleState) : val
       res[fKey] = fVal
       continue
     }
 
     if (isObj(val)) {
-      const subObject = resolveTokensAndVariants(
-        fKey,
-        val,
-        styleState,
-        defaultProps,
-        returnVariablesAs,
-        key,
-        avoidDefaultProps
-      )
+      const subObject = resolveTokensAndVariants(fKey, val, styleProps, styleState, key)
 
       if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
@@ -387,9 +327,8 @@ const fontShorthand = {
 const getToken = (
   key: string,
   value: string,
-  styleState: GetStyleState,
-  resolveAs?: ResolveVariableTypes,
-  debug?: DebugProp
+  styleProps: SplitStyleProps,
+  styleState: GetStyleState
 ) => {
   const { theme, conf, languageContext, fontFamily } = styleState
 
@@ -397,7 +336,7 @@ const getToken = (
   let valOrVar: any
   let hasSet = false
   if (value in theme) {
-    if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+    if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
       console.log(` - getting theme value for ${key} from ${value} = ${theme[value].val}`)
     }
@@ -453,14 +392,18 @@ const getToken = (
   }
 
   if (hasSet) {
-    const out = resolveVariableValue(key, valOrVar, resolveAs)
+    const out = resolveVariableValue(valOrVar, styleProps)
     return out
   }
 
-  if (process.env.NODE_ENV === 'development' && isDevTools && debug === 'verbose') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    isDevTools &&
+    styleState.debug === 'verbose'
+  ) {
     console.groupCollapsed('  ﹒ propMap (val)', key, value)
     // rome-ignore lint/nursery/noConsoleLog: ok
-    console.log({ valOrVar, theme, hasSet, resolveAs }, theme[key])
+    console.log({ valOrVar, theme, hasSet }, theme[key])
     console.groupEnd()
   }
 
@@ -468,51 +411,14 @@ const getToken = (
 }
 
 function resolveVariableValue(
-  key: string,
   valOrVar: Variable | any,
-  resolveAs: ResolveVariableTypes = 'auto'
+  { resolveVariablesAs }: SplitStyleProps
 ) {
   if (isVariable(valOrVar)) {
-    if (resolveAs === 'variable') {
-      return valOrVar
-    }
-    if (!isWeb || resolveAs === 'value') {
+    if (!isWeb || resolveVariablesAs === 'value') {
       return valOrVar.val
     }
     return valOrVar.variable
   }
   return valOrVar
 }
-
-// TODO move to validStyleProps to merge
-
-// just specificy the least costly, all else go to `space` (most keys - we can exclude)
-const tokenCategories = {
-  radius: {
-    borderRadius: true,
-    borderTopLeftRadius: true,
-    borderTopRightRadius: true,
-    borderBottomLeftRadius: true,
-    borderBottomRightRadius: true,
-  },
-  size: {
-    width: true,
-    height: true,
-    minWidth: true,
-    minHeight: true,
-    maxWidth: true,
-    maxHeight: true,
-  },
-  zIndex: {
-    zIndex: true,
-  },
-  color: {
-    color: true,
-    backgroundColor: true,
-    borderColor: true,
-    borderBottomColor: true,
-    borderTopColor: true,
-    borderLeftColor: true,
-    borderRightColor: true,
-  },
-}

package/src/helpers/pseudoDescriptors.ts

@@ -24,7 +24,6 @@ export const pseudoDescriptors: Record<
   },
   exitStyle: {
     name: 'exit',
-    stateKey: 'isExiting',
     priority: 5,
   },
 }

package/src/helpers/useShallowSetState.tsx

@@ -7,20 +7,14 @@ export function useShallowSetState<State extends TamaguiComponentState>(
   debug?: DebugProp,
   debugName?: string
 ) {
-  return useCallback(
-    (next: Partial<State>) => {
-      setter((prev) => {
-        for (const key in next) {
-          if (prev[key] !== next[key]) {
-            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-              console.warn(` ▲ setState ${debugName}`, next)
-            }
-            return { ...prev, ...next }
-          }
-        }
-        return prev
-      })
-    },
-    [setter]
-  )
+  return (next: Partial<State>) => setter((prev) => shallow(prev, next))
+}
+
+function shallow(prev, next) {
+  for (const key in next) {
+    if (prev[key] !== next[key]) {
+      return { ...prev, ...next }
+    }
+  }
+  return prev
 }

package/src/helpers/withStaticProperties.tsx

@@ -1,9 +1,22 @@
+const WarnReAssignSymbol = Symbol()
+
 export const withStaticProperties = function <A extends Function, B>(
   component: A,
   staticProps: B
 ): A & B {
   // clone if object to stay immutable
   const next = typeof component === 'function' ? component : { ...(component as any) }
+
+  // nice dev helper that avoids super confusing errors
+  if (process.env.NODE_ENV === 'development') {
+    if (next[WarnReAssignSymbol]) {
+      throw new Error(
+        `Error: You're calling withStaticProperties() on a component that already has withStaticProperties() assigned to it! This will cause super strange errors.`
+      )
+    }
+    next[WarnReAssignSymbol] = true
+  }
+
   Object.assign(next, staticProps)
   return next as A & B
 }