@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/helpers/getSplitStyles.tsx

@@ -1,42 +1,33 @@
-import {
-  getPlatformDriver,
-  isAndroid,
-  isClient,
-  isWeb,
-  supportsDynamicColorIOS,
-  useIsomorphicLayoutEffect,
-} from '@tamagui/constants'
+import { isAndroid, isClient, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
   StyleObjectIdentifier,
   StyleObjectProperty,
   StyleObjectPseudo,
   StyleObjectRules,
   nonAnimatableStyleProps,
+  stylePropsAll,
   stylePropsText,
   stylePropsTransform,
-  tokenCategories,
-  validPseudoKeys,
   validStyles as validStylesView,
 } from '@tamagui/helpers'
 import React from 'react'
-import { getConfig, getFont, getSetting } from '../config'
-import { isDevTools } from '../constants/isDevTools'
 import {
-  getMediaImportanceIfMoreImportant,
-  getMediaKey,
-  getMediaKeyImportance,
-  mediaKeyMatch,
-} from '../hooks/useMedia'
-import { mediaState as globalMediaState, mediaQueryConfig } from './mediaState'
+  STYLE_FRONTEND_PASSTHROUGH_PREFIX,
+  STYLE_FRONTEND_PREPROCESSED,
+} from './styleFrontend'
+import { getConfig, getFont } from '../config'
+import { isDevTools } from '../constants/isDevTools'
+import { mediaState as globalMediaState } from './mediaState'
 import type {
   AllGroupContexts,
   AnimationDriver,
+  AnimationDriverLike,
   ClassNamesObject,
   ComponentContextI,
   DebugProp,
   GetStyleResult,
   GetStyleState,
-  PseudoStyles,
+  GenericCompoundVariant,
   RulesToInsert,
   SpaceTokens,
   SplitStyleProps,
@@ -46,50 +37,58 @@ import type {
   TamaguiInternalConfig,
   TextStyle,
   ThemeParsed,
-  ViewStyleWithPseudos,
+  TransitionProp,
+  ViewStyleObject,
 } from '../types'
-import { createMediaStyle } from './createMediaStyle'
 import { fixStyles } from './expandStyles'
-import { getCSSStylesAtomic, getStyleAtomic, styleToCSS } from './getCSSStylesAtomic'
+import { getCSSStyleAtomic, styleToCSS } from './getCSSStylesAtomic'
 import { getDefaultProps } from './getDefaultProps'
-import {
-  extractValueFromDynamic,
-  getDynamicVal,
-  getOppositeScheme,
-  isColorStyleKey,
-} from './getDynamicVal'
-import { getGroupPropParts } from './getGroupPropParts'
 import { insertStyleRules, shouldInsertStyleRules, updateRules } from './insertStyleRule'
-import { isActivePlatform, getPlatformSpecificityBump } from './isActivePlatform'
-import { isActiveTheme } from './isActiveTheme'
+import { isPlainObject } from './isObj'
 import { log } from './log'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
-import { propMapper } from './propMapper'
+import { appendFlatClause, propMapper } from './propMapper'
 import {
-  type PseudoDescriptorKey,
-  pseudoDescriptors,
-  pseudoPriorities,
-  defaultMediaImportance,
-} from './pseudoDescriptors'
+  clearDirectStyle,
+  contributeStyleValue,
+  contributeStyleString,
+  contributeVariantClauseValue,
+  directStyleSignature,
+  flushDirectStyles,
+  getDirectDynamicThemeAccess,
+} from './directStyle'
+import { contributeFrontendProgram, isFrontendProgram } from './frontendProgram'
 import { skipProps } from './skipProps'
 import { sortString } from './sortString'
 import { styleOriginalValues } from './styleOriginalValues'
-import { type StyleTokenProvenance, setStyleTokenProvenance } from './styleProvenance'
+import {
+  type StyleDebugReceipt,
+  type StyleTokenProvenance,
+  setStyleTokenProvenance,
+} from './styleProvenance'
 import { transformsToString } from './transformsToString'
 
 export { styleOriginalValues }
 export { getStyleTokenProvenance, STYLE_TOKEN_PROVENANCE_KEY } from './styleProvenance'
-export type { StyleTokenBinding, StyleTokenProvenance } from './styleProvenance'
+export type {
+  StyleDebugReceipt,
+  StyleDebugTier,
+  StyleTokenBinding,
+  StyleTokenProvenance,
+} from './styleProvenance'
 
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 
 const shouldTrackStyleTokenProvenance =
   process.env.NODE_ENV === 'development' &&
   process.env.TAMAGUI_ENABLE_STYLE_TOKEN_PROVENANCE === '1'
+const validComponentClassName = /^[A-Za-z_][A-Za-z0-9_-]*$/
 
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>
 
