@tamagui/core 1.0.1-beta.214 → 1.0.1-beta.215

package/src/helpers/getSplitStyles.tsx

@@ -1,6 +1,5 @@
-import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'
-import { timer } from '@tamagui/timer'
 import type { ViewStyle } from '@tamagui/types-react-native'
 import { useInsertionEffect } from 'react'
 
@@ -25,7 +24,6 @@ import type {
 import { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'
 import { createMediaStyle } from './createMediaStyle'
 import { getPropMappedFontFamily } from './createPropMapper'
-import { createProxy } from './createProxy'
 import { fixStyles } from './expandStyles'
 import { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'
 import {
@@ -199,6 +197,19 @@ export const getSplitStyles: StyleSplitter = (
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
 
   let style: ViewStyle = {}
+  let flatTransforms: Record<string, any> | undefined
+
+  function mergeStyle(key: string, val: any) {
+    usedKeys[key] = usedKeys[key] || 1
+    if (val && val[0] === '_') {
+      classNames[key] = val
+    } else if (key in stylePropsTransform) {
+      flatTransforms ||= {}
+      flatTransforms[key] = val
+    } else {
+      style[key] = normalizeValueWithProperty(val, key)
+    }
+  }
 
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
@@ -265,7 +276,11 @@ export const getSplitStyles: StyleSplitter = (
 
       if (keyInit === 'testID') {
         usedKeys[keyInit] = 1
-        viewProps['data-testid'] = valInit
+        if (staticConfig.isReactNative) {
+          viewProps.testId = valInit
+        } else {
+          viewProps['data-testid'] = valInit
+        }
         continue
       }
 
@@ -409,15 +424,13 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    if (state.keepVariantsAsProps) {
-      if (
-        (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) ||
-        // may want to just: not compile styled() into classnames, always do this, and always pass in all values in extras.props
-        // but we'd want to add styled({ extracted: true }) or something at compile time to save on parsing a bit...
-        (staticConfig.variants && keyInit in staticConfig.variants)
-      ) {
-        viewProps[keyInit] = valInit
-      }
+    if (
+      (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) ||
+      // may want to just: not compile styled() into classnames, always do this, and always pass in all values in extras.props
+      // but we'd want to add styled({ extracted: true }) or something at compile time to save on parsing a bit...
+      (state.keepVariantsAsProps && staticConfig.variants && keyInit in staticConfig.variants)
+    ) {
+      viewProps[keyInit] = valInit
     }
 
     /**
@@ -466,11 +479,13 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      if (isClient) {
+      if (!isServer) {
         // eslint-disable-next-line no-console
         console.log('expanded', expanded)
         // eslint-disable-next-line no-console
         console.log('usedKeys', usedKeys)
+        // eslint-disable-next-line no-console
+        console.log('current', { ...style })
       }
       // eslint-disable-next-line no-console
       console.groupEnd()
@@ -501,11 +516,8 @@ export const getSplitStyles: StyleSplitter = (
       // pseudo
       if (isPseudo) {
         if (!val) continue
-        if (key === 'enterStyle' && state.mounted) {
-          // once mounted we can ignore enterStyle
-          continue
-        }
-        pseudos[key] ??= {}
+
+        // TODO can avoid processing this if !shouldDoClasses + state is off
         const pseudoStyleObject = getSubStyle(
           key,
           val,
@@ -515,57 +527,64 @@ export const getSplitStyles: StyleSplitter = (
           state,
           conf,
           languageContext,
+          true,
           true
         )
 
-        pseudos[key] = {
-          ...pseudoStyleObject,
-          ...pseudos[key],
+        const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
+        if (!descriptor) {
+          continue
         }
 
-        if (key === 'enterStyle' || key === 'exitStyle') {
-          continue
+        if (key !== 'enterStyle') {
+          if (!shouldDoClasses || IS_STATIC) {
+            pseudos[key] ||= {}
+            Object.assign(pseudos[key], pseudoStyleObject)
+          }
         }
 
         if (shouldDoClasses) {
-          const pseudoStyles = getAtomicStyle(pseudoStyleObject, pseudoDescriptors[key])
+          const pseudoStyles = getAtomicStyle(pseudoStyleObject, descriptor)
           for (const psuedoStyle of pseudoStyles) {
-            const postfix = pseudoDescriptors[key]?.name || key // (exit/enterStyle have no pseudoDescriptors)
-            const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${postfix}`
+            const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
             if (!usedKeys[fullKey]) {
               usedKeys[fullKey] = 1
-              if (shouldDoClasses) {
-                addStyleToInsertRules(rulesToInsert, psuedoStyle)
-                mergeClassName(
-                  transforms,
-                  classNames,
-                  fullKey,
-                  psuedoStyle.identifier,
-                  isMediaOrPseudo
-                )
-              }
+              addStyleToInsertRules(rulesToInsert, psuedoStyle)
+              mergeClassName(
+                transforms,
+                classNames,
+                fullKey,
+                psuedoStyle.identifier,
+                isMediaOrPseudo
+              )
             }
           }
         } else {
-          psuedosUsed ??= {}
-          const importance = pseudoDescriptors[key].priority
+          if (!state[descriptor.stateKey || descriptor.name]) {
+            continue
+          }
+
+          psuedosUsed ||= {}
+          usedKeys[key] ||= 1
+          const importance = descriptor.priority
           for (const pkey in pseudoStyleObject) {
-            const curImportance = psuedosUsed[importance]
-            // change after curImportance
-            psuedosUsed[pkey] = importance
+            const curImportance = psuedosUsed[importance] || 0
             const val = pseudoStyleObject[pkey]
-            if (curImportance <= importance) {
+            if (importance >= curImportance) {
               psuedosUsed[pkey] = importance
-              style[pkey] = val
+              pseudos[key] ||= {}
+              pseudos[key][pkey] = val
+              mergeStyle(pkey, val)
             }
           }
         }
-
         continue
       }
 
       // media
       if (isMedia) {
+        if (!val) continue
+
         const mediaKey = key
         const mediaKeyShort = mediaKey.slice(1)
         mediaKeys.push(mediaKeyShort)
@@ -581,7 +600,10 @@ export const getSplitStyles: StyleSplitter = (
           props,
           state,
           conf,
-          languageContext
+          languageContext,
+          // TODO try true like pseudo
+          false,
+          true
         )
 
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -604,8 +626,10 @@ export const getSplitStyles: StyleSplitter = (
         } else if (mediaState[mediaKey]) {
           for (const key in mediaStyle) {
             const didMerge = mergeMediaByImportance(style, key, mediaStyle[key], usedKeys)
-            if (didMerge && key === 'fontFamily') {
-              fontFamily = mediaStyle[key]
+            if (didMerge) {
+              if (key === 'fontFamily') {
+                fontFamily = mediaStyle[key]
+              }
             }
           }
         }
@@ -624,13 +648,7 @@ export const getSplitStyles: StyleSplitter = (
 
       if (validStyleProps[key]) {
         usedKeys[key] = 1
-        if (val && val[0] === '_') {
-          classNames[key] = val
-        } else if (key in stylePropsTransform) {
-          mergeTransform(style, key, val, true)
-        } else {
-          style[key] = normalizeValueWithProperty(val, key)
-        }
+        mergeStyle(key, val)
         continue
       }
 
@@ -649,8 +667,22 @@ export const getSplitStyles: StyleSplitter = (
     styleToCSS(style)
   }
 
+  // always do this at the very end to preserve the order strictly (animations, origin)
+  // and allow proper merging of all pseudos before applying
+  if (flatTransforms) {
+    for (const key in flatTransforms) {
+      mergeTransform(style, key, flatTransforms[key], true)
+    }
+  }
+
   // add in defaults if not set:
   if (parentSplitStyles) {
+    if (process.env.NODE_ENV === 'development') {
+      if (debug === 'verbose') {
+        // eslint-disable-next-line no-console
+        console.log(`  add in styled() parent styles`, { parentSplitStyles, shouldDoClasses })
+      }
+    }
     if (process.env.TAMAGUI_TARGET === 'web') {
       for (const key in parentSplitStyles.classNames) {
         if (key in classNames) continue
@@ -825,9 +857,11 @@ export const getSubStyle = (
   state: SplitStyleState,
   conf: TamaguiInternalConfig,
   languageContext?: FontLanguageProps,
-  avoidDefaultProps?: boolean
+  avoidDefaultProps?: boolean,
+  avoidMergeTransform?: boolean
 ): ViewStyle => {
   const styleOut: ViewStyle = {}
+
   for (let key in styleIn) {
     const val = styleIn[key]
     key = conf.shorthands[key] || key
@@ -842,7 +876,7 @@ export const getSubStyle = (
     )
     if (!expanded) continue
     for (const [skey, sval] of expanded) {
-      if (skey in stylePropsTransform) {
+      if (!avoidMergeTransform && skey in stylePropsTransform) {
         mergeTransform(styleOut, skey, sval)
       } else {
         styleOut[skey] = normalizeValueWithProperty(sval, key)

package/src/helpers/getStylesAtomic.ts

@@ -23,7 +23,12 @@ export type ViewStyleWithPseudos = ViewOrTextStyle & {
   focusStyle?: ViewOrTextStyle
 }
 
-const pseudosOrdered = Object.values(pseudoDescriptors)
+// matching order of the below *0
+const pseudosOrdered = [
+  pseudoDescriptors.hoverStyle,
+  pseudoDescriptors.pressStyle,
+  pseudoDescriptors.focusStyle,
+]
 
 export function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {
   // performance optimization
@@ -102,7 +107,7 @@ const generateAtomicStyles = (
         const rules = createAtomicRules(identifier, key, value, pseudo)
         const styleObject: StyleObject = {
           property: key,
-          pseudo: pseudo?.name,
+          pseudo: pseudo?.name as any,
           value,
           identifier,
           rules,

package/src/helpers/normalizeValueWithProperty.ts

@@ -93,18 +93,24 @@ export function reverseMapClassNameToValue(key: string, className: string) {
   if (!cssRule) {
     return
   }
-  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '')
+  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()
   let res: any
-  if (unitlessNumbers[key]) {
+  if (cssVal.startsWith('var(')) {
+    res = cssVal
+  } else if (unitlessNumbers[key]) {
     res = +cssVal
   } else if (cssVal.endsWith('px')) {
     res = +cssVal.replace('px', '')
   } else {
     res = cssVal
   }
-  if (typeof res === 'string') {
-    res = res.trim()
-  }
   rcache[cssRule] = res
+  if (process.env.NODE_ENV === 'development') {
+    // ensure we are parsing properly
+    if (typeof res === 'number' && isNaN(res)) {
+      // eslint-disable-next-line no-console
+      console.log(`Tamagui invalid parsed value, NaN:`, { res, cssVal, cssRule, key, className })
+    }
+  }
   return res
 }

package/src/helpers/pseudoDescriptors.ts

@@ -1,18 +1,39 @@
 // *0 order matches to *1
 
-export const pseudoDescriptors = {
+export const pseudoDescriptors: Record<
+  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
+  PseudoDescriptor
+> = {
   hoverStyle: {
     name: 'hover',
     priority: 1,
   },
   pressStyle: {
     name: 'active',
+    stateKey: 'press',
     priority: 2,
   },
   focusStyle: {
     name: 'focus',
     priority: 3,
   },
-} as const
+  enterStyle: {
+    name: 'enter',
+    stateKey: 'unmounted',
+    priority: 4,
+  },
+  exitStyle: {
+    name: 'exit',
+    priority: 5,
+  },
+}
+
+export type PseudoDescriptor = {
+  name: string
+  priority: number
+  stateKey?: string
+}
 
-export type PseudoDescriptor = typeof pseudoDescriptors[keyof typeof pseudoDescriptors]
+export type PseudoDescriptors = {
+  [Key in keyof typeof pseudoDescriptors]: PseudoDescriptor
+}

package/src/helpers/useShallowSetState.tsx

@@ -13,7 +13,7 @@ export function useShallowSetState<State extends Object>(
             if (process.env.NODE_ENV === 'development') {
               if (debug === 'verbose') {
                 // eslint-disable-next-line no-console
-                console.warn(`update ${debugName}`, next)
+                console.log(` ▲ setState ${debugName}`, next)
               }
             }
             return { ...prev, ...next }

package/src/types.tsx

@@ -1227,7 +1227,7 @@ export type TamaguiComponentState = {
   press: boolean
   pressIn: boolean
   focus: boolean
-  mounted: boolean
+  unmounted: boolean
   mediaState?: null | Record<string, boolean>
   animation?: null | {
     style?: any

package/src/views/TamaguiProvider.tsx

@@ -6,7 +6,6 @@ import { TextAncestorContext } from '../contexts/TextAncestorContext'
 import { useMediaListeners } from '../hooks/useMedia'
 import type { TamaguiProviderProps } from '../types'
 import { ThemeProvider } from './ThemeProvider'
-import { getConfig } from '..'
 
 export function TamaguiProvider({
   children,
@@ -15,9 +14,11 @@ export function TamaguiProvider({
   ...themePropsProvider
 }: TamaguiProviderProps) {
   if (isRSC) {
-    const { themes } = getConfig()
     return (
-      <span style={{ display: 'contents' }} className={`t_${Object.keys(themes)[0] || 'light'}`}>
+      <span
+        style={{ display: 'contents' }}
+        className={`t_${Object.keys(config.themes)[0] || 'light'}`}
+      >
         {children}
       </span>
     )
@@ -41,8 +42,6 @@ export function TamaguiProvider({
     }, [config, disableInjectCSS])
   }
 
-  const { themes } = getConfig()
-
   return (
     <ButtonInsideButtonContext.Provider value={false}>
       <TextAncestorContext.Provider value={false}>
@@ -50,7 +49,7 @@ export function TamaguiProvider({
           themeClassNameOnRoot={config.themeClassNameOnRoot}
           disableRootThemeClass={config.disableRootThemeClass}
           {...themePropsProvider}
-          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(themes)[0]}
+          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}
         >
           {children}
         </ThemeProvider>

package/types/helpers/getSplitStyles.d.ts

@@ -20,7 +20,7 @@ declare type StyleSplitter = (props: {
 }, staticConfig: StaticConfigParsed, theme: ThemeParsed, state: SplitStyleState, parentSplitStyles?: SplitStylesAndProps | null, languageContext?: LanguageContextType, elementType?: string, debug?: DebugProp) => SplitStylesAndProps;
 export declare const PROP_SPLIT = "-";
 export declare const getSplitStyles: StyleSplitter;
-export declare const getSubStyle: (subKey: string, styleIn: Object, staticConfig: StaticConfigParsed, theme: ThemeParsed, props: any, state: SplitStyleState, conf: TamaguiInternalConfig, languageContext?: FontLanguageProps, avoidDefaultProps?: boolean) => ViewStyle;
+export declare const getSubStyle: (subKey: string, styleIn: Object, staticConfig: StaticConfigParsed, theme: ThemeParsed, props: any, state: SplitStyleState, conf: TamaguiInternalConfig, languageContext?: FontLanguageProps, avoidDefaultProps?: boolean, avoidMergeTransform?: boolean) => ViewStyle;
 export declare const insertSplitStyles: StyleSplitter;
 export declare const useSplitStyles: StyleSplitter;
 export {};

package/types/helpers/pseudoDescriptors.d.ts

@@ -1,16 +1,10 @@
-export declare const pseudoDescriptors: {
-    readonly hoverStyle: {
-        readonly name: "hover";
-        readonly priority: 1;
-    };
-    readonly pressStyle: {
-        readonly name: "active";
-        readonly priority: 2;
-    };
-    readonly focusStyle: {
-        readonly name: "focus";
-        readonly priority: 3;
-    };
+export declare const pseudoDescriptors: Record<'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle', PseudoDescriptor>;
+export declare type PseudoDescriptor = {
+    name: string;
+    priority: number;
+    stateKey?: string;
+};
+export declare type PseudoDescriptors = {
+    [Key in keyof typeof pseudoDescriptors]: PseudoDescriptor;
 };
-export declare type PseudoDescriptor = typeof pseudoDescriptors[keyof typeof pseudoDescriptors];
 //# sourceMappingURL=pseudoDescriptors.d.ts.map

package/types/types.d.ts

@@ -557,7 +557,7 @@ export declare type TamaguiComponentState = {
     press: boolean;
     pressIn: boolean;
     focus: boolean;
-    mounted: boolean;
+    unmounted: boolean;
     mediaState?: null | Record<string, boolean>;
     animation?: null | {
         style?: any;