@tamagui/web 2.0.0-rc.9 → 2.1.0

package/src/helpers/getSplitStyles.tsx

@@ -10,6 +10,7 @@ import {
   StyleObjectProperty,
   StyleObjectPseudo,
   StyleObjectRules,
+  nonAnimatableStyleProps,
   stylePropsText,
   stylePropsTransform,
   tokenCategories,
@@ -22,11 +23,13 @@ import { isDevTools } from '../constants/isDevTools'
 import {
   getMediaImportanceIfMoreImportant,
   getMediaKey,
+  getMediaKeyImportance,
   mediaKeyMatch,
 } from '../hooks/useMedia'
 import { mediaState as globalMediaState, mediaQueryConfig } from './mediaState'
 import type {
   AllGroupContexts,
+  AnimationDriver,
   ClassNamesObject,
   ComponentContextI,
   DebugProp,
@@ -56,7 +59,7 @@ import {
 } from './getDynamicVal'
 import { getGroupPropParts } from './getGroupPropParts'
 import { insertStyleRules, shouldInsertStyleRules, updateRules } from './insertStyleRule'
-import { isActivePlatform } from './isActivePlatform'
+import { isActivePlatform, getPlatformSpecificityBump } from './isActivePlatform'
 import { isActiveTheme } from './isActiveTheme'
 import { log } from './log'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
@@ -65,22 +68,21 @@ import {
   type PseudoDescriptorKey,
   pseudoDescriptors,
   pseudoPriorities,
+  defaultMediaImportance,
 } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { sortString } from './sortString'
+import { styleOriginalValues } from './styleOriginalValues'
 import { transformsToString } from './transformsToString'
 
+export { styleOriginalValues }
+
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>
 
 let conf: TamaguiInternalConfig
 
-// WeakMap to track original token values for style objects
-// Used to preserve '$8' style tokens instead of resolved 'var(--t-space-8)'
-// for context prop propagation to children (issues #3670, #3676)
-export const styleOriginalValues = new WeakMap<object, Record<string, any>>()
-
 type StyleSplitter = (
   props: { [key: string]: any },
   staticConfig: StaticConfig,
@@ -94,7 +96,9 @@ type StyleSplitter = (
   // web-only
   elementType?: string,
   startedUnhydrated?: boolean,
-  debug?: DebugProp
+  debug?: DebugProp,
+  // resolved animation driver (respects animatedBy prop)
+  animationDriver?: AnimationDriver | null
 ) => null | GetStyleResult
 
 export const PROP_SPLIT = '-'
@@ -113,7 +117,7 @@ function normalizeGroupKey(
     (plen === 3 && pseudoPriorities[parts[parts.length - 1]])
   ) {
     const name = parts[1]
-    if (groupContext && !groupContext[name]) {
+    if (name !== 'true' && groupContext && !groupContext[name]) {
       return key.replace('$group-', '$group-true-')
     }
   }
@@ -161,10 +165,15 @@ export const getSplitStyles: StyleSplitter = (
   groupContext,
   elementType,
   startedUnhydrated,
-  debug
+  debug,
+  animationDriver
 ) => {
   conf = conf || getConfig()
-  const animationDriver = componentContext?.animationDriver || conf.animations
+  // use passed animationDriver or fall back to context/config
+  const driver =
+    animationDriver ||
+    componentContext?.animationDriver ||
+    (conf.animations as AnimationDriver)
 
   if (props.passThrough) {
     return null
@@ -174,7 +183,7 @@ export const getSplitStyles: StyleSplitter = (
   if (
     isWeb &&
     styleProps.isAnimated &&
-    animationDriver.isReactNative &&
+    driver?.isReactNative &&
     !styleProps.noNormalize
   ) {
     styleProps.noNormalize = 'values'
@@ -215,7 +224,10 @@ export const getSplitStyles: StyleSplitter = (
     staticConfig.validStyles ||
     (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView)
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-setup`
   }
@@ -236,6 +248,8 @@ export const getSplitStyles: StyleSplitter = (
     viewProps,
     context: componentContext,
     debug,
+    // resolved animation driver (respects animatedBy prop)
+    animationDriver: driver,
   }
 
   // only used by compiler
@@ -253,7 +267,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`style-state`
   }
@@ -288,7 +305,10 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
-    if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+    if (
+      process.env.NODE_ENV === 'development' &&
+      (debug === 'profile' || (globalThis as any).time)
+    ) {
       // @ts-expect-error
       time`before-prop-${keyInit}`
     }
@@ -339,7 +359,7 @@ export const getSplitStyles: StyleSplitter = (
           const identifier = `t_group_${valInit}`
           const containerType = webContainerType || 'inline-size'
           const containerCSS = [
-            'continer',
+            'container',
             undefined,
             identifier,
             undefined,
@@ -350,7 +370,17 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, containerCSS)
         }
       }
-      continue
+      // transition prop is skipped when it's a named animation (e.g. 'quick')
+      // but raw CSS values (from $platform-web) should pass through as style
+      if (
+        keyInit === 'transition' &&
+        typeof valInit === 'string' &&
+        !driver?.animations?.[valInit]
+      ) {
+        // not a known animation name, treat as raw CSS
+      } else {
+        continue
+      }
     }
 
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept)
@@ -392,8 +422,10 @@ export const getSplitStyles: StyleSplitter = (
 
         if (keyInit === 'disabled' && valInit === true) {
           viewProps['aria-disabled'] = true
-          // Enhance with native semantics
+          // isInput: Input/TextArea wrap the real <input>/<textarea> in a styleable, so
+          // elementType is the wrapper here - forward disabled down or it never reaches it
           if (
+            isInput ||
             elementType === 'button' ||
             elementType === 'form' ||
             elementType === 'input' ||
@@ -408,7 +440,16 @@ export const getSplitStyles: StyleSplitter = (
         }
 
         if (keyInit === 'testID') {
-          viewProps[isReactNative ? keyInit : 'data-testid'] = valInit
+          if (isReactNative) {
+            viewProps.testID = valInit
+          } else {
+            viewProps['data-testid'] = valInit
+            // also keep testID when using RN animation driver (Animated.View
+            // from react-native-web only forwards testID, not data-testid)
+            if (styleProps.isAnimated && driver?.isReactNative) {
+              viewProps.testID = valInit
+            }
+          }
           continue
         }
 
@@ -514,7 +555,14 @@ export const getSplitStyles: StyleSplitter = (
 
     // after shouldPassThrough
     if (!noSkip) {
-      if (keyInit in skipProps) {
+      if (
+        keyInit in skipProps &&
+        !(
+          keyInit === 'transition' &&
+          typeof valInit === 'string' &&
+          !driver?.animations?.[valInit]
+        )
+      ) {
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           console.groupEnd()
         }
@@ -762,12 +810,9 @@ export const getSplitStyles: StyleSplitter = (
         const priority = mediaStylesSeen
         mediaStylesSeen += 1
 
-        // for theme media ($theme-light, $theme-dark), always generate CSS classes for proper SSR
-        // even when noClass is set (animation drivers with inline output still need theme CSS)
-        const shouldDoClassesForThisMedia =
-          shouldDoClasses || (isWeb && isMedia === 'theme')
-
-        if (shouldDoClassesForThisMedia) {
+        // for theme media ($theme-light, $theme-dark), generate CSS classes for proper SSR
+        // when noClass is set (inline animation drivers), de-opt to inline styles so the
+        if (shouldDoClasses) {
           const mediaStyle = getSubStyle(styleState, key, val, false)
           const mediaStyles = getCSSStylesAtomic(mediaStyle)
 
@@ -973,11 +1018,33 @@ export const getSplitStyles: StyleSplitter = (
               }
               importanceBump = priority
             }
+          } else if (isPlatformMedia) {
+            // Platform styles use specificity-based importance bumps so that more
+            // specific platform selectors reliably win over broader ones regardless
+            // of prop declaration order (e.g. $platform-tv always overrides
+            // $platform-native for the same property, even if tv is listed first).
+            importanceBump = getPlatformSpecificityBump(mediaKeyShort)
           }
 
           const mediaOriginalValues = styleOriginalValues.get(mediaStyle)
 
+          // extract transition from group pseudo styles (e.g., $group-scenario4-hover.transition)
+          if (isGroupMedia && mediaStyle.transition) {
+            styleState.pseudoTransitions ||= {}
+            styleState.pseudoTransitions[
+              `$${mediaKeyShort}` as keyof typeof styleState.pseudoTransitions
+            ] = mediaStyle.transition as any
+          }
+
           function mergeMediaStyle(key: string, val: any, originalVal?: any) {
+            // on native, non-style keys from media queries (like numberOfLines)
+            // need to go to viewProps, not style
+            if (process.env.TAMAGUI_TARGET === 'native') {
+              if (!isValidStyleKey(key, validStyles, accept)) {
+                viewProps[key] = val
+                return
+              }
+            }
             styleState.style ||= {}
             const didMerge = mergeMediaByImportance(
               styleState,
@@ -999,17 +1066,64 @@ export const getSplitStyles: StyleSplitter = (
               continue
             }
             if (subKey[0] === '$') {
-              if (!isActivePlatform(subKey)) continue
-              if (!isActiveTheme(subKey, themeName)) continue
-              const subOriginalValues = styleOriginalValues.get(
-                mediaStyle[subKey] as object
-              )
-              for (const subSubKey in mediaStyle[subKey]) {
-                mergeMediaStyle(
-                  subSubKey,
-                  mediaStyle[subKey][subSubKey],
+              const subMediaType = getMediaKey(subKey)
+              if (subMediaType === 'platform') {
+                if (!isActivePlatform(subKey)) continue
+              } else if (subMediaType === 'theme') {
+                if (!isActiveTheme(subKey, themeName)) continue
+              } else if (subMediaType === true) {
+                // regular media query nested inside platform/theme/media
+                const subKeyShort = subKey.slice(1)
+                if (!mediaState[subKeyShort]) continue
+              }
+
+              const nestedVal = mediaStyle[subKey] as Record<string, any>
+              const subOriginalValues = styleOriginalValues.get(nestedVal)
+
+              // Nested styles are more specific than their outer context because
+              // they require both conditions to be true. Calculate an importance
+              // that is the sum of both the outer and inner importances so that:
+              //   1) nested always beats non-nested
+              //   2) $xs={{ $platform-android: ... }} and
+              //      $platform-android={{ $xs: ... }} produce identical importance
+              //      (last-declared wins for the same property)
+              const isSizeMediaKey = !!mediaState[mediaKeyShort]
+              const outerBase = isSizeMediaKey
+                ? getMediaKeyImportance(mediaKeyShort)
+                : defaultMediaImportance
+
+              let innerBase: number
+              if (subMediaType === 'platform') {
+                innerBase =
+                  defaultMediaImportance + getPlatformSpecificityBump(subKey.slice(1))
+              } else if (subMediaType === true) {
+                innerBase = getMediaKeyImportance(subKey.slice(1))
+              } else {
+                innerBase = defaultMediaImportance
+              }
+
+              const nestedImportance = outerBase + importanceBump + innerBase + 1
+
+              for (const subSubKey in nestedVal) {
+                // expand shorthands, getSubStyle doesn't expand keys
+                // inside nested $ objects (they pass through propMapper as-is)
+                const expandedKey = shorthands[subSubKey] || subSubKey
+                const { usedKeys } = styleState
+                if (usedKeys[expandedKey] && usedKeys[expandedKey] > nestedImportance) {
+                  continue
+                }
+                styleState.style ||= {}
+                mergeStyle(
+                  styleState,
+                  expandedKey,
+                  nestedVal[subSubKey],
+                  nestedImportance,
+                  false,
                   subOriginalValues?.[subSubKey]
                 )
+                if (expandedKey === 'fontFamily') {
+                  styleState.fontFamily = nestedVal[subSubKey] as string
+                }
               }
             } else {
               mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey])
@@ -1043,7 +1157,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   } // end prop loop
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-propsend`
   }
@@ -1058,7 +1175,7 @@ export const getSplitStyles: StyleSplitter = (
 
       if (!styleProps.noExpand && !styleProps.noMergeStyle) {
         // shouldn't this be better? but breaks some tests weirdly, need to check
-        if (isWeb && (isReactNative ? !animationDriver.supportsCSS : true)) {
+        if (isWeb && (isReactNative ? driver?.inputStyle !== 'css' : true)) {
           styleToCSS(styleState.style)
         }
       }
@@ -1109,7 +1226,7 @@ export const getSplitStyles: StyleSplitter = (
       !styleProps.noNormalize &&
       !staticConfig.isReactNative &&
       !staticConfig.isHOC &&
-      (!styleProps.isAnimated || animationDriver.supportsCSS)
+      (!styleProps.isAnimated || driver?.inputStyle === 'css')
 
     if (shouldStringifyTransforms && Array.isArray(styleState.style?.transform)) {
       styleState.style.transform = transformsToString(styleState.style!.transform) as any
@@ -1128,16 +1245,20 @@ export const getSplitStyles: StyleSplitter = (
 
         for (const atomicStyle of atomic) {
           const [key, value, identifier] = atomicStyle
+
           const isAnimatedAndTransitionOnly =
             styleProps.isAnimated &&
             styleProps.noClass &&
             props.animateOnly?.includes(key)
 
-          // or not animated but you have animateOnly
-          // (moves it to style={}, nice to avoid generating lots of classnames)
+          // animateOnly properties should always use className on server and initial
+          // client render to avoid hydration mismatch (server has isAnimated=false but
+          // client has isAnimated=true for CSS driver, causing different style output)
           const nonAnimatedTransitionOnly =
             !isAnimatedAndTransitionOnly &&
             !styleProps.isAnimated &&
+            isClient &&
+            driver?.outputStyle === 'css' &&
             props.animateOnly?.includes(key)
 
           if (isAnimatedAndTransitionOnly) {
@@ -1166,6 +1287,38 @@ export const getSplitStyles: StyleSplitter = (
         }
       }
     }
+
+    // when noClass is true (inline animation driver) extract non-animatable
+    // base styles to atomic CSS classNames so the driver doesn't manage them
+    // skip for RNW animation drivers since their AnimatedView doesn't forward classNames
+    if (
+      !styleProps.noMergeStyle &&
+      styleState.style &&
+      !shouldDoClasses &&
+      styleProps.isAnimated &&
+      !driver?.isReactNative
+    ) {
+      if (!styleState.style['$$css']) {
+        const toConvert: Record<string, any> = {}
+        let hasProps = false
+        const animateOnly = props.animateOnly as string[] | undefined
+        for (const key in styleState.style) {
+          if (key in nonAnimatableStyleProps) {
+            toConvert[key] = styleState.style[key]
+            delete styleState.style[key]
+            hasProps = true
+          }
+        }
+        if (hasProps) {
+          const atomic = getCSSStylesAtomic(toConvert)
+          for (const atomicStyle of atomic) {
+            addStyleToInsertRules(rulesToInsert, atomicStyle)
+            classNames[atomicStyle[StyleObjectProperty]] =
+              atomicStyle[StyleObjectIdentifier]
+          }
+        }
+      }
+    }
   }
 
   // merge after the prop loop - and always keep it on style dont turn into className except if RN gives us
@@ -1218,7 +1371,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-pre-result`
   }
@@ -1235,6 +1391,7 @@ export const getSplitStyles: StyleSplitter = (
     pseudoGroups,
     mediaGroups,
     overriddenContextProps: styleState.overriddenContextProps,
+    pseudoTransitions: styleState.pseudoTransitions,
   }
 
   const asChildExceptStyleLike =
@@ -1246,35 +1403,43 @@ export const getSplitStyles: StyleSplitter = (
 
       if (process.env.TAMAGUI_TARGET === 'web') {
         // merge className and style back into viewProps:
-        let fontFamily =
-          isText || isInput
-            ? styleState.fontFamily || staticConfig.defaultProps?.fontFamily
-            : null
+        // only emit font class if fontFamily was explicitly in props (not from defaults)
+        let fontFamily = isText || isInput ? styleState.fontFamily : null
         if (fontFamily && fontFamily[0] === '$') {
           fontFamily = fontFamily.slice(1)
         }
         const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
         const groupClassName = props.group ? `t_group_${props.group}` : ''
         const componentNameFinal = props.componentName || staticConfig.componentName
-        const componentClassName =
-          props.asChild || !componentNameFinal ? '' : `is_${componentNameFinal}`
+        const componentNameClassName =
+          props.asChild || !componentNameFinal || componentNameFinal === 'Text'
+            ? ''
+            : `is_${componentNameFinal}`
 
         let classList: string[] = []
-        if (componentClassName) classList.push(componentClassName)
+        if (componentNameClassName) classList.push(componentNameClassName)
+        // is_View gets base flex styles + font reset, is_Text gets base text styles
+        if (!isText) classList.push('is_View')
+        else classList.push('is_Text')
         if (fontFamilyClassName) classList.push(fontFamilyClassName)
         if (classNames) classList.push(Object.values(classNames).join(' '))
         if (groupClassName) classList.push(groupClassName)
         if (props.className) classList.push(props.className)
         const finalClassName = classList.join(' ')
 
-        if (styleProps.isAnimated && isReactNative) {
+        // use $$css for RNW components OR when animated with RNW driver
+        // (driver's AnimatedView doesn't forward className)
+        const needsCssStyles =
+          isReactNative || (styleProps.isAnimated && driver?.isReactNative)
+
+        if (styleProps.isAnimated && driver?.inputStyle === 'css') {
+          // CSS animation driver uses className directly
+          viewProps.className = finalClassName
           if (style) {
             viewProps.style = style as any
           }
-          if (animationDriver?.supportsCSS) {
-            viewProps.className = finalClassName
-          }
-        } else if (isReactNative) {
+        } else if (needsCssStyles) {
+          // RNW or RNW-animated: apply classNames via $$css
           let cnStyles: Record<string, unknown> | undefined
           for (const name of finalClassName.split(' ')) {
             cnStyles ||= { $$css: true }
@@ -1284,6 +1449,7 @@ export const getSplitStyles: StyleSplitter = (
             ? [...(Array.isArray(style) ? style : [style]), cnStyles]
             : [style]
         } else {
+          // regular web: use className directly
           if (finalClassName) {
             viewProps.className = finalClassName
           }
@@ -1326,7 +1492,10 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && debug === 'profile') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    (debug === 'profile' || (globalThis as any).time)
+  ) {
     // @ts-expect-error
     time`split-styles-done`
   }
@@ -1357,9 +1526,9 @@ function mergeStyle(
     return
   }
 
-  // Track context overrides for pseudo/media styles (issues #3670, #3676)
-  // When a style sets a key that's in context props, update overriddenContextProps
-  // so it propagates to children. Use the original token value (like '$8')
+  // track context overrides for pseudo/media styles (issues #3670, #3676)
+  // when a style sets a key that's in context props, update overriddenContextProps
+  // so it propagates to children. use the original token value (like '$8')
   // instead of the resolved CSS variable (like 'var(--t-space-8)')
   // so children's functional variants can look up token values.
   const contextProps =
@@ -1404,34 +1573,70 @@ export const getSubStyle = (
   const { staticConfig, conf, styleProps } = styleState
   const styleOut: TextStyle = {}
   let originalValues: Record<string, any> | undefined
+  const styleInOriginalValues = styleOriginalValues.get(styleIn)
+  const parentProps = styleState.props
+  styleState.props = { ...parentProps, ...styleIn }
+
+  try {
+    for (let key in styleIn) {
+      const val = styleIn[key]
+      key = conf.shorthands[key] || key
+
+      // extract transition from pseudo-style props (e.g., hoverStyle.transition)
+      // store it separately for animation drivers to use for enter/exit timing
+      if (key === 'transition') {
+        styleState.pseudoTransitions ||= {}
+        styleState.pseudoTransitions[
+          subKey as keyof typeof styleState.pseudoTransitions
+        ] = val
+        // for CSS driver, also add transition to CSS output so native CSS transitions work
+        // group styles ($group-*) need !important to override inline base transition
+        const driver = styleState.animationDriver
+        if (driver?.outputStyle === 'css') {
+          const animationConfig = driver.animations?.[val as string]
+          if (animationConfig) {
+            const important = subKey[0] === '$' ? ' !important' : ''
+            styleOut['transition'] = `all ${animationConfig}${important}`
+          }
+        }
+        // not a known animation name, pass through as raw CSS
+        if (
+          !styleOut['transition'] &&
+          typeof val === 'string' &&
+          !driver?.animations?.[val]
+        ) {
+          styleOut['transition'] = val
+        }
+        continue
+      }
 
-  for (let key in styleIn) {
-    const val = styleIn[key]
-    key = conf.shorthands[key] || key
+      const shouldSkip = !staticConfig.isHOC && key in skipProps && !styleProps.noSkip
+      if (shouldSkip) {
+        continue
+      }
 
-    const shouldSkip = !staticConfig.isHOC && key in skipProps && !styleProps.noSkip
-    if (shouldSkip) {
-      continue
+      propMapper(key, val, styleState, false, (skey, sval, originalVal) => {
+        // track original values for context prop propagation
+        const trackedOriginalVal = styleInOriginalValues?.[skey] ?? originalVal
+        if (trackedOriginalVal !== undefined) {
+          originalValues ||= {}
+          originalValues[skey] = trackedOriginalVal
+        }
+        // pseudo inside media
+        if (skey in validPseudoKeys) {
+          sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)
+        }
+        if (!avoidMergeTransform && skey in stylePropsTransform) {
+          mergeTransform(styleOut, skey, sval)
+        } else {
+          styleOut[skey] = styleProps.noNormalize
+            ? sval
+            : normalizeValueWithProperty(sval, key)
+        }
+      })
     }
-
-    propMapper(key, val, styleState, false, (skey, sval, originalVal) => {
-      // Track original values for context prop propagation
-      if (originalVal !== undefined) {
-        originalValues ||= {}
-        originalValues[skey] = originalVal
-      }
-      // pseudo inside media
-      if (skey in validPseudoKeys) {
-        sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)
-      }
-      if (!avoidMergeTransform && skey in stylePropsTransform) {
-        mergeTransform(styleOut, skey, sval)
-      } else {
-        styleOut[skey] = styleProps.noNormalize
-          ? sval
-          : normalizeValueWithProperty(sval, key)
-      }
-    })
+  } finally {
+    styleState.props = parentProps
   }
 
   if (!avoidMergeTransform) {
@@ -1484,7 +1689,7 @@ export const getSubStyle = (
   }
 
   // Store original values in WeakMap instead of on the object itself
-  if (originalValues) {
+  if (originalValues && Object.keys(originalValues).length) {
     styleOriginalValues.set(styleOut, originalValues)
   }
 
@@ -1497,8 +1702,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, l) => {
-  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l)
+export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
+  'use no memo'
+
+  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m)
 
   if (process.env.TAMAGUI_TARGET !== 'native') {
     useInsertEffectCompat(() => {
@@ -1593,7 +1800,20 @@ function mergeMediaByImportance(
     isSizeMedia
   )
   if (importanceBump) {
-    importance = (importance || 0) + importanceBump
+    // With a specificity bump, the effective importance is always
+    // defaultMediaImportance + bump. This lets higher-specificity styles
+    // (e.g. $platform-tv > $platform-native) override lower-specificity ones
+    // regardless of prop declaration order, even when getMediaImportanceIfMoreImportant
+    // returns null (meaning the same base importance was already applied).
+    //
+    // We must re-check `usedKeys[key]` here (rather than relying on the null
+    // returned by getMediaImportanceIfMoreImportant) because that function only
+    // compares against `defaultMediaImportance`, which equals our base before
+    // the bump. We need to compare against the *bumped* value to correctly
+    // allow a more-specific style to win.
+    const bumpedImportance = defaultMediaImportance + importanceBump
+    importance =
+      !usedKeys[key] || bumpedImportance > usedKeys[key] ? bumpedImportance : null
   }
   if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
     log(