-let conf: TamaguiInternalConfig
+// note: we intentionally don't cache conf at module level here
+// because createTamagui may be called multiple times (HMR, tests)
+// and getConfig() already has its own caching
 
 type StyleSplitter = (
   props: { [key: string]: any },
@@ -106,69 +105,195 @@ type StyleSplitter = (
   startedUnhydrated?: boolean,
   debug?: DebugProp,
   // resolved animation driver (respects animatedBy prop)
-  animationDriver?: AnimationDriver | null
+  animationDriver?: AnimationDriverLike | null
 ) => null | GetStyleResult
 
-export const PROP_SPLIT = '-'
+function compoundMatcherMatches(expected: any, actual: any) {
+  if (Array.isArray(expected)) {
+    return expected.some((value) => Object.is(value, actual))
+  }
+  return Object.is(expected, actual)
+}
 
-// Normalize group keys like $group-press to $group-true-press when the group name
-// doesn't exist in context (defaults to the unnamed 'true' group)
-function normalizeGroupKey(
-  key: string,
-  groupContext: AllGroupContexts | null | undefined
-): string {
-  const parts = key.split('-')
-  const plen = parts.length
-  if (
-    // check if its actually a simple group selector to avoid breaking selectors
-    plen === 2 ||
-    (plen === 3 && pseudoPriorities[parts[parts.length - 1]])
-  ) {
-    const name = parts[1]
-    if (name !== 'true' && groupContext && !groupContext[name]) {
-      return key.replace('$group-', '$group-true-')
+function compoundVariantMatches(
+  compoundVariant: GenericCompoundVariant,
+  props: Record<string, any>
+) {
+  for (const key in compoundVariant) {
+    if (key === 'style') continue
+    if (!compoundMatcherMatches(compoundVariant[key], props[key])) {
+      return false
+    }
+  }
+  return true
+}
+
+type OrderedPropEntry = readonly [string, any]
+
+// Styled defaults computed once per static config. mergeComponentProps replaces
+// defaults at the prop level, but flat programs merge per clause slot: either a
+// conditioned default or a conditioned prop therefore needs the displaced
+// styled value re-injected at the styled-base position. This is what preserves
+// `styled(View, { flexDirection: 'row' })` under `sm:column`.
+const styledDefaultsCache = new WeakMap<object, OrderedPropEntry[] | null>()
+
+function getStyledDefaults(staticConfig: StaticConfig): OrderedPropEntry[] | null {
+  let entries = styledDefaultsCache.get(staticConfig)
+  if (entries === undefined) {
+    entries = null
+    const defaults = staticConfig.defaultProps
+    if (defaults) {
+      for (const key in defaults) {
+        ;(entries ||= []).push([key, defaults[key]])
+      }
     }
+    styledDefaultsCache.set(staticConfig, entries)
   }
-  return key
+  return entries
 }
 
-// if you need and easier way to test performance, you can do something like this
-// add this early return somewhere in this file and you can see roughly where it slows down:
-
-// return {
-//   space,
-//   hasMedia,
-//   fontFamily: styleState.fontFamily,
-//   viewProps: {
-//     children: props.children,
-//   },
-//   style: {
-//     borderColor: props.borderColor,
-//     borderWidth: props.borderWidth,
-//     padding: props.padding,
-//   },
-//   pseudos,
-//   classNames,
-//   rulesToInsert,
-//   dynamicThemeAccess,
-// }
-
-function isValidStyleKey(
-  key: string,
-  validStyles: Record<string, boolean>,
-  accept?: Record<string, any>
+function contributeDisplacedStyledDefaults(
+  styledDefaults: OrderedPropEntry[] | null,
+  processedProps: Record<string, any>,
+  shorthands: Record<string, string>,
+  contribute: (key: string, value: any) => void
 ) {
-  return key in validStyles ? true : accept && key in accept
+  if (!styledDefaults) return
+  for (let index = 0; index < styledDefaults.length; index++) {
+    const key = styledDefaults[index][0]
+    const styledValue = styledDefaults[index][1]
+    const propValue = processedProps[key]
+    if (!(key in stylePropsAll) && !(key in shorthands)) continue
+    // equal means the default flowed through the merge untouched and will be
+    // processed as an ordinary prop entry; different means a call-site value
+    // displaced it. Re-injection is only needed when either contribution is a
+    // program; ordinary values retain the prop-level fast path.
+    if (
+      propValue !== undefined &&
+      propValue !== styledValue &&
+      ((typeof styledValue === 'string' && styledValue.includes(':')) ||
+        (typeof propValue === 'string' && propValue.includes(':')))
+    ) {
+      contribute(key, styledValue)
+    }
+  }
 }
 
-function shouldSkipNativeHoverProp(key: string, isMedia: false | boolean | string) {
-  if (process.env.TAMAGUI_TARGET !== 'native') return false
-  if (getPlatformDriver()?.pseudo) return false
-  if (key === 'hoverStyle') return true
-  if (isMedia === 'group') {
-    return getGroupPropParts(key.slice(1)).pseudo === 'hover'
+/**
+ * Walks every style contribution in authored forward order and hands each one
+ * to `contribute`, without building an intermediate list.
+ *
+ * Order is base style, then any styled default a call-site value displaced,
+ * then the props. That is the cascade: last writer wins, so the props must come
+ * last.
+ *
+ * The common case touches each source object exactly once and allocates
+ * nothing. Only compound variants need a materialised list, because a matching
+ * compound has to run immediately after the LAST prop that selected it, and
+ * that anchor is not known until the props have been indexed.
+ */
+function forEachPropInForwardOrder(
+  processedProps: Record<string, any>,
+  staticConfig: StaticConfig,
+  shorthands: Record<string, string>,
+  contribute: (key: string, value: any) => void
+) {
+  const processedBaseStyle = staticConfig.baseStyle
+  const compoundVariants = staticConfig.compoundVariants
+  const styledDefaults = getStyledDefaults(staticConfig)
+
+  if (!compoundVariants?.length) {
+    if (processedBaseStyle) {
+      for (const key in processedBaseStyle) contribute(key, processedBaseStyle[key])
+    }
+    contributeDisplacedStyledDefaults(
+      styledDefaults,
+      processedProps,
+      shorthands,
+      contribute
+    )
+    for (const key in processedProps) contribute(key, processedProps[key])
+    return
+  }
+
+  // compound path: needs indexed prop entries to resolve each compound's anchor
+  const propEntries = Object.entries(processedProps) as OrderedPropEntry[]
+  const orderedEntries = processedBaseStyle
+    ? (Object.entries(processedBaseStyle) as OrderedPropEntry[])
+    : []
+  contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, (k, v) =>
+    orderedEntries.push([k, v])
+  )
+
+  // Compounds are ordinary contributions in the same authored forward pass. A
+  // matching compound runs immediately after its last selector entry, then any
+  // later prop/style/className is free to override it. Never collect variants,
+  // compounds, or caller values into precedence tiers.
+  const compoundsByAnchor = new Map<number, OrderedPropEntry[]>()
+  for (const compoundVariant of compoundVariants) {
+    if (!compoundVariantMatches(compoundVariant, processedProps)) {
+      continue
+    }
+    const { style } = compoundVariant
+    if (!isPlainObject(style)) {
+      continue
+    }
+
+    let anchor = -1
+    for (const selectorKey in compoundVariant) {
+      if (selectorKey === 'style') continue
+      for (let index = propEntries.length - 1; index >= 0; index--) {
+        if (propEntries[index][0] === selectorKey) {
+          anchor = Math.max(anchor, index)
+          break
+        }
+      }
+    }
+
+    const entries = compoundsByAnchor.get(anchor) || []
+    for (const key in style) {
+      entries.push([key, style[key]])
+    }
+    compoundsByAnchor.set(anchor, entries)
+  }
+
+  for (let index = 0; index < orderedEntries.length; index++) {
+    contribute(orderedEntries[index][0], orderedEntries[index][1])
+  }
+  const beforeProps = compoundsByAnchor.get(-1)
+  if (beforeProps) {
+    for (let index = 0; index < beforeProps.length; index++) {
+      contribute(beforeProps[index][0], beforeProps[index][1])
+    }
+  }
+  for (let index = 0; index < propEntries.length; index++) {
+    contribute(propEntries[index][0], propEntries[index][1])
+    const compounds = compoundsByAnchor.get(index)
+    if (compounds) {
+      for (let i = 0; i < compounds.length; i++)
+        contribute(compounds[i][0], compounds[i][1])
+    }
   }
-  return false
+}
+
+// exported so the compiler applies the SAME host-validity decision when it
+// flattens: a style-shaped key that fails this check must be dropped with a
+// diagnostic, never kept as a DOM attribute (one predicate, two hosts)
+export function isValidStyleKey(
+  key: string,
+  validStyles: Record<string, boolean>,
+  accept?: Record<string, any>
+) {
+  return Boolean(
+    key in validStyles ||
+    (isWeb &&
+      (key === 'transitionProperty' ||
+        key === 'transitionDuration' ||
+        key === 'transitionTimingFunction' ||
+        key === 'transitionDelay' ||
+        key === 'transitionBehavior')) ||
+    (accept && key in accept)
+  )
 }
 
 export const getSplitStyles: StyleSplitter = (
@@ -186,12 +311,22 @@ export const getSplitStyles: StyleSplitter = (
   debug,
   animationDriver
 ) => {
-  conf = conf || getConfig()
+  const conf = getConfig()
+  // a frontend-bound component resolves its static style input (class-string
+  // base, string variants) through its own descriptor; implementations memoize
+  // per (staticConfig, config). components without a descriptor pay one read.
+  if (staticConfig.styleFrontend?.normalizeStaticConfig) {
+    staticConfig = staticConfig.styleFrontend.normalizeStaticConfig(
+      staticConfig as any,
+      conf
+    ) as StaticConfig
+  }
   // use passed animationDriver or fall back to context/config
   const driver =
     animationDriver ||
     componentContext?.animationDriver ||
-    (conf.animations as AnimationDriver)
+    (conf.animations as AnimationDriverLike)
+  const resolvedDriver = driver?.isStub ? null : (driver as AnimationDriver | null)
 
   if (props.passThrough) {
     return null
@@ -215,7 +350,6 @@ export const getSplitStyles: StyleSplitter = (
     variants,
     isReactNative,
     inlineProps,
-    inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName,
   } = staticConfig
@@ -223,21 +357,26 @@ export const getSplitStyles: StyleSplitter = (
   const viewProps: GetStyleResult['viewProps'] = {}
   const mediaState = styleProps.mediaState || globalMediaState
 
-  const shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass
+  let shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass
 
   const rulesToInsert: RulesToInsert =
     process.env.TAMAGUI_TARGET === 'native' ? (undefined as any) : {}
   const classNames: ClassNamesObject = {}
 
   let space: SpaceTokens | null = props.space
-  let pseudos: PseudoStyles | null = null
   let hasMedia: boolean | Set<string> = false
-  let dynamicThemeAccess: boolean | undefined
   let pseudoGroups: Set<string> | undefined
   let mediaGroups: Set<string> | undefined
-  let className = (props.className as string) || '' // existing classNames
-  let mediaStylesSeen = 0
-
+  // the frontend's normalizeStaticConfig partitions unclaimed styled-base
+  // classes into passthroughClassName (baseStyle holds styles only). they are
+  // the base's raw-interop className at the earliest forward position:
+  // prepend them and flip the cascade-preserving switch so every later
+  // Tamagui contribution keeps its last-wins position inline, exactly as a
+  // className prop does mid-loop
+  let className = staticConfig.passthroughClassName || ''
+  if (className) {
+    shouldDoClasses = false
+  }
   const validStyles =
     staticConfig.validStyles ||
     (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView)
@@ -262,12 +401,16 @@ export const getSplitStyles: StyleSplitter = (
     staticConfig,
     style: null,
     theme,
-    usedKeys: {},
     viewProps,
     context: componentContext,
     debug,
+    flatRulesToInsert: rulesToInsert,
+    flatShouldDoClasses: shouldDoClasses,
+    flatThemeName: themeName,
+    flatMediaState: mediaState,
+    flatGroupContext: groupContext,
     // resolved animation driver (respects animatedBy prop)
-    animationDriver: driver,
+    animationDriver: resolvedDriver,
   }
 
   // only used by compiler
@@ -310,17 +453,80 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   const { asChild } = props
-  const { accept } = staticConfig
+  const { accept, neverSkipProps } = staticConfig
   const { noSkip, disableExpandShorthands, noExpand, styledContext } = styleProps
+
+  // frontend preprocessing runs once per render: createComponent already ran the
+  // descriptor's preprocessProps and marked the result, so this only fires for
+  // direct callers (tests, non-component paths), which self-process exactly once
+  let processedProps: Record<string, any>
+  const styleFrontend = staticConfig.styleFrontend
+  if (styleFrontend && !(props as any)[STYLE_FRONTEND_PREPROCESSED]) {
+    processedProps = styleFrontend.preprocessProps(props, conf)
+  } else {
+    processedProps = props
+  }
   const { webContainerType } = conf.settings
   const parentVariants = parentStaticConfig?.variants
-  for (const keyOg in props) {
+
+  const mergeStylePropAtCurrentPosition = (styleProp: any) => {
+    if (styleProps.noMergeStyle || !styleProp) return
+    if (isHOC) {
+      viewProps.style = normalizeStyle(styleProp)
+      return
+    }
+    const isArray = Array.isArray(styleProp)
+    const length = isArray ? styleProp.length : 1
+    for (let index = 0; index < length; index++) {
+      const style = isArray ? styleProp[index] : styleProp
+      if (!style) continue
+      if (style['$$css']) {
+        for (const key in style) clearDirectStyle(styleState, key)
+        Object.assign(styleState.classNames, style)
+        continue
+      }
+      const normalized = normalizeStyle(style)
+      const styleOriginals = shouldTrackStyleTokenProvenance
+        ? styleOriginalValues.get(style)
+        : undefined
+      for (const key in normalized) {
+        if (normalized[key] == null) continue
+        contributeStyleValue(
+          styleState,
+          key,
+          normalized[key],
+          mergeStyle,
+          styleOriginals?.[key]
+        )
+      }
+    }
+  }
+
+  const flushForwardStylesToClasses = () => {
+    if (!shouldDoClasses) return
+    flushDirectStyles(styleState, true)
+  }
+
+  // ONE forward pass over the props. the body is a closure so base style,
+  // displaced styled defaults and the props themselves feed it directly from
+  // their own objects — nothing is copied into an intermediate list first.
+  const contributeProp = (keyOg: string, valOg: any) => {
     let keyInit = keyOg
-    let valInit = props[keyInit]
+    let valInit = valOg
+
+    if (styleFrontend && keyInit.startsWith(STYLE_FRONTEND_PASSTHROUGH_PREFIX)) {
+      keyInit = 'className'
+    }
 
     if (keyInit === 'children') {
       viewProps[keyInit] = valInit
-      continue
+      return
+    }
+
+    if (keyInit === 'ref') {
+      // ref is composed and assigned explicitly onto viewProps in createComponent;
+      // never forward the incoming ref through the style split onto the host element
+      return
     }
 
     // native: data-* attributes never become native props (they're stripped
@@ -332,7 +538,7 @@ export const getSplitStyles: StyleSplitter = (
       keyInit[0] === 'd' &&
       keyInit.startsWith('data-')
     ) {
-      continue
+      return
     }
 
     if (
@@ -344,7 +550,19 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'test' && keyInit === 'jestAnimatedStyle') {
-      continue
+      return
+    }
+
+    if (
+      process.env.TAMAGUI_TARGET === 'native' &&
+      (keyInit === 'transition' ||
+        keyInit === 'transitionProperty' ||
+        keyInit === 'transitionDuration' ||
+        keyInit === 'transitionTimingFunction' ||
+        keyInit === 'transitionDelay' ||
+        keyInit === 'transitionBehavior')
+    ) {
+      return
     }
 
     // for custom accept sub-styles
@@ -356,7 +574,7 @@ export const getSplitStyles: StyleSplitter = (
         typeof valInit === 'object'
       ) {
         viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass)
-        continue
+        return
       }
     }
 
@@ -367,7 +585,27 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    if (keyInit === 'className') continue // handled above first
+    if (keyInit === 'className') {
+      if (typeof valInit === 'string' && valInit) {
+        // core className is raw interop: the string passes through untouched.
+        // a frontend-bound component's claimed candidates were already consumed
+        // by preprocessProps, so what remains here is passthrough CSS emitted
+        // after the base Tamagui layer — keep subsequent Tamagui contributions
+        // inline so they retain their later, last-wins cascade position
+        className = `${className} ${valInit}`.trim()
+        if (styleFrontend) {
+          flushForwardStylesToClasses()
+          shouldDoClasses = false
+          styleState.flatShouldDoClasses = false
+        }
+      }
+      return
+    }
+
+    if (keyInit === 'style') {
+      mergeStylePropAtCurrentPosition(valInit)
+      return
+    }
 
     // when asChild, skip default props - they shouldn't be passed down to children
     if (asChild) {
@@ -376,13 +614,13 @@ export const getSplitStyles: StyleSplitter = (
         // check both original key and expanded key (after shorthand expansion)
         const defaultVal = defaults[keyOg] ?? defaults[keyInit]
         if (defaultVal !== undefined && valInit === defaultVal) {
-          continue
+          return
         }
       }
     }
 
     // keyInit === 'style' is handled in skipProps
-    if (keyInit in skipProps && !noSkip && !isHOC) {
+    if (keyInit in skipProps && !noSkip && !isHOC && !neverSkipProps?.[keyInit]) {
       if (keyInit === 'group') {
         if (process.env.TAMAGUI_TARGET === 'web') {
           // add container style
@@ -400,6 +638,21 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, containerCSS)
         }
       }
+      if (keyInit === 'container' && valInit) {
+        if (process.env.TAMAGUI_TARGET === 'web') {
+          // the boolean container shorthand: establish an unnamed inline-size
+          // query container (decision 17); `@sm:` clauses target it as the
+          // nearest container. named containers author container-name /
+          // container-type as regular style props instead
+          addStyleToInsertRules(rulesToInsert, [
+            'container',
+            undefined,
+            't_container',
+            undefined,
+            [`.t_container { container-type: ${webContainerType || 'inline-size'}; }`],
+          ] satisfies StyleObject)
+        }
+      }
       if (keyInit === 'transition' && typeof valInit === 'string') {
         const animationConfig = driver?.animations?.[valInit]
         if (
@@ -411,24 +664,55 @@ export const getSplitStyles: StyleSplitter = (
           // to ordinary css so the compiler can keep flattening.
           valInit = `all ${animationConfig}`
         } else if (animationConfig) {
-          continue
+          // animation drivers consume configured preset names directly
+          return
         }
-        // unknown names are raw CSS transition values and pass through.
       } else {
-        continue
+        return
       }
     }
 
+    // minted frontend values consume before style-key validity and
+    // propMapper: the transport key is only a position marker (unique per
+    // contribution, so repeated clauses on one property and interleaving
+    // with ordinary props survive in authored order). validity applies to
+    // the value's real property, so the host ruling still holds
+    if (isFrontendProgram(valInit)) {
+      if (isValidStyleKey(valInit.property, validStyles, accept)) {
+        contributeFrontendProgram(styleState, valInit, mergeStyle)
+      } else if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          `[tamagui] "${valInit.property}" is not a valid style on this component; the frontend value is dropped.`
+        )
+      }
+      return
+    }
+
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept)
 
     // this is all for partially optimized (not flattened)... maybe worth removing?
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      // react-native-web ignores data-* attributes, fixes passing them to animated views
-      if (staticConfig.isReactNative && keyInit.startsWith('data-')) {
+    if (isWeb) {
+      // React Native Web ignores direct data-* props. This includes ordinary
+      // Tamagui views whose final host is swapped to RNW Animated.View.
+      if (
+        (staticConfig.isReactNative ||
+          (styleProps.isAnimated &&
+            driver?.isReactNative &&
+            !driver.View?.acceptRenderProp)) &&
+        keyInit.startsWith('data-')
+      ) {
         keyInit = keyInit.replace('data-', '')
         viewProps['dataSet'] ||= {}
         viewProps['dataSet'][keyInit] = valInit
-        continue
+        return
+      }
+
+      // standard data attributes are view props, never styles or styled-context
+      // values. Context providers receive arbitrary JSX attributes, so handle
+      // these before a provider value can make the key look style-like.
+      if (keyInit.startsWith('data-')) {
+        viewProps[keyInit] = valInit
+        return
       }
     }
 
@@ -436,15 +720,23 @@ export const getSplitStyles: StyleSplitter = (
       if (!isValidStyleKeyInit) {
         if (!isAndroid) {
           // only works in android
-          if (keyInit === 'elevationAndroid') continue
+          if (keyInit === 'elevationAndroid') return
         }
 
         // map userSelect to native prop
         if (keyInit === 'userSelect') {
           keyInit = 'selectable'
           valInit = valInit !== 'none'
+        } else if (keyInit === 'textOverflow') {
+          // map textOverflow="ellipsis" on Text to numberOfLines + ellipsizeMode.
+          // any other value (e.g. "clip") is a no-op on native (default behavior).
+          if (isText && valInit === 'ellipsis') {
+            viewProps.numberOfLines ??= 1
+            viewProps.ellipsizeMode ??= 'tail'
+          }
+          return
         } else if (keyInit.startsWith('data-')) {
-          continue
+          return
         }
       }
     }
@@ -458,7 +750,7 @@ export const getSplitStyles: StyleSplitter = (
 
         if (keyInit === 'disabled' && valInit === true) {
           viewProps['aria-disabled'] = true
-          // isInput: Input/TextArea wrap the real <input>/<textarea> in a styleable, so
+          // isInput: Input/TextArea wrap the real <input>/<textarea> in a styled HOC, so
           // elementType is the wrapper here - forward disabled down or it never reaches it
           if (
             isInput ||
@@ -471,7 +763,7 @@ export const getSplitStyles: StyleSplitter = (
             viewProps.disabled = true
           }
           if (!variants?.disabled) {
-            continue
+            return
           }
         }
 
@@ -480,49 +772,32 @@ export const getSplitStyles: StyleSplitter = (
             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) {
+            // also keep testID when using the RN animation driver (Animated.View
+            // from react-native-web only forwards testID, not data-testid). isHOC
+            // wrappers don't animate themselves but forward to an inner animated
+            // component, so keep testID for them too — otherwise a styled/HOC
+            // primitive (e.g. a skinned Dialog.Overlay) loses its testID on native
+            // and becomes untestable.
+            if ((styleProps.isAnimated || staticConfig.isHOC) && driver?.isReactNative) {
               viewProps.testID = valInit
             }
           }
-          continue
+          return
         }
 
         if (keyInit === 'id') {
           viewProps.id = valInit
-          continue
+          return
         }
       }
     }
 
-    /**
-     * There's (some) reason to this madness: we want to allow returning media/pseudo from variants
-     * Say you have a variant hoverable: { true: { hoverStyle: {} } }
-     * We run propMapper first to expand variant, then we run the inner loop and look again
-     * for if there's a pseudo/media returned from it.
-     */
-
     let isVariant = !isValidStyleKeyInit && variants && keyInit in variants
-
     const isStyleLikeKey = isValidStyleKeyInit || isVariant
-
-    let isPseudo = keyInit in validPseudoKeys
-    let isMedia = !isStyleLikeKey && !isPseudo ? getMediaKey(keyInit) : false
-    let isMediaOrPseudo = Boolean(isMedia || isPseudo)
-
-    if (isMediaOrPseudo && isMedia === 'group') {
-      keyInit = normalizeGroupKey(keyInit, groupContext)
-    }
-
-    const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || (isVariant && !noExpand)
-
-    if (shouldSkipNativeHoverProp(keyInit, isMedia)) {
-      continue
-    }
+    const isStyleProp = isValidStyleKeyInit || (isVariant && !noExpand)
 
     if (isStyleProp && (asChild === 'except-style' || asChild === 'except-style-web')) {
-      continue
+      return
     }
 
     const shouldPassProp =
@@ -533,8 +808,7 @@ export const getSplitStyles: StyleSplitter = (
 
     const parentVariant = parentVariants?.[keyInit]
     const isHOCShouldPassThrough = Boolean(
-      isHOC &&
-      (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)
+      isHOC && (isValidStyleKeyInit || parentVariant || keyInit in skipProps)
     )
 
     const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough
@@ -553,48 +827,27 @@ export const getSplitStyles: StyleSplitter = (
           variant: variants?.[keyInit],
           isVariant,
           isHOCShouldPassThrough,
-          usedKeys: { ...styleState.usedKeys },
           parentStaticConfig,
         })
       }
     }
 
     if (shouldPassThrough) {
-      // // TODO bring this back but probably improve it?
-      // if (isPseudo) {
-      //   // this is a lot... but we need to track sub-keys so we don't override them in future things that aren't passed down
-      //   // like our own variants that aren't in parent
-      //   const pseudoStyleObject = getSubStyle(
-      //     styleState,
-      //     keyInit,
-      //     valInit,
-      //     fontFamily,
-      //     true,
-      //     state.noClass
-      //   )
-      //   const descriptor = pseudoDescriptors[keyInit]
-      //   for (const key in pseudoStyleObject) {
-      //     debugger
-      //   }
-      // }
-
-      passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo)
+      passDownProp(viewProps, keyInit, valInit)
 
       if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
         console.groupEnd()
       }
 
-      // if it's a variant here, we have a two layer variant...
-      // aka styled(Input, { unstyled: true, variants: { unstyled: {} } })
-      // which now has it's own unstyled + the child unstyled...
-      // so *don't* skip applying the styles if its different from the parent one
+      // a styled child can pass through a parent variant and define the same key
+      // itself, so keep applying its own definition when the variants differ
       if (!isVariant) {
-        continue
+        return
       }
     }
 
     // after shouldPassThrough
-    if (!noSkip) {
+    if (!noSkip && !neverSkipProps?.[keyInit]) {
       if (
         keyInit in skipProps &&
         !(
@@ -606,7 +859,7 @@ export const getSplitStyles: StyleSplitter = (
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           console.groupEnd()
         }
-        continue
+        return
       }
     }
 
@@ -621,592 +874,156 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    const disablePropMap = isMediaOrPseudo || !isStyleLikeKey
-
-    propMapper(keyInit, valInit, styleState, disablePropMap, (key, val, originalVal) => {
-      const isStyledContextProp = styledContext && key in styledContext
+    const disablePropMap = !isStyleLikeKey
 
-      if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
-        viewProps[key] = val
-        return
-      }
-
-      if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-        console.groupCollapsed('  💠 expanded', keyInit, '=>', key)
-        log(val)
-        console.groupEnd()
-      }
+    // ordinary host styles scan and emit directly without propMapper
+    if (
+      !isHOC &&
+      isValidStyleKeyInit &&
+      valInit != null &&
+      !(process.env.TAMAGUI_TARGET === 'native' && valInit === 'unset') &&
+      !(variants && keyInit in variants) &&
+      !(accept && keyInit in accept) &&
+      !(styledContext && keyInit in styledContext)
+    ) {
+      contributeStyleValue(styleState, keyInit, valInit, mergeStyle)
+      return
+    }
 
-      if (val == null) return
+    propMapper(
+      keyInit,
+      valInit,
+      styleState,
+      disablePropMap,
+      (key, val, originalVal, conditionSource) => {
+        const isStyledContextProp = styledContext && key in styledContext
+
+        if (key === 'className') {
+          if (typeof val === 'string' && val) {
+            className = `${className} ${val}`.trim()
+          }
+          return
+        }
 
-      if (process.env.TAMAGUI_TARGET === 'native') {
-        if (key === 'pointerEvents') {
+        if (!isHOC && disablePropMap && !isStyledContextProp) {
+          // a text-only style prop on a non-text host must not leak to the DOM
+          // as an unknown attribute (and RN would silently ignore it). every key
+          // here already failed this host's validity table, so the extra check
+          // only runs on that cold path
+          if (key in stylePropsAll && !isValidStyleKey(key, validStyles, accept)) {
+            if (process.env.NODE_ENV === 'development') {
+              console.warn(
+                `[tamagui] "${key}" is a text style prop and this component is not text — it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`
+              )
+            }
+            return
+          }
           viewProps[key] = val
           return
         }
-      }
-
-      if (
-        (!isHOC && isValidStyleKey(key, validStyles, accept)) ||
-        (process.env.TAMAGUI_TARGET === 'native' && isAndroid && key === 'elevation')
-      ) {
-        mergeStyle(styleState, key, val, 1, false, originalVal)
-        return
-      }
-
-      // re-run with expanded key
-      isPseudo = key in validPseudoKeys
-      isMedia = isPseudo ? false : getMediaKey(key)
-      isMediaOrPseudo = Boolean(isMedia || isPseudo)
-      isVariant = variants && key in variants
-
-      // handle group key transformation for variant-expanded keys (issue #3613)
-      if (isMedia === 'group') {
-        key = normalizeGroupKey(key, groupContext)
-      }
-
-      if (shouldSkipNativeHoverProp(key, isMedia)) {
-        return
-      }
-
-      if (
-        inlineProps?.has(key) ||
-        (process.env.IS_STATIC === 'is_static' && inlineWhenUnflattened?.has(key))
-      ) {
-        viewProps[key] = props[key] ?? val
-      }
-
-      // have to run this logic again here because expansions may need to be passed down
-      // see StyledButtonVariantPseudoMerge test
-      const shouldPassThrough =
-        (styleProps.noExpand && isPseudo) ||
-        (isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit]))
 
-      if (shouldPassThrough) {
-        passDownProp(viewProps, key, val, isMediaOrPseudo)
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-          console.groupCollapsed(` - passing down prop ${key}`)
-          log({ val, after: { ...viewProps[key] } })
+          console.groupCollapsed('  💠 expanded', keyInit, '=>', key)
+          log(val)
           console.groupEnd()
         }
-        return
-      }
-
-      if (isPseudo) {
-        if (!val) return
 
-        // 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,
-          val,
-          styleProps.noClass && !(process.env.IS_STATIC === 'is_static')
-        )
+        if (val == null) return
 
-        if (!shouldDoClasses || process.env.IS_STATIC === 'is_static') {
-          pseudos ||= {}
-          pseudos[key] ||= {}
-
-          // if compiler we can just set this and continue on our way
-          if (process.env.IS_STATIC === 'is_static') {
-            Object.assign(pseudos[key], pseudoStyleObject)
-            return
-          }
-        }
-
-        const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
-        const isEnter = key === 'enterStyle'
-        const isExit = key === 'exitStyle'
-
-        // don't continue here on isEnter && !state.unmounted because we need to merge defaults
-        if (!descriptor) {
+        if (accept && key in accept) {
+          viewProps[key] = val
           return
         }
 
-        // on server only generate classes for enterStyle
-        if (shouldDoClasses && !isExit) {
-          const pseudoStyles = getStyleAtomic(pseudoStyleObject, descriptor)
-
-          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-            console.info('pseudo:', key, pseudoStyleObject, pseudoStyles)
-          }
-
-          for (const psuedoStyle of pseudoStyles) {
-            const fullKey = `${psuedoStyle[StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`
-            addStyleToInsertRules(rulesToInsert, psuedoStyle)
-            classNames[fullKey] = psuedoStyle[StyleObjectIdentifier]
-          }
-        }
+        const isHostStyleKey =
+          (!isHOC && isValidStyleKey(key, validStyles, accept)) ||
+          (process.env.TAMAGUI_TARGET === 'native' && isAndroid && key === 'elevation')
+        const isContextProgramKey = !isHOC && Boolean(isStyledContextProp)
 
-        if (!shouldDoClasses || isExit || isEnter) {
-          // we don't skip this if disabled because we need to animate to default states that aren't even set:
-          // so if we have <Stack enterStyle={{ opacity: 0 }} />
-          // we need to animate from 0 => 1 once enter is finished
-          // see the if (isDisabled) block below which loops through animatableDefaults
-
-          const descriptorKey = descriptor.stateKey || descriptor.name
-
-          let isDisabled = componentState[descriptorKey] === false
-          if (isExit) {
-            isDisabled = !styleProps.isExiting
-          }
-          if (isEnter && componentState.unmounted === false) {
-            isDisabled = true
-          }
-
-          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-            console.groupCollapsed('pseudo', key, { isDisabled })
-            log({ pseudoStyleObject, isDisabled, descriptor, componentState })
-            console.groupEnd()
-          }
-
-          const importance = descriptor.priority
-
-          const pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject)
-          for (const pkey in pseudoStyleObject) {
-            const val = pseudoStyleObject[pkey]
-            // when disabled ensure the default value is set for future animations to align
-
-            if (isDisabled) {
-              applyDefaultStyle(pkey, styleState)
-            } else {
-              const curImportance = styleState.usedKeys[pkey] || 0
-              const shouldMerge = importance >= curImportance
-
-              if (shouldMerge) {
-                if (process.env.IS_STATIC === 'is_static') {
-                  pseudos ||= {}
-                  pseudos[key] ||= {}
-                  pseudos[key][pkey] = val
-                }
-                mergeStyle(
-                  styleState,
-                  pkey,
-                  val,
-                  importance,
-                  false,
-                  pseudoOriginalValues?.[pkey]
-                )
-              }
-
-              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-                log('    subKey', pkey, shouldMerge, {
-                  importance,
-                  curImportance,
-                  pkey,
-                  val,
-                })
-              }
-            }
-          }
-
-          // set this after the loop over pseudoStyleObject so it applies before setting usedKeys
-          if (!isDisabled) {
-            // mark usedKeys based on pseudoStyleObject
-            for (const key in val) {
-              const k = shorthands[key] || key
-              styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0)
+        if (conditionSource !== undefined) {
+          if (isHostStyleKey || isContextProgramKey) {
+            contributeVariantClauseValue(
+              styleState,
+              key,
+              val,
+              conditionSource,
+              mergeStyle,
+              originalVal,
+              !isHostStyleKey
+            )
+          } else if (isHOC) {
+            // reduce the clause back to flat-value string form so the wrapped
+            // component's own string parser applies the condition
+            const appended = appendFlatClause(viewProps[key], conditionSource, val)
+            if (appended !== undefined) {
+              viewProps[key] = appended
+            } else if (process.env.NODE_ENV === 'development') {
+              console.warn(
+                `[tamagui] conditional variant value for "${key}" is not string-representable; dropping the clause`
+              )
             }
+          } else if (process.env.NODE_ENV === 'development') {
+            console.warn(
+              `[tamagui] "${key}" is not a valid style on this component; the conditional variant value is dropped.`
+            )
           }
+          return
         }
 
-        return
-      }
-
-      // media
-      if (isMedia) {
-        if (!val) return
-
-        // for some reason 'space' in val upsetting next ssr during prod build
-        // technically i guess this also will not apply if 0 space which makes sense?
-        const mediaKeyShort = key.slice(isMedia == 'theme' ? 7 : 1)
-
-        hasMedia ||= true
-        const hasSpace = val['space']
-
-        if (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) {
-          if (!hasMedia || typeof hasMedia === 'boolean') {
-            hasMedia = new Set()
-          }
-          hasMedia.add(mediaKeyShort)
-        }
-
-        // can bail early
-        if (isMedia === 'platform') {
-          if (!isActivePlatform(key)) {
-            return
-          }
-        }
-
-        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-          log(`  📺 ${key}`, {
+        if (isHostStyleKey || isContextProgramKey) {
+          contributeStyleValue(
+            styleState,
             key,
             val,
-            props,
-            shouldDoClasses,
-            acceptsClassName,
-            componentState,
-            mediaState,
-          })
-        }
-
-        const priority = mediaStylesSeen
-        mediaStylesSeen += 1
-
-        // the compiler has no window to match against, so a media block must stay
-        // conditional: keep it nested under its own key and let the extractor's
-        // atomic-CSS pass emit an @media rule. merging it into the flat style here
-        // bakes whichever medias node happens to consider active into the
-        // unconditional styles, which is how a variant's $lg block ended up
-        // applying at every width while its real breakpoint lost to the base.
-        if (process.env.IS_STATIC === 'is_static' && isMedia === true) {
-          const mediaStyle = getSubStyle(styleState, key, val, true)
-          styleState.style ||= {}
-          const existing = styleState.style[key]
-          styleState.style[key] = existing
-            ? Object.assign(existing, mediaStyle)
-            : mediaStyle
+            mergeStyle,
+            originalVal,
+            !isHostStyleKey
+          )
           return
         }
 
-        // 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)
-
-          for (const style of mediaStyles) {
-            // handle nested media:
-            // for now we're doing weird stuff, getCSSStylesAtomic will put the
-            // $platform-web into property so we can check it here
-            const property = style[StyleObjectProperty]
-            const isSubStyle = property[0] === '$'
-            if (isSubStyle && !isActivePlatform(property)) {
-              continue
-            }
-
-            const out = createMediaStyle(
-              style,
-              mediaKeyShort,
-              mediaQueryConfig,
-              isMedia,
-              false,
-              priority
-            )
-
-            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-              log(`📺 media style:`, out)
-            }
-
-            // this is imperfect it should be fixed further down, we mess up property when dealing with
-            // media-sub-style, like $sm={{ $platform-web: {} }}
-            // property is just $platform-web, it should br $platform-web-bg, so we add extra info from style
-            // but that info includes the value too
-            const subKey = isSubStyle ? style[2] : ''
-            const fullKey = `${
-              style[StyleObjectProperty]
-            }${subKey}${PROP_SPLIT}${mediaKeyShort}${style[StyleObjectPseudo] || ''}`
-
-            addStyleToInsertRules(rulesToInsert, out as any)
-            classNames[fullKey] = out[StyleObjectIdentifier]
-          }
-        } else {
-          const isThemeMedia = isMedia === 'theme'
-          const isGroupMedia = isMedia === 'group'
-          const isPlatformMedia = isMedia === 'platform'
-
-          if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
-            if (!mediaState[mediaKeyShort]) {
-              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-                log(`  📺 ❌ DISABLED ${mediaKeyShort}`)
-              }
-              return
-            }
-            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-              log(`  📺 ✅ ENABLED ${mediaKeyShort}`)
-            }
-          }
-
-          const mediaStyle = getSubStyle(styleState, key, val, true)
-
-          let importanceBump = 0
-
-          if (isThemeMedia) {
-            if (
-              process.env.TAMAGUI_TARGET === 'native' &&
-              supportsDynamicColorIOS &&
-              getSetting('fastSchemeChange')
-            ) {
-              // iOS will use https://reactnative.dev/docs/dynamiccolorios
-              // so need to predefine the dynamic color before merging the styles
-              // for example: <StyledYStack $theme-dark={{borderColor: '$red10'}} $theme-light={{borderColor: '$green10'}}> => {borderColor: {dynamic: {dark: '$red10', light: '$green10'}}}
-
-              styleState.style ||= {}
-              const scheme = mediaKeyShort
-              const oppositeScheme = getOppositeScheme(mediaKeyShort)
-              const themeOriginalValues = styleOriginalValues.get(mediaStyle)
-              const isCurrentScheme = themeName === scheme || themeName.startsWith(scheme)
-
-              for (const subKey in mediaStyle) {
-                const val = extractValueFromDynamic(mediaStyle[subKey], scheme)
-                const existing = styleState.style[subKey]
-
-                // Only color properties support DynamicColorIOS - non-color properties
-                // like opacity, dimensions, etc. will crash if wrapped with {dynamic: {...}}
-                // See: https://github.com/tamagui/tamagui/issues/3096
-                // See: https://github.com/tamagui/tamagui/issues/2980
-                if (!isColorStyleKey(subKey)) {
-                  // non-color properties require re-render to update
-                  dynamicThemeAccess = true
-                  // only apply if this is the current theme
-                  if (isCurrentScheme) {
-                    // update mediaStyle so the later merge loop uses correct value
-                    mediaStyle[subKey] = val
-                  } else {
-                    // remove from mediaStyle so it doesn't get merged with wrong theme's value
-                    delete mediaStyle[subKey]
-                  }
-                  continue
-                }
-
-                // if there's already a dynamic object from the other theme pseudo prop,
-                // merge directly to avoid importance conflicts between $theme-dark and $theme-light
-                if (existing?.dynamic) {
-                  existing.dynamic[scheme] = val
-                  mediaStyle[subKey] = existing
-                } else {
-                  const oppositeVal = extractValueFromDynamic(existing, oppositeScheme)
-                  mediaStyle[subKey] = getDynamicVal({
-                    scheme,
-                    val,
-                    oppositeVal,
-                  })
-                  mergeStyle(
-                    styleState,
-                    subKey,
-                    mediaStyle[subKey],
-                    priority,
-                    false,
-                    themeOriginalValues?.[subKey]
-                  )
-                }
-              }
-            } else {
-              // non-ios or no fastschemechange - need re-renders for theme changes
-              dynamicThemeAccess = true
-              if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) {
-                return
-              }
-            }
-          } else if (isGroupMedia) {
-            const groupInfo = getGroupPropParts(mediaKeyShort)
-            const groupName = groupInfo.name
-
-            // $group-x
-            const groupState = groupContext?.[groupName]?.state
-            const groupPseudoKey = groupInfo.pseudo
-            const groupMediaKey = groupInfo.media
-
-            if (process.env.TAMAGUI_TARGET === 'native' && groupPseudoKey === 'hover') {
-              return
-            }
-
-            if (!groupState) {
-              if (process.env.NODE_ENV === 'development' && debug) {
-                log(`No parent with group prop, skipping styles: ${groupName}`)
-              }
-              // we still want to indicate we should listen! this is how subscribeToGroupContext knows to run
-              pseudoGroups ||= new Set()
-              return
-            }
-
-            const componentGroupState = componentState.group?.[groupName]
+        isVariant = variants && key in variants
 
-            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 && groupState.layout) {
-                isActive = mediaKeyMatch(groupMediaKey, groupState.layout)
-              }
-
-              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-                log(` 🏘️ GROUP media ${groupMediaKey} active? ${isActive}`, {
-                  ...mediaState,
-                  usedKeys: { ...styleState.usedKeys },
-                })
-              }
-              if (!isActive) {
-                // ensure we set the defaults so animations work
-                for (const pkey in mediaStyle) {
-                  applyDefaultStyle(pkey, styleState)
-                }
-
-                return
-              }
-              importanceBump = 2
-            }
+        if (inlineProps?.has(key)) {
+          viewProps[key] = props[key] ?? val
+        }
 
