@tamagui/web 1.129.12 → 1.129.13

package/src/helpers/getSplitStyles.tsx

@@ -41,6 +41,7 @@ import type {
   DebugProp,
   GetStyleResult,
   GetStyleState,
+  AllGroupContexts,
   IsMediaType,
   MediaQueryKey,
   PseudoPropKeys,
@@ -65,7 +66,11 @@ import { isActiveTheme } from './isActiveTheme'
 import { log } from './log'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import { propMapper } from './propMapper'
-import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
+import {
+  type PseudoDescriptorKey,
+  pseudoDescriptors,
+  pseudoPriorities,
+} from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { sortString } from './sortString'
 import { transformsToString } from './transformsToString'
@@ -87,6 +92,7 @@ type StyleSplitter = (
   styleProps: SplitStyleProps,
   parentSplitStyles?: GetStyleResult | null,
   context?: ComponentContextI,
+  groupContext?: AllGroupContexts | null,
   // web-only
   elementType?: string,
   startedUnhydrated?: boolean,
@@ -133,6 +139,7 @@ export const getSplitStyles: StyleSplitter = (
   styleProps,
   parentSplitStyles,
   componentContext,
+  groupContext,
   elementType,
   startedUnhydrated,
   debug
@@ -165,7 +172,6 @@ export const getSplitStyles: StyleSplitter = (
 
   const viewProps: GetStyleResult['viewProps'] = {}
   const mediaState = styleProps.mediaState || globalMediaState
-  const usedKeys: Record<string, number> = {}
   const shouldDoClasses =
     acceptsClassName && isWeb && !styleProps.noClass && !styleProps.isAnimated
   const rulesToInsert: RulesToInsert =
@@ -202,7 +208,7 @@ export const getSplitStyles: StyleSplitter = (
     staticConfig,
     style: null,
     theme,
-    usedKeys,
+    usedKeys: {},
     viewProps,
     context: componentContext,
     debug,
@@ -234,18 +240,19 @@ export const getSplitStyles: StyleSplitter = (
     debug !== 'profile' &&
     isClient
   ) {
-    console.groupCollapsed('getSplitStyles (collapsed)')
-    log({
-      props,
-      staticConfig,
-      shouldDoClasses,
-      styleProps,
-      rulesToInsert,
-      componentState,
-      styleState,
-      theme: { ...theme },
-    })
-    console.groupEnd()
+    if (isDevTools) {
+      console.groupCollapsed('🔹 getSplitStyles 👇')
+      log({
+        props,
+        staticConfig,
+        shouldDoClasses,
+        styleProps,
+        rulesToInsert,
+        componentState,
+        styleState,
+        theme: { ...theme },
+      })
+    }
   }
 
   const { asChild } = props
@@ -298,7 +305,6 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (keyInit === 'className') continue // handled above first
-    if (keyInit in usedKeys) continue
 
     if (process.env.TAMAGUI_TARGET === 'web') {
       // skip the webViewFlexCompatStyles when asChild on web
@@ -329,7 +335,6 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
-    const valInitType = typeof valInit
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept)
 
     // this is all for partially optimized (not flattened)... maybe worth removing?
@@ -499,13 +504,14 @@ export const getSplitStyles: StyleSplitter = (
 
     if (isMediaOrPseudo && keyInit.startsWith('$group-')) {
       const parts = keyInit.split('-')
+      const plen = parts.length
       if (
         // check if its actually a simple group selector to avoid breaking selectors
-        parts.length === 2 ||
-        (parts.length === 3 && pseudoPriorities[parts[parts.length - 1]])
+        plen === 2 ||
+        (plen === 3 && pseudoPriorities[parts[parts.length - 1]])
       ) {
         const name = parts[1]
-        if (componentContext?.groups.subscribe && !componentContext?.groups.state[name]) {
+        if (groupContext && !groupContext?.[name]) {
           keyInit = keyInit.replace('$group-', `$group-true-`)
         }
       }
@@ -545,6 +551,7 @@ export const getSplitStyles: StyleSplitter = (
           variant: variants?.[keyInit],
           isVariant,
           isHOCShouldPassThrough,
+          usedKeys: { ...styleState.usedKeys },
           parentStaticConfig,
         })
       }
@@ -616,7 +623,6 @@ export const getSplitStyles: StyleSplitter = (
       }
 
       if (val == null) return
-      if (key in usedKeys) return
 
       if (process.env.TAMAGUI_TARGET === 'native') {
         if (key === 'pointerEvents') {
@@ -629,7 +635,7 @@ export const getSplitStyles: StyleSplitter = (
         (!isHOC && isValidStyleKey(key, validStyles, accept)) ||
         (process.env.TAMAGUI_TARGET === 'native' && isAndroid && key === 'elevation')
       ) {
-        mergeStyle(styleState, key, val)
+        mergeStyle(styleState, key, val, 1)
         return
       }
 
@@ -703,7 +709,6 @@ export const getSplitStyles: StyleSplitter = (
 
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle[StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`
-            if (fullKey in usedKeys) continue
             addStyleToInsertRules(rulesToInsert, psuedoStyle)
             classNames[fullKey] = psuedoStyle[StyleObjectIdentifier]
           }
@@ -740,7 +745,7 @@ export const getSplitStyles: StyleSplitter = (
             if (isDisabled) {
               applyDefaultStyle(pkey, styleState)
             } else {
-              const curImportance = usedKeys[pkey] || 0
+              const curImportance = styleState.usedKeys[pkey] || 0
               const shouldMerge = importance >= curImportance
 
               if (shouldMerge) {
@@ -749,7 +754,7 @@ export const getSplitStyles: StyleSplitter = (
                   pseudos[key] ||= {}
                   pseudos[key][pkey] = val
                 }
-                mergeStyle(styleState, pkey, val)
+                mergeStyle(styleState, pkey, val, importance)
               }
 
               if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -768,7 +773,7 @@ export const getSplitStyles: StyleSplitter = (
             // mark usedKeys based on pseudoStyleObject
             for (const key in val) {
               const k = shorthands[key] || key
-              usedKeys[k] = Math.max(importance, usedKeys[k] || 0)
+              styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0)
             }
           }
         }
@@ -813,6 +818,9 @@ export const getSplitStyles: StyleSplitter = (
           })
         }
 
+        const priority = mediaStylesSeen
+        mediaStylesSeen += 1
+
         if (shouldDoClasses) {
           const mediaStyle = getSubStyle(styleState, key, val, false)
 
@@ -823,12 +831,12 @@ export const getSplitStyles: StyleSplitter = (
               const importance = getMediaImportanceIfMoreImportant(
                 mediaKeyShort,
                 'space',
-                usedKeys,
+                styleState,
                 true
               )
               if (importance) {
                 space = val['space']
-                usedKeys['space'] = importance
+                styleState.usedKeys['space'] = importance
                 if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
                   log(
                     `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
@@ -839,8 +847,6 @@ export const getSplitStyles: StyleSplitter = (
           }
 
           const mediaStyles = getCSSStylesAtomic(mediaStyle)
-          const priority = mediaStylesSeen
-          mediaStylesSeen += 1
 
           for (const style of mediaStyles) {
             // handle nested media:
@@ -872,7 +878,6 @@ export const getSplitStyles: StyleSplitter = (
               style[StyleObjectProperty]
             }${subKey}${PROP_SPLIT}${mediaKeyShort}${style[StyleObjectPseudo] || ''}`
 
-            if (fullKey in usedKeys) continue
             addStyleToInsertRules(rulesToInsert, out as any)
             classNames[fullKey] = out[StyleObjectIdentifier]
           }
@@ -922,7 +927,7 @@ export const getSplitStyles: StyleSplitter = (
                   val,
                   oppositeVal,
                 })
-                mergeStyle(styleState, subKey, mediaStyle[subKey])
+                mergeStyle(styleState, subKey, mediaStyle[subKey], priority)
               }
             } else if (
               !(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))
@@ -934,9 +939,9 @@ export const getSplitStyles: StyleSplitter = (
             const groupName = groupInfo.name
 
             // $group-x
-            const groupContext = componentContext?.groups.state[groupName]
+            const groupState = groupContext?.[groupName]?.state
 
-            if (!groupContext) {
+            if (!groupState) {
               if (process.env.NODE_ENV === 'development' && debug) {
                 log(`No parent with group prop, skipping styles: ${groupName}`)
               }
@@ -954,12 +959,15 @@ export const getSplitStyles: StyleSplitter = (
               let isActive = mediaState?.[groupMediaKey]
 
               // use parent styles if width and height hardcoded we can do an inline media match and avoid double render
-              if (!mediaState && groupContext.layout) {
-                isActive = mediaKeyMatch(groupMediaKey, groupContext.layout)
+              if (!mediaState && groupState.layout) {
+                isActive = mediaKeyMatch(groupMediaKey, groupState.layout)
               }
 
               if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-                log(` 🏘️ GROUP media ${groupMediaKey} active? ${isActive}`)
+                log(` 🏘️ GROUP media ${groupMediaKey} active? ${isActive}`, {
+                  ...mediaState,
+                  usedKeys: { ...styleState.usedKeys },
+                })
               }
               if (!isActive) {
                 // ensure we set the defaults so animations work
@@ -978,15 +986,19 @@ export const getSplitStyles: StyleSplitter = (
               const componentGroupPseudoState = (
                 componentGroupState ||
                 // fallback to context initially
-                componentContext.groups.state[groupName]
-              ).pseudo
+                groupContext?.[groupName].state
+              )?.pseudo
 
               const isActive = componentGroupPseudoState?.[groupPseudoKey]
               const priority = pseudoPriorities[groupPseudoKey]
 
               if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
                 log(
-                  ` 🏘️ GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority}`
+                  ` 🏘️ GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority}`,
+                  {
+                    componentGroupPseudoState: { ...componentGroupPseudoState },
+                    usedKeys: { ...styleState.usedKeys },
+                  }
                 )
               }
               if (!isActive) {
@@ -1008,7 +1020,6 @@ export const getSplitStyles: StyleSplitter = (
               mediaKeyShort,
               key,
               val,
-              usedKeys,
               mediaState[mediaKeyShort],
               importanceBump,
               debug
@@ -1053,6 +1064,7 @@ export const getSplitStyles: StyleSplitter = (
         log(` ✔️ expand complete`, keyInit)
         log('style', { ...styleState.style })
         log('viewProps', { ...viewProps })
+        log('transforms', { ...styleState.flatTransforms })
       } catch {
         // RN can run into PayloadTooLargeError: request entity too large
       }
@@ -1355,8 +1367,11 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-    if (isDevTools) {
+  if (process.env.NODE_ENV === 'development' && debug && debug !== 'profile') {
+    if (isClient && isDevTools) {
+      // end collapsed log above
+      console.groupEnd()
+
       console.groupCollapsed('🔹 getSplitStyles ===>')
       try {
         // prettier-ignore
@@ -1398,11 +1413,19 @@ function mergeStyle(
   styleState: GetStyleState,
   key: string,
   val: any,
+  importance: number,
   disableNormalize = false
 ) {
-  const { viewProps, styleProps, staticConfig } = styleState
+  const { viewProps, styleProps, staticConfig, usedKeys } = styleState
+
+  const existingImportance = usedKeys[key] || 0
+  if (existingImportance > importance) {
+    return
+  }
+
   if (key in stylePropsTransform) {
     styleState.flatTransforms ||= {}
+    usedKeys[key] = importance
     styleState.flatTransforms[key] = val
   } else {
     const shouldNormalize = isWeb && !disableNormalize && !styleProps.noNormalize
@@ -1415,6 +1438,7 @@ function mergeStyle(
       viewProps[key] = out
     } else {
       styleState.style ||= {}
+      usedKeys[key] = importance
       styleState.style[key] =
         // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
         // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
@@ -1481,11 +1505,10 @@ const useInsertEffectCompat = isWeb
   : () => {}
 
 // perf: ...args a bit expensive on native
-export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k) => {
-  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k)
+export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l) => {
+  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l)
 
   if (process.env.TAMAGUI_TARGET !== 'native') {
-    // j = startedUnhydrated
     useInsertEffectCompat(() => {
       insertStyleRules(res.rulesToInsert)
     }, [res.rulesToInsert])
@@ -1574,15 +1597,15 @@ function mergeMediaByImportance(
   mediaKey: string,
   key: string,
   value: any,
-  importancesUsed: Record<string, number>,
   isSizeMedia: boolean,
   importanceBump?: number,
   debugProp?: DebugProp
 ) {
+  const usedKeys = styleState.usedKeys
   let importance = getMediaImportanceIfMoreImportant(
     mediaKey,
     key,
-    importancesUsed,
+    styleState,
     isSizeMedia
   )
   if (importanceBump) {
@@ -1590,26 +1613,24 @@ function mergeMediaByImportance(
   }
   if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
     log(
-      `mergeMediaByImportance ${key} importance existing ${importancesUsed[key]} next ${importance}`
+      `mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`
     )
   }
   if (importance === null) {
     return false
   }
-  importancesUsed[key] = importance
-
   if (key in pseudoDescriptors) {
-    const descriptor = pseudoDescriptors[key]
+    const descriptor = pseudoDescriptors[key as PseudoDescriptorKey]
     const descriptorKey = descriptor.stateKey || descriptor.name
     const isDisabled = styleState.componentState[descriptorKey] === false
     if (isDisabled) {
       return false
     }
     for (const subKey in value) {
-      mergeStyle(styleState, subKey, value[subKey])
+      mergeStyle(styleState, subKey, value[subKey], importance)
     }
   } else {
-    mergeStyle(styleState, key, value)
+    mergeStyle(styleState, key, value, importance)
   }
 
   return true
@@ -1639,6 +1660,6 @@ function applyDefaultStyle(pkey: string, styleState: GetStyleState) {
     !(pkey in styleState.usedKeys) &&
     (!styleState.style || !(pkey in styleState.style))
   ) {
-    mergeStyle(styleState, pkey, defaultValues)
+    mergeStyle(styleState, pkey, defaultValues, 1)
   }
 }

package/src/helpers/pseudoDescriptors.ts

@@ -4,51 +4,47 @@ export const pseudoDescriptorsBase = {
   // order of keys here important! in priority order
   hoverStyle: {
     name: 'hover',
-    priority: 1,
+    priority: 2,
   },
   pressStyle: {
     name: 'active',
     stateKey: 'press',
-    priority: 2,
+    priority: 3,
   },
   focusVisibleStyle: {
     name: 'focus-visible',
-    priority: 3,
+    priority: 4,
     stateKey: 'focusVisible',
   },
   focusStyle: {
     name: 'focus',
-    priority: 3,
+    priority: 4,
   },
   focusWithinStyle: {
     name: 'focus-within',
-    priority: 3,
+    priority: 4,
     stateKey: 'focusWithin',
   },
   disabledStyle: {
     name: 'disabled',
-    priority: 4,
+    priority: 5,
     stateKey: 'disabled',
   },
 } as const
 
 export const pseudoPriorities = {
-  hover: 1,
-  press: 2,
-  focus: 3,
-  focusVisible: 3,
-  focusWithin: 3,
-  disabled: 4,
+  hover: pseudoDescriptorsBase.hoverStyle.priority,
+  press: pseudoDescriptorsBase.pressStyle.priority,
+  focus: pseudoDescriptorsBase.focusStyle.priority,
+  focusVisible: pseudoDescriptorsBase.focusVisibleStyle.priority,
+  focusWithin: pseudoDescriptorsBase.focusWithinStyle.priority,
+  disabled: pseudoDescriptorsBase.disabledStyle.priority,
 }
 
+export type PseudoDescriptorKey = keyof typeof pseudoDescriptorsBase
+
 export const pseudoDescriptors: Record<
-  | 'hoverStyle'
-  | 'pressStyle'
-  | 'focusStyle'
-  | 'focusVisibleStyle'
-  | 'focusWithinStyle'
-  | 'enterStyle'
-  | 'exitStyle',
+  PseudoDescriptorKey | 'enterStyle' | 'exitStyle',
   PseudoDescriptor
 > = {
   ...pseudoDescriptorsBase,

package/src/helpers/subscribeToContextGroup.tsx

@@ -1,55 +1,91 @@
-import { getMediaState } from '../hooks/useMedia'
-import type { ComponentContextI, GroupState, TamaguiComponentState } from '../types'
 import { mergeIfNotShallowEqual } from '@tamagui/is-equal-shallow'
+import { getMediaState } from '../hooks/useMedia'
+import type { ComponentSetStateShallow, DisposeFn, AllGroupContexts } from '../types'
 
-export const subscribeToContextGroup = ({
-  setStateShallow,
-  pseudoGroups,
-  mediaGroups,
-  componentContext,
-  state,
-}: {
-  setStateShallow: (next: Partial<TamaguiComponentState>) => void
+type SubscribeToContextGroupProps = {
+  setStateShallow: ComponentSetStateShallow
   pseudoGroups?: Set<string>
   mediaGroups?: Set<string>
-  componentContext: ComponentContextI
-  state: TamaguiComponentState
-}) => {
-  // parent group pseudo listening
+  groupContext: AllGroupContexts
+}
+
+export const subscribeToContextGroup = (props: SubscribeToContextGroupProps) => {
+  const { pseudoGroups, mediaGroups, groupContext } = props
   if (pseudoGroups || mediaGroups) {
-    if (process.env.NODE_ENV === 'development' && !componentContext.groups) {
+    if (process.env.NODE_ENV === 'development' && !groupContext) {
       console.debug(`No context group found`)
     }
 
-    return componentContext.groups?.subscribe?.((name, { layout, pseudo }) => {
-      const current: GroupState = state.group?.[name] || {
+    const disposables = new Set<DisposeFn>()
+
+    if (pseudoGroups) {
+      for (const name of [...pseudoGroups]) {
+        disposables.add(createGroupListener(name, props))
+      }
+    }
+
+    if (mediaGroups) {
+      for (const name of [...mediaGroups]) {
+        disposables.add(createGroupListener(name, props))
+      }
+    }
+
+    return () => {
+      disposables.forEach((d) => d())
+    }
+  }
+}
+
+const createGroupListener = (
+  name: string,
+  {
+    setStateShallow,
+    pseudoGroups,
+    mediaGroups,
+    groupContext,
+  }: SubscribeToContextGroupProps
+): DisposeFn => {
+  const parent = groupContext?.[name]
+
+  if (!parent) {
+    return () => {}
+  }
+
+  return parent.subscribe(({ layout, pseudo }) => {
+    setStateShallow((prev) => {
+      let didChange = false
+      const group = prev.group?.[name] || {
         pseudo: {},
         media: {},
       }
 
-      if (pseudo && pseudoGroups?.has(String(name))) {
-        // we emit a partial so merge it + change reference so mergeIfNotShallowEqual runs
-        Object.assign(current.pseudo!, pseudo)
-        persist()
+      if (pseudo && pseudoGroups?.has(name)) {
+        group.pseudo ||= {}
+        const next = mergeIfNotShallowEqual(group.pseudo, pseudo)
+        if (next !== group.pseudo) {
+          Object.assign(group.pseudo, pseudo)
+          didChange = true
+        }
       } else if (layout && mediaGroups) {
+        group.media ||= {}
         const mediaState = getMediaState(mediaGroups, layout)
-        const next = mergeIfNotShallowEqual(current.media || {}, mediaState)
-        if (next !== current.media) {
-          Object.assign(current.media!, next)
-          persist()
+        const next = mergeIfNotShallowEqual(group.media, mediaState)
+        if (next !== group.media) {
+          Object.assign(group.media, next)
+          didChange = true
         }
       }
 
-      function persist() {
-        // force it to be referentially different so it always updates
-        const group = {
-          ...state.group,
-          [name]: current,
+      if (didChange) {
+        return {
+          group: {
+            ...prev.group,
+            [name]: group,
+          },
         }
-        setStateShallow({
-          group,
-        })
       }
+
+      return prev
     })
-  }
+  })
 }

package/src/hooks/useComponentState.ts

@@ -11,8 +11,6 @@ import { isObj } from '../helpers/isObj'
 import { log } from '../helpers/log'
 import type {
   ComponentContextI,
-  ComponentStateListener,
-  GroupStateListener,
   StackProps,
   StaticConfig,
   TamaguiComponentState,
@@ -24,7 +22,7 @@ import type {
 
 export const useComponentState = (
   props: StackProps | TextProps | Record<string, any>,
-  { animationDriver }: ComponentContextI,
+  animationDriver: ComponentContextI['animationDriver'],
   staticConfig: StaticConfig,
   config: TamaguiInternalConfig
 ) => {
@@ -45,7 +43,6 @@ export const useComponentState = (
     'animation' in props || (props.style && hasAnimatedStyleValue(props.style))
   )
 
-  // disable for now still ssr issues
   const supportsCSS = animationDriver?.supportsCSS
   const curStateRef = stateRef.current
 
@@ -125,7 +122,6 @@ export const useComponentState = (
   // unsafe yea yea
   if (stateRef.current.nextComponentState) {
     Object.assign(state, stateRef.current.nextComponentState)
-    stateRef.current.nextComponentState = undefined
   }
 
   // only web server + initial client render run this when not hydrated:
@@ -145,7 +141,7 @@ export const useComponentState = (
     setState((_) => ({ ...state }))
   }
 
-  const groupName = props.group as any as string
+  const groupName = props.group as any as string | undefined
 
   const setStateShallow = useCreateShallowSetState(setState, props.debug)
 
@@ -205,46 +201,6 @@ export const useComponentState = (
     }
   }
 
-  if (groupName && !curStateRef.group) {
-    const listeners = new Set<GroupStateListener>()
-    curStateRef.group = {
-      listeners,
-      emit(name, state) {
-        listeners.forEach((l) => l(name, state))
-      },
-      subscribe(cb) {
-        listeners.add(cb)
-        setStateShallow({ hasDynGroupChildren: true })
-        return () => {
-          listeners.delete(cb)
-          if (listeners.size === 0) {
-            setStateShallow({ hasDynGroupChildren: false })
-          }
-        }
-      },
-    }
-  }
-
-  if (!curStateRef.stateEmitter && hasAnimationProp) {
-    const listeners = new Set<ComponentStateListener>()
-    curStateRef.stateEmitter = {
-      listeners,
-      emit(state) {
-        listeners.forEach((l) => l(state))
-      },
-      subscribe(cb) {
-        listeners.add(cb)
-        setStateShallow({ hasDynGroupChildren: true })
-        return () => {
-          listeners.delete(cb)
-          if (listeners.size === 0) {
-            setStateShallow({ hasDynGroupChildren: false })
-          }
-        }
-      },
-    }
-  }
-
   return {
     startedUnhydrated,
     curStateRef,