@tamagui/core 1.0.1-beta.149 → 1.0.1-beta.152

package/src/helpers/getSplitStyles.tsx

@@ -78,6 +78,7 @@ type StyleSplitter = (
   rulesToInsert: RulesToInsert
   viewProps: StackProps
   fontFamily: string | undefined
+  mediaKeys: string[]
 }
 
 export const PROP_SPLIT = '-'
@@ -108,12 +109,14 @@ export const getSplitStyles: StyleSplitter = (
 ) => {
   conf = conf || getConfig()
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
+  const mediaKeys: string[] = []
   const viewProps: StackProps = {}
   const pseudos: PseudoStyles = {}
   const medias: Record<MediaQueryKey, ViewStyle> = {}
   const usedKeys = new Set<string>()
   const propKeys = Object.keys(props)
-  const shouldDoClasses = (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames
+  const shouldDoClasses =
+    (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames && !props.animation
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const style: ViewStyle = {}
@@ -125,54 +128,7 @@ export const getSplitStyles: StyleSplitter = (
   let classNames: ClassNamesObject = {}
   // we need to gather these specific to each media query / pseudo
   // value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
-  let transforms = null as Record<TransformNamespaceKey, [string, string]> | null
-
-  function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      // empty classnames passed by compiler sometimes
-      if (!val) return
-      if (val.startsWith('_transform-')) {
-        const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'
-
-        let transform = insertedTransforms[val]
-        if (isClient) {
-          if (!transform) {
-            // HMR or loaded a new chunk
-            updateInserted()
-            transform = insertedTransforms[val]
-            if (process.env.NODE_ENV === 'development') {
-              if (!transform) {
-                // eslint-disable-next-line no-console
-                console.warn('no transform found', { insertedTransforms, val })
-              }
-            }
-          }
-          if (!transform) {
-            if (isWeb && val[0] !== '_') {
-              // runtime insert
-              transform = val
-            }
-          }
-          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-            // prettier-ignore
-            // eslint-disable-next-line no-console
-            console.log('  🔹 getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })
-          }
-        }
-        transforms = transforms || {}
-        transforms[namespace] = transforms[namespace] || ['', '']
-        const identifier = val.replace('_transform', '')
-        transforms[namespace][0] += identifier
-        // ssr doesn't need to do anything just make the right classname
-        if (transform) {
-          transforms[namespace][1] += transform
-        }
-      } else {
-        classNames[key] = val
-      }
-    }
-  }
-
+  const transforms: Record<TransformNamespaceKey, [string, string]> = {}
   // fontFamily is our special baby, ensure we grab the latest set one always
   let fontFamily: string | undefined
 
@@ -237,14 +193,14 @@ export const getSplitStyles: StyleSplitter = (
               fullKey += `${PROP_SPLIT}${pseudoShortKey}`
             }
             usedKeys.add(fullKey)
-            mergeClassName(fullKey, cn, isMediaOrPseudo)
+            mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo)
           } else {
             nonTamaguis += ' ' + cn
           }
         }
         if (nonTamaguis) {
           usedKeys.add(keyInit)
-          mergeClassName(keyInit, nonTamaguis)
+          mergeClassName(transforms, classNames, keyInit, nonTamaguis)
         }
         continue
       }
@@ -259,7 +215,7 @@ export const getSplitStyles: StyleSplitter = (
           validStyles[keyInit.split(PROP_SPLIT)[0]]
         if (isValidClassName || isMediaOrPseudo) {
           usedKeys.add(keyInit)
-          mergeClassName(keyInit, valInit, isMediaOrPseudo)
+          mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
           continue
         }
       }
@@ -350,7 +306,7 @@ export const getSplitStyles: StyleSplitter = (
           continue
         }
         pseudos[key] = pseudos[key] || {}