-            if (groupPseudoKey) {
-              pseudoGroups ||= new Set()
-              pseudoGroups.add(groupName)
-              const componentGroupPseudoState = (
-                componentGroupState ||
-                // fallback to context initially
-                groupContext?.[groupName].state
-              )?.pseudo
-
-              const isActive = componentGroupPseudoState?.[groupPseudoKey]
-              const priority = pseudoPriorities[groupPseudoKey]
-
-              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-                log(
-                  ` 🏘️ GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority}`,
-                  {
-                    componentGroupPseudoState: { ...componentGroupPseudoState },
-                    usedKeys: { ...styleState.usedKeys },
-                  }
-                )
-              }
-              if (!isActive) {
-                // ensure we set the defaults so animations work
-                for (const pkey in mediaStyle) {
-                  applyDefaultStyle(pkey, styleState)
-                }
+        const shouldPassThrough =
+          isHOC && Boolean(parentStaticConfig?.variants?.[keyInit])
 
-                return
-              }
-              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)
+        if (shouldPassThrough) {
+          passDownProp(viewProps, key, val)
+          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+            console.groupCollapsed(` - passing down prop ${key}`)
+            log({ val, after: { ...viewProps[key] } })
+            console.groupEnd()
           }
+          return
+        }
 
-          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
+        // pass to view props
+        if (!isVariant) {
+          if (isStyledContextProp) {
+            return
           }
 
-          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,
-              mediaKeyShort,
-              key,
-              val,
-              mediaState[mediaKeyShort],
-              importanceBump,
-              debug,
-              originalVal
-            )
-            if (didMerge && key === 'fontFamily') {
-              styleState.fontFamily = mediaStyle.fontFamily as string
-            }
-          }
-
-          for (const subKey in mediaStyle) {
-            if (subKey === 'space') {
-              continue
-            }
-            if (subKey[0] === '$') {
-              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])
+          // a text-only style prop on a non-text host must not leak to the DOM
+          // as an unknown attribute (and RN would silently ignore it): drop it
+          // with a dev diagnostic naming the fix. cold path — only keys that
+          // already failed this host's validity table get here
+          if (key in stylePropsAll && !isValidStyleKey(key, validStyles, accept)) {
+            if (process.env.NODE_ENV === 'development') {
+              console.warn(
+                `[tamagui] "${key}" is a text style prop and this component is not text — it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`
+              )
             }
+            return
           }
