@tamagui/web 2.0.0-rc.4 → 2.0.0-rc.40

package/src/helpers/getCSSStylesAtomic.ts

@@ -4,7 +4,7 @@
  */
 
 import type { StyleObject } from '@tamagui/helpers'
-import { simpleHash } from '@tamagui/helpers'
+import { cssShorthandLonghands, simpleHash } from '@tamagui/helpers'
 import { getConfigMaybe } from '../config'
 import { isMediaKey } from '../hooks/useMedia'
 import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
@@ -79,7 +79,11 @@ const getStyleObject = (
   const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
   conf ||= getConfigMaybe()
   const shortProp = conf?.inverseShorthands[key] || key
-  const identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+  let identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+  if (key === 'pointerEvents' && !pseudo) {
+    if (value === 'box-none') identifier = '_pe-boxnone'
+    else if (value === 'box-only') identifier = '_pe-boxonly'
+  }
   const rules = createAtomicRules(identifier, key, value, pseudo)
   return [
     // array for performance
@@ -173,11 +177,15 @@ function createAtomicRules(
     : ''
   const pseudoSelector = pseudo?.selector
 
+  // longhands get .cls.cls for higher specificity over shorthands
+  const cls =
+    property in cssShorthandLonghands ? `.${identifier}.${identifier}` : `.${identifier}`
+
   let selector = pseudo
     ? pseudoSelector
-      ? `${pseudoSelector} .${identifier}`
-      : `${selectorPriority[pseudo.name]} .${identifier}${pseudoIdPostfix}`
-    : `:root .${identifier}`
+      ? `${pseudoSelector} ${cls}`
+      : `${selectorPriority[pseudo.name]} ${cls}${pseudoIdPostfix}`
+    : `:root ${cls}`
 
   // enter style on css driver needs both:
   //   .t_unmounted .selector
@@ -227,14 +235,8 @@ function createAtomicRules(
       let finalValue = value
       if (value === 'auto' || value === 'box-only') {
         finalValue = 'auto'
-        if (value === 'box-only') {
-          rules.push(`${selector}>*${boxOnly}`)
-        }
       } else if (value === 'none' || value === 'box-none') {
         finalValue = 'none'
-        if (value === 'box-none') {
-          rules.push(`${selector}>*${boxNone}`)
-        }
       }
       const block = createDeclarationBlock([['pointerEvents', finalValue]], true)
       rules.push(`${selector}${block}`)
@@ -259,6 +261,3 @@ function createAtomicRules(
 
   return rules
 }
-
-const boxNone = createDeclarationBlock([['pointerEvents', 'auto']], true)
-const boxOnly = createDeclarationBlock([['pointerEvents', 'none']], true)

package/src/helpers/getDefaultProps.ts

@@ -4,8 +4,7 @@ import type { StaticConfig } from '../types'
 // merge both default props, styled context props, and default text props
 export const getDefaultProps = (
   staticConfig: StaticConfig,
-  propsComponentName?: string,
-  isSubText?: boolean
+  propsComponentName?: string
 ) => {
   let defaultProps = staticConfig?.defaultProps
 
@@ -20,19 +19,9 @@ export const getDefaultProps = (
 
   if (userDefaultProps) {
     // component's staticConfig.defaultProps wins over global config defaults
-    defaultProps = { ...userDefaultProps, ...defaultProps }
-  }
-
-  if (process.env.TAMAGUI_TARGET === 'web' && isSubText) {
-    // for nested text, inherit from parent unless component explicitly set a fontFamily
-    // staticConfig.defaultProps contains explicit component defaults (e.g., SizableText sets $body)
-    // userDefaultProps contains global config defaults - these should be overridden for nested text
-    const hasExplicitFontFamily = staticConfig?.defaultProps?.fontFamily
-    defaultProps = { ...defaultProps }
-    if (!hasExplicitFontFamily) defaultProps.fontFamily = 'inherit'
-    if (!defaultProps.color) defaultProps.color = 'inherit'
-    if (defaultProps.whiteSpace === 'pre-wrap') defaultProps.whiteSpace = 'inherit'
-    if (defaultProps.wordWrap === 'break-word') defaultProps.wordWrap = 'inherit'
+    defaultProps = defaultProps
+      ? { ...userDefaultProps, ...defaultProps }
+      : userDefaultProps
   }
 
   return defaultProps

package/src/helpers/getGroupPropParts.ts

@@ -1,4 +1,4 @@
-import { getMedia } from '../hooks/useMedia'
+import { getMedia } from './mediaState'
 import { pseudoPriorities } from './pseudoDescriptors'
 
 export type GroupParts = { name: string; pseudo?: string; media?: string }

package/src/helpers/getSplitStyles.tsx

@@ -10,6 +10,7 @@ import {
   StyleObjectProperty,
   StyleObjectPseudo,
   StyleObjectRules,
+  nonAnimatableStyleProps,
   stylePropsText,
   stylePropsTransform,
   tokenCategories,
@@ -22,12 +23,13 @@ import { isDevTools } from '../constants/isDevTools'
 import {
   getMediaImportanceIfMoreImportant,
   getMediaKey,
-  mediaState as globalMediaState,
+  getMediaKeyImportance,
   mediaKeyMatch,
-  mediaQueryConfig,
 } from '../hooks/useMedia'
+import { mediaState as globalMediaState, mediaQueryConfig } from './mediaState'
 import type {
   AllGroupContexts,
+  AnimationDriver,
   ClassNamesObject,
   ComponentContextI,
   DebugProp,
@@ -57,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'
@@ -66,6 +68,7 @@ import {
   type PseudoDescriptorKey,
   pseudoDescriptors,
   pseudoPriorities,
+  defaultMediaImportance,
 } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { sortString } from './sortString'
@@ -95,7 +98,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 = '-'
@@ -114,7 +119,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-')
     }
   }
@@ -162,10 +167,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
@@ -175,7 +185,7 @@ export const getSplitStyles: StyleSplitter = (
   if (
     isWeb &&
     styleProps.isAnimated &&
-    animationDriver.isReactNative &&
+    driver?.isReactNative &&
     !styleProps.noNormalize
   ) {
     styleProps.noNormalize = 'values'
@@ -216,7 +226,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`
   }
@@ -237,6 +250,8 @@ export const getSplitStyles: StyleSplitter = (
     viewProps,
     context: componentContext,
     debug,
+    // resolved animation driver (respects animatedBy prop)
+    animationDriver: driver,
   }
 
   // only used by compiler
@@ -254,7 +269,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`
   }
@@ -289,7 +307,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}`
     }
@@ -340,7 +361,7 @@ export const getSplitStyles: StyleSplitter = (
           const identifier = `t_group_${valInit}`
           const containerType = webContainerType || 'inline-size'
           const containerCSS = [
-            'continer',
+            'container',
             undefined,
             identifier,
             undefined,
@@ -351,7 +372,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)
@@ -409,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
         }
 
@@ -515,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()
         }
@@ -763,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)
 
@@ -974,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,
@@ -1000,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])
@@ -1044,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`
   }
@@ -1059,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)
         }
       }
@@ -1110,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
@@ -1129,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) {
@@ -1167,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
@@ -1219,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`
   }
@@ -1236,6 +1391,7 @@ export const getSplitStyles: StyleSplitter = (
     pseudoGroups,
     mediaGroups,
     overriddenContextProps: styleState.overriddenContextProps,
+    pseudoTransitions: styleState.pseudoTransitions,
   }
 
   const asChildExceptStyleLike =
@@ -1247,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 }
@@ -1285,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
           }
@@ -1327,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`
   }
@@ -1410,6 +1578,33 @@ export const getSubStyle = (
     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
+    }
+
     const shouldSkip = !staticConfig.isHOC && key in skipProps && !styleProps.noSkip
     if (shouldSkip) {
       continue
@@ -1498,8 +1693,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(() => {
@@ -1594,7 +1791,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(