@tamagui/web 1.43.15 → 1.43.17

package/src/helpers/createPropMapper.ts

@@ -1,19 +1,18 @@
 import { isAndroid, isWeb } from '@tamagui/constants'
 
-import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
 import { Variable, getVariableValue, isVariable } from '../createVariable'
 import type {
   DebugProp,
+  GetStyleState,
   PropMapper,
   StaticConfigParsed,
   StyleResolver,
   TamaguiInternalConfig,
   VariantSpreadFunction,
 } from '../types'
-import type { LanguageContextType } from '../views/FontLanguage.types'
 import { expandStyle } from './expandStyle'
-import { expandStyles } from './expandStyles'
+import { expandStylesAndRemoveNullishValues } from './expandStyles'
 import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
 import { isObj } from './isObj'
 import { mergeProps } from './mergeProps'
@@ -27,70 +26,55 @@ export type ResolveVariableTypes =
   | 'non-color-value'
 
 export const createPropMapper = (staticConfig: StaticConfigParsed) => {
-  const variants = staticConfig.variants || {}
-
   // temp remove classnames
   const defaultProps = mergeProps(staticConfig.defaultProps || {}, {}, false)[0]
 
-  let conf: TamaguiInternalConfig
-
   const mapper: PropMapper = (
     key,
     value,
-    theme,
-    propsIn,
-    state,
-    fontFamily,
-    languageContext,
-    avoidDefaultProps = false,
-    debug
+    styleStateIn,
+    subPropsIn,
+    avoidDefaultProps = false
   ) => {
-    conf ||= getConfig()
-
     if (!(process.env.TAMAGUI_TARGET === 'native' && isAndroid)) {
-      if (key === 'elevationAndroid') {
-        return
-      }
+      if (key === 'elevationAndroid') return
     }
 
-    const props = state.fallbackProps || propsIn
+    // 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
+
+    const { conf, state, fontFamily } = styleState
     const returnVariablesAs = state.resolveVariablesAs === 'value' ? 'value' : 'auto'
 
-    if (
-      process.env.NODE_ENV === 'development' &&
-      fontFamily &&
-      fontFamily[0] === '$' &&
-      !(fontFamily in conf.fontsParsed)
-    ) {
-      console.warn(
-        `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(
-          conf.fontsParsed
-        ).join(', ')}`
-      )
+    // 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 variantValue = resolveVariants(
       key,
       value,
-      props,
+      styleState,
       defaultProps,
-      theme,
-      variants,
-      fontFamily,
-      conf,
       returnVariablesAs,
-      staticConfig,
       '',
-      languageContext,
-      avoidDefaultProps,
-      debug
+      avoidDefaultProps
     )
 
     if (variantValue) {
       return variantValue
     }
 
-    let shouldReturn = value != null
+    let shouldReturn = false
 
     // handle shorthands
     if (key in conf.shorthands) {
@@ -100,22 +84,13 @@ export const createPropMapper = (staticConfig: StaticConfigParsed) => {
 
     if (value) {
       if (value[0] === '$') {
-        value = getToken(
-          key,
-          value,
-          conf,
-          theme,
-          fontFamily,
-          languageContext,
-          returnVariablesAs,
-          debug
-        )
+        value = getToken(key, value, styleState, returnVariablesAs)
       } else if (isVariable(value)) {
         value = resolveVariableValue(key, value, returnVariablesAs)
       }
     }
 
-    if (shouldReturn) {
+    if (shouldReturn || value != null) {
       return expandStyle(key, value) || [[key, value]]
     }
   }
@@ -126,20 +101,16 @@ export const createPropMapper = (staticConfig: StaticConfigParsed) => {
 const resolveVariants: StyleResolver = (
   key,
   value,
-  props,
+  styleState,
   defaultProps,
-  theme,
-  variants,
-  fontFamily,
-  conf,
   returnVariablesAs,
-  staticConfig,
   parentVariantKey,
-  languageContext,
-  avoidDefaultProps = false,
-  debug
+  avoidDefaultProps = false
 ) => {
-  if (!(key in variants) || value === undefined) {
+  const { staticConfig, conf, debug } = styleState
+  const { variants } = staticConfig
+
+  if (!variants || !(key in variants) || value == null) {
     return
   }
 
@@ -169,14 +140,7 @@ const resolveVariants: StyleResolver = (
     const fn = variantValue as VariantSpreadFunction<any>
     variantValue = fn(
       value,
-      getVariantExtras(
-        props,
-        languageContext,
-        theme,
-        defaultProps,
-        avoidDefaultProps,
-        fontFamily
-      )
+      getVariantExtras(styleState, defaultProps, avoidDefaultProps)
     )
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -187,6 +151,12 @@ const resolveVariants: StyleResolver = (
     }
   }
 
+  // update curProps for variants expanded:
+  styleState.curProps = {
+    ...styleState.curProps,
+    ...variantValue,
+  }
+
   let fontFamilyResult: any
 
   if (isObj(variantValue)) {
@@ -194,29 +164,22 @@ const resolveVariants: StyleResolver = (
       variantValue.fontFamily || variantValue[conf.inverseShorthands.fontFamily]
 
     if (fontFamilyUpdate) {
-      fontFamilyResult = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf)
+      styleState.fontFamily = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf)
     }
 
     variantValue = resolveTokensAndVariants(
       key,
       variantValue,
-      props,
+      styleState,
       defaultProps,
-      theme,
-      variants,
-      fontFamilyResult || fontFamily,
-      conf,
       returnVariablesAs,
-      staticConfig,
       parentVariantKey,
-      languageContext,
-      avoidDefaultProps,
-      debug
+      avoidDefaultProps
     )
   }
 
   if (variantValue) {
-    const expanded = expandStyles(variantValue)
+    const expanded = expandStylesAndRemoveNullishValues(variantValue)
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       console.groupCollapsed('completing variant', key)
@@ -278,19 +241,14 @@ export const getPropMappedFontFamily = (expanded?: any) => {
 const resolveTokensAndVariants: StyleResolver<Object> = (
   key, // we dont use key assume value is object instead
   value,
-  props,
+  styleState,
   defaultProps,
-  theme,
-  variants,
-  fontFamily,
-  conf,
   returnVariablesAs,
-  staticConfig,
   parentVariantKey,
-  languageContext,
-  avoidDefaultProps,
-  debug
+  avoidDefaultProps
 ) => {
+  const { conf, staticConfig, debug, theme } = styleState
+  const { variants } = staticConfig
   const res = {}
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -302,7 +260,7 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
     const fKey = conf.shorthands[rKey] || rKey
     const val = value[rKey]
 
-    if (fKey in variants) {
+    if (variants && fKey in variants) {
       // avoids infinite loop if variant is matching a style prop
       // eg: { variants: { flex: { true: { flex: 2 } } } }
       if (parentVariantKey && parentVariantKey === key) {
@@ -311,18 +269,11 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
         const variantOut = resolveVariants(
           fKey,
           val,
-          props,
+          styleState,
           defaultProps,
-          theme,
-          variants,
-          fontFamily,
-          conf,
           returnVariablesAs,
-          staticConfig,
           key,
-          languageContext,
-          avoidDefaultProps,
-          debug
+          avoidDefaultProps
         )
 
         // apply, merging sub-styles
@@ -353,18 +304,7 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
 
     if (typeof val === 'string') {
       const fVal =
-        val[0] === '$'
-          ? getToken(
-              fKey,
-              val,
-              conf,
-              theme,
-              fontFamily,
-              languageContext,
-              returnVariablesAs,
-              debug
-            )
-          : val
+        val[0] === '$' ? getToken(fKey, val, styleState, returnVariablesAs) : val
       res[fKey] = fVal
       continue
     }
@@ -373,18 +313,11 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
       const subObject = resolveTokensAndVariants(
         fKey,
         val,
-        props,
+        styleState,
         defaultProps,
-        theme,
-        variants,
-        fontFamily,
-        conf,
         returnVariablesAs,
-        staticConfig,
         key,
-        languageContext,
-        avoidDefaultProps,
-        debug
+        avoidDefaultProps
       )
 
       if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -452,13 +385,12 @@ const fontShorthand = {
 const getToken = (
   key: string,
   value: string,
-  conf: TamaguiInternalConfig,
-  theme: any,
-  fontFamily: string | undefined,
-  languageContext?: LanguageContextType,
+  styleState: GetStyleState,
   resolveAs?: ResolveVariableTypes,
   debug?: DebugProp
 ) => {
+  const { theme, conf, languageContext, fontFamily } = styleState
+
   const tokensParsed = conf.tokensParsed
   let valOrVar: any
   let hasSet = false

package/src/helpers/expandStyles.ts

@@ -14,14 +14,20 @@ import { pseudoDescriptors } from './pseudoDescriptors'
  *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight
  */
 
-export function expandStyles(style: Record<string, any>, { shorthands } = getConfig()) {
+export function expandStylesAndRemoveNullishValues(
+  style: Record<string, any>,
+  { shorthands } = getConfig()
+) {
   const res: Record<string, any> = {}
 
   for (let key in style) {
     const valIn = style[key]
+    if (valIn == null) {
+      continue
+    }
     key = shorthands?.[key] || key
     if (key in pseudoDescriptors) {
-      res[key] = expandStyles(valIn)
+      res[key] = expandStylesAndRemoveNullishValues(valIn)
       continue
     }
     const val = normalizeValueWithProperty(valIn, key)

package/src/helpers/getSplitStyles.tsx

@@ -36,6 +36,7 @@ import type {
   ClassNamesObject,
   DebugProp,
   GetStyleResult,
+  GetStyleState,
   MediaQueryKey,
   PseudoPropKeys,
   PseudoStyles,
@@ -49,7 +50,7 @@ import type {
   ThemeParsed,
   ViewStyleWithPseudos,
 } from '../types'
-import type { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'
+import type { LanguageContextType } from '../views/FontLanguage.types'
 import { createMediaStyle } from './createMediaStyle'
 import { getPropMappedFontFamily } from './createPropMapper'
 import { fixStyles } from './expandStyles'
@@ -67,21 +68,6 @@ import {
 } from './normalizeValueWithProperty'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
-type GetStyleState = {
-  style: TextStyleProps
-  usedKeys: Record<string, number>
-  classNames: ClassNamesObject
-  staticConfig: StaticConfigParsed
-  theme: ThemeParsed
-  props: Record<string, any>
-  viewProps: Record<string, any>
-  state: SplitStyleState
-  conf: TamaguiInternalConfig
-  languageContext?: FontLanguageProps
-  avoidDefaultProps?: boolean
-  avoidMergeTransform?: boolean
-}
-
 // bugfix for some reason it gets reset
 const IS_STATIC = process.env.IS_STATIC === 'is_static'
 
@@ -162,14 +148,13 @@ export const getSplitStyles: StyleSplitter = (
   // value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
   const transforms: Record<TransformNamespaceKey, [string, string]> = {}
 
-  // fontFamily is our special baby, ensure we grab the latest set one always
-  let fontFamily: string | undefined
   let mediaStylesSeen = 0
 
   /**
    * Not the biggest fan of creating this object but it is a nice API
    */
   const styleState: GetStyleState = {
+    curProps: props,
     classNames,
     conf,
     props,
@@ -180,6 +165,7 @@ export const getSplitStyles: StyleSplitter = (
     usedKeys,
     viewProps,
     languageContext,
+    debug,
   }
 
   if (process.env.NODE_ENV === 'development' && debug && isClient) {
@@ -553,34 +539,24 @@ export const getSplitStyles: StyleSplitter = (
     // default font family
     // is this great? no, but backwards compat until we add tests and make better
     defaultFontVariable ||= `$${conf.defaultFont}`
-    fontFamily ||=
+    styleState.fontFamily ||=
       props[conf.inverseShorthands.fontFamily] || props.fontFamily || defaultFontVariable
 
     const expanded =
       isMediaOrPseudo || (!(keyInit in validStyleProps) && !isVariant)
         ? [[keyInit, valInit]]
-        : propMapper(
-            keyInit,
-            valInit,
-            theme,
-            props,
-            state,
-            fontFamily,
-            languageContext,
-            undefined,
-            debug
-          )
+        : propMapper(keyInit, valInit, styleState)
 
-    if (!fontFamily) {
-      fontFamily = getPropMappedFontFamily(expanded)
+    if (!styleState.fontFamily) {
+      styleState.fontFamily = getPropMappedFontFamily(expanded)
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      console.groupCollapsed('  🔹 expanded', keyInit, valInit)
+      console.groupCollapsed('  💠 expanded', keyInit, valInit)
       if (!isServer && isDevTools) {
         // prettier-ignore
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log({ expanded, state: { ...state }, isVariant, variant: variants?.[keyInit], shouldPassProp, isHOCShouldPassThrough, theme, usedKeys: { ...usedKeys } })
+        console.log({ expanded, state: { ...state }, isVariant, variant: variants?.[keyInit], shouldPassProp, isHOCShouldPassThrough, theme, usedKeys: { ...usedKeys }, curProps: { ...styleState.curProps } })
         // rome-ignore lint/nursery/noConsoleLog: ok
         console.log('expanded', expanded, '\nusedKeys', { ...usedKeys }, '\ncurrent', {
           ...style,
@@ -631,7 +607,6 @@ export const getSplitStyles: StyleSplitter = (
           styleState,
           key,
           val,
-          fontFamily,
           true,
           state.noClassNames
         )
@@ -796,7 +771,6 @@ export const getSplitStyles: StyleSplitter = (
           styleState,
           key,
           val,
-          fontFamily,
           // TODO try true like pseudo
           false
         )
@@ -898,7 +872,7 @@ export const getSplitStyles: StyleSplitter = (
               mediaState[mediaKeyShort]
             )
             if (key === 'fontFamily') {
-              fontFamily = mediaStyle.fontFamily as string
+              styleState.fontFamily = mediaStyle.fontFamily as string
             }
           }
         }
@@ -912,10 +886,10 @@ export const getSplitStyles: StyleSplitter = (
         }
       }
 
-      if (key === 'fontFamily' && !fontFamily && valInit && val) {
+      if (key === 'fontFamily' && !styleState.fontFamily && valInit && val) {
         const fam = valInit[0] === '$' ? valInit : val
         if (fam in conf.fontsParsed) {
-          fontFamily = fam
+          styleState.fontFamily = fam
         }
       }
 
@@ -944,7 +918,7 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   // default to default font
-  fontFamily ||= conf.defaultFont
+  styleState.fontFamily ||= conf.defaultFont
 
   fixStyles(style)
   if (isWeb) {
@@ -960,7 +934,7 @@ export const getSplitStyles: StyleSplitter = (
           faceInfo[style.fontWeight as string]?.[style.fontStyle || 'normal']?.val
         if (overrideFace) {
           style.fontFamily = overrideFace
-          fontFamily = overrideFace
+          styleState.fontFamily = overrideFace
           delete style.fontWeight
           delete style.fontStyle
         }
@@ -1097,7 +1071,7 @@ export const getSplitStyles: StyleSplitter = (
   const result: GetStyleResult = {
     space,
     hasMedia,
-    fontFamily,
+    fontFamily: styleState.fontFamily,
     viewProps,
     // @ts-expect-error
     style,
@@ -1211,11 +1185,10 @@ export const getSubStyle = (
   styleState: GetStyleState,
   subKey: string,
   styleIn: Object,
-  fontFamily?: string,
   avoidDefaultProps?: boolean,
   avoidMergeTransform?: boolean
 ): TextStyleProps => {
-  const { staticConfig, theme, props, state, conf, languageContext } = styleState
+  const { staticConfig, props, conf } = styleState
   const styleOut: TextStyleProps = {}
 
   for (let key in styleIn) {
@@ -1224,11 +1197,8 @@ export const getSubStyle = (
     const expanded = staticConfig.propMapper(
       key,
       val,
-      theme,
+      styleState,
       getSubStyleProps(staticConfig.defaultProps, props, props[subKey]),
-      state,
-      fontFamily,
-      languageContext,
       avoidDefaultProps
     )
     if (!expanded || (!staticConfig.isHOC && key in skipProps)) {
@@ -1368,6 +1338,8 @@ if (process.env.TAMAGUI_TARGET === 'native') {
 } else {
   Object.assign(skipProps, {
     elevationAndroid: 1,
+    allowFontScaling: true,
+    adjustsFontSizeToFit: true,
   })
 }
 

package/src/helpers/getVariantExtras.tsx

@@ -1,23 +1,19 @@
-import { getConfig } from '../config'
 import { getVariableValue } from '../createVariable'
-import { GenericFonts } from '../types'
+import { GenericFonts, GetStyleState } 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,
+  styleState: GetStyleState,
   defaultProps?: any,
-  avoidDefaultProps = false,
-  fontFamily?: string
+  avoidDefaultProps = false
 ) {
-  const conf = getConfig()
+  const { curProps, conf, languageContext, theme } = styleState
 
-  if (extrasCache.has(props)) {
-    return extrasCache.get(props)
+  if (extrasCache.has(curProps)) {
+    return extrasCache.get(curProps)
   }
 
   let fonts = conf.fontsParsed
@@ -25,24 +21,22 @@ export function getVariantExtras(
     fonts = getFontsForLanguage(conf.fontsParsed, languageContext)
   }
 
+  // should be able to just use styleState.fontFamily but no time to test for now
+  const fontFamily = getVariableValue(
+    styleState.fontFamily || styleState.curProps.fontFamily || styleState.conf.defaultFont
+  )
+
   const next = {
     fonts,
     tokens: conf.tokensParsed,
     theme,
-
-    get fontFamily() {
-      return getVariableValue(fontFamily || props.fontFamily)
-    },
-
-    get font() {
-      return fonts[this.fontFamily]
-    },
-
+    fontFamily,
+    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
-      ? props
-      : createProxy(props, {
+      ? curProps
+      : createProxy(curProps, {
           // handles shorthands
           get(target, key) {
             const shorthand = conf.inverseShorthands[key as any]
@@ -68,7 +62,7 @@ export function getVariantExtras(
         }),
   }
 
-  extrasCache.set(props, next)
+  extrasCache.set(curProps, next)
 
   return next
 }

package/src/hooks/useTheme.tsx

@@ -195,10 +195,10 @@ export const useChangeThemeEffect = (
     prevState: ThemeManagerState = state,
     forceShouldChange = false
   ) {
-    if (forceShouldChange) return
     const forceUpdate = shouldUpdate?.()
-    if (forceUpdate === false) return
+    if (!forceShouldChange && forceUpdate === false) return
     const next = nextState || manager.getState(props, parentManager)
+    if (forceShouldChange) return next
     if (!next) return
     if (forceUpdate !== true) {
       if (!manager.getStateShouldChange(next, prevState)) return