@tamagui/web 1.105.0 → 1.105.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.105.0",
+  "version": "1.105.2",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,18 +27,18 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.105.0",
-    "@tamagui/constants": "1.105.0",
-    "@tamagui/helpers": "1.105.0",
-    "@tamagui/normalize-css-color": "1.105.0",
-    "@tamagui/timer": "1.105.0",
-    "@tamagui/types": "1.105.0",
-    "@tamagui/use-did-finish-ssr": "1.105.0",
-    "@tamagui/use-event": "1.105.0",
-    "@tamagui/use-force-update": "1.105.0"
+    "@tamagui/compose-refs": "1.105.2",
+    "@tamagui/constants": "1.105.2",
+    "@tamagui/helpers": "1.105.2",
+    "@tamagui/normalize-css-color": "1.105.2",
+    "@tamagui/timer": "1.105.2",
+    "@tamagui/types": "1.105.2",
+    "@tamagui/use-did-finish-ssr": "1.105.2",
+    "@tamagui/use-event": "1.105.2",
+    "@tamagui/use-force-update": "1.105.2"
   },
   "devDependencies": {
-    "@tamagui/build": "1.105.0",
+    "@tamagui/build": "1.105.2",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "typescript": "^5.5.2",

package/src/config.ts

@@ -2,6 +2,7 @@ import { isWeb } from '@tamagui/constants'
 
 import type {
   ConfigListener,
+  GenericTamaguiSettings,
   TamaguiInternalConfig,
   Token,
   Tokens,
@@ -10,6 +11,19 @@ import type {
 
 let conf: TamaguiInternalConfig | null
 
+export const getSetting = <Key extends keyof GenericTamaguiSettings>(
+  key: Key
+): GenericTamaguiSettings[Key] => {
+  if (process.env.NODE_ENV === 'development') {
+    if (!conf) throw new Error(`Haven't called createTamagui yet`)
+  }
+  return (
+    conf!.settings[key] ??
+    // @ts-expect-error
+    conf[key]
+  )
+}
+
 export const setConfig = (next: TamaguiInternalConfig) => {
   conf = next
 }

package/src/createComponent.tsx

@@ -41,7 +41,12 @@ import { mergeProps } from './helpers/mergeProps'
 import { setElementProps } from './helpers/setElementProps'
 import { themeable } from './helpers/themeable'
 import { useDidHydrateOnce } from './hooks/useDidHydrateOnce'
-import { mediaKeyMatch, setMediaShouldUpdate, useMedia } from './hooks/useMedia'
+import {
+  getMediaState,
+  mediaKeyMatch,
+  setMediaShouldUpdate,
+  useMedia,
+} from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import type { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents'
 import type { TamaguiComponentState } from './interfaces/TamaguiComponentState'
@@ -296,30 +301,14 @@ export const useComponentState = (
     const isAnimatedAndHydrated =
       isAnimated && !supportsCSSVars && didHydrateOnce && !isServer
 
+    const isClassNameDisabled =
+      !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce)
+
     const isDisabledManually =
       disableClassName && !isServer && didHydrateOnce && state.unmounted === true
 
-    if (isAnimatedAndHydrated || isDisabledManually) {
+    if (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) {
       shouldAvoidClasses = true
-
-      // debug
-      if (process.env.NODE_ENV === 'development' && props.debug) {
-        console.info(
-          `❌⛹️ no className`,
-          {
-            isAnimatedAndHydrated,
-            isDisabledManually,
-          },
-          {
-            isAnimated,
-            supportsCSSVars,
-            didHydrateOnce,
-            disableClassName,
-            isServer,
-            willBeAnimated,
-          }
-        )
-      }
     }
   }
 
@@ -695,27 +684,28 @@ export function createComponent<
           '[Unnamed Component]'
         }`
         const type =
-          (hasEnterStyle ? '(hasEnter)' : '') +
-          (isAnimated ? '(animated)' : '') +
-          (isReactNative ? '(rnw)' : '') +
+          (hasEnterStyle ? '(hasEnter)' : ' ') +
+          (isAnimated ? '(animated)' : ' ') +
+          (isReactNative ? '(rnw)' : ' ') +
+          (shouldAvoidClasses ? '(shouldAvoidClasses)' : ' ') +
+          (state.press || state.pressIn ? '(PRESSED)' : ' ') +
+          (state.hover ? '(HOVERED)' : ' ') +
+          (state.focus ? '(FOCUSED)' : ' ') +
           (presenceState?.isPresent === false ? '(EXIT)' : '')
+
         const dataIs = propsIn['data-is'] || ''
         const banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
         console.info(
           `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
           'background: green; color: white;'
         )
+
         if (isServer) {
           log({ noClassNames, isAnimated, shouldAvoidClasses, isWeb, supportsCSSVars })
         } else {
           // if strict mode or something messes with our nesting this fixes:
           console.groupEnd()
 
-          const pressLog = `${state.press || state.pressIn ? ' PRESS ' : ''}`
-          const stateLog = `${pressLog}${state.hover ? ' HOVER ' : ''}${
-            state.focus ? ' FOCUS' : ' '
-          }`
-
           const ch = propsIn.children
           let childLog =
             typeof ch === 'string' ? (ch.length > 4 ? ch.slice(0, 4) + '...' : ch) : ''
@@ -723,7 +713,7 @@ export function createComponent<
             childLog = `(children: ${childLog})`
           }
 
-          console.groupCollapsed(`${childLog}${stateLog}Props:`)
+          console.groupCollapsed(`${childLog} Props:`)
           log('props in:', propsIn)
           log('final props:', props)
           log({ state, staticConfig, elementType, themeStateProps })
@@ -964,7 +954,7 @@ export function createComponent<
 
     const unPress = () => setStateShallow({ press: false, pressIn: false })
 
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === 'development' && isWeb) {
       useIsomorphicLayoutEffect(() => {
         if (debugProp) {
           console.groupCollapsed(`Rendered style >`)
@@ -1059,6 +1049,20 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`events-setup`
 
+    if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+      log(`🪩 events()`, {
+        runtimeFocusStyle,
+        runtimePressStyle,
+        runtimeHoverStyle,
+        runtimeFocusVisibleStyle,
+        attachPress,
+        attachFocus,
+        attachHover,
+        shouldAttach,
+        needsHoverState,
+      })
+    }
+
     const events: TamaguiComponentEvents | null = shouldAttach
       ? {
           onPressOut: attachPress
@@ -1346,7 +1350,7 @@ export function createComponent<
     }
 
     // add in <style> tags inline
-    if (process.env.TAMAGUI_REACT_19) {
+    if (process.env.TAMAGUI_REACT_19 && process.env.TAMAGUI_TARGET !== 'native') {
       const { rulesToInsert } = splitStyles
       const keys = Object.keys(splitStyles.rulesToInsert)
       if (keys.length) {
@@ -1743,17 +1747,6 @@ function hasAnimatedStyleValue(style: Object) {
   })
 }
 
-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/createTamagui.ts

@@ -227,8 +227,10 @@ ${runtimeStyles}`
 
   const getNewCSS: GetCSS = (opts) => getCSS({ ...opts, sinceLastCall: true })
 
+  const defaultFontSetting = configIn.settings?.defaultFont ?? configIn.defaultFont
+
   let defaultFontName =
-    configIn.defaultFont ||
+    defaultFontSetting ||
     // uses font named "body" if present for compat
     (configIn.fonts && ('body' in configIn.fonts ? 'body' : ''))
 
@@ -252,7 +254,7 @@ ${runtimeStyles}`
     media: {},
     ...configIn,
     unset: {
-      fontFamily: configIn.defaultFont ? defaultFont : undefined,
+      fontFamily: defaultFontName ? defaultFont : undefined,
       ...configIn.unset,
     },
     settings: {
@@ -279,8 +281,8 @@ ${runtimeStyles}`
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
   }
 
-  configureMedia(config)
   setConfig(config)
+  configureMedia(config)
 
   createdConfigs.set(config, true)
 

package/src/helpers/createMediaStyle.ts

@@ -1,4 +1,4 @@
-import { getConfig } from '../config'
+import { getConfig, getSetting } from '../config'
 import { mediaObjectToString } from '../hooks/useMedia'
 import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types'
 import { getGroupPropParts } from './getGroupPropParts'
@@ -56,7 +56,7 @@ export const createMediaStyle = (
       const selectorStart = styleInner.indexOf(':root')
       const selectorEnd = styleInner.lastIndexOf('{')
       const selector = styleInner.slice(selectorStart, selectorEnd)
-      const precedenceSpace = conf.themeClassNameOnRoot && isTheme ? '' : ' '
+      const precedenceSpace = getSetting('themeClassNameOnRoot') && isTheme ? '' : ' '
       const pseudoSelectorName = groupInfo.pseudo
         ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] || groupInfo.pseudo
         : undefined

package/src/helpers/createShallowSetState.tsx

@@ -30,7 +30,7 @@ export function mergeIfNotShallowEqual(
   }
   if (process.env.NODE_ENV === 'development') {
     if (debug) {
-      console.warn(`setStateShallow CHANGE`, { prev, next })
+      console.info(`setStateShallow CHANGE`, { prev, next })
       if (debug === 'break') {
         // biome-ignore lint/suspicious/noDebugger: <explanation>
         debugger

package/src/helpers/getSplitStyles.tsx

@@ -72,6 +72,8 @@ import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { transformsToString } from './transformsToString'
 
+const consoleGroupCollapsed = isWeb ? console.groupCollapsed : console.info
+
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>
@@ -218,7 +220,7 @@ export const getSplitStyles: StyleSplitter = (
     debug !== 'profile' &&
     isClient
   ) {
-    console.groupCollapsed('getSplitStyles (collapsed)')
+    consoleGroupCollapsed('getSplitStyles (collapsed)')
     log({
       props,
       staticConfig,
@@ -536,7 +538,7 @@ export const getSplitStyles: StyleSplitter = (
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       console.groupEnd() // react native was not nesting right
       console.groupEnd() // react native was not nesting right
-      console.groupCollapsed(
+      consoleGroupCollapsed(
         `  🔑 ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ''} ${
           shouldPassThrough ? '(pass)' : ''
         }`
@@ -620,7 +622,7 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      console.groupCollapsed('  💠 expanded', keyInit, valInit)
+      consoleGroupCollapsed('  💠 expanded', keyInit, valInit)
       try {
         if (!isServer && isDevTools) {
           log({
@@ -631,7 +633,6 @@ export const getSplitStyles: StyleSplitter = (
             variant: variants?.[keyInit],
             shouldPassProp,
             isHOCShouldPassThrough,
-            theme,
             usedKeys: { ...usedKeys },
             curProps: { ...styleState.curProps },
           })
@@ -682,7 +683,7 @@ export const getSplitStyles: StyleSplitter = (
       if (shouldPassThrough) {
         passDownProp(viewProps, key, val, isMediaOrPseudo)
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-          console.groupCollapsed(` - passing down prop ${key}`)
+          consoleGroupCollapsed(` - passing down prop ${key}`)
           log({ val, after: { ...viewProps[key] } })
           console.groupEnd()
         }
@@ -725,7 +726,7 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed('pseudo (classes)', key)
+            consoleGroupCollapsed('pseudo (classes)', key)
 
             log({ pseudoStyleObject, pseudoStyles })
             console.groupEnd()
@@ -764,7 +765,7 @@ export const getSplitStyles: StyleSplitter = (
           }
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-            console.groupCollapsed('pseudo', key, { isDisabled })
+            consoleGroupCollapsed('pseudo', key, { isDisabled })
             log({ pseudoStyleObject, isDisabled, descriptor, componentState })
             console.groupEnd()
           }
@@ -953,7 +954,7 @@ export const getSplitStyles: StyleSplitter = (
             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}`)
+                log(`No parent with group prop, skipping styles: ${groupName}`)
               }
               continue
             }
@@ -971,6 +972,9 @@ export const getSplitStyles: StyleSplitter = (
               if (!mediaState && groupContext.layout) {
                 isActive = mediaKeyMatch(groupMediaKey, groupContext.layout)
               }
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                log(` 🏘️ GROUP media ${groupMediaKey} active? ${isActive}`)
+              }
               if (!isActive) continue
               importanceBump = 2
             }
@@ -984,8 +988,13 @@ export const getSplitStyles: StyleSplitter = (
                 context.groups.state[groupName]
               ).pseudo
               const isActive = componentGroupPseudoState?.[groupPseudoKey]
-              if (!isActive) continue
               const priority = pseudoPriorities[groupPseudoKey]
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                log(
+                  ` 🏘️ GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority}`
+                )
+              }
+              if (!isActive) continue
               importanceBump = priority
             }
           }
