@tamagui/web 1.48.10 → 1.49.0

package/src/createComponent.tsx

@@ -48,8 +48,6 @@ import { Slot } from './views/Slot'
 import { useThemedChildren } from './views/Theme'
 import { ThemeDebug } from './views/ThemeDebug'
 
-// const timer = require('@tamagui/timer').timer()
-
 // this appears to fix expo / babel not picking this up sometimes? really odd
 process.env.TAMAGUI_TARGET
 
@@ -71,10 +69,6 @@ const defaultComponentStateShouldEnter: TamaguiComponentState = {
   unmounted: 'should-enter',
 }
 
-const HYDRATION_CUTOFF = process.env.TAMAGUI_ANIMATED_PRESENCE_HYDRATION_CUTOFF
-  ? +process.env.TAMAGUI_ANIMATED_PRESENCE_HYDRATION_CUTOFF
-  : 5
-
 /**
  * All things that need one-time setup after createTamagui is called
  */
@@ -149,10 +143,6 @@ export function createComponent<
   }
 
   const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
-    // const shouldTime = staticConfig.defaultProps?.padding === 5
-    // let time: any
-    // if (shouldTime) time = timer.start()
-
     if (process.env.TAMAGUI_TARGET === 'native') {
       // todo this could be moved to a cleaner location
       if (!hasSetupBaseViews) {
@@ -223,6 +213,12 @@ export function createComponent<
     const debugProp = props['debug'] as DebugProp
     const componentName = props.componentName || staticConfig.componentName
 
+    let time: any
+    if (process.env.NODE_ENV === 'development' && debugProp === 'profile') {
+      const timer = require('@tamagui/timer').timer()
+      time = timer.start()
+    }
+
     const isHydrated = useDidFinishSSR()
 
     // conditional but if ever true stays true
@@ -236,7 +232,7 @@ export function createComponent<
     )
     stateRef.current ||= {}
 
-    // if (shouldTime) time`stateref`
+    if (process.env.NODE_ENV === 'development' && time) time`stateref`
 
     const hostRef = useRef<TamaguiElement>(null)
 
@@ -267,7 +263,7 @@ export function createComponent<
     const hasEnterStyle = !!props.enterStyle
     const needsMount = Boolean((isWeb ? isClient : true) && willBeAnimated)
 
-    // if (shouldTime) time`pre-use-state`
+    if (process.env.NODE_ENV === 'development' && time) time`pre-use-state`
 
     const initialState = willBeAnimated
       ? supportsCSSVars
@@ -285,7 +281,7 @@ export function createComponent<
     // TODO performance optimization could avoid useCallback and just have this be setStateShallow(setState, state) at call-sites
     const setStateShallow = useShallowSetState(setState, debugProp, componentName)
 
-    // if (shouldTime) time`use-state`
+    if (process.env.NODE_ENV === 'development' && time) time`use-state`
 
     let isAnimated = willBeAnimated
 
@@ -311,7 +307,7 @@ export function createComponent<
     const languageContext = useContext(FontLanguageContext)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
-    // if (shouldTime) time`use-context`
+    if (process.env.NODE_ENV === 'development' && time) time`use-context`
 
     const isTaggable = !Component || typeof Component === 'string'
     // default to tag, fallback to component (when both strings)
@@ -353,7 +349,7 @@ export function createComponent<
     const disableThemeProp = props['data-disable-theme']
     const disableTheme = (disableThemeProp && !willBeAnimated) || isHOC
 
-    // if (shouldTime) time`theme-props`
+    if (process.env.NODE_ENV === 'development' && time) time`theme-props`
 
     const themeStateProps = {
       name: props.theme,
@@ -374,9 +370,11 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development') {
       const id = useId()
 
-      if (debugProp) {
+      if (debugProp && debugProp !== 'profile') {
         // prettier-ignore
-        const name = `${componentName || Component?.displayName || Component?.name || '[Unnamed Component]'}`
+        const name = `${
+          componentName || Component?.displayName || Component?.name || "[Unnamed Component]"
+        }`;
         const type = isAnimatedReactNative ? '(animated)' : isReactNative ? '(rnw)' : ''
         const dataIs = propsIn['data-is'] || ''
         const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type} id ${id}`
@@ -394,20 +392,35 @@ export function createComponent<
           )
           // prettier-ignore
           // rome-ignore lint/nursery/noConsoleLog: <explanation>
-          console.log({ propsIn, props, state, staticConfig, elementType, themeStateProps, styledContext: { contextProps: styledContextProps, overriddenContextProps }, presence, isAnimated, isHOC, hasAnimationProp, useAnimations, propsInOrder: Object.keys(propsIn), propsOrder: Object.keys(props) })
+          console.log({
+            propsIn,
+            props,
+            state,
+            staticConfig,
+            elementType,
+            themeStateProps,
+            styledContext: { contextProps: styledContextProps, overriddenContextProps },
+            presence,
+            isAnimated,
+            isHOC,
+            hasAnimationProp,
+            useAnimations,
+            propsInOrder: Object.keys(propsIn),
+            propsOrder: Object.keys(props),
+          });
           console.groupEnd()
         }
       }
     }
 
-    // if (shouldTime) time`pre-theme-media`
+    if (process.env.NODE_ENV === 'development' && time) time`pre-theme-media`
 
     const [themeState, theme] = useThemeWithState(themeStateProps)
 
     elementType = Component || elementType
     const isStringElement = typeof elementType === 'string'
 
-    // if (shouldTime) time`theme`
+    if (process.env.NODE_ENV === 'development' && time) time`theme`
 
     const mediaState = useMedia(
       // @ts-ignore, we just pass a stable object so we can get it later with
@@ -415,7 +428,7 @@ export function createComponent<
       stateRef
     )
 
-    // if (shouldTime) time`media`
+    if (process.env.NODE_ENV === 'development' && time) time`media`
 
     setDidGetVariableValue(false)
 
@@ -452,13 +465,13 @@ export function createComponent<
       debugProp
     )
 
-    // if (shouldTime) time`split-styles`
+    if (process.env.NODE_ENV === 'development' && time) time`split-styles`
 
     stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
 
     // only listen for changes if we are using raw theme values or media space, or dynamic media (native)
     // array = space media breakpoints
-    const isMediaArray = Array.isArray(splitStyles.hasMedia)
+    const isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia)
     const shouldListenForMedia =
       didGetVariableValue() ||
       isMediaArray ||
@@ -480,11 +493,11 @@ export function createComponent<
         )
       }
 
-      if (debugProp) {
+      if (debugProp && debugProp !== 'profile') {
         console.groupCollapsed('>>>')
         // prettier-ignore
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log('props in', propsIn, 'mapped to', props, 'in order', Object.keys(props))
+        console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props));
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
         console.log('splitStyles', splitStyles)
         // rome-ignore lint/nursery/noConsoleLog: ok
@@ -535,6 +548,8 @@ export function createComponent<
       if (isAnimated && animations) {
         animationStyles = animations.style
       }
+
+      if (process.env.NODE_ENV === 'development' && time) time`animations`
     }
 
     const {
@@ -565,7 +580,7 @@ export function createComponent<
       ...nonTamaguiProps
     } = viewPropsIn
 
-    // if (shouldTime) time`destructure`
+    if (process.env.NODE_ENV === 'development' && time) time`destructure`
 
     const disabled = props.accessibilityState?.disabled || props.accessibilityDisabled
 
@@ -604,7 +619,7 @@ export function createComponent<
       }
     }
 
-    // if (shouldTime) time`events-hooks`
+    if (process.env.NODE_ENV === 'development' && time) time`events-hooks`
 
     const unPress = useCallback(() => {
       setStateShallow({
@@ -707,7 +722,7 @@ export function createComponent<
         (isWeb && noClassNames && 'hoverStyle' in props)
     )
 
-    // if (shouldTime) time`events-setup`
+    if (process.env.NODE_ENV === 'development' && time) time`events-setup`
 
     const events: TamaguiComponentEvents | null =
       shouldAttach && !isDisabled && !asChild
@@ -789,7 +804,7 @@ export function createComponent<
       })
     }
 
-    // if (shouldTime) time`events`
+    if (process.env.NODE_ENV === 'development' && time) time`events`
 
     if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
@@ -806,7 +821,7 @@ export function createComponent<
 
     const direction = props.spaceDirection || 'both'
 
-    // if (shouldTime) time`hooks`
+    if (process.env.NODE_ENV === 'development' && time) time`hooks`
 
     // since we re-render without changing children often for animations or on mount
     // we memo children here. tested this on the site homepage which has hundreds of components
@@ -878,7 +893,7 @@ export function createComponent<
     }
 
     if (process.env.NODE_ENV === 'development') {
-      if (debugProp) {
+      if (debugProp && debugProp !== 'profile') {
         const element = typeof elementType === 'string' ? elementType : 'Component'
         console.groupCollapsed(`render <${element} /> with props`)
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
@@ -894,22 +909,45 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // rome-ignore lint/nursery/noConsoleLog: <explanation>
-          console.log({ state, styleProps, themeState, isAnimated, isAnimatedReactNativeWeb, defaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, willBeAnimated, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, pseudos, content, shouldAvoidClasses, animation: props.animation, style: splitStylesStyle, staticConfig, tamaguiConfig, shouldForcePseudo, elementType, initialState, classNames })
+          console.log({
+            state,
+            styleProps,
+            themeState,
+            isAnimated,
+            isAnimatedReactNativeWeb,
+            defaultProps,
+            viewProps,
+            splitStyles,
+            animationStyles,
+            handlesPressEvents,
+            willBeAnimated,
+            isStringElement,
+            classNamesIn: props.className?.split(" "),
+            classNamesOut: viewProps.className?.split(" "),
+            events,
+            shouldAttach,
+            pseudos,
+            content,
+            shouldAvoidClasses,
+            animation: props.animation,
+            style: splitStylesStyle,
+            staticConfig,
+            tamaguiConfig,
+            shouldForcePseudo,
+            elementType,
+            initialState,
+            classNames,
+          });
         }
         console.groupEnd()
         console.groupEnd()
       }
     }
 
-    // if (shouldTime) {
-    //   time`rest`
-    //   setTimeout(() => {
-    //     if (!hasLogged) {
-    //       timer.print()
-    //     }
-    //     hasLogged = true
-    //   }, 1000)
-    // }
+    if (process.env.NODE_ENV === 'development' && time) {
+      time`rest`
+      time.print()
+    }
 
     return content
   })
@@ -948,7 +986,8 @@ export function createComponent<
     const isForwardedRefAlready = Component.render?.length === 2
     const ComponentForwardedRef = isForwardedRefAlready
       ? (Component as any)
-      : forwardRef(Component as any)
+      : // memo because theme changes otherwise would always re-render
+        memo(forwardRef(Component as any))
 
     const extendedConfig = extendStyledConfig()
     const out = themeable(ComponentForwardedRef, extendedConfig) as any

package/src/helpers/ThemeManager.tsx

@@ -1,6 +1,5 @@
-import { getThemes, getTokens } from '../config'
+import { getThemes } from '../config'
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
-import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
 import { ThemeParsed, ThemeProps } from '../types'
 
 type ThemeListener = (
@@ -23,6 +22,7 @@ export type ThemeManagerState = {
   className?: string
   parentName?: string
   componentName?: string
+  inverse?: boolean
 }
 
 const emptyState: ThemeManagerState = { name: '' }
@@ -56,7 +56,7 @@ export class ThemeManager {
           `No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions.`
         )
       }
-      throw `❌`
+      throw `❌ 0`
     }
 
     // no change no props
@@ -311,6 +311,7 @@ function getState(
         className: getNextThemeClassName(found),
         parentName,
         componentName,
+        inverse: props.inverse,
       }
       break
     }

package/src/helpers/getSplitStyles.tsx

@@ -181,11 +181,24 @@ export const getSplitStyles: StyleSplitter = (
     debug,
   }
 
-  if (process.env.NODE_ENV === 'development' && debug && isClient) {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    debug &&
+    debug !== 'profile' &&
+    isClient
+  ) {
     console.groupCollapsed('getSplitStyles (collapsed)')
     // prettier-ignore
     // rome-ignore lint/nursery/noConsoleLog: ok
-    console.log({ props, staticConfig, shouldDoClasses, styleProps, componentState, styleState, theme: { ...theme } })
+    console.log({
+      props,
+      staticConfig,
+      shouldDoClasses,
+      styleProps,
+      componentState,
+      styleState,
+      theme: { ...theme },
+    });
     console.groupEnd()
   }
 
@@ -526,7 +539,14 @@ export const getSplitStyles: StyleSplitter = (
       if (isClient) {
         // prettier-ignore
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log({ variants, variant: variants?.[keyInit], isVariant, isHOCShouldPassThrough, curProps: { ...styleState.curProps }, parentStaticConfig })
+        console.log({
+          variants,
+          variant: variants?.[keyInit],
+          isVariant,
+          isHOCShouldPassThrough,
+          curProps: { ...styleState.curProps },
+          parentStaticConfig,
+        });
       }
       console.groupEnd()
     }
@@ -598,7 +618,18 @@ export const getSplitStyles: StyleSplitter = (
       if (!isServer && isDevTools) {
         // prettier-ignore
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log({ expanded, styleProps, componentState, isVariant, variant: variants?.[keyInit], shouldPassProp, isHOCShouldPassThrough, theme, usedKeys: { ...usedKeys }, curProps: { ...styleState.curProps } })
+        console.log({
+          expanded,
+          styleProps,
+          componentState,
+          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,
@@ -687,10 +718,10 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed('pseudo (classes)', key)
+            console.groupCollapsed("pseudo (classes)", key);
             // prettier-ignore
             // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log({ pseudoStyleObject, pseudoStyles })
+            console.log({ pseudoStyleObject, pseudoStyles });
             console.groupEnd()
           }
 
@@ -727,10 +758,16 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed('pseudo', key, { isDisabled })
+            console.groupCollapsed("pseudo", key, { isDisabled });
             // prettier-ignore
             // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log(pseudoStyleObject, { isDisabled, descriptorKey, descriptor, pseudoState, state: { ...componentState } })
+            console.log(pseudoStyleObject, {
+              isDisabled,
+              descriptorKey,
+              descriptor,
+              pseudoState,
+              state: { ...componentState },
+            });
             console.groupEnd()
           }
 
@@ -759,7 +796,12 @@ export const getSplitStyles: StyleSplitter = (
               if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
                 // prettier-ignore
                 // rome-ignore lint/nursery/noConsoleLog: <explanation>
-                console.log('    subKey', pkey, shouldMerge, { importance, curImportance, pkey, val })
+                console.log("    subKey", pkey, shouldMerge, {
+                  importance,
+                  curImportance,
+                  pkey,
+                  val,
+                });
               }
             }
           }
@@ -806,7 +848,7 @@ export const getSplitStyles: StyleSplitter = (
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           // prettier-ignore
           // rome-ignore lint/nursery/noConsoleLog: ok
-          console.log(`  📺 ${key}`, { key, mediaStyle, props, shouldDoClasses })
+          console.log(`  📺 ${key}`, { key, val, mediaStyle, props, shouldDoClasses });
         }
 
         // for some reason 'space' in val upsetting next ssr during prod build
@@ -842,7 +884,7 @@ export const getSplitStyles: StyleSplitter = (
             }
           }
 
-          const mediaStyles = getStylesAtomic(mediaStyle)
+          const mediaStyles = getStylesAtomic(mediaStyle, debug)
           const priority = mediaStylesSeen
           mediaStylesSeen += 1
 
@@ -1123,7 +1165,7 @@ export const getSplitStyles: StyleSplitter = (
           styleState.fontFamily = overrideFace
         }
       }
-      if (process.env.NODE_ENV === 'development' && debug) {
+      if (process.env.NODE_ENV === 'development' && debug && debug !== 'profile') {
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
         console.log(`Found fontFamily native: ${style.fontFamily}`, faceInfo)
       }
@@ -1138,7 +1180,15 @@ export const getSplitStyles: StyleSplitter = (
     if (isDevTools) {
       console.groupCollapsed('  🔹 ===>')
       // prettier-ignore
-      const logs = { ...result, componentState, transforms, viewProps, viewPropsOrder: Object.keys(viewProps), rulesToInsert, parentSplitStyles }
+      const logs = {
+        ...result,
+        componentState,
+        transforms,
+        viewProps,
+        viewPropsOrder: Object.keys(viewProps),
+        rulesToInsert,
+        parentSplitStyles,
+      };
       for (const key in logs) {
         // rome-ignore lint/nursery/noConsoleLog: ok
         console.log(key, logs[key])

package/src/helpers/getStylesAtomic.ts

@@ -6,77 +6,55 @@
 import { StyleObject, simpleHash } from '@tamagui/helpers'
 
 import { getConfig } from '../config'
-import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
+import type { DebugProp, TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
 import { defaultOffset } from './defaultOffset'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
-import { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'
+import {
+  PseudoDescriptor,
+  pseudoDescriptors,
+  pseudoDescriptorsBase,
+} from './pseudoDescriptors'
 
 // refactor this file away next...
 
-// matching order of the below *0
-const pseudosOrdered = [
-  pseudoDescriptors.hoverStyle,
-  pseudoDescriptors.pressStyle,
-  pseudoDescriptors.focusStyle,
-]
-
-export function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {
-  // performance optimization
-  if (!(stylesIn.hoverStyle || stylesIn.pressStyle || stylesIn.focusStyle)) {
-    return generateAtomicStyles(stylesIn)
-  }
-
-  // only for pseudos
-  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn
+export function getStylesAtomic(stylesIn: ViewStyleWithPseudos, debug?: DebugProp) {
   let res: StyleObject[] = []
-  // *1 order matched to *0
-  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {
-    if (!style) continue
-    const pseudo = pseudosOrdered[index]
-    res = [...res, ...generateAtomicStyles(style, pseudo)]
+  for (const pseudoName in pseudoDescriptorsBase) {
+    const pseudoStyle = stylesIn[pseudoName]
+    if (pseudoStyle) {
+      res = [
+        ...res,
+        ...generateAtomicStyles(pseudoStyle, pseudoDescriptorsBase[pseudoName]),
+      ]
+    }
+  }
+  res = [...res, ...generateAtomicStyles(stylesIn)]
+  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+    // rome-ignore lint/nursery/noConsoleLog: <explanation>
+    console.log(` 🪮 getStylesAtomic`, { stylesIn, res })
   }
   return res
 }
 
 let conf: TamaguiInternalConfig
 
+// mutates...
+
 export const generateAtomicStyles = (
-  styleIn: ViewStyleWithPseudos,
+  style: ViewStyleWithPseudos,
   pseudo?: PseudoDescriptor
 ): StyleObject[] => {
-  if (!styleIn) return []
+  if (!style) return []
 
   conf = conf || getConfig()
 
-  // were converting to css styles
-  const style = { ...styleIn } as Record<string, string | null | undefined>
-
-  // transform
-  if ('transform' in style && Array.isArray(style.transform)) {
-    style.transform = style.transform
-      .map(
-        // { scale: 2 } => 'scale(2)'
-        // { translateX: 20 } => 'translateX(20px)'
-        // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
-        (transform) => {
-          const type = Object.keys(transform)[0]
-          const value = transform[type]
-          if (type === 'matrix' || type === 'matrix3d') {
-            return `${type}(${value.join(',')})`
-          }
-          return `${type}(${normalizeValueWithProperty(value, type)})`
-        }
-      )
-      .join(' ')
-  }
-
   styleToCSS(style)
 
   const out: StyleObject[] = []
   for (const key in style) {
     const value = normalizeValueWithProperty(style[key], key)
-    if (value == null || value == undefined) continue
-
+    if (key in pseudoDescriptors) continue
+    if (value == null) continue
     const hash = simpleHash(`${value}`)
     const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
     const shortProp = conf.inverseShorthands[key] || key
@@ -96,6 +74,25 @@ export const generateAtomicStyles = (
 }
 
 export function styleToCSS(style: Record<string, any>) {
+  // transform
+  if ('transform' in style && Array.isArray(style.transform)) {
+    style.transform = style.transform
+      .map(
+        // { scale: 2 } => 'scale(2)'
+        // { translateX: 20 } => 'translateX(20px)'
+        // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+        (transform) => {
+          const type = Object.keys(transform)[0]
+          const value = transform[type]
+          if (type === 'matrix' || type === 'matrix3d') {
+            return `${type}(${value.join(',')})`
+          }
+          return `${type}(${normalizeValueWithProperty(value, type)})`
+        }
+      )
+      .join(' ')
+  }
+
   // box-shadow
   const { shadowOffset, shadowRadius, shadowColor } = style
   if (style.shadowRadius) {

package/src/helpers/normalizeValueWithProperty.ts

@@ -16,6 +16,8 @@ export function normalizeValueWithProperty(value: any, property?: string): any {
     return value
   }
   let res = value
+  // shadowOffset etc
+  if (value && typeof value === 'object') return value
   if (typeof value === 'number') {
     res = `${value}px`
   } else if (property) {

package/src/helpers/propMapper.ts

@@ -42,9 +42,18 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
   const { variants } = staticConfig
 
   // prettier-ignore
-  if (process.env.NODE_ENV === 'development' && fontFamily && fontFamily[0] === '$' && !(fontFamily in conf.fontsParsed)) {
+  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(', ')}`)
+    console.warn(
+      `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(conf.fontsParsed).join(
+        ", ",
+      )}`,
+    );
   }
 
   if (variants && key in variants && value != null) {

package/src/helpers/pseudoDescriptors.ts

@@ -1,9 +1,7 @@
 // *0 order matches to *1
 
-export const pseudoDescriptors: Record<
-  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
-  PseudoDescriptor
-> = {
+export const pseudoDescriptorsBase = {
+  // order of keys here important! in priority order
   hoverStyle: {
     name: 'hover',
     priority: 1,
@@ -17,6 +15,13 @@ export const pseudoDescriptors: Record<
     name: 'focus',
     priority: 3,
   },
+} as const
+
+export const pseudoDescriptors: Record<
+  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
+  PseudoDescriptor
+> = {
+  ...pseudoDescriptorsBase,
   enterStyle: {
     name: 'enter',
     stateKey: 'unmounted',