@tamagui/web 3.0.0-beta.924.1 → 3.0.0

package/src/helpers/getSplitStyles.tsx

@@ -1,3 +1,5 @@
+// leaf subpath on purpose, see grammarConfig
+import { getTransitionResolver } from '@tamagui/animation-helpers/transitionResolver'
 import { isAndroid, isClient, supportsDynamicColorIOS } from '@tamagui/constants'
 import {
   StyleObjectIdentifier,
@@ -14,9 +16,11 @@ import {
   createTransformAccumulator,
   finalizeTransformAccumulator,
   getTransformPartKeys,
+  grammarMaxNonPlatformDepth,
+  namedCssColors,
   removeTransformValue,
 } from '@tamagui/style-grammar/runtime'
-import { getConfig, getConfigMaybe, getFont } from '../config'
+import { getConfig, getConfigMaybe, getFont, getSetting } from '../config'
 import { isDevTools } from '../constants/isDevTools'
 import { defaultComponentStateMounted } from '../defaultComponentState'
 import { isVariable } from '../createVariable'
@@ -29,6 +33,7 @@ import type {
   DebugProp,
   GetStyleResult,
   GetStyleState,
+  NativeTextMetrics,
   RulesToInsert,
   SplitStyleProps,
   StaticConfig,
@@ -49,7 +54,7 @@ import {
   flushDirectStyles,
   registerAtomicSlot,
 } from './getCSSStylesAtomic'
-import { expandStyle } from './expandStyle'
+import { expandStyle, nativeShorthandLogicals } from './expandStyle'
 import {
   classifyBorderComponents,
   splitComponents,
@@ -59,13 +64,13 @@ import { fixStyles } from './expandStyles'
 import { getConfigRevisionState } from './grammarConfig'
 import { mediaState as globalMediaState, mediaKeyMatch } from './mediaState'
 import { getStyleStaticConfig, type StyleStaticConfig } from './styleStaticConfig'
-import type { FrontendClassSink } from './styleFrontend'
+import { mergeFrontendCondition, type FrontendClassSink } from './styleFrontend'
 import { nativeTextInputColorProps, normalizeNativeStyle } from './nativeStyleEngine'
 import { warnOnce, warnRefusedValue } from './warnOnce'
 
 export { getStyleStaticConfig }
 
-import { isColorStyleKey } from './getDynamicVal'
+import { extractValueFromDynamic, isColorStyleKey } from './getDynamicVal'
 import { getDynamicEnv } from './styledDynamic'
 import {
   getRulesForIdentifier,
@@ -76,9 +81,12 @@ import {
 import { log } from './log'
 import { normalizeColor } from './normalizeColor'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
-import { parseNativeStyle } from './parseNativeStyle.native'
+import { resolveTextMetrics } from './nativeTextMetrics'
+import { isTamaguiElement } from './isTamaguiElement'
+import { parseNativeStyle } from './parseNativeStyle'
 import { parseNativeTransform } from './parseNativeTransform.native'
 import { isRemValue, resolveRem } from './resolveRem'
+import { resolveNativeUnits } from './resolveNativeUnits'
 import { resolveVariableValue } from './resolveVariableValue'
 import { HOC_CLASSNAME_MARKER, skipProps } from './skipProps'
 import { styleOriginalValues } from './styleOriginalValues'
@@ -441,6 +449,7 @@ const passFrontendContainerType = 27
 const passSourceLayer = 28
 const passParentCursor = 29
 const passMapSourceKey = 30
+const passVariantOutput = 31
 
 const passFlags = 13
 
@@ -462,6 +471,10 @@ const passTextFlag = 32
 const passInputFlag = 64
 const passAsChildStyleFlag = 128
 
+function isRemovedVendorStyleProp(property: string) {
+  return /^(Webkit|Moz|ms)[A-Z]/.test(property) && !(property in stylePropsAll)
+}
+
 // 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)
@@ -525,7 +538,6 @@ function contributeProp(
   const shouldCheckSkipProps = !noSkip
   const asChildExceptStyleLike = Boolean(flags & passAsChildStyleFlag)
   const isTextOrInput = isText || isInput
-  const hocParentVariants = isHOC ? parentVariants : undefined
   let keyInit = keyOg
   let valInit = valOg
 
@@ -588,24 +600,38 @@ function contributeProp(
         return
       }
       const resolveClassName = styleFrontend?.resolveClassName
+      // composed utilities (ring width + ring color -> one boxShadow) arrive as
+      // `__`-prefixed keys the frontend folds together after the walk. only
+      // allocates when a class actually emits one.
+      let composedProps: Record<string, any> | null = null
       const sink: FrontendClassSink = (entry) => {
         const property = entry[0]
-        if (entry[2] !== undefined) {
+        const condition = entry[2]
+        if (property.charCodeAt(0) === 95 && property.charCodeAt(1) === 95) {
+          composedProps ||= {}
+          composedProps[property] = mergeFrontendCondition(
+            composedProps[property],
+            entry[1],
+            condition
+          )
+          return
+        }
+        if (condition !== undefined) {
           if (isValidStyleKey(property, validStyles)) {
-            contributeValue(styleState, property, entry[1], undefined, false, entry[2])
+            contributeValue(styleState, property, entry[1], undefined, false, condition)
           } else if (process.env.NODE_ENV === 'development') {
             console.warn(
               `[tamagui] "${property}" is not a valid style on this component; the frontend value is dropped.`
             )
           }
-        } else {
-          if (property === 'group') pass[passFrontendGroup] = entry[1]
-          else if (property === 'container') pass[passFrontendContainer] = entry[1]
-          else if (property === 'containerType') {
-            pass[passFrontendContainerType] = entry[1]
-          }
-          contributeProp(pass, property, entry[1])
+          return
         }
+        if (property === 'group') pass[passFrontendGroup] = entry[1]
+        else if (property === 'container') pass[passFrontendContainer] = entry[1]
+        else if (property === 'containerType') {
+          pass[passFrontendContainerType] = entry[1]
+        }
+        contributeProp(pass, property, entry[1])
       }
       let start = 0
       for (let index = 0; index <= valInit.length; index++) {
@@ -639,19 +665,74 @@ function contributeProp(
         }
         start = index + 1
       }
+      if (composedProps) {
+        // contributed at the className's own authored position, so composing a
+        // ring never moves an unrelated property to another precedence tier
+        const composed = styleFrontend!.compose?.(composedProps)
+        for (const property in composed) {
+          contributeProp(pass, property, composed[property])
+        }
+      }
     }
     return
   }
 
   if (keyInit === HOC_CLASSNAME_MARKER) {
-    if (valInit && typeof valInit === 'object') {
+    if (valInit) {
+      const [hocClassNames, hocSlots] = valInit as HOCClassNames
       const direct = styleState as DirectState
       const layers = (direct.flatPropertyLayers ||= new Map())
-      for (const property in valInit) {
+      for (const property in hocClassNames) {
+        if (hocSlots?.has(property)) continue
         clearDirectStyle(styleState, property)
-        styleState.classNames[property] = valInit[property]
+        styleState.classNames[property] = hocClassNames[property]
         layers.set(property, pass[passSourceLayer])
       }
+      // a slot class (flex, border, padding...) covers several properties, so
+      // the outer styled's entries merge per property with this frame's own
+      // slot instead of replacing it: styled(Hoc, { flexWrap }) keeps the
+      // frame's flexDirection
+      if (hocSlots) {
+        const slots = (direct.flatSlots ||= new Map())
+        const markerLayer = pass[passSourceLayer]
+        for (const [slot, entries] of hocSlots) {
+          for (const entry of entries) {
+            // the outer component already resolved its own tiers, so its styled
+            // definition (base/variant/resolver) arrives here as one tier above
+            // this frame's own definition but below the props this frame passes
+            // itself. otherwise a skin's size resolver outranks the corner
+            // zeroing a Group injects as props (Tabs inside a Group)
+            pass[passSourceLayer] = Math.max(entry[7]! >> 5, sourceLayerResolver)
+            if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue
+            if (
+              !isHOC &&
+              styleState.styleProps.isAnimated &&
+              (slot === 'transition' || entry[8]) &&
+              !(entry[0] in nonAnimatableStyleProps)
+            ) {
+              // the host owns lifecycle destinations and their transition.
+              const property =
+                entry[0] === '--t-x'
+                  ? 'x'
+                  : entry[0] === '--t-y'
+                    ? 'y'
+                    : entry[0] === '--t-scale-x'
+                      ? 'scaleX'
+                      : entry[0] === '--t-scale-y'
+                        ? 'scaleY'
+                        : entry[0]
+              const value =
+                styleState.animationDriver?.inputStyle === 'value' ? entry[6] : entry[1]
+              entry[3]
+                ? contributeValue(styleState, property, value, entry[6], false, entry[3])
+                : emitValue(styleState, property, value, null, entry[6], false)
+            } else {
+              writeStyleSlot(slots, slot, [...entry], pass[passSourceLayer])
+            }
+          }
+        }
+        pass[passSourceLayer] = markerLayer
+      }
     }
     return
   }
@@ -690,16 +771,49 @@ function contributeProp(
       const styleOriginals = shouldTrackStyleTokenProvenance
         ? styleOriginalValues.get(style)
         : undefined
-      for (const key in style) {
-        if (style[key] == null) continue
+      for (const authoredKey in style) {
+        const value = style[authoredKey]
+        if (value == null) continue
+        // style objects and pieces take the same shorthands as props
+        const key = disableExpandShorthands
+          ? authoredKey
+          : shorthands[authoredKey] || authoredKey
+        // the style prop is the inline style attribute, as in react: a plain
+        // value never becomes an atomic class, so element.style reads it back
+        // and it can change every frame without inserting a rule. a value that
+        // carries conditions can only exist as css, so those still compile
+        let inline = !styleState.styleProps.stylePieceEntries
         if (process.env.TAMAGUI_TARGET === 'web') {
           if (key === 'containerName') {
-            pass[passContainerName] = style[key]
+            pass[passContainerName] = value
+            inline = false
           } else if (key === 'containerType') {
-            pass[passContainerType] = style[key]
+            pass[passContainerType] = value
+            inline = false
           }
         }
-        contributeValue(styleState, key, style[key], styleOriginals?.[key])
+        if (inline) {
+          if (typeof value === 'string') {
+            const [segments] = getConfigRevisionState(conf).parseFlatValue(value)
+            for (let index = 4; index < segments.length; index += 5) {
+              if (!(segments[index] & 1)) {
+                inline = false
+                break
+              }
+            }
+          } else if (
+            value &&
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            !isVariable(value) &&
+            classifyConditionalObject(value, styleState) !== 0
+          ) {
+            inline = false
+          }
+        }
+        ;(styleState as DirectState).flatInlineStyleProp = inline
+        contributeValue(styleState, key, value, styleOriginals?.[authoredKey])
+        ;(styleState as DirectState).flatInlineStyleProp = false
       }
     }
     pass[passSourceLayer] = layerBeforeStyle
@@ -715,6 +829,31 @@ function contributeProp(
     }
   }
 
+  if (process.env.NODE_ENV === 'development') {
+    if (
+      !isValidStyleKey(keyInit, validStyles) &&
+      (keyInit === 'animation' || !(keyInit in stylePropsAll)) &&
+      (!variants || !(keyInit in variants))
+    ) {
+      let replacement: string | undefined
+      if (keyInit === 'animation') replacement = 'transition='
+      else if (keyInit === 'hoverStyle') replacement = 'hover: clause'
+      else if (keyInit === 'pressStyle') replacement = 'press: clause'
+      else if (keyInit === 'focusStyle') replacement = 'focus: clause'
+      else if (keyInit === 'enterStyle') replacement = 'enter: clause'
+      else if (keyInit === 'exitStyle') replacement = 'exit: clause'
+      else if (keyInit.charCodeAt(0) === 36 && keyInit.length > 1) {
+        replacement = `${keyInit.slice(1)}: clause`
+      }
+      if (replacement) {
+        warnOnce(
+          `v2-prop:${keyInit}`,
+          `prop "${keyInit}" was removed in v3; use ${replacement}`
+        )
+      }
+    }
+  }
+
   const isNativeInputColor =
     process.env.TAMAGUI_TARGET === 'native' &&
     isInput &&
@@ -732,18 +871,21 @@ function contributeProp(
     }
     if (keyInit === 'transition' && typeof valInit === 'string') {
       if (process.env.TAMAGUI_TARGET === 'native') return
-      const animationConfig = driverAnimations?.[valInit]
-      if (
-        animationConfig &&
-        driverOutputStyle === 'css' &&
-        process.env.IS_STATIC === 'is_static'
-      ) {
-        // css output needs no runtime component: lower its named transition
-        // to ordinary css so the compiler can keep flattening.
-        valInit = `all ${animationConfig}`
-      } else if (animationConfig) {
-        // animation drivers consume configured preset names directly
-        return
+      // the same grammar the compiler uses, so a value never means one thing
+      // here and another there. a transition made only of css timings needs no
+      // driver and falls through to the ordinary style path, and a bundle with
+      // no driver in it has no resolver because it has no presets to resolve.
+      const transitions = getTransitionResolver()
+      const resolved = transitions?.resolve(valInit, { animations: driverAnimations })
+      if (resolved?.fused) {
+        if (driverOutputStyle === 'css' && process.env.IS_STATIC === 'is_static') {
+          // css output needs no runtime component: springs lower to a
+          // `linear()` easing, so the compiler can keep flattening.
+          valInit = transitions!.toCSS(resolved) ?? valInit
+        } else {
+          // animation drivers consume the authored value directly
+          return
+        }
       }
     } else {
       return
@@ -764,17 +906,14 @@ function contributeProp(
   }
 
   if (process.env.TAMAGUI_TARGET === 'native') {
+    // only text has the native selectable prop. consume the authoring name on
+    // either host so a view never receives a text-only host attribute.
+    if (keyInit === 'userSelect') {
+      if (isText) viewProps.selectable = valInit !== 'none'
+      return
+    }
     if (!isValidStyleKeyInit) {
-      if (!isAndroid) {
-        // only works in android
-        if (keyInit === 'elevationAndroid') return
-      }
-
-      // map userSelect to native prop
-      if (keyInit === 'userSelect') {
-        keyInit = 'selectable'
-        valInit = valInit !== 'none'
-      } else if (keyInit === 'textOverflow') {
+      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') {
@@ -788,6 +927,30 @@ function contributeProp(
     }
   }
 
+  // variants hold styles and aria/data attributes (data- is handled above),
+  // which flatten to the same attribute. anything else a variant sets (a
+  // theme, a handler, a prop for the wrapped component) is dropped, so a
+  // variant means the same flattened or not
+  if (
+    pass[passVariantOutput] &&
+    !isValidStyleKeyInit &&
+    !keyInit.startsWith('aria-') &&
+    !(keyInit in stylePropsAll) &&
+    !(keyInit in skipProps) &&
+    !(variants && keyInit in variants) &&
+    !(parentVariants && keyInit in parentVariants) &&
+    !styledContextKeys?.has(keyInit) &&
+    !(styledContext && keyInit in styledContext)
+  ) {
+    if (process.env.NODE_ENV === 'development') {
+      warnOnce(
+        `variant-non-style:${keyInit}`,
+        `a variant set "${keyInit}", which is not a style. Variants hold styles and aria/data attributes only: set "${keyInit}" on the component one level up.`
+      )
+    }
+    return
+  }
+
   if (process.env.TAMAGUI_TARGET === 'web') {
     if (!noExpand) {
       // map the React Native-shaped public prop surface onto DOM attributes in
@@ -807,7 +970,7 @@ function contributeProp(
         ) {
           viewProps.disabled = true
         }
-        if (!variants?.disabled) {
+        if (!variants?.disabled && !isHOC) {
           return
         }
       }
@@ -847,12 +1010,13 @@ function contributeProp(
 
   const shouldPassProp =
     (!isStyleProp && isHOC) ||
+    // disabled also controls the inner component's behavior, beyond its skin.
+    (isHOC && keyInit === 'disabled') ||
     // is in parent variants
-    (hocParentVariants && keyInit in hocParentVariants) ||
+    (parentVariants && keyInit in parentVariants) ||
     inlineProps?.has(keyInit)
 
-  const parentVariant = parentVariants?.[keyInit]
-  const isHOCShouldPassThrough = Boolean(isHOC && (parentVariant || keyInit in skipProps))
+  const isHOCShouldPassThrough = isHOC && keyInit in skipProps
 
   const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough
 
@@ -895,10 +1059,12 @@ function contributeProp(
   if (!isNativeInputColor && shouldCheckSkipProps && !neverSkipProps?.[keyInit]) {
     if (
       keyInit in skipProps &&
+      // a plain-css transition is a style, not a driver prop, so it must not be
+      // skipped here. same test as above: only a preset or spring needs a driver
       !(
         keyInit === 'transition' &&
         typeof valInit === 'string' &&
-        !driverAnimations?.[valInit]
+        !getTransitionResolver()?.resolve(valInit, { animations: driverAnimations }).fused
       )
     ) {
       if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -968,7 +1134,13 @@ function contributeProp(
         }
       }
     } else {
-      contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey)
+      contributeValue(
+        styleState,
+        keyInit,
+        valInit,
+        originalOg,
+        !isHostStyleKey || (isStyledContextProp && typeof valInit === 'boolean')
+      )
     }
     return
   }
@@ -994,8 +1166,9 @@ function contributeProp(
     return
   }
 
-  if (keyInit in stylePropsAll) {
-    if (process.env.NODE_ENV === 'development') {
+  if (keyInit in stylePropsAll || isRemovedVendorStyleProp(keyInit)) {
+    // shared css authoring intentionally drops unsupported keys on native.
+    if (process.env.NODE_ENV === 'development' && process.env.TAMAGUI_TARGET === 'web') {
       console.warn(
         `[tamagui] "${keyInit}" 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.`
       )
@@ -1058,7 +1231,7 @@ export const getSplitStyles: StyleSplitter = (
   const mediaState = styleProps.mediaState || globalMediaState
 
   let shouldDoClasses =
-    !process.env.TAMAGUI_DID_OUTPUT_CSS &&
+    process.env.TAMAGUI_RUNTIME !== 'island' &&
     acceptsClassName &&
     process.env.TAMAGUI_TARGET === 'web' &&
     !styleProps.noClass
@@ -1125,6 +1298,18 @@ export const getSplitStyles: StyleSplitter = (
   }
   ;(styleState as DirectState).flatStyleStaticConfig = styleStaticConfig
 
+  // native style stability: if the caller gave us the previous render's style
+  // object we track it so the per-key merge can compare inline and skip the
+  // object allocation when nothing changed
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    const prev = styleProps.prevStyle
+    if (prev) {
+      ;(styleState as DirectState).flatPrevStyle = prev
+      ;(styleState as DirectState).flatStyleChanged = false
+      ;(styleState as DirectState).flatStyleKeyCount = 0
+    }
+  }
+
   if (
     process.env.NODE_ENV === 'development' &&
     (debug === 'profile' || (globalThis as any).time)
@@ -1168,8 +1353,10 @@ export const getSplitStyles: StyleSplitter = (
   let frontendContainer: boolean | string | undefined
   let frontendContainerType: string | undefined
   const processedProps = props
-  const parentVariants = parentStaticConfig
-    ? getStyleStaticConfig(parentStaticConfig as StaticConfig, conf).variants
+  // only variant names determine HOC forwarding; their style values resolve
+  // in the renderer, so this needs no normalized style snapshot.
+  const parentVariants = isHOC
+    ? staticConfig.Component?.staticConfig?.variants
     : undefined
   const defaultProps = asChild ? styleStaticConfig.defaultProps : undefined
   const asChildExceptStyleLike =
@@ -1208,7 +1395,7 @@ export const getSplitStyles: StyleSplitter = (
     styledContextKeys,
     stylePassFlags,
     debug,
-    parentStaticConfig,
+    process.env.NODE_ENV === 'development' ? parentStaticConfig : undefined,
     defaultProps,
     driverAnimations,
     driverOutputStyle,
@@ -1297,6 +1484,7 @@ export const getSplitStyles: StyleSplitter = (
   // later resolver in the chain wins within the tier
   const resolvers = staticConfig.resolvers
   if (resolvers && !noExpand) {
+    const prevSourceLayer = pass[passSourceLayer]
     pass[passSourceLayer] = sourceLayerResolver
     const flagsBefore = pass[passFlags]
     // resolver output is styles only: never re-enter variant dispatch
@@ -1312,6 +1500,7 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
     pass[passFlags] = flagsBefore
+    pass[passSourceLayer] = prevSourceLayer
   }
 
   className = pass[passClassName]
@@ -1371,6 +1560,8 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
   completeResolvedStyles(styleState)
+  if (styleState.flatGroupKeys?.size) pseudoGroups = styleState.flatGroupKeys
+  if (styleState.flatGroupMedia?.size) mediaGroups = styleState.flatGroupMedia
   if (styleProps.isStatic) {
     for (const property in classNames) {
       const identifier = classNames[property]
@@ -1461,6 +1652,7 @@ export const getSplitStyles: StyleSplitter = (
     flushDirectStyles(styleState)
   }
 
+  let nativeTextMetrics: NativeTextMetrics | undefined
   // native: swap out the right family based on weight/style
   if (process.env.TAMAGUI_TARGET === 'native') {
     // set accessible when tabIndex is 0 (issue #3350)
@@ -1468,6 +1660,46 @@ export const getSplitStyles: StyleSplitter = (
       viewProps.accessible ??= true
     }
 
+    if (
+      (isText || isInput || staticConfig.isDOM) &&
+      !isHOC &&
+      (styleState.nativeLineHeight !== undefined ||
+        styleState.style?.fontSize !== undefined ||
+        componentContext?.parentFontSize !== undefined ||
+        componentContext?.parentLineHeight !== undefined)
+    ) {
+      const style = (styleState.style ||= {})
+      let lineHeight =
+        styleState.nativeLineHeight ?? parentSplitStyles?.nativeTextMetrics?.lineHeight
+      if (typeof lineHeight === 'string') {
+        const length = resolveNativeUnits('lineHeight', lineHeight, styleState)
+        if (typeof length === 'number') lineHeight = `${length}px`
+      }
+      nativeTextMetrics = resolveTextMetrics(
+        style,
+        lineHeight,
+        componentContext,
+        styleProps.isStatic,
+        !staticConfig.isDOM &&
+          !(processedProps.asChild && isTamaguiElement(processedProps.children))
+      )
+      if (staticConfig.isDOM) viewProps.__textMetrics = nativeTextMetrics
+      // resolveTextMetrics writes fontSize/lineHeight after the inline merge
+      // compare above, so an inherited-only change (new parent leading with
+      // unchanged own props) must opt out of the prev-style swap below
+      const directText = styleState as DirectState
+      const prevTextStyle = directText.flatPrevStyle
+      if (prevTextStyle && !directText.flatStyleChanged) {
+        const resolvedTextStyle = styleState.style
+        if (
+          resolvedTextStyle &&
+          (resolvedTextStyle.fontSize !== prevTextStyle.fontSize ||
+            resolvedTextStyle.lineHeight !== prevTextStyle.lineHeight)
+        ) {
+          directText.flatStyleChanged = true
+        }
+      }
+    }
     const style = styleState.style
     if (style?.fontFamily) {
       const faceInfo = getFont(style.fontFamily as string)?.face
@@ -1515,6 +1747,70 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
+  // native style stability: mergeStyle compares scalar values inline, but
+  // transforms finalize later and need their own value comparison.
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    const direct = styleState as DirectState
+    const prevStyle = direct.flatPrevStyle
+    if (
+      prevStyle &&
+      styleState.style &&
+      !direct.flatStyleChanged &&
+      Object.keys(prevStyle).length === Object.keys(styleState.style).length
+    ) {
+      const previousTransform = prevStyle.transform
+      const nextTransform = styleState.style.transform
+      let transformMatches = previousTransform === nextTransform
+      if (
+        !transformMatches &&
+        Array.isArray(previousTransform) &&
+        Array.isArray(nextTransform) &&
+        previousTransform.length === nextTransform.length
+      ) {
+        transformMatches = true
+        for (let index = 0; index < nextTransform.length; index++) {
+          const previousPart = previousTransform[index]
+          const nextPart = nextTransform[index]
+          if (previousPart === nextPart) continue
+          if (
+            !previousPart ||
+            !nextPart ||
+            typeof previousPart !== 'object' ||
+            typeof nextPart !== 'object'
+          ) {
+            transformMatches = false
+            break
+          }
+          const keys = Object.keys(nextPart)
+          if (keys.length !== Object.keys(previousPart).length) {
+            transformMatches = false
+            break
+          }
+          for (const key of keys) {
+            const previousValue = previousPart[key]
+            const nextValue = nextPart[key]
+            if (
+              previousValue !== nextValue &&
+              !(
+                Array.isArray(previousValue) &&
+                Array.isArray(nextValue) &&
+                previousValue.length === nextValue.length &&
+                nextValue.every(
+                  (value, valueIndex) => value === previousValue[valueIndex]
+                )
+              )
+            ) {
+              transformMatches = false
+              break
+            }
+          }
+          if (!transformMatches) break
+        }
+      }
+      if (transformMatches) styleState.style = prevStyle as any
+    }
+  }
+
   // 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
@@ -1529,6 +1825,8 @@ export const getSplitStyles: StyleSplitter = (
     mediaGroups,
     overriddenContextProps: styleState.overriddenContextProps,
   }
+  if (process.env.TAMAGUI_TARGET === 'native' && nativeTextMetrics)
+    result.nativeTextMetrics = nativeTextMetrics
   if (effectiveTransition != null) result.effectiveTransition = effectiveTransition
   if (conditionalStates) result.programStates = conditionalStates
   if (usesSafeArea) result.usesSafeArea = true
@@ -1561,7 +1859,13 @@ export const getSplitStyles: StyleSplitter = (
         const groupClassName = group ? `t_group_${group}` : ''
         // core host classes carry the base web reset. component hooks are
         // ordinary authored className defaults and do not derive from React identity.
-        let finalClassName = isText ? 'is_Text' : 'is_View'
+        // DOM hosts carry is_DOM (never is_Text/is_View): its :where() reset
+        // sets no display, so the browser stylesheet decides block vs inline.
+        let finalClassName = staticConfig.isDOM
+          ? 'is_DOM'
+          : isText
+            ? 'is_Text'
+            : 'is_View'
         if (fontFamilyClassName) finalClassName += ` ${fontFamilyClassName}`
         let hasPropertyClassNames = false
         if (classNames) {
@@ -1573,7 +1877,10 @@ export const getSplitStyles: StyleSplitter = (
         if (groupClassName) finalClassName += ` ${groupClassName}`
         if (className) finalClassName += ` ${className}`
         if (isHOC && hasPropertyClassNames) {
-          viewProps[HOC_CLASSNAME_MARKER] = classNames
+          viewProps[HOC_CLASSNAME_MARKER] = [
+            classNames,
+            (styleState as DirectState).flatCapturedSlots,
+          ] satisfies HOCClassNames
         }
         if (finalClassName) {
           viewProps.className = finalClassName
@@ -1633,7 +1940,7 @@ export const getSplitStyles: StyleSplitter = (
 const stylePieceStaticConfig = {
   acceptsClassName: true,
   isText: true,
-  validStyles: stylePropsAll,
+  validStyles: stylePropsInput,
 } as StaticConfig
 
 type CompiledStylePiece = {
@@ -1755,7 +2062,7 @@ function applyStylePieceClasses(
         const property = entry[0]
         const conditional = !!entry[2]
         if (!ownsSourceLayer(styleState, property, conditional)) continue
-        writeCapturedStyleRecord(slots, slot, entry, sourceLayer)
+        writeStyleSlot(slots, slot, [...entry], sourceLayer)
       }
     }
     if (compiled.programStates) {
@@ -1809,7 +2116,7 @@ function applyStylePieceClasses(
   return applied
 }
 
-function writeCapturedStyleRecord(
+function writeStyleSlot(
   slots: Map<string, AtomicSlotEntry[]>,
   slot: string,
   source: AtomicSlotEntry,
@@ -1827,6 +2134,16 @@ function writeCapturedStyleRecord(
       (entryFlags & (recordInline | recordCSS)) !==
       (flags & (recordInline | recordCSS))
     ) {
+      // a piece landing after a plain style value replaces its inline record
+      if (
+        sourceLayer === sourceLayerStyle &&
+        entry[7]! >> 5 === sourceLayerStyle &&
+        entry[0] === source[0] &&
+        !condition &&
+        !entry[2]
+      ) {
+        list.splice(index--, 1)
+      }
       continue
     }
     if (entry[0] !== source[0]) continue
@@ -1841,9 +2158,8 @@ function writeCapturedStyleRecord(
       break
     }
   }
-  const next = [...source] as AtomicSlotEntry
-  next[7] = flags | (sourceLayer << 5)
-  list.push(next)
+  source[7] = flags | (sourceLayer << 5)
+  list.push(source)
 }
 
 function mergeStyle(
@@ -1876,7 +2192,22 @@ function mergeStyle(
   } else {
     const shouldNormalize =
       process.env.TAMAGUI_TARGET === 'web' && !disableNormalize && !styleProps.noNormalize
-    const out = shouldNormalize ? normalizeValueWithProperty(val, key) : val
+    let out = shouldNormalize ? normalizeValueWithProperty(val, key) : val
+    if (process.env.TAMAGUI_TARGET === 'native' && key === 'lineHeight') {
+      // resolved variant records retain the font Variable as their original value.
+      styleState.nativeLineHeight =
+        typeof out === 'number' &&
+        isVariable(originalVal) &&
+        typeof originalVal.val === 'number'
+          ? `${out}px`
+          : out
+    } else if (process.env.TAMAGUI_TARGET === 'native' && typeof out === 'string') {
+      if (out.includes('cqi') || out.includes('cqw')) {
+        ;(styleState.flatGroupKeys ||= new Set()).add('@')
+        ;(styleState.flatGroupMedia ||= new Set()).add('@')
+      }
+      out = resolveNativeUnits(key, out, styleState)
+    }
     if (
       process.env.TAMAGUI_TARGET === 'native' &&
       staticConfig.isInput &&
@@ -1884,6 +2215,18 @@ function mergeStyle(
     ) {
       viewProps[nativeTextInputColorProps[key]] = out
     } else {
+      // native style stability: compare each value inline against the previous
+      // render's style object. if every key matches we can return the prev ref
+      // and skip RN's diffNestedProperty + cloneNodeWithNewProps entirely.
+      if (process.env.TAMAGUI_TARGET === 'native') {
+        const direct = styleState as DirectState
+        if (direct.flatPrevStyle) {
+          direct.flatStyleKeyCount = (direct.flatStyleKeyCount || 0) + 1
+          if (!direct.flatStyleChanged && direct.flatPrevStyle[key] !== out) {
+            direct.flatStyleChanged = true
+          }
+        }
+      }
       styleState.style ||= {}
       styleState.style[key] = out
       if (shouldTrackStyleTokenProvenance) {
@@ -1907,8 +2250,8 @@ function recordStyleTokenProvenance(
   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) {
+    const opacity = slash === -1 ? NaN : +tokenName.slice(slash + 1)
+    if (opacity % 1 === 0 && opacity >= 0 && opacity <= 100) {
       tokenName = tokenName.slice(0, slash)
     }
   }
@@ -1988,14 +2331,22 @@ export type MergeStyle = (
   originalValue?: any
 ) => void
 
+type HOCClassNames = [
+  classNames: ClassNamesObject,
+  slots: Map<string, AtomicSlotEntry[]> | undefined,
+]
+
 type DirectState = GetStyleState & {
+  // set while a plain style prop value contributes, so its record stays inline
+  flatInlineStyleProp?: boolean
   flatValueScope?: ValueScopeCache
-  flatValueScopeKind?: any
   flatConditions?: Map<string, Condition>
   flatConditionsClassed?: boolean
   flatPass?: StylePass
   flatStyleStaticConfig?: StyleStaticConfig
   flatSlots?: Map<string, AtomicSlotEntry[]>
+  // a styled HOC hands its class slot entries to the frame it renders
+  flatCapturedSlots?: Map<string, AtomicSlotEntry[]>
   flatPropertyLayers?: Map<string, number>
   flatCallerVariantKeys?: Set<string>
   flatAtomics?: Map<string, any>
@@ -2005,6 +2356,10 @@ type DirectState = GetStyleState & {
   flatDynamicThemeAccess?: boolean
   flatTextShadow?: Record<string, any>
   flatWebShadow?: any[]
+  // native style stability: inline-compared during the style loop
+  flatPrevStyle?: Record<string, any> | null
+  flatStyleChanged?: boolean
+  flatStyleKeyCount?: number
 }
 
 // orders the authored boxShadow value against the shadow-part record so the
@@ -2017,6 +2372,36 @@ const recordRetract = 4
 const recordDefault = 8
 const recordCSS = 16
 
+// react-native spells its RTL-aware props the way a dropped CSS draft did
+// (padding-start, border-end-color, border-top-start-radius, start/end). No
+// browser implements those, so the rules generated for them were inert and the
+// props did nothing on web. rename them onto the CSS logical properties that
+// are RTL-aware in exactly the same way (#3099)
+const webRTLRenames: Record<string, string> = {
+  marginHorizontal: 'marginInline',
+  marginVertical: 'marginBlock',
+  paddingHorizontal: 'paddingInline',
+  paddingVertical: 'paddingBlock',
+  writingDirection: 'direction',
+  paddingStart: 'paddingInlineStart',
+  paddingEnd: 'paddingInlineEnd',
+  marginStart: 'marginInlineStart',
+  marginEnd: 'marginInlineEnd',
+  borderStartWidth: 'borderInlineStartWidth',
+  borderEndWidth: 'borderInlineEndWidth',
+  borderStartColor: 'borderInlineStartColor',
+  borderEndColor: 'borderInlineEndColor',
+  borderStartStyle: 'borderInlineStartStyle',
+  borderEndStyle: 'borderInlineEndStyle',
+  // css orders these block-then-inline, so top-start is start-start
+  borderTopStartRadius: 'borderStartStartRadius',
+  borderTopEndRadius: 'borderStartEndRadius',
+  borderBottomStartRadius: 'borderEndStartRadius',
+  borderBottomEndRadius: 'borderEndEndRadius',
+  start: 'insetInlineStart',
+  end: 'insetInlineEnd',
+}
+
 // the property vocabulary is small and its strings are interned, so these
 // per-property classifications resolve once per process instead of running
 // their string tests on every value of every pass
@@ -2024,14 +2409,7 @@ const webStyleProperties = new Map<string, string>()
 function webStyleProperty(property: string) {
   let web = webStyleProperties.get(property)
   if (web === undefined) {
-    web =
-      property === 'writingDirection'
-        ? 'direction'
-        : property.endsWith('Horizontal')
-          ? `${property.slice(0, -10)}Inline`
-          : property.endsWith('Vertical')
-            ? `${property.slice(0, -8)}Block`
-            : property
+    web = webRTLRenames[property] || property
     webStyleProperties.set(property, web)
   }
   return web
@@ -2084,9 +2462,23 @@ function writeStyleRecord(
   const condition =
     conditionOverride !== -1 ? conditionOverride : cursor ? cursor[conditionValue] : 0
   const identity = cursor ? cursor[conditionKey] : ''
+  if (process.env.TAMAGUI_TARGET === 'native' && value === 'unset' && identity !== '') {
+    // a conditional unset means the platform default while the clause is
+    // active. native has no `unset` keyword, so retract the key instead of
+    // writing a string react native rejects. the record keeps its identity,
+    // so it still overrides the earlier clause and loses to a later one
+    value = undefined
+    original = undefined
+    flags |= recordRetract
+  }
   const direct = state as DirectState
   const slots = (direct.flatSlots ||= new Map())
-  const slot =
+  const sourceLayer = direct.flatPass?.[passSourceLayer] || 0
+  if (direct.flatInlineStyleProp) flags |= recordInline
+  // css records share a slot per shorthand group so one class covers the
+  // group; an inline record keeps its own property slot because the emitter
+  // merges exactly one inline winner per slot
+  const cssSlot =
     process.env.TAMAGUI_TARGET === 'web' &&
     canGenerateCSS &&
     (state.flatShouldDoClasses || flags & recordCSS)
@@ -2094,39 +2486,47 @@ function writeStyleRecord(
       : property.startsWith('transition')
         ? 'transition'
         : property
+  const slot = flags & recordInline && cssSlot !== property ? property : cssSlot
   let list = slots.get(slot)
   if (!list) slots.set(slot, (list = []))
-  for (let index = 0; index < list.length; index++) {
-    const entry = list[index]
-    const entryFlags = entry[7]!
-    if (
-      (entryFlags & (recordInline | recordCSS)) !==
-      (flags & (recordInline | recordCSS))
-    ) {
-      continue
-    }
-    if (entry[0] !== property) continue
-    if (flags & recordDefault) {
-      if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return
-    } else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
-      list.splice(index--, 1)
-      continue
-    }
-    if (entry[3] === identity) {
-      list.splice(index, 1)
-      break
+  // a style array is last-wins per property even across a piece (a class) and
+  // a plain value (inline), which otherwise never meet
+  if (sourceLayer === sourceLayerStyle && !condition) {
+    const other =
+      slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property)
+    if (other) {
+      for (let index = 0; index < other.length; index++) {
+        const entry = other[index]
+        const entryFlags = entry[7]!
+        if (
+          entry[0] === property &&
+          !entry[2] &&
+          entryFlags >> 5 === sourceLayerStyle &&
+          (entryFlags & (recordInline | recordCSS)) !==
+            (flags & (recordInline | recordCSS))
+        ) {
+          other.splice(index--, 1)
+        }
+      }
     }
   }
-  list.push([
-    property,
-    value,
-    condition,
-    identity,
-    cursor ? cursor[conditionSelector] : '',
-    cursor ? cursor[conditionWrappers] : undefined,
-    original,
-    flags | (((state as DirectState).flatPass?.[passSourceLayer] || 0) << 5),
-  ])
+  writeStyleSlot(
+    slots,
+    slot,
+    [
+      property,
+      value,
+      condition,
+      identity,
+      cursor ? cursor[conditionSelector] : '',
+      cursor ? cursor[conditionWrappers] : undefined,
+      original,
+      flags,
+      undefined,
+      !sourceLayer && direct.flatPass?.[passVariantOutput],
+    ],
+    sourceLayer
+  )
 }
 
 function streamWriteInline(
@@ -2186,6 +2586,9 @@ function completeResolvedStyles(state: GetStyleState, merge: MergeStyle = mergeS
   const slots = direct.flatSlots
   if (!slots) return
 
+  const capture = state.staticConfig.isHOC
+    ? (direct.flatCapturedSlots ||= new Map())
+    : undefined
   for (const [property, entries] of slots) {
     let cssEntries: AtomicSlotEntry[] | undefined
     let inlineWinner: AtomicSlotEntry | undefined
@@ -2220,7 +2623,21 @@ function completeResolvedStyles(state: GetStyleState, merge: MergeStyle = mergeS
         }
       }
     }
-    if (cssEntries) registerAtomicSlot(direct, property, cssEntries)
+    if (cssEntries) {
+      registerAtomicSlot(direct, property, cssEntries)
+      if (capture) {
+        // flagged css so the receiving frame keeps them as classes even when
+        // it renders its own styles inline
+        for (const entry of cssEntries) {
+          entry[7] = entry[7]! | recordCSS
+          if (!(entry[2] & 12)) continue
+          for (const sibling of cssEntries) {
+            if (sibling[0] === entry[0]) sibling[8] = true
+          }
+        }
+        capture.set(property, cssEntries)
+      }
+    }
     if (inlineWinner) {
       if (inlineWinner[7]! & recordRetract) {
         if (state.style) delete state.style[inlineWinner[0]]
@@ -2317,7 +2734,9 @@ const formatScanFailure = (
         ? 'an unterminated "/*" comment'
         : failure === 'stray-comment-close'
           ? 'a stray "*/"'
-          : 'an unterminated "("'
+          : failure === 'over-deep-clause'
+            ? `a clause with more than ${grammarMaxNonPlatformDepth} non-platform conditions`
+            : 'an unterminated "("'
 
 const warnScanFailure = (
   property: string,
@@ -2351,25 +2770,36 @@ let valueCacheEntries = 0
 const valueCacheRoot = {}
 const parsedSlices = new WeakMap<object, (string | undefined)[]>()
 
+const cssWideColorKeywords = new Set([
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'currentcolor',
+  'transparent',
+])
+
+const shadowRecipeProperties = new Set(['boxShadow', 'textShadow', 'filter'])
+
 // `embedded` also runs the embedded-token pass when the direct lookup leaves the
 // value alone, and memoizes that result. it is a regex replace over most string
 // values, so repeating it every render of every element is the single largest
 // cost on this path.
-const fontProperties = new Map<string, boolean>()
-
 function configuredValue(
   state: GetStyleState,
   property: string,
   raw: string,
-  embedded = false
+  embedded = false,
+  nativeColors?: Map<string, unknown>
 ): any {
   const grammar = getConfigRevisionState(state.conf)
   let name = raw
   let opacity: number | undefined
   const slash = raw.lastIndexOf('/')
   if (slash > 0) {
-    const amount = Number(raw.slice(slash + 1))
-    if (Number.isInteger(amount) && amount >= 0 && amount <= 100) {
+    const amount = +raw.slice(slash + 1)
+    if (amount % 1 === 0 && amount >= 0 && amount <= 100) {
       name = raw.slice(0, slash)
       opacity = amount
     }
@@ -2381,48 +2811,39 @@ function configuredValue(
     return safeArea
   }
 
-  let fontProperty = fontProperties.get(property)
-  if (fontProperty === undefined) {
-    fontProperty =
-      property.startsWith('font') ||
-      property === 'lineHeight' ||
-      property === 'letterSpacing'
-    fontProperties.set(property, fontProperty)
-  }
-  const revision = grammar.revision
-  if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
-    valueCacheConf = state.conf
-    valueCacheRevision = revision
-    valueCaches = new WeakMap()
-    valueCacheEntries = 0
-    ;(state as DirectState).flatValueScope = undefined
-  }
-  const resolveValues =
-    process.env.TAMAGUI_TARGET === 'web' &&
-    !state.flatShouldDoClasses &&
-    state.styleProps.resolveValues === 'auto'
-      ? 'value'
-      : state.styleProps.resolveValues
-  // the scope (theme identity, name, resolveValues) is fixed for a pass apart
-  // from the class/inline flip, so resolve it once and key the per-value lookups
-  // off interned property and raw strings instead of joining them into a key
-  const direct = state as DirectState
-  let scope = direct.flatValueScope
-  if (scope === undefined || direct.flatValueScopeKind !== resolveValues) {
-    const themeObject =
-      state.theme && typeof state.theme === 'object' ? state.theme : valueCacheRoot
-    let byScope = valueCaches.get(themeObject)
-    if (!byScope) valueCaches.set(themeObject, (byScope = new Map()))
-    const scopeKey = `${state.flatThemeName || ''}\u001f${resolveValues}`
-    scope = byScope.get(scopeKey)
-    if (!scope) byScope.set(scopeKey, (scope = new Map()))
-    direct.flatValueScope = scope
-    direct.flatValueScopeKind = resolveValues
-  }
-  let maps = scope.get(property)
-  if (maps === undefined) scope.set(property, (maps = { direct: new Map() }))
-  const byRaw = embedded ? (maps.embedded ||= new Map()) : maps.direct
-  if (!fontProperty) {
+  const fontProperty =
+    property.startsWith('font') ||
+    property === 'lineHeight' ||
+    property === 'letterSpacing'
+  const resolveValues = state.styleProps.resolveValues
+  let byRaw: Map<string, any> | undefined
+  if (!fontProperty && !nativeColors) {
+    const revision = grammar.revision
+    if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
+      valueCacheConf = state.conf
+      valueCacheRevision = revision
+      valueCaches = new WeakMap()
+      valueCacheEntries = 0
+      ;(state as DirectState).flatValueScope = undefined
+    }
+    // the scope (theme identity, name, resolveValues) is fixed for a pass,
+    // so resolve it once and key the per-value lookups
+    // off interned property and raw strings instead of joining them into a key
+    const direct = state as DirectState
+    let scope = direct.flatValueScope
+    if (scope === undefined) {
+      const themeObject =
+        state.theme && typeof state.theme === 'object' ? state.theme : valueCacheRoot
+      let byScope = valueCaches.get(themeObject)
+      if (!byScope) valueCaches.set(themeObject, (byScope = new Map()))
+      const scopeKey = `${state.flatThemeName || ''}\u001f${resolveValues}`
+      scope = byScope.get(scopeKey)
+      if (!scope) byScope.set(scopeKey, (scope = new Map()))
+      direct.flatValueScope = scope
+    }
+    let maps = scope.get(property)
+    if (maps === undefined) scope.set(property, (maps = { direct: new Map() }))
+    byRaw = embedded ? (maps.embedded ||= new Map()) : maps.direct
     const known = byRaw.get(raw)
     if (known !== undefined || byRaw.has(raw)) return known
   }
@@ -2477,17 +2898,120 @@ function configuredValue(
   }
 
   if (process.env.NODE_ENV === 'development') {
-    const category = grammar.tokenCategory(property)
-    if (category && category !== 'color' && state.conf.tokensParsed.color?.[name]) {
+    const category =
+      grammar.tokenCategory(property) ||
+      grammar.tokenCategory(state.conf.shorthands[property] || property)
+    // shadow recipes contain color tokens alongside their lengths.
+    if (
+      category &&
+      category !== 'color' &&
+      category !== 'boxShadow' &&
+      category !== 'textShadow' &&
+      state.conf.tokensParsed.color?.[name]
+    ) {
       warnOnce(`"${name}" contributes to "color", not "${property}"`)
     }
+
+    if (!value && !fontProperty) {
+      if (name.charCodeAt(0) === 36 || raw.charCodeAt(0) === 36) {
+        const suggested = name.charCodeAt(0) === 36 ? name.slice(1) : raw.slice(1)
+        warnOnce(
+          `v2-token:${property}=${raw}`,
+          `${property}="${raw}": v3 tokens have no "$" prefix, did you mean "${suggested}"?`
+        )
+      } else if (
+        (category === 'size' ||
+          category === 'space' ||
+          category === 'radius' ||
+          category === 'zIndex') &&
+        /^-?\d+(?:\.\d+)?$/.test(name)
+      ) {
+        let nearest: string | undefined
+        let minDistance = Infinity
+        const rawNum = Number(name)
+        const tokens = category ? state.conf.tokensParsed[category] : undefined
+        if (tokens && Number.isFinite(rawNum)) {
+          for (const key in tokens) {
+            const val = tokens[key]?.val
+            const valNum = typeof val === 'number' ? val : Number(val)
+            if (Number.isFinite(valNum)) {
+              const dist = Math.abs(valNum - rawNum)
+              if (dist < minDistance) {
+                minDistance = dist
+                nearest = key
+              }
+            }
+          }
+        }
+        if (nearest) {
+          warnOnce(
+            `numeric-token:${property}=${raw}`,
+            `${property}="${raw}" was passed to CSS as-is${
+              category === 'zIndex' ? '' : ' with px units'
+            }${nearest ? `; nearest token is "${nearest}"` : ''}`
+          )
+        }
+      } else if (
+        category === 'color' &&
+        /^[a-zA-Z0-9-]+$/.test(name) &&
+        /[a-zA-Z]/.test(name)
+      ) {
+        const lower = name.toLowerCase()
+        if (!namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
+          const themeKeys: string[] = []
+          if (state.theme && typeof state.theme === 'object') {
+            for (const k in state.theme) themeKeys.push(k)
+          }
+          if (state.conf.themes) {
+            const active = state.conf.themes[state.flatThemeName || '']
+            if (active) {
+              for (const k in active) themeKeys.push(k)
+            } else {
+              for (const t in state.conf.themes) {
+                for (const k in state.conf.themes[t]) themeKeys.push(k)
+              }
+            }
+          }
+          let bestMatch: string | undefined
+          let minDistance = 3
+          for (const key of themeKeys) {
+            if (Math.abs(key.length - name.length) > 2) continue
+            const m = name.length
+            const n = key.length
+            const d: number[] = []
+            for (let i = 0; i <= m; i++) d[i] = i
+            for (let j = 1; j <= n; j++) {
+              let prev = d[0]
+              d[0] = j
+              for (let i = 1; i <= m; i++) {
+                const temp = d[i]
+                d[i] =
+                  name[i - 1] === key[j - 1] ? prev : Math.min(prev, d[i], d[i - 1]) + 1
+                prev = temp
+              }
+            }
+            const dist = d[m]
+            if (dist <= 2 && dist < minDistance) {
+              minDistance = dist
+              bestMatch = key
+            }
+          }
+          warnOnce(
+            `unknown-color:${property}=${raw}`,
+            bestMatch
+              ? `unknown color "${name}", did you mean "${bestMatch}"?`
+              : `unknown color "${name}"`
+          )
+        }
+      }
+    }
   }
   let out = raw
   if (isVariable(value)) {
     out =
       resolveValues === 'except-theme' && fromTheme
         ? `${THEME_REF_PREFIX}${lookupName}${opacity !== undefined ? `/${opacity}` : ''}`
-        : resolveVariableValue(property, value, resolveValues)
+        : resolveVariableValue(nativeColors ? 'color' : property, value, resolveValues)
     if (opacity !== undefined) {
       out =
         process.env.TAMAGUI_TARGET === 'web'
@@ -2495,19 +3019,40 @@ function configuredValue(
           : (normalizeColor(out, opacity / 100) ?? out)
     }
   }
+  if (nativeColors && out && typeof out === 'object') {
+    const reference = `__tamagui_native_color_${nativeColors.size}`
+    nativeColors.set(reference, out)
+    out = reference
+  }
   if (embedded && out === raw) {
     const usedSafeArea = state.flatUsesSafeArea
-    out = grammar.embeddedTokens(raw, (word) => configuredValue(state, property, word))
+    out = grammar.embeddedTokens(raw, (word) => {
+      const resolved = configuredValue(state, property, word, false, nativeColors)
+      // only a bare name can be a color token; literal colors pass through as authored
+      if (
+        resolved !== word ||
+        !shadowRecipeProperties.has(property) ||
+        !/^[a-z][\w-]*$/i.test(word)
+      )
+        return resolved
+      // a shadow recipe word that is not one of the recipe's own tokens is its
+      // color. react native has no currentColor, so it reads the inherited color
+      if (process.env.TAMAGUI_TARGET === 'native' && word === 'currentColor') {
+        const inherited = configuredValue(state, 'color', 'color', false, nativeColors)
+        return inherited === 'color' ? word : inherited
+      }
+      return configuredValue(state, 'color', word, false, nativeColors)
+    })
     // a safe-area token flips state as it resolves, so a cached hit would lose it
     if (!usedSafeArea && state.flatUsesSafeArea) return out
   }
-  if (!fontProperty && !fromTheme) {
+  if (!fontProperty && !fromTheme && !nativeColors) {
     if (valueCacheEntries > 8192) {
       valueCaches = new WeakMap()
       valueCacheEntries = 0
     } else {
       valueCacheEntries++
-      byRaw.set(raw, out)
+      byRaw!.set(raw, out)
     }
   }
   return out
@@ -2518,20 +3063,24 @@ function ownsSourceLayer(state: GetStyleState, property: string, conditional = f
   const layer = direct.flatPass?.[passSourceLayer] || 0
   const layers = (direct.flatPropertyLayers ||= new Map())
   const previous = layers.get(property)
-  if (previous !== undefined) {
-    if (previous > layer) return false
-    if (previous < layer) {
-      // a conditional contribution layers over a lower tier instead of
-      // replacing it: flexDirection="sm:column" on a styled row keeps the
-      // base row while the condition is inactive. only a program's
-      // unconditional base transfers ownership and clears what it replaces.
-      if (conditional) return true
-      clearDirectStyle(state, property)
-    }
-  } else if (conditional) {
-    // don't claim the slot either, so a later lower-tier base can still join
-    return true
+  if (!layer && !conditional && !direct.flatPass?.[passVariantOutput]) {
+    // a later authored base replaces the default variant's entire output for
+    // this property, including its responsive clauses. direct clauses retain
+    // their own slots, so a conditional-only override still keeps the base.
+    const entries = direct.flatSlots?.get(
+      process.env.TAMAGUI_TARGET === 'web' ? styleSlot(property) : property
+    )
+    if (entries) {
+      for (let index = entries.length; index--; ) {
+        if (entries[index][0] === property && entries[index][9]) entries.splice(index, 1)
+      }
+    }
   }
+  if (previous! > layer) return false
+  // a conditional contribution retains the lower tier's base and ownership.
+  // comparisons with an absent previous layer are false.
+  if (conditional && previous !== layer) return true
+  if (previous! < layer) clearDirectStyle(state, property)
   layers.set(property, layer)
   return true
 }
@@ -2574,11 +3123,17 @@ function emitProperty(
   const theme = cursor ? cursor[conditionTheme] : ''
   if (process.env.TAMAGUI_TARGET === 'native' && theme) {
     if (supportsDynamicColorIOS && isColorStyleKey(property)) {
-      const schemes = ((direct.flatDynamicColors ||= {})[property] ||= {})
-      schemes[theme] =
-        typeof originalValue === 'string' && /^[a-z]+$/i.test(originalValue)
-          ? originalValue
-          : value
+      const colors = (direct.flatDynamicColors ||= {})
+      let schemes = colors[property]
+      if (!schemes) {
+        schemes = colors[property] = {}
+        const base = direct.flatSlots?.get(property)?.find((entry) => !entry[2])?.[1]
+        if (base !== undefined) {
+          schemes.light = extractValueFromDynamic(base, 'light')
+          schemes.dark = extractValueFromDynamic(base, 'dark')
+        }
+      }
+      schemes[theme] = extractValueFromDynamic(value, theme)
       streamWriteInline(
         state,
         property,
@@ -2621,6 +3176,18 @@ function emitProperty(
     return
   }
 
+  // a lifecycle transition must outrank a base transition class while the
+  // enter or exit clause is active. pseudo transitions stay class-selected.
+  if (
+    property === 'transition' &&
+    condition & 12 &&
+    !state.staticConfig.isHOC &&
+    state.styleProps.isAnimated
+  ) {
+    streamWriteInline(state, property, value, cursor, originalValue, false, -1, true)
+    return
+  }
+
   const shouldPromoteAnimatedStyle =
     canGenerateCSS &&
     !condition &&
@@ -2645,14 +3212,15 @@ function emitProperty(
   streamWriteInline(state, property, value, cursor, originalValue)
 }
 
-function numericUnitValue(value: string, first: string, second?: string): number {
-  const unitLength =
-    value.endsWith(first) || (second !== undefined && value.endsWith(second))
-      ? first.length
-      : 0
-  if (!unitLength || value.length === unitLength) return Number.NaN
-  const numeric = Number(value.slice(0, value.length - unitLength))
-  return Number.isFinite(numeric) ? numeric : Number.NaN
+function numericUnitValue(value: string, first: string, second: string): number {
+  return value.length > first.length && (value.endsWith(first) || value.endsWith(second))
+    ? +value.slice(0, -first.length)
+    : NaN
+}
+
+function resolveNumericValue(value: string): string | number {
+  let numeric = numericUnitValue(value, 'px', 'dp')
+  return isFinite(numeric) ? numeric : isFinite((numeric = +value)) ? numeric : value
 }
 
 function emitBorder(
@@ -2740,19 +3308,35 @@ function emitResolved(
   originalValue: any,
   contextOnly: boolean
 ) {
-  let value = configuredValue(state, property, raw, true)
+  emitProperty(
+    state,
+    property,
+    resolveValue(state, property, raw),
+    cursor,
+    originalValue,
+    contextOnly
+  )
+}
+
+function resolveValue(
+  state: GetStyleState,
+  property: string,
+  raw: any,
+  nativeColors?: Map<string, unknown>
+) {
+  let value =
+    typeof raw === 'string'
+      ? configuredValue(state, property, raw, true, nativeColors)
+      : raw
   if (
     (process.env.TAMAGUI_TARGET === 'native' || !state.flatShouldDoClasses) &&
-    typeof value === 'string'
+    typeof value === 'string' &&
+    value !== '' &&
+    property !== 'lineHeight'
   ) {
-    const unitValue = numericUnitValue(value, 'px', 'dp')
-    if (Number.isFinite(unitValue)) {
-      value = unitValue
-    } else if (value !== '' && Number.isFinite(Number(value))) {
-      value = Number(value)
-    }
+    value = resolveNumericValue(value)
   }
-  emitProperty(state, property, value, cursor, originalValue, contextOnly)
+  return value
 }
 
 function shadowUnit(part: any) {
@@ -2799,15 +3383,11 @@ function emitValue(
   }
 
   if (isVariable(raw)) {
-    raw = resolveVariableValue(
-      property,
-      raw,
-      process.env.TAMAGUI_TARGET === 'web' &&
-        !state.flatShouldDoClasses &&
-        state.styleProps.resolveValues === 'auto'
-        ? 'value'
-        : state.styleProps.resolveValues
-    )
+    raw = resolveVariableValue(property, raw, state.styleProps.resolveValues)
+    if (property === 'lineHeight') {
+      emitProperty(state, property, raw, cursor, originalValue, contextOnly)
+      return
+    }
   }
 
   if (
@@ -2895,7 +3475,11 @@ function emitValue(
     if (canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) {
       raw = transformsToString(raw)
     }
-    if (process.env.TAMAGUI_TARGET === 'native' && typeof raw === 'string') {
+    if (
+      typeof raw === 'string' &&
+      (process.env.TAMAGUI_TARGET === 'native' ||
+        (!state.flatShouldDoClasses && state.animationDriver?.inputStyle === 'value'))
+    ) {
       const transform = parseNativeTransform(raw)
       if (transform) {
         emitProperty(state, property, transform, cursor, originalValue, contextOnly)
@@ -2922,7 +3506,12 @@ function emitValue(
   }
   if (typeof raw === 'string' && property === 'background') {
     const parts = splitComponents(raw)
-    if (parts.length === 1 && !startsValueFunction(parts[0])) {
+    if (
+      parts.length === 1 &&
+      (!startsValueFunction(parts[0]) ||
+        (process.env.TAMAGUI_TARGET === 'native' &&
+          classifyBorderComponents(parts[0]).color))
+    ) {
       emitResolved(state, 'backgroundColor', parts[0], cursor, originalValue, contextOnly)
       return
     }
@@ -2950,7 +3539,8 @@ function emitValue(
     ) {
       if (
         property === 'rotate' &&
-        !Number.isFinite(numericUnitValue(value, 'deg', 'rad'))
+        !isFinite(numericUnitValue(value, 'deg', 'rad')) &&
+        (process.env.TAMAGUI_TARGET === 'native' || !startsValueFunction(value))
       ) {
         if (process.env.NODE_ENV === 'development') {
           warnOnce(
@@ -2963,12 +3553,7 @@ function emitValue(
         }
         return
       }
-      const unitValue = numericUnitValue(value, 'px', 'dp')
-      if (Number.isFinite(unitValue)) {
-        value = unitValue
-      } else if (Number.isFinite(Number(value))) {
-        value = Number(value)
-      }
+      value = resolveNumericValue(value)
     }
     if (!canGenerateCSS || !state.flatShouldDoClasses) {
       emitProperty(state, property, value, cursor, originalValue, contextOnly)
@@ -3015,22 +3600,15 @@ function emitValue(
     return
   }
 
-  let value: any = raw
-  if (typeof raw === 'string') {
-    value = configuredValue(state, property, raw, true)
-  }
-
-  if (
-    (process.env.TAMAGUI_TARGET === 'native' || !state.flatShouldDoClasses) &&
-    typeof value === 'string'
-  ) {
-    const unitValue = numericUnitValue(value, 'px', 'dp')
-    if (Number.isFinite(unitValue)) {
-      value = unitValue
-    } else if (value !== '' && Number.isFinite(Number(value))) {
-      value = Number(value)
-    }
-  }
+  const nativeColors =
+    process.env.TAMAGUI_TARGET === 'native' &&
+    typeof raw === 'string' &&
+    (property === 'backgroundImage' ||
+      property === 'boxShadow' ||
+      property === 'textShadow')
+      ? new Map<string, unknown>()
+      : undefined
+  let value: any = resolveValue(state, property, raw, nativeColors)
   if (
     canGenerateCSS &&
     state.flatShouldDoClasses &&
@@ -3048,7 +3626,7 @@ function emitValue(
       property === 'boxShadow' ||
       property === 'textShadow')
   ) {
-    const parsed = parseNativeStyle(property, value)
+    const parsed = parseNativeStyle(property, value, nativeColors)
     if (parsed) {
       if (property === 'textShadow') {
         for (const [key, parsedValue] of parsed) {
@@ -3066,6 +3644,8 @@ function emitValue(
       }
       return
     }
+    // unmapped css names cannot become native host styles.
+    if (property === 'backgroundImage' || property === 'textShadow') return
   }
 
   if (
@@ -3105,6 +3685,23 @@ function emitValue(
               : `${value} 0px`
   }
 
+  if (process.env.TAMAGUI_TARGET === 'native' && !cursor && !state.styleProps.noExpand) {
+    const logicals = nativeShorthandLogicals[property]
+    const slots = (state as DirectState).flatSlots
+    if (logicals && slots) {
+      for (let index = 0; index < logicals.length; index++) {
+        const list = slots.get(logicals[index])
+        if (!list) continue
+        // only the unconditional records: a media or pseudo longhand still
+        // wins while its clause is active, the same as on web
+        for (let entry = list.length; entry--; ) {
+          if (list[entry][3] === '') list.splice(entry, 1)
+        }
+        if (!list.length) clearDirectStyle(state, logicals[index])
+      }
+    }
+  }
+
   const expanded =
     process.env.TAMAGUI_TARGET === 'native' && !state.styleProps.noExpand
       ? expandStyle(property, value, state.conf.settings.styleCompat || 'web')
@@ -3114,7 +3711,14 @@ function emitValue(
     return
   }
 
-  if (typeof raw === 'string' && expanded.length > 1) {
+  // an expansion that already computed distinct per-slot values (direction,
+  // visibility) is used as-is; only a same-value fan-out (margin, padding)
+  // distributes the raw string parts per css slot order
+  if (
+    typeof raw === 'string' &&
+    expanded.length > 1 &&
+    expanded.every((entry) => entry[1] === expanded[0][1])
+  ) {
     const parts = splitComponents(raw)
     if (parts.length > 0 && parts.length <= (expanded.length === 4 ? 4 : 2)) {
       for (let index = 0; index < expanded.length; index++) {
@@ -3150,13 +3754,46 @@ function emitValue(
   }
 }
 
+type ConditionalValueSink = (payload: any, condition: unknown, source: any) => void
+
+function emitConditionalValue(
+  state: GetStyleState,
+  property: string,
+  payload: any,
+  condition: Condition | null,
+  source: any,
+  sink: ConditionalValueSink | null,
+  mode: number,
+  contextOnly: boolean
+) {
+  if (sink) {
+    sink(payload, condition, source)
+  } else if (condition) {
+    emitUnderCondition(
+      state,
+      property,
+      payload,
+      condition,
+      mode === 2 || state.staticConfig.isHOC || state.styleProps.stylePieceEntries
+        ? payload
+        : undefined,
+      contextOnly,
+      mode,
+      source
+    )
+  } else {
+    emitValue(state, property, payload, null, payload, contextOnly)
+  }
+}
+
 export function walkConditionalValue(
   state: GetStyleState,
   property: string,
   value: any,
   parent: unknown,
-  sink: (payload: any, condition: unknown, source: any) => void,
-  warnMode = 0
+  sink: ConditionalValueSink | null,
+  warnMode = 0,
+  contextOnly = false
 ) {
   const parentCondition = (parent as Condition) || null
   let hasBase = false
@@ -3165,6 +3802,21 @@ export function walkConditionalValue(
   if (typeof value === 'string') {
     const parsed = getConfigRevisionState(state.conf).parseFlatValue(value)
     const [segments, failure, failureIndex] = parsed
+    if (process.env.NODE_ENV === 'development') {
+      const syntax = getSetting('styleValueSyntax')
+      if (syntax === 'object') {
+        const hasClause =
+          segments.length > 5 ||
+          (segments.length >= 5 && segments[2] !== -1) ||
+          value.includes(':')
+        if (hasClause) {
+          warnOnce(
+            `syntax:string:${property}=${value}`,
+            `string syntax is disabled by config (styleValueSyntax: 'object'); received "${property}=${value}"`
+          )
+        }
+      }
+    }
     // the parse result is cached per authored string, so its payload and chain
     // substrings can be too. without this every render of every element re-slices
     // the same pieces out of the same value
@@ -3172,9 +3824,9 @@ export function walkConditionalValue(
     if (slices === undefined) parsedSlices.set(parsed, (slices = []))
     const chainCount = segments.length / 5 - 1
     if (property === 'aspectRatio' && chainCount === 1) {
-      const left = Number(value.slice(segments[7], segments[8]))
-      const right = Number(value.slice(segments[5], segments[6]))
-      if (left > 0 && right > 0 && Number.isFinite(left) && Number.isFinite(right)) {
+      const left = +value.slice(segments[7], segments[8])
+      const right = +value.slice(segments[5], segments[6])
+      if (left > 0 && right > 0 && isFinite(left) && isFinite(right)) {
         return false
       }
     }
@@ -3189,7 +3841,16 @@ export function walkConditionalValue(
       if (start === end) continue
       if (flags & 2) {
         const payload = (slices[index] ??= value.slice(start, end))
-        sink(payload, parentCondition, payload)
+        emitConditionalValue(
+          state,
+          property,
+          payload,
+          parentCondition,
+          payload,
+          sink,
+          warnMode,
+          contextOnly
+        )
         hasBase = true
       } else if (
         process.env.NODE_ENV !== 'production' &&
@@ -3197,7 +3858,16 @@ export function walkConditionalValue(
         !chainCount &&
         (failure === 'invalid-character' || failure === 'stray-comment-close')
       ) {
-        sink(value, parentCondition, value)
+        emitConditionalValue(
+          state,
+          property,
+          value,
+          parentCondition,
+          value,
+          sink,
+          warnMode,
+          contextOnly
+        )
         hasBase = true
       } else if (warnMode) {
         warnScanFailure(property, value, failure, failureIndex)
@@ -3227,7 +3897,16 @@ export function walkConditionalValue(
       )
       conditions |= cursor[conditionValue]
       if (cursor[conditionValue] & conditionResolvedFlag || warnMode) {
-        sink((slices[index] ??= value.slice(start, end)), cursor, value)
+        emitConditionalValue(
+          state,
+          property,
+          (slices[index] ??= value.slice(start, end)),
+          cursor,
+          value,
+          sink,
+          warnMode,
+          contextOnly
+        )
       }
     }
     if (process.env.NODE_ENV !== 'production') lastPayload = value.slice(lastPayloadStart)
@@ -3241,8 +3920,26 @@ export function walkConditionalValue(
     ) {
       return false
     }
+    if (process.env.NODE_ENV === 'development') {
+      const syntax = getSetting('styleValueSyntax')
+      if (syntax === 'string') {
+        warnOnce(
+          `syntax:object:${property}=${JSON.stringify(value)}`,
+          `object-form conditional syntax is disabled by config (styleValueSyntax: 'string'); received "${property}"`
+        )
+      }
+    }
     if (value.default != null) {
-      sink(value.default, parentCondition, value.default)
+      emitConditionalValue(
+        state,
+        property,
+        value.default,
+        parentCondition,
+        value.default,
+        sink,
+        warnMode,
+        contextOnly
+      )
       hasBase = true
     }
     for (const key in value) {
@@ -3250,7 +3947,16 @@ export function walkConditionalValue(
       const cursor = conditionFromKey(state, key, parentCondition)
       conditions |= cursor[conditionValue]
       if (cursor[conditionValue] & conditionResolvedFlag || warnMode) {
-        sink(value[key], cursor, value[key])
+        emitConditionalValue(
+          state,
+          property,
+          value[key],
+          cursor,
+          value[key],
+          sink,
+          warnMode,
+          contextOnly
+        )
       }
     }
   }
@@ -3262,21 +3968,24 @@ export function walkConditionalValue(
     !hasBase &&
     conditions &&
     getConfigRevisionState(state.conf).tokenCategory(property) &&
+    getConfigRevisionState(state.conf).propertyKind(property) !== 8 &&
+    property !== 'boxShadow' &&
+    property !== 'textShadow' &&
+    property !== 'fontFamily' &&
+    property !== 'gap' &&
     splitComponents(lastPayload).length > 1
   ) {
     warnOnce(
       `${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`
     )
   }
-  if (
-    warnMode === 1 &&
-    (!canGenerateCSS || !state.flatShouldDoClasses) &&
-    conditions & 12 &&
-    !hasBase
-  ) {
-    // inline lifecycle styles need a natural resting value when no base was
-    // authored anywhere: a lower tier that owns the property (a styled default)
-    // is the resting value already, so don't stamp over it
+  if (warnMode === 1 && conditions & 12 && !hasBase) {
+    // a property whose only values are lifecycle clauses has no resting value,
+    // so synthesize the CSS initial as its base. the styled HOC is usually the
+    // only pass that ever walks the authored value (the leaf receives captured
+    // slots), so this cannot be left to whichever pass renders inline. a lower
+    // tier that owns the property (a styled default) is the resting value
+    // already, so don't stamp over it
     const resting =
       property === 'opacity' || property.startsWith('scale')
         ? 1
@@ -3285,8 +3994,38 @@ export function walkConditionalValue(
           : property === 'x' || property === 'y'
             ? 0
             : null
-    if (resting !== null && !(state as DirectState).flatPropertyLayers?.has(property)) {
-      sink(resting, parentCondition, resting)
+    // a transform is emitted under its composition key on the class path, so
+    // the ownership check has to ask about that key. asking for the authored
+    // name always misses there and stamps this base over the styled default
+    // that already owns the property, dropping its lifecycle clauses with it
+    const layers = (state as DirectState).flatPropertyLayers
+    const owned =
+      !canGenerateCSS || !state.flatShouldDoClasses
+        ? layers?.has(property)
+        : property === 'scale'
+          ? layers?.has('--t-scale-x') || layers?.has('--t-scale-y')
+          : layers?.has(
+              property === 'x'
+                ? '--t-x'
+                : property === 'y'
+                  ? '--t-y'
+                  : property === 'scaleX'
+                    ? '--t-scale-x'
+                    : property === 'scaleY'
+                      ? '--t-scale-y'
+                      : property
+            )
+    if (resting !== null && !owned) {
+      emitConditionalValue(
+        state,
+        property,
+        resting,
+        parentCondition,
+        resting,
+        sink,
+        warnMode,
+        contextOnly
+      )
     }
   }
   return true
@@ -3300,6 +4039,30 @@ function contributeValue(
   contextOnly = false,
   condition?: Condition | string
 ) {
+  // every style source shares this path, including style objects and resolvers.
+  if (
+    !contextOnly &&
+    isRemovedVendorStyleProp(property) &&
+    !(state.staticConfig.validStyles && property in state.staticConfig.validStyles)
+  ) {
+    return
+  }
+  if (
+    process.env.TAMAGUI_TARGET === 'native' &&
+    !contextOnly &&
+    !(
+      property in
+      (state.staticConfig.validStyles ||
+        (state.staticConfig.isInput
+          ? stylePropsInput
+          : state.staticConfig.isText
+            ? stylePropsText
+            : validStylesView))
+    ) &&
+    property in stylePropsAll
+  ) {
+    return
+  }
   if (condition !== undefined) {
     const directState = state as DirectState
     const parent = (directState.flatPass?.[passParentCursor] as Condition) || null
@@ -3319,24 +4082,7 @@ function contributeValue(
     }
     if (
       typeof value !== 'string' &&
-      walkConditionalValue(
-        state,
-        property,
-        value,
-        effective,
-        (payload, cursor, source) =>
-          emitUnderCondition(
-            state,
-            property,
-            payload,
-            cursor as Condition,
-            payload,
-            contextOnly,
-            2,
-            source
-          ),
-        2
-      )
+      walkConditionalValue(state, property, value, effective, null, 2, contextOnly)
     ) {
       return true
     }
@@ -3383,28 +4129,7 @@ function contributeValue(
   }
   const parent =
     ((state as DirectState).flatPass?.[passParentCursor] as Condition) || null
-  if (
-    walkConditionalValue(
-      state,
-      property,
-      value,
-      parent,
-      (payload, cursor, source) =>
-        cursor
-          ? emitUnderCondition(
-              state,
-              property,
-              payload,
-              cursor as Condition,
-              undefined,
-              contextOnly,
-              1,
-              source
-            )
-          : emitValue(state, property, payload, null, payload, contextOnly),
-      1
-    )
-  )
+  if (walkConditionalValue(state, property, value, parent, null, 1, contextOnly))
     return true
   if (value != null) {
     emitAtParentCondition(state, property, value, originalValue ?? value, contextOnly)
@@ -3414,7 +4139,10 @@ function contributeValue(
 }
 
 function clearDirectStyle(state: GetStyleState, property: string) {
+  if (process.env.TAMAGUI_TARGET === 'native' && property === 'lineHeight')
+    state.nativeLineHeight = undefined
   const direct = state as DirectState
+  if (direct.flatDynamicColors) delete direct.flatDynamicColors[property]
   if (process.env.TAMAGUI_TARGET === 'web') property = webStyleProperty(property)
   const propertyKind = getConfigRevisionState(state.conf).propertyKind(property)
   const atomicKey = property.startsWith('transition')
@@ -3429,15 +4157,20 @@ function clearDirectStyle(state: GetStyleState, property: string) {
   const slot = process.env.TAMAGUI_TARGET === 'web' ? styleSlot(atomicKey) : atomicKey
   direct.flatAtomics?.delete(slot)
   if (direct.flatSlots) {
-    if (slot !== atomicKey) {
+    // a slot groups related properties under one atomic class. clearing a
+    // longhand removes only its records, and so does clearing `flex`, which
+    // shares its slot with flexDirection and flexWrap: <XStack flex={undefined} />
+    // keeps the styled row
+    if (slot !== atomicKey || atomicKey === 'flex') {
       const entries = direct.flatSlots.get(slot)
       if (entries) {
         for (let index = entries.length; index--; ) {
           if (entries[index][0] === atomicKey) entries.splice(index, 1)
         }
+        if (!entries.length) direct.flatSlots.delete(slot)
       }
     }
-    direct.flatSlots.delete(atomicKey)
+    if (atomicKey !== 'flex') direct.flatSlots.delete(atomicKey)
   }
   if (atomicKey === 'transform') state.transformAccumulator = undefined
   if (state.style) delete state.style[atomicKey]
@@ -3470,9 +4203,12 @@ export function emitVariantStyle(
       {})[key] = original
   }
   const parent = pass[passParentCursor]
+  const parentVariantOutput = pass[passVariantOutput]
   pass[passParentCursor] = condition
+  pass[passVariantOutput] = true
   contributeProp(pass, key, value, original, disabled)
   pass[passParentCursor] = parent
+  pass[passVariantOutput] = parentVariantOutput
 }
 
 // handles finding and resolving the fontFamily to the token name