-        pseudos[key] = getSubStyle(
+        const pseudoStyleObject = getSubStyle(
           key,
           val,
           staticConfig,
@@ -361,15 +317,16 @@ export const getSplitStyles: StyleSplitter = (
           languageContext,
           true
         )
-        if (shouldDoClasses) {
-          const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])
+        pseudos[key] = pseudoStyleObject
+        if (shouldDoClasses && key !== 'enterStyle' && key !== 'exitStyle') {
+          const pseudoStyles = getAtomicStyle(pseudoStyleObject, pseudoDescriptors[key])
           for (const style of pseudoStyles) {
             const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors
             const fullKey = `${style.property}${PROP_SPLIT}${postfix}`
             if (!usedKeys.has(fullKey)) {
               usedKeys.add(fullKey)
               addStyleToInsertRules(rulesToInsert, style)
-              mergeClassName(fullKey, style.identifier, isMediaOrPseudo)
+              mergeClassName(transforms, classNames, fullKey, style.identifier, isMediaOrPseudo)
             }
           }
         }
@@ -379,6 +336,7 @@ export const getSplitStyles: StyleSplitter = (
       // media
       if (isMedia) {
         const mediaKey = key
+        mediaKeys.push(key)
         const mediaKeyShort = mediaKey.slice(1)
 
         if (!mediaQueryConfig[mediaKeyShort]) {
@@ -419,7 +377,7 @@ export const getSplitStyles: StyleSplitter = (
             if (!usedKeys.has(fullKey)) {
               usedKeys.add(fullKey)
               addStyleToInsertRules(rulesToInsert, out)
-              mergeClassName(fullKey, out.identifier, true)
+              mergeClassName(transforms, classNames, fullKey, out.identifier, true)
             }
           }
         } else {
@@ -428,7 +386,17 @@ export const getSplitStyles: StyleSplitter = (
               // eslint-disable-next-line no-console
               console.log('apply media style', mediaKey, mediaState)
             }
-            Object.assign(shouldDoClasses ? medias : style, mediaStyle)
+            if (shouldDoClasses) {
+              Object.assign(medias, mediaStyle)
+            } else {
+              for (const key in mediaStyle) {
+                usedKeys.add(key)
+                style[key] = mediaStyle[key]
+                if (key === 'fontFamily') {
+                  fontFamily = mediaStyle[key]
+                }
+              }
+            }
           }
         }
         continue
@@ -447,13 +415,7 @@ export const getSplitStyles: StyleSplitter = (
         } else if (key in stylePropsTransform) {
           mergeTransform(style, key, val, true)
         } else {
-          // if (key === 'pointerEvents') {
-          //   // pointer events can be box-none which requires css
-          //   addStyleToInsertRules(out.identifier, out.styleRule)
-          //   mergeClassName(fullKey, out.identifier, true)
-          // } else {
           style[key] = normalizeValueWithProperty(val, key)
-          // }
         }
         continue
       }
@@ -489,7 +451,7 @@ export const getSplitStyles: StyleSplitter = (
       // should probably have a few more exceptions here!
       if (key === 'pointerEvents' || !state.dynamicStylesInline) {
         addStyleToInsertRules(rulesToInsert, atomicStyle)
-        mergeClassName(key, atomicStyle.identifier)
+        mergeClassName(transforms, classNames, key, atomicStyle.identifier)
       } else {
         style[key] = atomicStyle.value
       }
@@ -568,12 +530,58 @@ export const getSplitStyles: StyleSplitter = (
     viewProps,
     style,
     medias,
+    mediaKeys,
     pseudos,
     classNames,
     rulesToInsert,
   }
 }
 
+function mergeClassName(
+  transforms: Record<string, any[]>,
+  classNames: Record<string, string>,
+  key: string,
+  val: string,
+  isMediaOrPseudo = false
+) {
+  if (process.env.TAMAGUI_TARGET === 'web') {
+    // empty classnames passed by compiler sometimes
+    if (!val) return
+    if (val.startsWith('_transform-')) {
+      const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'
+      let transform = insertedTransforms[val]
+      if (isClient) {
+        if (!transform) {
+          // HMR or loaded a new chunk
+          updateInserted()
+          transform = insertedTransforms[val]
+          if (process.env.NODE_ENV === 'development') {
+            if (!transform) {
+              // eslint-disable-next-line no-console
+              console.warn('no transform found', { insertedTransforms, val })
+            }
+          }
+        }
+        if (!transform) {
+          if (isWeb && val[0] !== '_') {
+            // runtime insert
+            transform = val
+          }
+        }
+      }
+      transforms[namespace] = transforms[namespace] || ['', '']
+      const identifier = val.replace('_transform', '')
+      transforms[namespace][0] += identifier
+      // ssr doesn't need to do anything just make the right classname
+      if (transform) {
+        transforms[namespace][1] += transform
+      }
+    } else {
+      classNames[key] = val
+    }
+  }
+}
+
 /**
  * getSubStyle calls propMapper with props
  * those should be specific to the substyle, but fallback to the base props

package/src/helpers/mergeTransform.ts

@@ -4,10 +4,12 @@ export const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards
   obj.transform ||= []
   obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)
 }
+
 const mapTransformKeys = {
   x: 'translateX',
   y: 'translateY',
 }
+
 export const invertMapTransformKeys = {
   translateX: 'x',
   translateY: 'y',

package/src/insertFont.ts

@@ -27,7 +27,7 @@ export function parseFont<A extends GenericFont>(definition: A): DeepVariableObj
   const parsed: any = {}
   for (const attrKey in definition) {
     const attr = definition[attrKey]
-    if (attrKey === 'family') {
+    if (attrKey === 'family' || attrKey === 'face') {
       parsed[attrKey] = attr
       continue
     }
@@ -48,6 +48,7 @@ export function registerFontVariables(parsedFont: any) {
   const response: string[] = []
 
   for (const fkey in parsedFont) {
+    if (fkey === 'face') continue
     if (fkey === 'family') {
       const val = parsedFont[fkey] as Variable
       registerCSSVariable(val)

package/src/types.tsx

@@ -1,7 +1,7 @@
 // TODO split this into own package @tamagui/types to share with animations packages
 
 import { Properties } from 'csstype'
-import React from 'react'
+import React, { RefObject } from 'react'
 import {
   GestureResponderEvent,
   Image,
@@ -336,6 +336,8 @@ export type GenericFont<Key extends number | string = number | string> = {
   style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>
   transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>
   color?: Partial<{ [key in Key]: string | Variable }>
+  // for native use only, lets you map to alternative fonts
+  face?: { [key in FontWeightSteps]: { normal?: string; italic?: string } }
 }
 
 // media
@@ -429,9 +431,8 @@ export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
 export type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>
 export type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number
 export type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number
-export type FontWeightTokens =
-  | `$${GetTokenFontKeysFor<'weight'>}`
-  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps
 export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number
 export type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number
 export type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']
@@ -1242,6 +1243,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>
 
 export type UseAnimationHelpers = {
+  hostRef: RefObject<HTMLElement | View>
   staticConfig: StaticConfigParsed
   getStyle: (props?: {
     isEntering?: boolean
@@ -1262,6 +1264,6 @@ export type UseAnimationHelpers = {
 export type UseAnimationHook = (
   props: UseAnimationProps,
   helpers: UseAnimationHelpers
-) => {
+) => null | {
   style?: StackStylePropsBase | StackStylePropsBase[]
 }

package/types/createVariable.d.ts

@@ -18,7 +18,7 @@ export declare const createVariable: <A extends string | number = any>(props: Va
     isFloating?: boolean | undefined;
     __isVar__: boolean;
 };
-export declare function variableToString(vrble?: any): string;
+export declare function variableToString(vrble?: any, getValue?: boolean): string;
 export declare function isVariable(v: Variable | any): v is Variable;
 export declare function getVariableValue(v: Variable | any): any;
 export declare function getVariableName(v: Variable | any): any;

package/types/helpers/getSplitStyles.d.ts

@@ -15,6 +15,7 @@ declare type StyleSplitter = (props: {
     rulesToInsert: RulesToInsert;
     viewProps: StackProps;
     fontFamily: string | undefined;
+    mediaKeys: string[];
 };
 export declare const PROP_SPLIT = "-";
 export declare const pseudoCNInverse: {

package/types/hooks/useFeatures.d.ts

@@ -16,7 +16,6 @@ declare type FeatureUtils = {
 export declare const useFeatures: (props: any, utils?: FeatureUtils) => {
     elements: JSX.Element[];
     enabled: {
-        animation?: boolean | undefined;
         mediaQuery?: boolean | undefined;
     };
 };

package/types/types.d.ts

@@ -1,5 +1,5 @@
 import { Properties } from 'csstype';
-import React from 'react';
+import React, { RefObject } from 'react';
 import { GestureResponderEvent, Image, PressableProps, TextProps as ReactTextProps, Text, TextInput, TextStyle, View, ViewProps, ViewStyle } from 'react-native';
 import { Variable } from './createVariable';
 import { ResolveVariableTypes } from './helpers/createPropMapper';
@@ -205,6 +205,12 @@ export declare type GenericFont<Key extends number | string = number | string> =
     color?: Partial<{
         [key in Key]: string | Variable;
     }>;
+    face?: {
+        [key in FontWeightSteps]: {
+            normal?: string;
+            italic?: string;
+        };
+    };
 };
 export declare type MediaQueryObject = {
     [key: string]: string | number | string;
@@ -264,7 +270,8 @@ export declare type RadiusTokens = GetTokenString<keyof Tokens['radius']> | numb
 export declare type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>;
 export declare type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number;
 export declare type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number;
-export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps;
 export declare type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number;
 export declare type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number;
 export declare type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle'];
@@ -492,6 +499,7 @@ export declare type AnimationDriver<A extends AnimationConfig = AnimationConfig>
 };
 export declare type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>;
 export declare type UseAnimationHelpers = {
+    hostRef: RefObject<HTMLElement | View>;
     staticConfig: StaticConfigParsed;
     getStyle: (props?: {
         isEntering?: boolean;
@@ -504,7 +512,7 @@ export declare type UseAnimationHelpers = {
     onDidAnimate?: any;
     delay?: number;
 };
-export declare type UseAnimationHook = (props: UseAnimationProps, helpers: UseAnimationHelpers) => {
+export declare type UseAnimationHook = (props: UseAnimationProps, helpers: UseAnimationHelpers) => null | {
     style?: StackStylePropsBase | StackStylePropsBase[];
 };
 export {};

package/src/helpers/cssHash.ts

@@ -1,28 +0,0 @@
-import { simpleHash } from '@tamagui/helpers'
-
-// not sure it's worth the extra weight, could be dev time though
-// affordances for simple values
-export function cssHash(val: string, maxLen = 10) {
-  if (val.length < maxLen) {
-    let res = ''
-    for (let i = 0; i < val.length; i++) {
-      const char = val[i]
-      if (specials[char]) {
-        res += specials[char]
-      } else {
-        res += validCSS.test(char) ? char : '_' + char.charCodeAt(0).toString()
-      }
-    }
-    return res
-  }
-  return simpleHash(val)
-}
-
-const validCSS = /[a-z0-9]/i
-
-const specials = {
-  '.': 'dot',
-  ',': '_',
-  '%': 'pct',
-  '-': 'neg',
-}