-        }
-
-        return // end media
-      }
 
-      // pass to view props
-      if (!isVariant) {
-        if (isStyledContextProp) {
-          return
+          viewProps[key] = val
         }
-
-        viewProps[key] = val
       }
-    })
+    )
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       try {
@@ -1219,7 +1036,9 @@ export const getSplitStyles: StyleSplitter = (
       }
       console.groupEnd()
     }
-  } // end prop loop
+  } // end prop contribution
+
+  forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp)
 
   if (
     process.env.NODE_ENV === 'development' &&
@@ -1229,6 +1048,59 @@ export const getSplitStyles: StyleSplitter = (
     time`split-styles-propsend`
   }
 
+  const conditionalStates = styleState.flatStateKeys || null
+  const usesSafeArea = !!styleState.flatUsesSafeArea
+  if (styleState.flatMediaKeys?.size) {
+    if (!hasMedia) hasMedia = new Set()
+    if (typeof hasMedia !== 'boolean') {
+      for (const key of styleState.flatMediaKeys) hasMedia.add(key)
+    }
+  }
+  if (styleState.flatGroupKeys?.size) {
+    pseudoGroups ||= new Set()
+    for (const key of styleState.flatGroupKeys) pseudoGroups.add(key)
+  }
+  if (styleState.flatGroupMedia?.size) {
+    mediaGroups ||= new Set()
+    for (const key of styleState.flatGroupMedia) mediaGroups.add(key)
+  }
+
+  // hand the selected transition to animation drivers and keep it out of native
+  // destination styles, where `transition` is not a React Native style key.
+  const effectiveTransition = styleState.style?.transition as
+    | TransitionProp
+    | null
+    | undefined
+  if (
+    effectiveTransition != null &&
+    styleState.style &&
+    (process.env.TAMAGUI_TARGET === 'native' || driver?.outputStyle !== 'css')
+  ) {
+    delete styleState.style.transition
+  }
+
+  // on native, container config is context + layout measurement, never a
+  // react-native style key
+  if (process.env.TAMAGUI_TARGET === 'native' && styleState.style) {
+    if ('containerType' in styleState.style) delete styleState.style.containerType
+    if ('containerName' in styleState.style) delete styleState.style.containerName
+  }
+
+  // a named container also establishes containment
+  if (
+    process.env.TAMAGUI_TARGET === 'web' &&
+    (styleState.style?.containerName != null || classNames.containerName) &&
+    !(styleState.style && 'containerType' in styleState.style) &&
+    !classNames.containerType
+  ) {
+    contributeStyleValue(
+      styleState,
+      'containerType',
+      webContainerType || 'inline-size',
+      mergeStyle
+    )
+  }
+
   // style prop after:
 
   const avoidNormalize = styleProps.noNormalize === false
@@ -1247,7 +1119,7 @@ export const getSplitStyles: StyleSplitter = (
 
     // these are only the flat transforms
     // always do this at the very end to preserve the order strictly (animations, origin)
-    // and allow proper merging of all pseudos before applying
+    // and allow proper merging before applying
     if (styleState.flatTransforms) {
       // we need to match the order for animations to work because it needs consistent order
       // was thinking of having something like `state.prevTransformsOrder = ['y', 'x', ...]
@@ -1298,59 +1170,7 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   if (process.env.TAMAGUI_TARGET === 'web') {
-    if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
-      let retainedStyles: ViewStyleWithPseudos | undefined
-      let shouldRetain = false
-
-      if (styleState.style['$$css']) {
-        // avoid re-processing for rnw
-      } else {
-        const atomic = getCSSStylesAtomic(styleState.style)
-
-        for (const atomicStyle of atomic) {
-          const [key, value, identifier] = atomicStyle
-
-          const isAnimatedAndTransitionOnly =
-            styleProps.isAnimated &&
-            styleProps.noClass &&
-            props.animateOnly?.includes(key)
-
-          // 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) {
-            retainedStyles ||= {}
-            retainedStyles[key] = styleState.style[key]
-          } else if (nonAnimatedTransitionOnly) {
-            retainedStyles ||= {}
-            retainedStyles[key] = value
-            shouldRetain = true
-          } else {
-            addStyleToInsertRules(rulesToInsert, atomicStyle)
-            classNames[key] = identifier
-          }
-        }
-
-        if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-          // console.groupEnd() // ensure group ended from loop above
-          console.groupCollapsed(`🔹 getSplitStyles final style object`)
-          console.info(styleState.style)
-          console.info(`retainedStyles`, retainedStyles)
-          console.groupEnd()
-        }
-
-        if (shouldRetain || !(process.env.IS_STATIC === 'is_static')) {
-          styleState.style = retainedStyles || {}
-        }
-      }
-    }
+    flushDirectStyles(styleState)
 
     // when noClass is true (inline animation driver) extract non-animatable
     // base styles to atomic CSS classNames so the driver doesn't manage them
@@ -1363,55 +1183,23 @@ export const getSplitStyles: StyleSplitter = (
       !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]
+            // reproduce the direct-emission identity so the surviving class
+            // matches its server-rendered counterpart exactly
+            const atomicStyle = getCSSStyleAtomic(
+              key,
+              styleState.style[key],
+              '',
+              undefined,
+              directStyleSignature(key, styleState.style[key]),
+              true
+            )
             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
-  const styleProp = props.style
-
-  if (!styleProps.noMergeStyle && styleProp) {
-    if (isHOC) {
-      viewProps.style = normalizeStyle(styleProp)
-    } else {
-      const isArray = Array.isArray(styleProp)
-      const len = isArray ? styleProp.length : 1
-      for (let i = 0; i < len; i++) {
-        const style = isArray ? styleProp[i] : styleProp
-        if (style) {
-          if (style['$$css']) {
-            Object.assign(styleState.classNames, style)
-          } else {
-            styleState.style ||= {}
-            const normalized = normalizeStyle(style)
-            Object.assign(styleState.style, normalized)
-            if (shouldTrackStyleTokenProvenance) {
-              // the literal style prop is merged last and wins: carry its own
-              // token provenance forward, and clear a prior token wherever it
-              // supplies a literal (e.g. style={{ color: '#fff' }} over
-              // color="$color9" must stay a literal).
-              const styleOriginals = styleOriginalValues.get(normalized)
-              for (const k in normalized) {
-                recordStyleTokenProvenance(styleState, k, styleOriginals?.[k])
-              }
+            if (atomicStyle) {
+              addStyleToInsertRules(rulesToInsert, atomicStyle)
+              classNames[atomicStyle[StyleObjectProperty]] =
+                atomicStyle[StyleObjectIdentifier]
             }
           }
         }
@@ -1470,19 +1258,44 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
+  // built without conditional spreads: this runs once per component render and
+  // each spread transpiles to an ownKeys/defineProperty helper chain that
+  // profiles at several percent of total style-resolution time
   const result: GetStyleResult = {
     hasMedia,
     fontFamily: styleState.fontFamily,
     viewProps,
     style: styleState.style as any,
-    pseudos,
     classNames,
     rulesToInsert,
-    dynamicThemeAccess,
     pseudoGroups,
     mediaGroups,
     overriddenContextProps: styleState.overriddenContextProps,
-    pseudoTransitions: styleState.pseudoTransitions,
+  }
+  if (effectiveTransition != null) result.effectiveTransition = effectiveTransition
+  if (conditionalStates) result.programStates = conditionalStates
+  if (usesSafeArea) result.usesSafeArea = true
+  if (getDirectDynamicThemeAccess(styleState)) result.dynamicThemeAccess = true
+
+  if (styleState.flatEnterKeys || styleState.flatExitKeys) {
+    const effectiveKeys = (keys?: Set<string>) => {
+      if (!keys) return
+      const out = new Set<string>()
+      for (const key of keys) {
+        out.add(
+          key === '--t-x' || key === '--t-y'
+            ? 'translate'
+            : key === '--t-scale-x' || key === '--t-scale-y'
+              ? 'scale'
+              : key
+        )
+      }
+      return out
+    }
+    result.programLifecycleStyleKeys = {
+      enter: effectiveKeys(styleState.flatEnterKeys),
+      exit: effectiveKeys(styleState.flatExitKeys),
+    }
   }
 
   const asChildExceptStyleLike =
@@ -1495,27 +1308,34 @@ export const getSplitStyles: StyleSplitter = (
       if (process.env.TAMAGUI_TARGET === 'web') {
         // merge className and style back into viewProps:
         // 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 fontFamily = isText || isInput ? styleState.fontFamily : null
         const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
         const groupClassName = props.group ? `t_group_${props.group}` : ''
-        const componentNameFinal = props.componentName || staticConfig.componentName
-        const componentNameClassName =
-          props.asChild || !componentNameFinal || componentNameFinal === 'Text'
+        const containerClassName = props.container ? 't_container' : ''
+        const displayNameClassName =
+          props.asChild ||
+          !styleProps.displayName ||
+          styleProps.displayName === 'Text' ||
+          styleProps.displayName === 'View' ||
+          !validComponentClassName.test(styleProps.displayName)
             ? ''
-            : `is_${componentNameFinal}`
+            : `is_${styleProps.displayName}`
 
         let classList: string[] = []
-        if (componentNameClassName) classList.push(componentNameClassName)
+        if (displayNameClassName) classList.push(displayNameClassName)
         // 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 (classNames) {
+          for (const key in classNames) {
+            classList.push(classNames[key])
+          }
+        }
         if (groupClassName) classList.push(groupClassName)
-        if (props.className) classList.push(props.className)
+        if (containerClassName) classList.push(containerClassName)
+        // use className variable which may have been updated by tailwind preprocessing
+        if (className) classList.push(className)
         const finalClassName = classList.join(' ')
 
         // use $$css for RNW components OR when animated with RNW driver
@@ -1566,6 +1386,9 @@ export const getSplitStyles: StyleSplitter = (
       try {
         // prettier-ignore
         const logs = {
+          ...((props as any).__tamaguiStyleDebugReceipt && {
+            receipt: (props as any).__tamaguiStyleDebugReceipt as StyleDebugReceipt,
+          }),
           ...result,
           className,
           componentState,
@@ -1595,36 +1418,73 @@ export const getSplitStyles: StyleSplitter = (
 }
 
 function mergeFlatTransforms(target: TextStyle, flatTransforms: Record<string, any>) {
-  Object.entries(flatTransforms)
-    .sort(([a], [b]) => sortString(a, b))
-    .forEach(([key, val]) => {
-      mergeTransform(target, key, val, true)
-    })
+  const transform: Record<string, any>[] = []
+  if ('x' in flatTransforms) transform.push({ translateX: flatTransforms.x })
+  if ('y' in flatTransforms) transform.push({ translateY: flatTransforms.y })
+  if ('rotate' in flatTransforms) transform.push({ rotate: flatTransforms.rotate })
+
+  const hasScaleX = 'scaleX' in flatTransforms
+  const hasScaleY = 'scaleY' in flatTransforms
+  if (hasScaleX && hasScaleY && Object.is(flatTransforms.scaleX, flatTransforms.scaleY)) {
+    transform.push({ scale: flatTransforms.scaleX })
+  } else {
+    if (hasScaleX) transform.push({ scaleX: flatTransforms.scaleX })
+    if (hasScaleY) transform.push({ scaleY: flatTransforms.scaleY })
+    if (!hasScaleX && !hasScaleY && 'scale' in flatTransforms) {
+      transform.push({ scale: flatTransforms.scale })
+    }
+  }
+
+  const keys: string[] = []
+  for (const key in flatTransforms) {
+    if (
+      key !== 'x' &&
+      key !== 'y' &&
+      key !== 'rotate' &&
+      key !== 'scale' &&
+      key !== 'scaleX' &&
+      key !== 'scaleY'
+    )
+      keys.push(key)
+  }
+  keys.sort(sortString)
+  for (const key of keys) {
+    transform.push({ [mapTransformKeys[key] || key]: flatTransforms[key] })
+  }
+  if (Array.isArray(target.transform)) {
+    transform.push(...(target.transform as any))
+  }
+  target.transform = transform as any
 }
 
 function mergeStyle(
   styleState: GetStyleState,
   key: string,
   val: any,
-  importance: number,
+  _importance: number,
   disableNormalize = false,
   originalVal?: any
 ) {
-  const { viewProps, styleProps, staticConfig, usedKeys } = styleState
-
-  const existingImportance = usedKeys[key] || 0
-  if (existingImportance > importance) {
-    return
-  }
+  const { viewProps, styleProps, staticConfig } = styleState
 
   // 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')
+  // 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 =
-    staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props
-  if (contextProps && key in contextProps) {
+  const contextConfig = staticConfig.context || staticConfig.parentStaticConfig?.context
+  const contextProps = contextConfig?.props
+  const inheritedContextPropKeys =
+    !staticConfig.context ||
+    staticConfig.context === staticConfig.parentStaticConfig?.context
+      ? staticConfig.parentStaticConfig?.contextProps
+      : undefined
+  const contextPropKeys = staticConfig.contextProps || inheritedContextPropKeys
+  const isContextProp =
+    (contextProps && key in contextProps) ||
+    contextPropKeys?.includes(key) ||
+    contextConfig?.propKeys?.includes(key)
+  if (isContextProp) {
     styleState.overriddenContextProps ||= {}
     // Priority: 1) originalVal from propMapper, 2) tracked original from variant resolution, 3) val
     const originalFromState = styleState.originalContextPropValues?.[key]
@@ -1633,7 +1493,6 @@ function mergeStyle(
 
   if (key in stylePropsTransform) {
     styleState.flatTransforms ||= {}
-    usedKeys[key] = importance
     styleState.flatTransforms[key] = val
   } else {
     const shouldNormalize = isWeb && !disableNormalize && !styleProps.noNormalize
@@ -1646,15 +1505,14 @@ function mergeStyle(
       viewProps[key] = out
     } else {
       styleState.style ||= {}
-      usedKeys[key] = importance
       styleState.style[key] =
         // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
         // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
         key === 'transform' && Array.isArray(out) ? [...out] : out
       if (shouldTrackStyleTokenProvenance) {
-        // dev-tools token provenance: this write is the current winner for `key`
-        // (importance-gated above), so record the token that produced it, or clear
-        // a prior token when a literal wins, keeping literal-over-token exact.
+        // dev-tools token provenance: this write is the current winner for `key`,
+        // so record the token that produced it, or clear a prior token when a
+        // literal wins, keeping literal-over-token exact.
         recordStyleTokenProvenance(styleState, key, originalVal)
       }
     }
@@ -1663,14 +1521,31 @@ function mergeStyle(
 
 // track which token produced the winning value for a style key so the final
 // style object can expose exact provenance. only the base (painted) style is
-// tracked — pseudo/media writes flow through mergeStyle at their real importance,
-// and a literal override clears any earlier token for that key.
+// tracked, and a literal override clears any earlier token for that key.
 function recordStyleTokenProvenance(
   styleState: GetStyleState,
   key: string,
   originalVal: any
 ) {
-  if (typeof originalVal === 'string' && originalVal[0] === '$') {
+  let tokenName = typeof originalVal === 'string' ? originalVal : ''
+  if (tokenName) {
+    const slash = tokenName.lastIndexOf('/')
+    const opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1))
+    if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) {
+      tokenName = tokenName.slice(0, slash)
+    }
+  }
+  const isConfiguredToken =
+    tokenName !== '' &&
+    (Object.prototype.hasOwnProperty.call(styleState.theme, tokenName) ||
+      Object.prototype.hasOwnProperty.call(
+        styleState.conf.themes?.[styleState.flatThemeName || ''] || {},
+        tokenName
+      ) ||
+      Object.values(styleState.conf.tokensParsed).some((category) =>
+        Object.prototype.hasOwnProperty.call(category, tokenName)
+      ))
+  if (isConfiguredToken) {
     ;(styleState.tokenProvenance ||= {})[key] = originalVal
   } else if (styleState.tokenProvenance && key in styleState.tokenProvenance) {
     delete styleState.tokenProvenance[key]
@@ -1679,7 +1554,7 @@ function recordStyleTokenProvenance(
 
 export const getSubStyle = (
   styleState: GetStyleState,
-  subKey: string,
+  _subKey: string,
   styleIn: object,
   avoidMergeTransform?: boolean
 ): TextStyle => {
@@ -1688,41 +1563,19 @@ export const getSubStyle = (
   let originalValues: Record<string, any> | undefined
   const styleInOriginalValues = styleOriginalValues.get(styleIn)
   const parentProps = styleState.props
-  styleState.props = { ...parentProps, ...styleIn }
+  // prototype-chain view instead of a spread copy: reads fall through to
+  // parentProps, avoiding an O(parentProps) allocation per sub-style. define
+  // styleIn as own props (not Object.assign) because parentProps is React's
+  // frozen props object — [[Set]] of a key that exists read-only up the proto
+  // chain (e.g. a base backgroundColor also set in a pseudo/media sub-style)
+  // throws, whereas [[DefineOwnProperty]] via descriptors always writes an own.
+  styleState.props = Object.create(parentProps, Object.getOwnPropertyDescriptors(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
-      }
-
       const shouldSkip = !staticConfig.isHOC && key in skipProps && !styleProps.noSkip
       if (shouldSkip) {
         continue
@@ -1735,10 +1588,6 @@ export const getSubStyle = (
           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 {
@@ -1802,7 +1651,9 @@ export const getSubStyle = (
   }
 
   // Store original values in WeakMap instead of on the object itself
-  if (originalValues && Object.keys(originalValues).length) {
+  // (originalValues is only ever created right before a key is set, so
+  // defined implies non-empty)
+  if (originalValues) {
     styleOriginalValues.set(styleOut, originalValues)
   }
 
@@ -1841,26 +1692,6 @@ function addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: StyleO
   }
 }
 
-const defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || 'rgba(0,0,0,0)'
-const animatableDefaults = {
-  ...Object.fromEntries(
-    Object.entries(tokenCategories.color).map(([k, v]) => [k, defaultColor])
-  ),
-  opacity: 1,
-  scale: 1,
-  scaleX: 1,
-  scaleY: 1,
-  rotate: '0deg',
-  rotateX: '0deg',
-  rotateY: '0deg',
-  rotateZ: '0deg',
-  skewX: '0deg',
-  skewY: '0deg',
-  x: 0,
-  y: 0,
-  borderRadius: 0,
-}
-
 const mergeTransform = (obj: TextStyle, key: string, val: any, backwards = false) => {
   if (typeof obj.transform === 'string') {
     return
@@ -1876,90 +1707,8 @@ const mapTransformKeys = {
   y: 'translateY',
 }
 
-function passDownProp(
-  viewProps: object,
-  key: string,
-  val: any,
-  shouldMergeObject = false
-) {
-  if (shouldMergeObject) {
-    const next = {
-      ...viewProps[key],
-      ...val,
-    }
-    // need to re-insert it at current position
-    delete viewProps[key]
-    viewProps[key] = next
-  } else {
-    viewProps[key] = val
-  }
-}
-
-function mergeMediaByImportance(
-  styleState: GetStyleState,
-  mediaKey: string,
-  key: string,
-  value: any,
-  isSizeMedia: boolean,
-  importanceBump?: number,
-  debugProp?: DebugProp,
-  originalVal?: any
-) {
-  const usedKeys = styleState.usedKeys
-  let importance = getMediaImportanceIfMoreImportant(
-    mediaKey,
-    key,
-    styleState,
-    isSizeMedia
-  )
-  if (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(
-      `mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`
-    )
-  }
-  if (importance === null) {
-    return false
-  }
-  if (key in pseudoDescriptors) {
-    const descriptor = pseudoDescriptors[key as PseudoDescriptorKey]
-    const descriptorKey = descriptor.stateKey || descriptor.name
-    const isDisabled = styleState.componentState[descriptorKey] === false
-    if (isDisabled) {
-      return false
-    }
-    // For pseudo inside media, value is an object with subkeys
-    const pseudoOriginalValues = styleOriginalValues.get(value as object)
-    for (const subKey in value) {
-      mergeStyle(
-        styleState,
-        subKey,
-        value[subKey],
-        importance,
-        false,
-        pseudoOriginalValues?.[subKey]
-      )
-    }
-  } else {
-    mergeStyle(styleState, key, value, importance, false, originalVal)
-  }
-
-  return true
+function passDownProp(viewProps: object, key: string, val: any) {
+  viewProps[key] = val
 }
 
 function normalizeStyle(style: any) {
@@ -1978,14 +1727,3 @@ function normalizeStyle(style: any) {
   fixStyles(out)
   return out
 }
-
-function applyDefaultStyle(pkey: string, styleState: GetStyleState) {
-  const defaultValues = animatableDefaults[pkey]
-  if (
-    defaultValues != null &&
-    !(pkey in styleState.usedKeys) &&
-    (!styleState.style || !(pkey in styleState.style))
-  ) {
-    mergeStyle(styleState, pkey, defaultValues, 1)
-  }
-}