@tamagui/web 1.55.2 → 1.56.0

package/src/createComponent.tsx

@@ -1,6 +1,6 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
 import { isClient, isServer, isWeb } from '@tamagui/constants'
-import { validStyles } from '@tamagui/helpers'
+import { composeEventHandlers, validStyles } from '@tamagui/helpers'
 import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
 import React, {
   Children,
@@ -21,18 +21,23 @@ import { getConfig, onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
 import { ComponentContext } from './contexts/ComponentContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
-import { createShallowSetState } from './helpers/createShallowSetState'
+import {
+  createShallowSetState,
+  mergeIfNotShallowEqual,
+} from './helpers/createShallowSetState'
 import { useSplitStyles } from './helpers/getSplitStyles'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { themeable } from './helpers/themeable'
-import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
+import { mediaKeyMatch, setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import { hooks } from './setupHooks'
 import {
+  ComponentContextI,
   DebugProp,
   DisposeFn,
-  GroupContextType,
+  GroupState,
+  LayoutEvent,
   SpaceDirection,
   SpaceValue,
   SpacerProps,
@@ -235,6 +240,7 @@ export function createComponent<
     // [animated, inversed]
     const stateRef = useRef(
       undefined as any as {
+        hasMeasured?: boolean
         hasAnimated?: boolean
         themeShallow?: boolean
         isListeningToTheme?: boolean
@@ -291,13 +297,17 @@ export function createComponent<
     let setStateShallow = createShallowSetState(setState)
 
     const groupName = props.group as any as string
+    const groupClassName = groupName ? `t_group_${props.group}` : ''
+
     if (groupName) {
       // when we set state we also set our group state and emit an event for children listening:
       const groupContextState = componentContext.groups.state
       const og = setStateShallow
       setStateShallow = (state) => {
         og(state)
-        componentContext.groups.emit(groupName, state)
+        componentContext.groups.emit(groupName, {
+          pseudo: state,
+        })
         // and mutate the current since its concurrent safe (children throw it in useState on mount)
         const next = {
           ...groupContextState[groupName],
@@ -502,6 +512,11 @@ export function createComponent<
       debugProp
     )
 
+    // hide strategy will set this opacity = 0 until measured
+    if (props.group && props.untilMeasured === 'hide' && !stateRef.current.hasMeasured) {
+      splitStyles.style.opacity = 0
+    }
+
     if (process.env.NODE_ENV === 'development' && time) time`split-styles`
 
     stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
@@ -616,6 +631,12 @@ export function createComponent<
       ...nonTamaguiProps
     } = viewPropsIn
 
+    if (process.env.NODE_ENV === 'development' && props.untilMeasured && !props.group) {
+      console.warn(
+        `You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.\n\nIf you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`
+      )
+    }
+
     if (process.env.NODE_ENV === 'development' && time) time`destructure`
 
     const disabled =
@@ -631,6 +652,24 @@ export function createComponent<
       viewProps.theme = _themeProp
     }
 
+    if (groupName) {
+      nonTamaguiProps.onLayout = composeEventHandlers(
+        nonTamaguiProps.onLayout,
+        (e: LayoutEvent) => {
+          componentContext.groups.emit(groupName, {
+            layout: e.nativeEvent.layout,
+          })
+
+          // force re-render if measure strategy is hide
+          if (!stateRef.current.hasMeasured && props.untilMeasured === 'hide') {
+            setState((prev) => ({ ...prev }))
+          }
+
+          stateRef.current.hasMeasured = true
+        }
+      )
+    }
+
     // if react-native-web view just pass all props down
     if (
       process.env.TAMAGUI_TARGET === 'web' &&
@@ -672,7 +711,8 @@ export function createComponent<
     // for example css driver needs to render once with the first styles, then again with the next
     // if its a layout effect it will just skip that first render output
     const shouldSetMounted = needsMount && state.unmounted
-    const { pseudoGroups } = splitStyles
+    const { pseudoGroups, mediaGroups } = splitStyles
+
     useEffect(() => {
       if (shouldSetMounted) {
         const unmounted =
@@ -686,22 +726,36 @@ export function createComponent<
 
       // parent group pseudo listening
       let disposeGroupsListener: DisposeFn | undefined
-      if (pseudoGroups) {
-        const current = {}
-        disposeGroupsListener = componentContext.groups.subscribe((name, next) => {
-          if (pseudoGroups.has(name)) {
-            // merge because we emit a partial of the state each time
-            Object.assign(current, next)
-            const group = {
-              ...state.group,
-              [name]: current,
+      if (pseudoGroups || mediaGroups) {
+        const current = {
+          pseudo: {},
+          media: {},
+        } satisfies GroupState
+        disposeGroupsListener = componentContext.groups.subscribe(
+          (name, { layout, pseudo }) => {
+            if (pseudo && pseudoGroups?.has(name)) {
+              // we emit a partial so merge it + change reference so mergeIfNotShallowEqual runs
+              Object.assign(current.pseudo, pseudo)
+              persist()
+            } else if (layout && mediaGroups) {
+              const mediaState = getMediaState(mediaGroups, layout)
+              const next = mergeIfNotShallowEqual(current.media, mediaState)
+              if (next !== current.media) {
+                Object.assign(current.media, next)
+                persist()
+              }
+            }
+            function persist() {
+              setStateShallow({
+                // force it to be referentially different so it always updates
+                group: {
+                  ...state.group,
+                  [name]: current,
+                },
+              })
             }
-            setStateShallow({
-              // force it to be referentially different so it always updates
-              group,
-            })
           }
-        })
+        )
       }
 
       return () => {
@@ -712,6 +766,7 @@ export function createComponent<
       shouldSetMounted,
       state.unmounted,
       pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
+      mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
     ])
 
     const avoidAnimationStyle = keepStyleSSR && state.unmounted === true
@@ -735,7 +790,7 @@ export function createComponent<
         componentName ? componentClassName : '',
         fontFamilyClassName,
         classNames ? Object.values(classNames).join(' ') : '',
-        props.group ? `t_group_${props.group}` : '',
+        groupClassName,
       ]
       className = classList.join(' ')
 
@@ -934,16 +989,24 @@ export function createComponent<
 
     // must override context so siblings don't clobber initial state
     const subGroupContext = useMemo(() => {
-      if (!groupName) return null
+      if (!groupName) return
       // change reference so context value updates
       return {
         ...componentContext.groups,
         // change reference so as we mutate it doesn't affect siblings etc
         state: {
           ...componentContext.groups.state,
-          [groupName]: initialState,
+          [groupName]: {
+            pseudo: initialState,
+            // capture just initial width and height if they exist
+            // will have top, left, width, height (not x, y)
+            layout: {
+              width: fromPx(splitStyles.style.width as any),
+              height: fromPx(splitStyles.style.height as any),
+            } as any,
+          },
         },
-      }
+      } satisfies ComponentContextI['groups']
     }, [groupName])
 
     if (groupName && subGroupContext) {
@@ -971,7 +1034,7 @@ export function createComponent<
       if (events || isAnimatedReactNativeWeb) {
         content = (
           <span
-            className={`${isAnimatedReactNativeWeb ? className : ''}  _dsp_contents`}
+            className={`${isAnimatedReactNativeWeb ? className : ''} _dsp_contents`}
             {...(events && {
               onMouseEnter: events.onMouseEnter,
               onMouseLeave: events.onMouseLeave,
@@ -1320,3 +1383,17 @@ function hasAnimatedStyleValue(style: Object) {
     return val && typeof val === 'object' && '_animation' in val
   })
 }
+
+function getMediaState(
+  mediaGroups: Set<string>,
+  layout: LayoutEvent['nativeEvent']['layout']
+) {
+  return Object.fromEntries(
+    [...mediaGroups].map((mediaKey) => {
+      return [mediaKey, mediaKeyMatch(mediaKey, layout as any)]
+    })
+  )
+}
+
+const fromPx = (val?: number | string) =>
+  typeof val !== 'string' ? val : +val.replace('px', '')

package/src/helpers/createMediaStyle.ts

@@ -1,6 +1,7 @@
 import { getConfig } from '../config'
 import { mediaObjectToString } from '../hooks/useMedia'
 import type { MediaQueries, MediaStyleObject, StyleObject } from '../types'
+import { getGroupPropParts } from './getGroupPropParts'
 
 // TODO have this be used by extractMediaStyle in tamagui static
 // not synced to static/constants for now
@@ -9,47 +10,60 @@ export const MEDIA_SEP = '_'
 let prefixes: Record<string, string> | null = null
 let selectors: Record<string, string> | null = null
 
-const parentPseudoToSelector = {
+const groupPseudoToPseudoCSSMap = {
   press: 'active',
 }
 
 export const createMediaStyle = (
-  { property, identifier, rules }: StyleObject,
-  mediaKey: string,
+  styleObject: StyleObject,
+  mediaKeyIn: string,
   mediaQueries: MediaQueries,
   negate?: boolean,
   priority?: number
 ): MediaStyleObject => {
+  const { property, identifier, rules } = styleObject
   const conf = getConfig()
   const enableMediaPropOrder = conf.settings.mediaPropOrder
-  const isThemeMedia = mediaKey.startsWith('theme-')
-  const isPlatformMedia = !isThemeMedia && mediaKey.startsWith('platform-')
-  const isGroupMedia = !isThemeMedia && !isPlatformMedia && mediaKey.startsWith('group-')
-  const isNonWindowMedia = isThemeMedia || isPlatformMedia || isGroupMedia
+  const isThemeMedia = mediaKeyIn.startsWith('theme-')
+  const isPlatformMedia = !isThemeMedia && mediaKeyIn.startsWith('platform-')
+  const isGroup = !isThemeMedia && !isPlatformMedia && mediaKeyIn.startsWith('group-')
+  const isNonWindowMedia = isThemeMedia || isPlatformMedia || isGroup
   const negKey = negate ? '0' : ''
   const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
+  const id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace('-', '')}${negKey}${MEDIA_SEP}`
 
-  let styleRule: string
-
-  const id = `${ogPrefix}${MEDIA_SEP}${mediaKey.replace('-', '')}${negKey}${MEDIA_SEP}`
-  const nextIdentifier = identifier.replace(ogPrefix, id)
+  let styleRule = ''
+  let groupMediaKey: string | undefined
+  let containerName: string | undefined
+  let nextIdentifier = identifier.replace(ogPrefix, id)
+  let styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')
 
   if (isNonWindowMedia) {
-    const precedencePrefix = new Array(priority).fill(':root').join('')
-    const styleInner = rules
-      .map((rule) => rule.replace(identifier, nextIdentifier))
-      .join(';')
+    const precedenceImportancePrefix = new Array((priority || 0) + (isGroup ? 1 : 0))
+      .fill(':root')
+      .join('')
+
+    if (isThemeMedia || isGroup) {
+      const groupInfo = getGroupPropParts(mediaKeyIn)
+      const mediaName = groupInfo?.name
+      groupMediaKey = groupInfo?.media
+      if (isGroup) {
+        containerName = mediaName
+      }
+      const name = (isGroup ? 'group_' : '') + mediaName
 
-    if (isThemeMedia || isGroupMedia) {
-      const [_, groupName, groupPseudo] = mediaKey.split('-')
-      const name = (isGroupMedia ? 'group_' : '') + groupName
       const selectorStart = styleInner.indexOf(':root')
       const selectorEnd = styleInner.lastIndexOf('{')
       const selector = styleInner.slice(selectorStart, selectorEnd)
       const precedenceSpace = conf.themeClassNameOnRoot ? '' : ' '
-      const pseudoSelectorName = parentPseudoToSelector[groupPseudo] || groupPseudo
+      const pseudoSelectorName = groupInfo.pseudo
+        ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] || groupInfo.pseudo
+        : undefined
+
       const pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : ''
-      const nextSelector = `:root${precedencePrefix}${precedenceSpace}.t_${name}${pseudoSelector} ${selector.replace(
+      const presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`
+      const mediaSelector = `.t_${name}${pseudoSelector}`
+      const nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
         ':root',
         ''
       )}`
@@ -57,48 +71,48 @@ export const createMediaStyle = (
       // add back in the { we used to split
       styleRule = styleInner.replace(selector, nextSelector)
     } else {
-      styleRule = `${precedencePrefix}${styleInner}`
+      styleRule = `${precedenceImportancePrefix}${styleInner}`
     }
-  } else {
+  }
+
+  if (!isNonWindowMedia || groupMediaKey) {
+    // one time cost:
+    // TODO MOVE THIS INTO SETUP AREA AND EXPORT IT
     if (!selectors) {
-      if (enableMediaPropOrder) {
-        const mediaKeys = Object.keys(mediaQueries)
-        selectors = Object.fromEntries(
-          mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
-        )
-      } else {
-        const mediaKeys = Object.keys(mediaQueries)
+      const mediaKeys = Object.keys(mediaQueries)
+      selectors = Object.fromEntries(
+        mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
+      )
+      if (!enableMediaPropOrder) {
         prefixes = Object.fromEntries(
-          mediaKeys.map((key, index) => [
-            key,
-            new Array(index + 1).fill(':root').join(''),
-          ])
-        )
-        selectors = Object.fromEntries(
-          mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
+          mediaKeys.map((k, index) => [k, new Array(index + 1).fill(':root').join('')])
         )
       }
     }
 
-    const precedencePrefix = enableMediaPropOrder
+    const mediaKey = groupMediaKey || mediaKeyIn
+    const mediaSelector = selectors[mediaKey]
+    const screenStr = negate ? 'not all and' : ''
+    const mediaQuery = `${screenStr} ${mediaSelector}`
+    const precedenceImportancePrefix = groupMediaKey
+      ? ''
+      : enableMediaPropOrder
       ? // this new array should be cached
         new Array(priority).fill(':root').join('')
       : // @ts-ignore
         prefixes[mediaKey]
+    const prefix = groupMediaKey ? `@container ${containerName}` : '@media'
 
-    const mediaSelector = selectors[mediaKey]
-    const screenStr = negate ? 'not all and' : ''
-    const mediaQuery = `${screenStr} ${mediaSelector}`
-    const styleInner = rules
-      .map((rule) => rule.replace(identifier, nextIdentifier))
-      .join(';')
+    if (groupMediaKey) {
+      styleInner = styleRule
+    }
 
     // combines media queries if they already exist
-    if (styleInner.includes('@media')) {
+    if (styleInner.includes(prefix)) {
       // combine
       styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)
     } else {
-      styleRule = `@media ${mediaQuery}{${precedencePrefix}${styleInner}}`
+      styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`
     }
   }
 

package/src/helpers/createShallowSetState.tsx

@@ -5,10 +5,10 @@ import { TamaguiComponentState } from '../types'
 export function createShallowSetState<State extends TamaguiComponentState>(
   setter: React.Dispatch<React.SetStateAction<State>>
 ) {
-  return (next: Partial<State>) => setter((prev) => shallow(prev, next))
+  return (next: Partial<State>) => setter((prev) => mergeIfNotShallowEqual(prev, next))
 }
 
-function shallow(prev, next) {
+export function mergeIfNotShallowEqual(prev, next) {
   for (const key in next) {
     if (prev[key] !== next[key]) {
       return { ...prev, ...next }

package/src/helpers/getGroupPropParts.ts

@@ -0,0 +1,14 @@
+import { getMedia } from '../hooks/useMedia'
+
+export function getGroupPropParts(groupProp: string) {
+  const mediaQueries = getMedia()
+  const [_, name, part3, part4] = groupProp.split('-')
+  let pseudo: string | undefined
+  const media = part3 in mediaQueries ? part3 : undefined
+  if (!media) {
+    pseudo = part3
+  } else {
+    pseudo = part4
+  }
+  return { name, pseudo, media }
+}

package/src/helpers/getSplitStyles.tsx

@@ -28,6 +28,8 @@ import {
   getMediaImportanceIfMoreImportant,
   mediaState as globalMediaState,
   isMediaKey,
+  mediaKeyMatch,
+  mediaKeyToQuery,
   mediaQueryConfig,
   mergeMediaByImportance,
 } from '../hooks/useMedia'
@@ -54,6 +56,7 @@ import type {
 import type { LanguageContextType } from '../views/FontLanguage.types'
 import { createMediaStyle } from './createMediaStyle'
 import { fixStyles } from './expandStyles'
+import { getGroupPropParts } from './getGroupPropParts'
 import { generateAtomicStyles, getStylesAtomic, styleToCSS } from './getStylesAtomic'
 import {
   insertStyleRules,
@@ -145,27 +148,27 @@ export const getSplitStyles: StyleSplitter = (
   } = staticConfig
   const validStyleProps = isText ? stylePropsText : validStyles
   const viewProps: GetStyleResult['viewProps'] = {}
-  let pseudos: PseudoStyles | null = null
   const mediaState = styleProps.mediaState || globalMediaState
   const usedKeys: Record<string, number> = {}
-  let space: SpaceTokens | null = props.space
-  let hasMedia: boolean | string[] = false
-  let dynamicThemeAccess: boolean | undefined
-  let pseudoGroups: Set<string> | undefined
   const shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClassNames
-
-  let style: ViewStyleWithPseudos = {}
   const rulesToInsert: RulesToInsert = []
   const classNames: ClassNamesObject = {}
-  let className = '' // existing classNames
   // we need to gather these specific to each media query / pseudo
   // value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
   const transforms: Record<TransformNamespaceKey, [string, string]> = {}
 
+  let pseudos: PseudoStyles | null = null
+  let space: SpaceTokens | null = props.space
+  let hasMedia: boolean | string[] = false
+  let dynamicThemeAccess: boolean | undefined
+  let pseudoGroups: Set<string> | undefined
+  let mediaGroups: Set<string> | undefined
+  let style: ViewStyleWithPseudos = {}
+  let className = '' // existing classNames
   let mediaStylesSeen = 0
 
   /**
-   * Not the biggest fan of creating this object but it is a nice API
+   * Not the biggest fan of creating an object but it is a nice API
    */
   const styleState: GetStyleState = {
     curProps: Object.assign({}, props),
@@ -246,7 +249,21 @@ export const getSplitStyles: StyleSplitter = (
 
     if (keyInit === 'className') continue // handled above
     if (keyInit in usedKeys) continue
-    if (keyInit in skipProps && !isHOC) continue
+    if (keyInit in skipProps && !isHOC) {
+      if (keyInit === 'group') {
+        // add container style
+        const identifier = `t_group_${valInit}`
+        const containerCSS = {
+          identifier,
+          property: 'container',
+          rules: [
+            `.${identifier} { container-name: ${valInit}; container-type: inline-size; }`,
+          ],
+        }
+        addStyleToInsertRules(rulesToInsert, containerCSS)
+      }
+      continue
+    }
 
     styleState.curProps[keyInit] = valInit
 
@@ -669,6 +686,7 @@ export const getSplitStyles: StyleSplitter = (
         if (!val) continue
 
         // TODO can avoid processing this if !shouldDoClasses + state is off
+        // (note: can't because we need to set defaults on enter/exit or else enforce that they should)
         const pseudoStyleObject = getSubStyle(
           styleState,
           key,
@@ -865,6 +883,7 @@ export const getSplitStyles: StyleSplitter = (
         if (shouldDoClasses) {
           if (hasSpace) {
             delete mediaStyle['space']
+            // TODO group/theme/platform + space support (or just make it official not supported in favor of gap)
             if (mediaState[mediaKeyShort]) {
               const importance = getMediaImportanceIfMoreImportant(
                 mediaKeyShort,
@@ -923,31 +942,46 @@ export const getSplitStyles: StyleSplitter = (
               continue
             }
           } else if (isGroupMedia) {
-            const [_, groupName, groupPseudoKey] = mediaKeyShort.split('-')
+            const groupInfo = getGroupPropParts(mediaKeyShort)
+            const groupName = groupInfo.name
 
             // $group-x
-            if (!context?.groups.state[groupName]) {
+            const groupContext = context?.groups.state[groupName]
+            if (!groupContext) {
               if (process.env.NODE_ENV === 'development' && debug) {
                 console.warn(`No parent with group prop, skipping styles: ${groupName}`)
               }
               continue
             }
 
-            // $group-x-hover
-            pseudoGroups ||= new Set()
-            pseudoGroups.add(groupName)
+            const groupPseudoKey = groupInfo.pseudo
+            const groupMediaKey = groupInfo.media
+            const componentGroupState = componentState.group?.[groupName]
+
+            if (groupMediaKey) {
+              mediaGroups ||= new Set()
+              mediaGroups.add(groupMediaKey)
+              const mediaState = componentGroupState?.media
+              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 (!isActive) continue
+              importanceBump = 2
+            }
+
             if (groupPseudoKey) {
-              const groupPseudoKeyShort = groupPseudoKey
-              const groupState =
-                componentState.group?.[groupName] ||
+              pseudoGroups ||= new Set()
+              pseudoGroups.add(groupName)
+              const componentGroupPseudoState = (
+                componentGroupState ||
                 // fallback to context initially
                 context.groups.state[groupName]
-
-              const isActive = groupState?.[groupPseudoKeyShort]
-              if (!isActive) {
-                continue
-              }
-              const priority = pseudoPriorities[groupPseudoKeyShort]
+              ).pseudo
+              const isActive = componentGroupPseudoState?.[groupPseudoKey]
+              if (!isActive) continue
+              const priority = pseudoPriorities[groupPseudoKey]
               importanceBump = priority
             }
           }
@@ -1198,6 +1232,7 @@ export const getSplitStyles: StyleSplitter = (
     rulesToInsert,
     dynamicThemeAccess,
     pseudoGroups,
+    mediaGroups,
   }
 
   // native: swap out the right family based on weight/style
@@ -1417,6 +1452,7 @@ const mapTransformKeys = {
 }
 
 const skipProps = {
+  untilMeasured: 1,
   animation: 1,
   space: 1,
   animateOnly: 1,

package/src/helpers/insertStyleRule.tsx

@@ -9,6 +9,10 @@ import type {
   TokensParsed,
 } from '../types'
 
+// only cache tamagui styles
+// TODO merge totalSelectorsInserted and allSelectors?
+const scannedCache = new WeakMap<CSSStyleSheet, string>()
+const totalSelectorsInserted = new Map<string, number>()
 const allSelectors: Record<string, string> = {}
 const allRules: Record<string, string> = {}
 export const insertedTransforms = {}
@@ -44,10 +48,6 @@ function addTransform(identifier: string, css: string, rule?: CSSRule) {
 
 // multiple sheets could have the same ids so we have to count
 
-// only cache tamagui styles
-const scannedCache = new WeakMap<CSSStyleSheet, string>()
-const totalSelectorsInserted = new Map<string, number>()
-
 export function listenForSheetChanges() {
   if (!isClient) return
 
@@ -378,6 +378,18 @@ export function shouldInsertStyleRules(identifier: string) {
     return true
   }
   const total = totalSelectorsInserted.get(identifier)
-  // note, -1, we are being conservative and leaving some in
+
+  if (process.env.NODE_ENV === 'development') {
+    if (
+      totalSelectorsInserted.size >
+      +(process.env.TAMAGUI_STYLE_INSERTION_WARNING_LIMIT || 50000)
+    ) {
+      console.warn(
+        `Warning: inserting many CSS rules, you may be animating something and generating many CSS insertions, which can degrade performance. Instead, try using the "disableClassName" property on elements that change styles often. To disable this warning set TAMAGUI_STYLE_INSERTION_WARNING_LIMIT from 50000 to something higher`
+      )
+    }
+  }
+
+  // note we are being conservative allowing duplicates
   return total === undefined || total < 2
 }

package/src/helpers/matchMedia.native.ts

@@ -9,6 +9,7 @@ function matchMediaFallback(query: string): MediaQueryList {
     console.warn('warning: matchMedia implementation is not provided.')
   }
   return {
+    match: (a, b) => false,
     addListener: () => {},
     removeListener: () => {},
     matches: false,

package/src/helpers/matchMedia.ts

@@ -5,6 +5,7 @@ export const matchMedia =
 
 function matchMediaFallback(_: string): MediaQueryList {
   return {
+    match: (a, b) => false,
     addListener() {},
     removeListener() {},
     matches: false,