@tamagui/web 1.45.5 → 1.45.7

package/src/createComponent.tsx

@@ -671,6 +671,10 @@ export function createComponent<
 
     const className = classList.join(' ')
 
+    if (className.includes('undefined')) {
+      console.warn('???', { classList, componentClassName, fontFamilyClassName })
+    }
+
     if (process.env.TAMAGUI_TARGET === 'web') {
       const style = avoidStyle ? null : animationStyles ?? splitStyles.style
 
@@ -703,25 +707,28 @@ export function createComponent<
     // TODO MOVE INTO HOOK
     if (process.env.TAMAGUI_TARGET === 'native') {
       // swap out the right family based on weight/style
-      if (styles && splitStyles.fontFamily) {
-        const faceInfo = tamaguiConfig.fontsParsed[splitStyles.fontFamily]?.face
-        if (faceInfo) {
-          const [weight, style] = (() => {
-            let weight: string | undefined
-            let style: string | undefined
-            for (let i = styles.length; i >= 0; i--) {
-              weight ??= styles[i]?.fontWeight
-              style ??= styles[i]?.fontStyle
-            }
-            return [weight || '400', style || 'normal'] as const
-          })()
-          const overrideFace = faceInfo[weight]?.[style]?.val
-          if (overrideFace) {
-            for (const style of styles) {
-              if (style?.fontFamily) {
-                style.fontFamily = overrideFace
-                style.fontWeight = undefined
-                style.fontStyle = undefined
+      if (styles && isText) {
+        const fontFamily = splitStyles.fontFamily || tamaguiConfig.defaultFont
+        if (fontFamily) {
+          const faceInfo = tamaguiConfig.fontsParsed[fontFamily]?.face
+          if (faceInfo) {
+            const [weight, style] = (() => {
+              let weight: string | undefined
+              let style: string | undefined
+              for (let i = styles.length; i >= 0; i--) {
+                weight ??= styles[i]?.fontWeight
+                style ??= styles[i]?.fontStyle
+              }
+              return [weight || '400', style || 'normal'] as const
+            })()
+            const overrideFace = faceInfo[weight]?.[style]?.val
+            if (overrideFace) {
+              for (const style of styles) {
+                if (style?.fontFamily) {
+                  style.fontFamily = overrideFace
+                  style.fontWeight = undefined
+                  style.fontStyle = undefined
+                }
               }
             }
           }

package/src/createTamagui.ts

@@ -261,13 +261,22 @@ ${runtimeStyles}`
 
   const getNewCSS: GetCSS = (opts) => getCSS({ ...opts, sinceLastCall: true })
 
-  const defaultFont =
+  const defaultFontName =
     configIn.defaultFont ||
     // uses font named "body" if present for compat
-    ('body' in configIn.fonts ? 'body' : false) ||
+    ('body' in configIn.fonts ? 'body' : 0) ||
     // defaults to the first font to make life easier
     Object.keys(configIn.fonts)[0]
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (defaultFontName?.[0] === '$') {
+      throw new Error(`Pass defaultFont without a $ prefix (${configIn.defaultFont})`)
+    }
+  }
+
+  // ensure prefixed with $
+  const defaultFont = `$${defaultFontName}`
+
   const config: TamaguiInternalConfig = {
     settings: {},
     onlyAllowShorthands: false,

package/src/helpers/createPropMapper.ts

@@ -114,9 +114,6 @@ const resolveVariants: StyleResolver = (
     return
   }
 
-  // set the curProps to use the new value for this variant
-  styleState.curProps[key] = value
-
   let variantValue = getVariantDefinition(variants[key], key, value, conf)
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -163,6 +160,17 @@ 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,
@@ -177,6 +185,7 @@ const resolveVariants: StyleResolver = (
     if (fontFamilyUpdate) {
       fontFamilyResult = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf)
       styleState.fontFamily = fontFamilyResult
+
       if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
         console.log(`   updating font family`, fontFamilyResult)
@@ -212,9 +221,7 @@ const resolveVariants: StyleResolver = (
 export function getFontFamilyFromNameOrVariable(input: any, conf: TamaguiInternalConfig) {
   if (isVariable(input)) {
     const val = variableToFontNameCache.get(input)
-    if (val) {
-      return val
-    }
+    if (val) return val
     for (const key in conf.fontsParsed) {
       const familyVariable = conf.fontsParsed[key].family
       if (isVariable(familyVariable)) {
@@ -228,11 +235,6 @@ export function getFontFamilyFromNameOrVariable(input: any, conf: TamaguiInterna
     if (input?.[0] === '$') {
       return input
     }
-    // this could be mapped back to
-    if (process.env.NODE_ENV === 'development') {
-      // rome-ignore lint/nursery/noConsoleLog: ok
-      console.log('[tamagui] should map back', input)
-    }
   }
 }
 
@@ -423,12 +425,13 @@ const getToken = (
         case 'lineHeight':
         case 'letterSpacing':
         case 'fontWeight': {
-          if (fontFamily) {
+          const fam = fontFamily || styleState.conf.defaultFont
+          if (fam) {
             const fontsParsed = languageContext
               ? getFontsForLanguage(conf.fontsParsed, languageContext)
               : conf.fontsParsed
-            valOrVar =
-              fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value
+            const font = fontsParsed[fam]
+            valOrVar = font?.[fontShorthand[key] || key]?.[value] || value
             hasSet = true
           }
           break

package/src/helpers/getSplitStyles.tsx

@@ -67,6 +67,8 @@ import {
 } from './normalizeValueWithProperty'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
+const fontFamilyKey = 'fontFamily'
+
 // bugfix for some reason it gets reset
 const IS_STATIC = process.env.IS_STATIC === 'is_static'
 
@@ -94,7 +96,6 @@ type StyleSplitter = (
 ) => GetStyleResult
 
 export const PROP_SPLIT = '-'
-let defaultFontVariable = ''
 
 // loop props backwards
 //   track used keys:
@@ -205,7 +206,8 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   for (let i = 0; i < numProps; i++) {
-    let keyInit = propKeys[i]
+    const keyOg = propKeys[i]
+    let keyInit = keyOg
     let valInit = props[keyInit]
 
     // normalize shorthands up front
@@ -217,6 +219,8 @@ export const getSplitStyles: StyleSplitter = (
     if (keyInit in usedKeys) continue
     if (keyInit in skipProps && !isHOC) continue
 
+    styleState.curProps[keyInit] = valInit
+
     // TODO this is duplicated! but seems to be fixing some bugs so leaving got now
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (typeof valInit === 'string' && valInit[0] === '_') {
@@ -495,10 +499,14 @@ export const getSplitStyles: StyleSplitter = (
     const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      console.groupCollapsed(`  🔹 prop ${keyInit} ${shouldPassThrough ? '(pass)' : ''}`)
+      console.groupCollapsed(
+        `🔹🔹🔹🔹 ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ''} ${
+          shouldPassThrough ? '(pass)' : ''
+        } 🔹🔹🔹🔹`
+      )
       // prettier-ignore
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
-      console.log({ valInit, variants, variant: variants?.[keyInit], isVariant, shouldPassProp, isHOCShouldPassThrough })
+      console.log({ valInit, variants, variant: variants?.[keyInit], isVariant, shouldPassProp, isHOCShouldPassThrough, curProps: { ...styleState.curProps } })
       console.groupEnd()
     }
 
@@ -535,11 +543,14 @@ export const getSplitStyles: StyleSplitter = (
     // after shouldPassThrough
     if (keyInit in skipProps) continue
 
-    // default font family
-    // is this great? no, but backwards compat until we add tests and make better
-    defaultFontVariable ||= `$${conf.defaultFont}`
-    styleState.fontFamily ||=
-      props[conf.inverseShorthands.fontFamily] || props.fontFamily || defaultFontVariable
+    // we sort of have to update fontFamily all the time: before variants run, after each variant
+    if (
+      valInit &&
+      (keyInit === fontFamilyKey || keyInit === shorthands[fontFamilyKey]) &&
+      valInit in conf.fontsParsed
+    ) {
+      styleState.fontFamily = valInit
+    }
 
     const expanded =
       isMediaOrPseudo || (!(keyInit in validStyleProps) && !isVariant)
@@ -571,6 +582,13 @@ export const getSplitStyles: StyleSplitter = (
       if (val == null) continue
       if (key in usedKeys) continue
 
+      if (key === fontFamilyKey && valInit && val) {
+        const fam = valInit[0] === '$' ? valInit : val
+        if (fam in conf.fontsParsed) {
+          styleState.fontFamily = fam
+        }
+      }
+
       isMedia = isMediaKey(key)
       isPseudo = key in validPseudoKeys
       isMediaOrPseudo = isMedia || isPseudo
@@ -871,7 +889,7 @@ export const getSplitStyles: StyleSplitter = (
               usedKeys,
               mediaState[mediaKeyShort]
             )
-            if (key === 'fontFamily') {
+            if (key === fontFamilyKey) {
               styleState.fontFamily = mediaStyle.fontFamily as string
             }
           }
@@ -886,13 +904,6 @@ export const getSplitStyles: StyleSplitter = (
         }
       }
 
-      if (key === 'fontFamily' && !styleState.fontFamily && valInit && val) {
-        const fam = valInit[0] === '$' ? valInit : val
-        if (fam in conf.fontsParsed) {
-          styleState.fontFamily = fam
-        }
-      }
-
       if (
         key in validStyleProps ||
         (process.env.TAMAGUI_TARGET === 'native' && isAndroid && key === 'elevation')
@@ -917,9 +928,6 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  // default to default font
-  styleState.fontFamily ||= conf.defaultFont
-
   fixStyles(style)
   if (isWeb) {
     styleToCSS(style)
@@ -927,7 +935,7 @@ export const getSplitStyles: StyleSplitter = (
 
   // native: swap out the right family based on weight/style
   if (process.env.TAMAGUI_TARGET === 'native') {
-    if ('fontFamily' in style && style.fontFamily) {
+    if (fontFamilyKey in style && style.fontFamily) {
       const faceInfo = getFont(style.fontFamily as string)?.face
       if (faceInfo) {
         const overrideFace =

package/src/hooks/useTheme.tsx

@@ -364,7 +364,7 @@ export const useChangeThemeEffect = (
       mounted,
     }
 
-    if (process.env.NODE_ENV === 'development' && props['debug']) {
+    if (process.env.NODE_ENV === 'development' && props['debug'] && isClient) {
       console.groupCollapsed(` 🔷 ${themeManager.id} useChangeThemeEffect createState`)
       const parentState = { ...parentManager?.state }
       const parentId = parentManager?.id

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAWN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAEhB,qBAAqB,EACrB,cAAc,EAIf,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAwBD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAqB3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,4DA22B3D;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAkGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAWN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAEhB,qBAAqB,EACrB,cAAc,EAIf,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAwBD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAqB3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,4DAk3B3D;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAkGxD"}

package/types/createTamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAgBA,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CAkS1B"}
+{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAgBA,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CA2S1B"}

package/types/helpers/createPropMapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createPropMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/createPropMapper.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,UAAU,EACV,kBAAkB,EAElB,qBAAqB,EAEtB,MAAM,UAAU,CAAA;AAQjB,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,UAAU,GACV,MAAM,GACN,iBAAiB,CAAA;AAErB,eAAO,MAAM,gBAAgB,iBAAkB,kBAAkB,eAuEhE,CAAA;AAiHD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAyBtF;AAMD,eAAO,MAAM,uBAAuB,cAAe,GAAG,QAErD,CAAA"}
+{"version":3,"file":"createPropMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/createPropMapper.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,UAAU,EACV,kBAAkB,EAElB,qBAAqB,EAEtB,MAAM,UAAU,CAAA;AAQjB,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,UAAU,GACV,MAAM,GACN,iBAAiB,CAAA;AAErB,eAAO,MAAM,gBAAgB,iBAAkB,kBAAkB,eAuEhE,CAAA;AA0HD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AAMD,eAAO,MAAM,uBAAuB,cAAe,GAAG,QAErD,CAAA"}

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAEV,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,kBAAkB,EAGlB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAqBtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE;IACV,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,EACD,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAU7B,eAAO,MAAM,cAAc,EAAE,aAo+B5B,CAAA;AAkFD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA;AA6BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAEV,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,kBAAkB,EAGlB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAuBtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE;IACV,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,EACD,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAS7B,eAAO,MAAM,cAAc,EAAE,aA2+B5B,CAAA;AAkFD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA;AA6BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}