@@ -1003,7 +1012,8 @@ export const getSplitStyles: StyleSplitter = (
               mediaStyle[subKey],
               usedKeys,
               mediaState[mediaKeyShort],
-              importanceBump
+              importanceBump,
+              debug
             )
             if (key === 'fontFamily') {
               styleState.fontFamily = mediaStyle.fontFamily as string
@@ -1158,7 +1168,7 @@ export const getSplitStyles: StyleSplitter = (
 
         if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
           console.groupEnd() // ensure group ended from loop above
-          console.groupCollapsed(`🔹 getSplitStyles final style object`)
+          consoleGroupCollapsed(`🔹 getSplitStyles final style object`)
           console.info(styleState.style)
           console.groupEnd()
         }
@@ -1172,7 +1182,7 @@ export const getSplitStyles: StyleSplitter = (
         for (const namespace in transforms) {
           if (!transforms[namespace]) {
             if (process.env.NODE_ENV === 'development') {
-              console.warn('Error no transform', transforms, namespace)
+              log('Error no transform', transforms, namespace)
             }
             continue
           }
@@ -1365,7 +1375,7 @@ export const getSplitStyles: StyleSplitter = (
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     if (isDevTools) {
-      console.groupCollapsed('🔹 getSplitStyles ===>')
+      consoleGroupCollapsed('🔹 getSplitStyles ===>')
       try {
         // prettier-ignore
         const logs = {
@@ -1596,7 +1606,8 @@ function mergeMediaByImportance(
   value: any,
   importancesUsed: Record<string, number>,
   isSizeMedia: boolean,
-  importanceBump?: number
+  importanceBump?: number,
+  debugProp?: DebugProp
 ) {
   let importance = getMediaImportanceIfMoreImportant(
     mediaKey,
@@ -1607,11 +1618,30 @@ function mergeMediaByImportance(
   if (importanceBump) {
     importance = (importance || 0) + importanceBump
   }
+  if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+    log(
+      `mergeMediaByImportance ${key} importance existing ${importancesUsed[key]} next ${importance}`
+    )
+  }
   if (importance === null) {
     return false
   }
   importancesUsed[key] = importance
-  mergeStyle(styleState, key, value)
+
+  if (key in pseudoDescriptors) {
+    const descriptor = pseudoDescriptors[key]
+    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])
+    }
+  } else {
+    mergeStyle(styleState, key, value)
+  }
+
   return true
 }
 

package/src/helpers/getThemeCSSRules.ts

@@ -5,6 +5,7 @@ import type { Variable } from '../createVariable'
 import { variableToString } from '../createVariable'
 import type { CreateTamaguiProps, ThemeParsed } from '../types'
 import { tokensValueToVariable } from './registerCSSVariable'
+import { getSetting } from '../config'
 
 export function getThemeCSSRules(props: {
   config: CreateTamaguiProps
@@ -59,7 +60,7 @@ export function getThemeCSSRules(props: {
     // since we dont specify dark/light in classnames we have to do an awkward specificity war
     // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
     if (hasDarkLight) {
-      const maxDepth = config.maxDarkLightNesting ?? 3
+      const maxDepth = getSetting('maxDarkLightNesting') ?? 3
 
       for (const subName of names) {
         const isDark = isDarkBase || subName.startsWith('dark_')
@@ -115,7 +116,7 @@ export function getThemeCSSRules(props: {
     // this isBaseTheme logic could probably be done more efficiently above
     const selectorsString = selectors
       .map((x) => {
-        const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? '' : ' '
+        const rootSep = isBaseTheme(x) && getSetting('themeClassNameOnRoot') ? '' : ' '
         return `:root${rootSep}${x}`
       })
       .join(', ')
@@ -123,7 +124,7 @@ export function getThemeCSSRules(props: {
     const css = `${selectorsString} {${vars}}`
     cssRuleSets.push(css)
 
-    if (config.shouldAddPrefersColorThemes) {
+    if (getSetting('shouldAddPrefersColorThemes')) {
       const bgString = theme.background
         ? `background:${variableToString(theme.background)};`
         : ''
@@ -154,8 +155,9 @@ export function getThemeCSSRules(props: {
       cssRuleSets.push(prefersMediaSelectors)
     }
 
-    if (config.selectionStyles) {
-      const rules = config.selectionStyles(theme as any)
+    const selectionStyles = getSetting('selectionStyles')
+    if (selectionStyles) {
+      const rules = selectionStyles(theme as any)
       if (rules) {
         const selectionSelectors = baseSelectors.map((s) => `${s} ::selection`).join(', ')
         const styles = Object.entries(rules)

package/src/helpers/log.ts

@@ -1,9 +1,16 @@
+import { _dmt } from '../hooks/useMedia'
+
 export function log(...args: any[]) {
   if (process.env.NODE_ENV === 'production') return
-  if (process.env.TAMAGUI_TARGET === 'web') {
-    return console.info(...args)
+  _dmt(true)
+  try {
+    if (process.env.TAMAGUI_TARGET === 'web') {
+      return console.info(...args)
+    }
+    // react native doesn't log in the cli unless it's log
+    // biome-ignore lint/suspicious/noConsoleLog: <explanation>
+    return console.log(...args)
+  } finally {
+    _dmt(false)
   }
-  // react native doesn't log in the cli unless it's log
-  // biome-ignore lint/suspicious/noConsoleLog: <explanation>
-  return console.log(...args)
 }

package/src/helpers/propMapper.ts

@@ -28,8 +28,10 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
     if (key === 'elevationAndroid') return
   }
 
+  const { conf, styleProps, fontFamily, staticConfig } = styleStateIn
+
   if (value === 'unset') {
-    const unsetVal = styleStateIn.conf.unset?.[key]
+    const unsetVal = conf.unset?.[key]
     if (unsetVal != null) {
       value = unsetVal
     } else {
@@ -41,7 +43,7 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
   // we use this for the sub-props like pseudos so we need to overwrite the "props" in styleState
   // fallbackProps is awkward thanks to static
   // also we need to override the props here because subStyles pass in a sub-style props object
-  const subProps = styleStateIn.styleProps.fallbackProps || subPropsIn
+  const subProps = styleProps.fallbackProps || subPropsIn
   const styleState = subProps
     ? new Proxy(styleStateIn, {
         get(_, k) {
@@ -50,7 +52,6 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
       })
     : styleStateIn
 
-  const { conf, styleProps, fontFamily, staticConfig } = styleState
   const { variants } = staticConfig
 
   if (

package/src/hooks/useDisableSSR.tsx

@@ -1,6 +1,6 @@
-import { getConfig } from '../config'
+import { getSetting } from '../config'
 import type { ComponentContextI } from '../types'
 
 export function getDisableSSR(componentContext?: ComponentContextI) {
-  return componentContext?.disableSSR ?? getConfig().disableSSR
+  return componentContext?.disableSSR ?? getSetting('disableSSR')
 }

package/src/hooks/useMedia.tsx

@@ -1,13 +1,14 @@
 import { isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useRef, useState, useSyncExternalStore } from 'react'
 
-import { getConfig } from '../config'
+import { getConfig, getSetting } from '../config'
 import { matchMedia } from '../helpers/matchMedia'
 import { pseudoDescriptors } from '../helpers/pseudoDescriptors'
 import type {
   ComponentContextI,
   DebugProp,
   IsMediaType,
+  LayoutEvent,
   MediaQueries,
   MediaQueryObject,
   MediaQueryState,
@@ -83,7 +84,8 @@ const dispose = new Set<Function>()
 let mediaVersion = 0
 
 export const configureMedia = (config: TamaguiInternalConfig) => {
-  const { media, mediaQueryDefaultActive } = config
+  const { media } = config
+  const mediaQueryDefaultActive = getSetting('mediaQueryDefaultActive')
   if (!media) return
   mediaVersion++
   for (const key in media) {
@@ -265,6 +267,7 @@ export function useMedia(
 
   return new Proxy(state, {
     get(_, key) {
+      if (disableMediaTouch) return
       if (typeof key === 'string') {
         componentState.keys ||= {}
         componentState.keys[key] = true
@@ -277,15 +280,38 @@ export function useMedia(
   })
 }
 
+let disableMediaTouch = false
+
+export function _dmt(val: boolean) {
+  disableMediaTouch = val
+}
+
+export function getMediaState(
+  mediaGroups: Set<string>,
+  layout: LayoutEvent['nativeEvent']['layout']
+) {
+  disableMediaTouch = true
+  let res: Record<string, boolean>
+  try {
+    res = Object.fromEntries(
+      [...mediaGroups].map((mediaKey) => {
+        return [mediaKey, mediaKeyMatch(mediaKey, layout as any)]
+      })
+    )
+  } finally {
+    disableMediaTouch = false
+  }
+  return res
+}
+
 export const getMediaImportanceIfMoreImportant = (
   mediaKey: string,
   key: string,
   importancesUsed: Record<string, number>,
   isSizeMedia: boolean
 ) => {
-  const conf = getConfig()
   const importance =
-    isSizeMedia && !conf.settings.mediaPropOrder
+    isSizeMedia && !getSetting('mediaPropOrder')
       ? getMediaKeyImportance(mediaKey)
       : defaultMediaImportance
   return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null