@tamagui/web 1.9.13 → 1.9.15

package/src/helpers/getSplitStyles.tsx

@@ -6,6 +6,7 @@ import {
   useIsomorphicLayoutEffect,
 } from '@tamagui/constants'
 import {
+  stylePropsFont,
   stylePropsText,
   stylePropsTransform,
   validPseudoKeys,
@@ -295,11 +296,20 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  // loop backwards so we can skip already-used props
-  for (let i = len - 1; i >= 0; i--) {
-    let keyInit = propKeys[i]
-    if (keyInit === 'className') continue // handled above
-    let valInit = props[keyInit]
+  /**
+   * Need to process these after done with flattening the rest of the props + variants/mediam when we have the final font family.
+   *
+   * We use this because fonts are grouped together and cannot be processed correctly without the correct font family.
+   */
+  const specialProps: [string, any][] = []
+
+  function processProp(
+    keyInit: string,
+    valInit: any,
+    special = false,
+    fontFamilyOverride: any = null
+  ) {
+    if (keyInit === 'className') return // handled above
 
     // normalize shorthands up front
     if (keyInit in shorthands) {
@@ -312,18 +322,18 @@ export const getSplitStyles: StyleSplitter = (
         keyInit = 'selectable'
         valInit = valInit === 'none' ? false : true
       } else if (keyInit.startsWith('data-') || keyInit.startsWith('aria-')) {
-        continue
+        return
       }
     }
 
     if (!staticConfig.isHOC) {
       if (keyInit in skipProps) {
-        continue
+        return
       }
     }
 
     if (keyInit in usedKeys) {
-      continue
+      return
     }
 
     if (typeof valInit === 'string' && valInit[0] === '_') {
@@ -334,7 +344,7 @@ export const getSplitStyles: StyleSplitter = (
           style[keyInit] = reverseMapClassNameToValue(keyInit, valInit)
         }
         usedKeys[keyInit] = 1
-        continue
+        return
       }
     }
 
@@ -342,26 +352,26 @@ export const getSplitStyles: StyleSplitter = (
       for (const key in valInit) {
         viewProps[`data-${hyphenate(key)}`] = valInit[key]
       }
-      continue
+      return
     }
 
     const isMainStyle = keyInit === 'style'
     if (isMainStyle || keyInit.startsWith('_style')) {
-      if (!valInit) continue
+      if (!valInit) return
       const styles = Array.isArray(valInit) ? valInit : [valInit]
       const styleLen = styles.length
       for (let j = styleLen; j >= 0; j--) {
         const cur = styles[j]
-        if (!cur) continue
+        if (!cur) return
         for (const key in cur) {
           if (!isMainStyle && usedKeys[key]) {
-            continue
+            return
           }
           usedKeys[key] = 1
           style[key] = cur[key]
         }
       }
-      continue
+      return
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
@@ -383,14 +393,14 @@ export const getSplitStyles: StyleSplitter = (
           viewProps.disabled = true
         }
         if (!variants?.disabled) {
-          continue
+          return
         }
       }
 
       if (keyInit === 'testID') {
         usedKeys[keyInit] = 1
         viewProps[isReactNative ? 'testId' : 'data-testid'] = valInit
-        continue
+        return
       }
 
       if (keyInit === 'id' || keyInit === 'nativeID') {
@@ -400,7 +410,7 @@ export const getSplitStyles: StyleSplitter = (
         } else {
           viewProps.id = valInit
         }
-        continue
+        return
       }
 
       let didUseKeyInit = false
@@ -410,7 +420,7 @@ export const getSplitStyles: StyleSplitter = (
         if (accessibilityDirectMap[keyInit] || keyInit.startsWith('accessibility')) {
           viewProps[keyInit] = valInit
           usedKeys[keyInit] = 1
-          continue
+          return
         }
       } else {
         didUseKeyInit = true
@@ -425,7 +435,7 @@ export const getSplitStyles: StyleSplitter = (
               } else {
                 viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
               }
-              continue
+              return
             }
             case 'accessibilityLabelledBy':
             case 'accessibilityFlowTo':
@@ -433,17 +443,17 @@ export const getSplitStyles: StyleSplitter = (
             case 'accessibilityDescribedBy': {
               viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
                 processIDRefList(valInit)
-              continue
+              return
             }
             case 'accessibilityKeyShortcuts': {
               if (Array.isArray(valInit)) {
                 viewProps['aria-keyshortcuts'] = valInit.join(' ')
               }
-              continue
+              return
             }
             case 'accessibilityLiveRegion': {
               viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
-              continue
+              return
             }
             case 'accessibilityReadOnly': {
               viewProps['aria-readonly'] = valInit
@@ -455,7 +465,7 @@ export const getSplitStyles: StyleSplitter = (
               ) {
                 viewProps.readOnly = true
               }
-              continue
+              return
             }
             case 'accessibilityRequired': {
               viewProps['aria-required'] = valInit
@@ -467,7 +477,7 @@ export const getSplitStyles: StyleSplitter = (
               ) {
                 viewProps.required = valInit
               }
-              continue
+              return
             }
             default: {
               didUseKeyInit = false
@@ -478,7 +488,7 @@ export const getSplitStyles: StyleSplitter = (
 
       if (didUseKeyInit) {
         usedKeys[keyInit] = 1
-        continue
+        return
       }
 
       if (valInit && valInit[0] === '_') {
@@ -497,7 +507,7 @@ export const getSplitStyles: StyleSplitter = (
             console.log('tamagui classname props', keyInit, valInit)
           }
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
-          continue
+          return
         }
       }
     }
@@ -546,7 +556,7 @@ export const getSplitStyles: StyleSplitter = (
       // which now has it's own unstyled + the child unstyled...
       // so *don't* skip applying the styles, but also pass `unstyled` to children
       if (!isVariant) {
-        continue
+        return
       }
     }
 
@@ -562,7 +572,7 @@ export const getSplitStyles: StyleSplitter = (
             keyInit,
             valInit,
             theme,
-            props,
+            special ? { ...props, fontFamily: fontFamilyOverride } : props,
             state,
             languageContext,
             undefined,
@@ -583,11 +593,14 @@ export const getSplitStyles: StyleSplitter = (
       // eslint-disable-next-line no-console
       console.groupEnd()
     }
-
-    if (!expanded) continue
+    if (!expanded) return
 
     for (const [key, val] of expanded) {
       if (val === undefined) continue
+      if (key in stylePropsFont && !special && key !== 'fontFamily') {
+        specialProps.push([key, val])
+        continue
+      }
 
       isMedia = isMediaKey(key)
       isPseudo = key in validPseudoKeys
@@ -825,6 +838,19 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
+  // loop backwards so we can skip already-used props
+  for (let i = len - 1; i >= 0; i--) {
+    const keyInit = propKeys[i]
+    const valInit = props[keyInit]
+    processProp(keyInit, valInit)
+  }
+  // loop the special props once again
+  // this one doesn't need to be backwards since it was pushed in the backwards loop (is already reversed)
+  for (let i = 0; i < specialProps.length; i++) {
+    const [key, value] = specialProps[i]
+    processProp(key, value, true, fontFamily)
+  }
+
   fixStyles(style)
   if (isWeb) {
     styleToCSS(style)

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

@@ -1 +1 @@
-{"version":3,"file":"createPropMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/createPropMapper.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EAEtB,MAAM,aAAa,CAAA;AAQpB,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,UAAU,GACV,MAAM,GACN,iBAAiB,CAAA;AAErB,eAAO,MAAM,oBAAoB,UAAW,GAAG,SAAS,QAAQ,eAAe,CAAC,qBAE/E,CAAA;AAED,eAAO,MAAM,gBAAgB,iBAAkB,kBAAkB,eAmFhE,CAAA;AA+GD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBA2BtF;AAMD,eAAO,MAAM,uBAAuB,cAAe,GAAG,QAErD,CAAA"}
+{"version":3,"file":"createPropMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/createPropMapper.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EAEtB,MAAM,aAAa,CAAA;AAQpB,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,UAAU,GACV,MAAM,GACN,iBAAiB,CAAA;AAErB,eAAO,MAAM,oBAAoB,UAAW,GAAG,SAAS,QAAQ,eAAe,CAAC,qBAE/E,CAAA;AAED,eAAO,MAAM,gBAAgB,iBAAkB,kBAAkB,eAgGhE,CAAA;AA+GD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBA2BtF;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":"AA0BA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EAMd,eAAe,EACf,kBAAkB,EAElB,qBAAqB,EACrB,cAAc,EACd,WAAW,EAEZ,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,gCAAgC,CAAA;AAkBvC,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,gBAAgB,CAAA;IAC5B,YAAY,EAAE,kBAAkB,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,qBAAqB,CAAA;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAsFhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,WAAW,EAClB,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;AAqB7B,eAAO,MAAM,cAAc,EAAE,aAuwB5B,CAAA;AA0FD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,aAI/B,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAA;AA2BD,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":"AA2BA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EAMd,eAAe,EACf,kBAAkB,EAElB,qBAAqB,EACrB,cAAc,EACd,WAAW,EAEZ,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,gCAAgC,CAAA;AAkBvC,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,gBAAgB,CAAA;IAC5B,YAAY,EAAE,kBAAkB,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,qBAAqB,CAAA;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAsFhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,WAAW,EAClB,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;AAqB7B,eAAO,MAAM,cAAc,EAAE,aAgyB5B,CAAA;AA0FD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,aAI/B,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAA;AA2BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}