@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.831.1

package/src/helpers/getSplitStyles.tsx

@@ -8,16 +8,33 @@ import {
   StyleObjectIdentifier,
   StyleObjectRules,
   nonAnimatableStyleProps,
+  propToTokenCategoryCode,
   stylePropsAll,
   stylePropsText,
   stylePropsTransform,
+  tokenCategoryColor,
   validStyles as validStylesView,
-  tokenCategories,
 } from '@tamagui/helpers'
+import {
+  addTransformValue,
+  canonicalStateModifierNames,
+  createTransformAccumulator,
+  finalizeTransformAccumulator,
+  getTransformPartKeys,
+  isContainerSizeQueryText,
+  isModifierName,
+  modifierKindMedia,
+  modifierKindPlatform,
+  modifierKindState,
+  modifierKindTheme,
+  removeTransformValue,
+  scanFlatValue,
+  stateModifierSelectors,
+  type FlatValueHandler,
+} from '@tamagui/style-grammar/runtime'
 import { getConfig, getFont } from '../config'
-import { isVariable } from '../createVariable'
 import { isDevTools } from '../constants/isDevTools'
-import { mediaState as globalMediaState } from './mediaState'
+import { isVariable } from '../createVariable'
 import type {
   AllGroupContexts,
   AnimationDriver,
@@ -27,43 +44,19 @@ import type {
   DebugProp,
   GetStyleResult,
   GetStyleState,
+  PropMapper,
   RulesToInsert,
   SplitStyleProps,
   StaticConfig,
-  PropMapper,
-  Variable,
-  VariantSpreadFunction,
   StyleObject,
   TamaguiComponentState,
   TamaguiInternalConfig,
   TextStyle,
   ThemeParsed,
   TransitionProp,
+  Variable,
+  VariantSpreadFunction,
 } from '../types'
-import { variantResolverNames } from '../types'
-import {
-  addTransformValue,
-  canonicalStateModifierNames,
-  createTransformAccumulator,
-  finalizeTransformAccumulator,
-  getTransformPartKeys,
-  isContainerSizeQueryText,
-  isModifierName,
-  modifierKindMedia,
-  modifierKindPlatform,
-  modifierKindState,
-  modifierKindTheme,
-  removeTransformValue,
-  scanFlatValue,
-  stateModifierSelectors,
-  type FlatValueHandler,
-  type TransformAccumulator,
-} from '@tamagui/style-grammar/runtime'
-import { mediaKeyMatch } from './mediaState'
-import { warnOnce, warnRefusedValue } from './warnOnce'
-import { expandStyle } from './expandStyle'
-import { fixStyles } from './expandStyles'
-import { styleToCSS } from './styleToCSS'
 import {
   addComposition,
   canGenerateCSS,
@@ -73,45 +66,53 @@ import {
   requestBorderStyleDefault,
   streamAtomic,
 } from './directStyleCSS'
+import { expandStyle } from './expandStyle'
+import { fixStyles } from './expandStyles'
 import type { AtomicSlotEntry } from './getCSSStylesAtomic'
+import { getConfigRevisionState } from './grammarConfig'
+import { mediaState as globalMediaState, mediaKeyMatch } from './mediaState'
+import { getStyleStaticConfig, type StyleStaticConfig } from './styleStaticConfig'
+import { styleToCSS } from './styleToCSS'
+import { getVariantDefinition } from './variantResolvers'
+import { warnOnce, warnRefusedValue } from './warnOnce'
 
 export { directStyleSignature, flushDirectStyles } from './directStyleCSS'
-import { getConfigRevisionState } from './grammarConfig'
+
+export { getStyleStaticConfig }
+
 import { isColorStyleKey } from './getDynamicVal'
-import { getDefaultProps } from './getDefaultProps'
+import { getVariantExtras } from './getVariantExtras'
 import { shouldInsertStyleRules, updateRules } from './insertStyleRule'
-import { isPlainObject } from './isObj'
 import { isObj } from './isObj'
 import { log } from './log'
-import { normalizeStyle } from './normalizeStyle'
 import { normalizeColor } from './normalizeColor'
+import { normalizeStyle } from './normalizeStyle'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import { parseNativeStyle } from './parseNativeStyle.native'
 import { parseNativeTransform } from './parseNativeTransform.native'
-import { getVariantExtras } from './getVariantExtras'
 import { isRemValue, resolveRem } from './resolveRem'
 import { expandSafeAreaValue, isSafeAreaKey } from './resolveSafeArea'
 import { resolveSafeAreaVariable } from './resolveSafeAreaVariable'
 import { resolveVariableValue } from './resolveVariableValue'
-import { THEME_REF_PREFIX } from './themeRef'
-import { getTokenCategoryForProperty, tokenCategoryByProperty } from './tokenCategories'
 import { HOC_CLASSNAME_MARKER, skipProps } from './skipProps'
 import { styleOriginalValues } from './styleOriginalValues'
 import {
+  setStyleTokenProvenance,
   type StyleDebugReceipt,
   type StyleTokenProvenance,
-  setStyleTokenProvenance,
 } from './styleProvenance'
+import { THEME_REF_PREFIX } from './themeRef'
+import { getTokenCategoryForProperty } from './tokenCategories'
 import { transformsToString } from './transformsToString'
 
-export { styleOriginalValues }
-export { getStyleTokenProvenance, STYLE_TOKEN_PROVENANCE_KEY } from './styleProvenance'
+export { STYLE_TOKEN_PROVENANCE_KEY, getStyleTokenProvenance } from './styleProvenance'
 export type {
   StyleDebugReceipt,
   StyleDebugTier,
   StyleTokenBinding,
   StyleTokenProvenance,
 } from './styleProvenance'
+export { styleOriginalValues }
 
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 
@@ -143,89 +144,10 @@ export type StyleSplitter = (
   startedUnhydrated?: boolean,
   debug?: DebugProp,
   // resolved animation driver (respects animatedBy prop)
-  animationDriver?: AnimationDriverLike | null
+  animationDriver?: AnimationDriverLike | null,
+  styleStaticConfig?: StyleStaticConfig
 ) => null | GetStyleResult
 
-function compoundMatcherMatches(expected: any, actual: any) {
-  if (Array.isArray(expected)) {
-    for (let index = 0; index < expected.length; index++) {
-      if (expected[index] === actual) return true
-    }
-    return false
-  }
-  return expected === actual
-}
-
-// clause-string payloads arrive as slices, so booleans and numbers in the
-// matcher compare by their string spelling
-function compoundMatcherMatchesPayload(
-  expected: any,
-  source: string,
-  start: number,
-  end: number
-) {
-  if (Array.isArray(expected)) {
-    for (let index = 0; index < expected.length; index++) {
-      if (compoundMatcherMatchesPayload(expected[index], source, start, end)) return true
-    }
-    return false
-  }
-  const expectedValue = typeof expected === 'string' ? expected : String(expected)
-  if (expectedValue.length !== end - start) return false
-  for (let index = 0; index < expectedValue.length; index++) {
-    if (expectedValue.charCodeAt(index) !== source.charCodeAt(start + index)) return false
-  }
-  return true
-}
-
-const preparedCompoundsKey = Symbol()
-
-type PreparedCompounds = Record<string, number[]> & {
-  [preparedCompoundsKey]: number[]
-}
-
-type StaticConfigWithPreparedCompounds = StaticConfig & {
-  [preparedCompoundsKey]?: PreparedCompounds | null
-}
-
-function prepareStaticConfigCompounds(staticConfig: StaticConfig) {
-  const compoundVariants = staticConfig.compoundVariants
-  const preparedConfig = staticConfig as StaticConfigWithPreparedCompounds
-  if (!compoundVariants?.length) {
-    preparedConfig[preparedCompoundsKey] = null
-    return
-  }
-
-  const selectorCounts: number[] = []
-  const indexesByKey = Object.create(null) as PreparedCompounds
-  indexesByKey[preparedCompoundsKey] = selectorCounts
-  for (let index = 0; index < compoundVariants.length; index++) {
-    const compoundVariant = compoundVariants[index]
-    let selectorCount = 0
-    for (const key in compoundVariant) {
-      if (key === 'style') continue
-      selectorCount++
-      ;(indexesByKey[key] ||= []).push(index)
-    }
-    selectorCounts[index] = selectorCount
-  }
-  preparedConfig[preparedCompoundsKey] = indexesByKey
-}
-
-// compound matching state lives in small per-pass records (components with
-// compoundVariants only), garbage-collected with the pass; condition
-// composition uses canonical keys (owner ruling 2026-08-28)
-type CompoundState = {
-  seen: number
-  failed: boolean
-  matchedBase: boolean
-  scanned: boolean
-  /** condition keys matched for the current prop */
-  pending: string[] | null
-  /** Cartesian product of condition keys across selecting props */
-  combinations: string[] | null
-}
-
 // ── condition cursors ────────────────────────────────────────────────────────
 
 // Cursor handles are indexes into one numeric arena. Strings and the two
@@ -277,18 +199,6 @@ function reserveConditionCursor(cursor: number) {
   conditionNumbers.set(previous)
 }
 
-function conditionWrapperCopy(cursor: ConditionCursor) {
-  const wrapper = conditionNumbers[cursor + conditionWrapperOffset]
-  const count = wrapper & 7
-  if (!count) return undefined
-  const start = wrapper >> 3
-  const wrappers = new Array<string>(count)
-  for (let index = 0; index < count; index++) {
-    wrappers[index] = conditionWrappers[start + index]
-  }
-  return wrappers
-}
-
 function setConditionUnresolved(cursor: ConditionCursor, name = '') {
   conditionNumbers[cursor + conditionFlagsOffset] &= ~conditionResolvedFlag
   if (name) {
@@ -700,256 +610,6 @@ function combineConditionKeys(state: GetStyleState, first: string, second: strin
   return key
 }
 
-function freshCompoundState(): CompoundState {
-  return {
-    seen: 0,
-    failed: false,
-    matchedBase: false,
-    scanned: false,
-    pending: null,
-    combinations: null,
-  }
-}
-
-function beginCompoundEdges(
-  indexes: number[] | undefined,
-  states: (CompoundState | undefined)[]
-) {
-  if (!indexes) return
-  for (let index = 0; index < indexes.length; index++) {
-    const state = (states[indexes[index]] ||= freshCompoundState())
-    state.pending = null
-    state.matchedBase = false
-    state.scanned = false
-  }
-}
-
-function feedCompoundSegment(
-  state: DirectState,
-  source: string,
-  start: number,
-  end: number,
-  isBase: boolean,
-  valid: boolean,
-  conditionKey: string
-) {
-  if (state.flatCompoundOutputDepth) return
-  const pass = state.flatPass!
-  const indexes = pass[passCompoundIndexes] as number[] | undefined
-  const states = pass[passCompoundStates] as (CompoundState | undefined)[] | undefined
-  const key = pass[passCompoundKey] as string | undefined
-  if (!indexes || !states || !key) return
-  const compoundVariants = state.staticConfig.compoundVariants!
-  for (let index = 0; index < indexes.length; index++) {
-    const compoundIndex = indexes[index]
-    const compoundState = (states[compoundIndex] ||= freshCompoundState())
-    compoundState.scanned = true
-    if (
-      !valid ||
-      start === end ||
-      !compoundMatcherMatchesPayload(
-        compoundVariants[compoundIndex][key],
-        source,
-        start,
-        end
-      )
-    ) {
-      continue
-    }
-    if (isBase) {
-      compoundState.matchedBase = true
-    } else if (!compoundState.matchedBase) {
-      ;(compoundState.pending ||= []).push(conditionKey)
-    }
-  }
-}
-
-const compoundOnlyHandler: FlatValueHandler<DirectState> = {
-  segment(state, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
-    if (isBase) {
-      feedCompoundSegment(state, source, start, end, true, valid, '')
-      return
-    }
-    const cursor = state.flatScanCursor
-    if (
-      !chainValid ||
-      !cursor ||
-      !(conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) ||
-      !conditionNumbers[cursor + conditionValueOffset]
-    ) {
-      feedCompoundSegment(state, source, start, end, false, false, '')
-      return
-    }
-    feedCompoundSegment(
-      state,
-      source,
-      start,
-      end,
-      false,
-      valid,
-      conditionTexts[cursor + conditionKeyOffset] || ''
-    )
-  },
-  modifier(state, start, end, valid, first, source) {
-    let cursor = state.flatScanCursor
-    if (!cursor) {
-      cursor = state.flatScanCursor = acquireConditionCursor()
-    } else if (first) {
-      resetConditionCursor(cursor, 0)
-    }
-    if (!valid) {
-      setConditionUnresolved(cursor)
-      return
-    }
-    if (conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) {
-      resolveConditionModifier(state, cursor, source.slice(start, end))
-    }
-  },
-  chain(state, _start, _end, valid) {
-    const cursor = state.flatScanCursor
-    if (cursor) {
-      if (!valid) setConditionUnresolved(cursor)
-      if (conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) {
-        commitConditionCursor(state, cursor)
-      }
-    }
-    return true
-  },
-}
-
-function finishCompoundEdges(
-  pass: StylePass,
-  key: string,
-  value: any,
-  indexes: number[] | undefined,
-  states: (CompoundState | undefined)[]
-) {
-  if (!indexes) return
-  const state = pass[passStyleState] as DirectState
-  pass[passCompoundIndexes] = indexes
-  pass[passCompoundKey] = key
-  pass[passCompoundStates] = states
-  let needsScan = false
-  for (let index = 0; index < indexes.length; index++) {
-    const compoundState = (states[indexes[index]] ||= freshCompoundState())
-    if (!compoundState.scanned) {
-      needsScan = true
-      break
-    }
-  }
-  if (needsScan) {
-    if (typeof value === 'string') {
-      const watermark = conditionCursorTop
-      const previousCursor = state.flatScanCursor
-      state.flatScanCursor = null
-      try {
-        scanFlatValue(value, compoundOnlyHandler, state)
-      } finally {
-        state.flatScanCursor = previousCursor
-        releaseConditionCursors(watermark)
-      }
-    } else if (
-      value &&
-      typeof value === 'object' &&
-      !Array.isArray(value) &&
-      !isVariable(value) &&
-      Object.prototype.hasOwnProperty.call(value, 'default')
-    ) {
-      for (const conditionKey in value) {
-        const payload = value[conditionKey]
-        if (conditionKey === 'default') {
-          const payloadString = String(payload)
-          feedCompoundSegment(
-            state,
-            payloadString,
-            0,
-            payloadString.length,
-            true,
-            true,
-            ''
-          )
-        } else {
-          const watermark = conditionCursorTop
-          const cursor = acquireConditionCursor()
-          resolveConditionText(state, cursor, conditionKey)
-          const condition = commitConditionCursor(state, cursor)
-          const payloadString = String(payload)
-          feedCompoundSegment(
-            state,
-            payloadString,
-            0,
-            payloadString.length,
-            false,
-            Boolean(condition),
-            condition ? conditionTexts[cursor + conditionKeyOffset] || '' : ''
-          )
-          releaseConditionCursors(watermark)
-        }
-      }
-    } else {
-      const variants = state.staticConfig.compoundVariants!
-      for (let index = 0; index < indexes.length; index++) {
-        const compoundIndex = indexes[index]
-        const compoundState = (states[compoundIndex] ||= freshCompoundState())
-        compoundState.scanned = true
-        if (compoundMatcherMatches(variants[compoundIndex][key], value)) {
-          compoundState.matchedBase = true
-        }
-      }
-    }
-  }
-
-  const variants = state.staticConfig.compoundVariants!
-  const selectorCounts = (state.staticConfig as StaticConfigWithPreparedCompounds)[
-    preparedCompoundsKey
-  ]![preparedCompoundsKey]
-  for (let index = 0; index < indexes.length; index++) {
-    const compoundIndex = indexes[index]
-    const compoundState = states[compoundIndex]!
-    if (compoundState.failed) continue
-    const branches = compoundState.matchedBase ? [''] : compoundState.pending
-    if (!branches || !branches.length) {
-      compoundState.failed = true
-      continue
-    }
-
-    if (!compoundState.seen) {
-      compoundState.combinations = branches
-    } else {
-      const previous = compoundState.combinations!
-      const next: string[] = []
-      for (let left = 0; left < previous.length; left++) {
-        for (let right = 0; right < branches.length; right++) {
-          const conditionKey = combineConditionKeys(
-            state,
-            previous[left],
-            branches[right]
-          )
-          if (!next.includes(conditionKey)) next.push(conditionKey)
-        }
-      }
-      compoundState.combinations = next
-    }
-    compoundState.seen++
-    if (compoundState.seen !== selectorCounts[compoundIndex]) continue
-    const style = variants[compoundIndex].style
-    if (!isPlainObject(style)) continue
-    const combinations = compoundState.combinations!
-    for (let combination = 0; combination < combinations.length; combination++) {
-      for (const styleKey in style) {
-        contributeProp(
-          pass,
-          styleKey,
-          style[styleKey],
-          undefined,
-          states,
-          combinations[combination]
-        )
-      }
-    }
-  }
-}
-
 // the runtime discrimination rule, phrased over an isChain callback: a
 // conditional object names a `default` or opens with a resolvable chain
 // probe: does this object's first key open a resolvable modifier chain (or
@@ -961,7 +621,7 @@ function classifyConditionalObject(
   isChain?: (chain: string) => boolean,
   firstCursor?: ConditionCursor
 ): number {
-  if (Object.prototype.hasOwnProperty.call(value, 'default')) return -1
+  if ('default' in value) return -1
   for (const key in value) {
     if (!key.length) return 0
     if (!state) return isChain?.(key) ? 1 : 0
@@ -990,9 +650,6 @@ const passFrontendContainer = 27
 const passFrontendContainerType = 28
 const passHocMappedProperties = 29
 const passHocMappedClasses = 30
-const passCompoundIndexes = 31
-const passCompoundKey = 32
-const passCompoundStates = 33
 const passParentCursor = 35
 const passMapSourceKey = 36
 const passMapFlags = 37
@@ -1006,171 +663,50 @@ const passTextFlag = 32
 const passInputFlag = 64
 const passAsChildStyleFlag = 128
 
-type PreparedStyledDefaults = unknown[]
-
-// 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, PreparedStyledDefaults | null>()
-
-function getStyledDefaults(
-  staticConfig: StaticConfig,
-  shorthands: Record<string, string>
-): PreparedStyledDefaults | null {
-  let prepared = styledDefaultsCache.get(staticConfig)
-  if (prepared === undefined) {
-    let entries: unknown[] | null = null
-    const defaults = staticConfig.defaultProps
-    if (defaults) {
-      for (const key in defaults) {
-        if (!(key in stylePropsAll || key in shorthands)) continue
-        const value = defaults[key]
-        if (maybeStyleProgram(value)) (entries ||= []).push(key, value)
-      }
-    }
-    prepared = entries
-    styledDefaultsCache.set(staticConfig, prepared)
-  }
-  return prepared
-}
-
-// definition-time only: render never rescans a value to ask this
-const maybeStyleProgram = (value: any): boolean =>
-  typeof value === 'string'
-    ? value.indexOf(':') !== -1
-    : !!value && typeof value === 'object' && !Array.isArray(value) && !isVariable(value)
-
-function contributeDisplacedStyledDefaults(
-  styledDefaults: PreparedStyledDefaults | null,
-  processedProps: Record<string, any>,
-  pass: StylePass
-) {
-  if (!styledDefaults) return
-  for (let offset = 0; offset < styledDefaults.length; offset += 2) {
-    const key = styledDefaults[offset] as string
-    const value = styledDefaults[offset + 1]
-    const propValue = processedProps[key]
-    // 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, and a displaced PROGRAM default re-injects at the styled
-    // position so its clause slots survive the caller's base. A displaced
-    // plain default matters only when the displacing prop itself carries
-    // clauses, which the prop's own scan discovers — see the weak injection
-    // in forEachPropInForwardOrder.
-    if (propValue !== undefined && propValue !== value) {
-      contributeProp(pass, key, value)
-    }
-  }
-}
-
-function injectDisplacedStyledDefault(pass: StylePass, key: string, value: any) {
-  const defaultValue = pass[4].defaultProps?.[key]
-  if (
-    defaultValue === undefined ||
-    value === undefined ||
-    value === defaultValue ||
-    maybeStyleProgram(defaultValue)
-  ) {
-    return
-  }
-  const state = pass[passStyleState] as DirectState
-  state.flatWeakContribution = true
-  try {
-    contributeProp(pass, key, defaultValue)
-  } finally {
-    state.flatWeakContribution = false
-  }
-}
-
 /**
  * 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.
+ * Order is the base style, then the props. That is the cascade: last writer
+ * wins, so the props must come last — a call-site value and a variant always
+ * land on top of a styled() base style.
  */
 function forEachPropInForwardOrder(pass: StylePass) {
   const styleState = pass[passStyleState] as GetStyleState
-  const staticConfig = styleState.staticConfig
   const processedProps = styleState.props
-  const shorthands = styleState.conf.shorthands
-  const processedBaseStyle = staticConfig.baseStyle
-  const styledDefaults = getStyledDefaults(staticConfig, shorthands)
-  const directState = styleState as DirectState
-  const preparedCompounds = (staticConfig as StaticConfigWithPreparedCompounds)[
-    preparedCompoundsKey
-  ]
-
-  if (preparedCompounds === undefined && staticConfig.compoundVariants?.length) {
-    throw new Error(
-      'A component with compoundVariants reached style resolution before its static config was prepared.'
-    )
-  }
+  const styleStaticConfig = (styleState as DirectState).flatStyleStaticConfig!
+  const baseStyle = styleStaticConfig.baseStyle
+  const baseVariantProps = styleStaticConfig.baseVariantProps
 
   const conditionWrapperBase = conditionWrapperTop
-  if (!preparedCompounds) {
-    try {
-      if (processedBaseStyle) {
-        for (const key in processedBaseStyle) {
-          contributeProp(pass, key, processedBaseStyle[key])
-        }
-      }
-      contributeDisplacedStyledDefaults(styledDefaults, processedProps, pass)
-      for (const key in processedProps) {
-        const value = processedProps[key]
-        directState.flatPropSawCondition = false
-        contributeProp(pass, key, value)
-        if (directState.flatPropSawCondition) {
-          injectDisplacedStyledDefault(pass, key, value)
-        }
-      }
-    } finally {
-      releaseConditionPayloads(conditionWrapperBase)
-    }
-    return
-  }
-
-  const compoundVariants = staticConfig.compoundVariants!
-  const compoundStates: (CompoundState | undefined)[] = new Array(compoundVariants.length)
   try {
-    if (processedBaseStyle) {
-      for (const key in processedBaseStyle) {
-        contributeProp(pass, key, processedBaseStyle[key])
+    // asChild renders the child instead of this element, so this component's own
+    // base styles are not its to apply; anything the call site passed still is
+    const appliesBaseStyle = baseStyle && !processedProps.asChild
+    if (appliesBaseStyle) {
+      for (const key in baseStyle) {
+        // a current value replaces its default variant in the default's authored
+        // slot. changing the value must not move it after later child defaults.
+        contributeProp(
+          pass,
+          key,
+          baseVariantProps &&
+            Object.hasOwn(baseVariantProps, key) &&
+            Object.hasOwn(processedProps, key)
+            ? processedProps[key]
+            : baseStyle[key]
+        )
       }
     }
-    contributeDisplacedStyledDefaults(styledDefaults, processedProps, pass)
-    const selectorCounts = preparedCompounds[preparedCompoundsKey]
-    for (
-      let compoundIndex = 0;
-      compoundIndex < compoundVariants.length;
-      compoundIndex++
-    ) {
-      if (selectorCounts[compoundIndex]) continue
-      const style = compoundVariants[compoundIndex].style
-      if (!isPlainObject(style)) continue
-      for (const key in style) contributeProp(pass, key, style[key])
-    }
     for (const key in processedProps) {
-      const compoundIndexes = preparedCompounds[key]
-      const value = processedProps[key]
-      beginCompoundEdges(compoundIndexes, compoundStates)
-      directState.flatPropSawCondition = false
-      contributeProp(pass, key, value, compoundIndexes, compoundStates)
-      if (directState.flatPropSawCondition) {
-        injectDisplacedStyledDefault(pass, key, value)
+      if (appliesBaseStyle && baseVariantProps && Object.hasOwn(baseVariantProps, key)) {
+        continue
       }
-      finishCompoundEdges(pass, key, value, compoundIndexes, compoundStates)
+      contributeProp(pass, key, processedProps[key])
     }
-  } finally {
+  } catch (error) {
     releaseConditionPayloads(conditionWrapperBase)
+    throw error
   }
 }
 
@@ -1369,18 +905,9 @@ function contributeProp(
   pass: StylePass,
   keyOg: string,
   valOg: any,
-  compoundIndexes?: number[],
-  compoundStates?: (CompoundState | undefined)[],
   parentConditionKey?: string
 ) {
   const parentWatermark = conditionCursorTop
-  if (compoundIndexes) {
-    pass[passCompoundIndexes] = compoundIndexes
-    pass[passCompoundKey] = keyOg
-    pass[passCompoundStates] = compoundStates
-  } else if (pass[passCompoundIndexes]) {
-    pass[passCompoundIndexes] = undefined
-  }
   if (parentConditionKey) {
     pass[passParentCursor] = acquireConditionKeyCursor(
       pass[passStyleState] as GetStyleState,
@@ -1627,18 +1154,9 @@ function contributeProp(
             clearDirectStyle(styleState, key)
           }
           if (process.env.TAMAGUI_TARGET === 'web') {
-            if (
-              key === 'containerName' &&
-              typeof normalized[key] === 'string' &&
-              normalized[key].indexOf(':') === -1
-            ) {
+            if (key === 'containerName') {
               pass[passContainerName] = normalized[key]
-            }
-            if (
-              key === 'containerType' &&
-              typeof normalized[key] === 'string' &&
-              normalized[key].indexOf(':') === -1
-            ) {
+            } else if (key === 'containerType') {
               pass[passContainerType] = normalized[key]
             }
           }
@@ -1762,6 +1280,19 @@ function contributeProp(
       }
     }
 
+    if (
+      process.env.TAMAGUI_TARGET === 'web' &&
+      isValidStyleKeyInit &&
+      valInit == null &&
+      keyOg in props
+    ) {
+      clearDirectStyle(styleState, keyInit)
+      if (styledContextKeys?.has(keyInit)) {
+        ;(styleState.overriddenContextProps ||= {})[keyInit] = valInit
+      }
+      return
+    }
+
     let isVariant = !isValidStyleKeyInit && variants && keyInit in variants
     const isStyleLikeKey = isValidStyleKeyInit || isVariant
     const isStyleProp = isValidStyleKeyInit || (isVariant && !noExpand)
@@ -1893,18 +1424,11 @@ export const getSplitStyles: StyleSplitter = (
   elementType,
   startedUnhydrated,
   debug,
-  animationDriver
+  animationDriver,
+  styleStaticConfig
 ) => {
   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
-  }
+  styleStaticConfig ||= getStyleStaticConfig(staticConfig, conf)
   // use passed animationDriver or fall back to context/config
   const driver =
     animationDriver ||
@@ -1920,15 +1444,9 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   const { shorthands } = conf
-  const {
-    isHOC,
-    isText,
-    isInput,
-    variants,
-    inlineProps,
-    parentStaticConfig,
-    acceptsClassName,
-  } = staticConfig
+  const { isHOC, isText, isInput, inlineProps, parentStaticConfig, acceptsClassName } =
+    staticConfig
+  const variants = styleStaticConfig.variants
 
   const viewProps: GetStyleResult['viewProps'] = {}
   const mediaState = styleProps.mediaState || globalMediaState
@@ -1946,14 +1464,16 @@ export const getSplitStyles: StyleSplitter = (
   let hasMedia: boolean | Set<string> = false
   let pseudoGroups: Set<string> | undefined
   let mediaGroups: Set<string> | undefined
-  // the frontend's normalizeStaticConfig partitions unclaimed styled-base
+  // the frontend normalization 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
   const staticPassthroughClassName =
-    process.env.TAMAGUI_TARGET === 'web' ? staticConfig.passthroughClassName || '' : ''
+    process.env.TAMAGUI_TARGET === 'web'
+      ? styleStaticConfig.passthroughClassName || ''
+      : ''
   let className = staticPassthroughClassName
   if (staticPassthroughClassName) {
     shouldDoClasses = false
@@ -1993,6 +1513,7 @@ export const getSplitStyles: StyleSplitter = (
     // resolved animation driver (respects animatedBy prop)
     animationDriver: resolvedDriver,
   }
+  ;(styleState as DirectState).flatStyleStaticConfig = styleStaticConfig
   if (canGenerateCSS && shouldDoClasses && styleProps.canPlatformPseudo) {
     // a platform driver with native pseudo states may flip this whole pass
     // inline once a platform-pseudo clause is discovered: defer CSS into
@@ -2035,34 +1556,26 @@ export const getSplitStyles: StyleSplitter = (
     noNormalize,
     isAnimated,
     styledContext,
-    styledContextKeys,
   } = styleProps
+  const styledContextKeys = styleStaticConfig.styledContextKeys
 
   const styleFrontend = staticConfig.styleFrontend
   let frontendGroup: boolean | string | undefined
   let frontendContainer: boolean | string | undefined
   let frontendContainerType: string | undefined
   const processedProps = props
-  const parentVariants = parentStaticConfig?.variants
-  const defaultProps = asChild ? getDefaultProps(staticConfig) : undefined
+  const parentVariants = parentStaticConfig
+    ? getStyleStaticConfig(parentStaticConfig as StaticConfig, conf).variants
+    : undefined
+  const defaultProps = asChild ? styleStaticConfig.defaultProps : undefined
   const asChildExceptStyleLike =
     asChild === 'except-style' || asChild === 'except-style-web'
   let containerValue: boolean | string | undefined
   let containerName: string | undefined
   let containerType: string | undefined
   if (process.env.TAMAGUI_TARGET === 'web') {
-    const authoredContainerName = processedProps.containerName
-    const authoredContainerType = processedProps.containerType
-    containerName =
-      typeof authoredContainerName === 'string' &&
-      authoredContainerName.indexOf(':') === -1
-        ? authoredContainerName
-        : undefined
-    containerType =
-      typeof authoredContainerType === 'string' &&
-      authoredContainerType.indexOf(':') === -1
-        ? authoredContainerType
-        : undefined
+    containerName = processedProps.containerName
+    containerType = processedProps.containerType
   }
 
   // properties whose class landed through the HOC class transport at an
@@ -2118,99 +1631,94 @@ export const getSplitStyles: StyleSplitter = (
   ]
   ;(styleState as DirectState).flatPass = pass
 
-  forEachPropInForwardOrder(pass)
-
-  ;[
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    ,
-    className,
-    shouldDoClasses,
-    containerValue,
-    containerName,
-    containerType,
-    frontendGroup,
-    frontendContainer,
-    frontendContainerType,
-    hocMappedClassProperties,
-    hocMappedClasses,
-  ] = pass
-
-  if (process.env.TAMAGUI_TARGET === 'web' && containerValue) {
-    containerName ??= typeof containerValue === 'string' ? containerValue : undefined
-    containerType ??= 'inline-size'
-    contributeValue(
-      styleState,
-      containerName ? 'container' : 'containerType',
-      containerName ? `${containerName} / ${containerType}` : containerType,
-      mergeStyle
-    )
-  }
-
-  if (
-    process.env.NODE_ENV === 'development' &&
-    (debug === 'profile' || (globalThis as any).time)
-  ) {
-    // @ts-expect-error
-    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)
-  }
+  let conditionalStates: Set<string> | null = null
+  let usesSafeArea = false
+  const conditionWrapperBase = conditionWrapperTop
+  try {
+    forEachPropInForwardOrder(pass)
+
+    ;[
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      ,
+      className,
+      shouldDoClasses,
+      containerValue,
+      containerName,
+      containerType,
+      frontendGroup,
+      frontendContainer,
+      frontendContainerType,
+      hocMappedClassProperties,
+      hocMappedClasses,
+    ] = pass
 
-  // a platform driver with native pseudo states rides the emitter path: the
-  // whole frame completes inline instead of as classes. The frame is neutral,
-  // so choosing the policy after the pass costs nothing to undo.
-  if (styleProps.canPlatformPseudo && styleState.flatHasPlatformPseudo) {
-    shouldDoClasses = false
-    styleState.flatShouldDoClasses = false
-    if (styleState.transformAccumulator) {
-      mergeStyle(
+    if (process.env.TAMAGUI_TARGET === 'web' && containerValue) {
+      containerName ??= typeof containerValue === 'string' ? containerValue : undefined
+      containerType ??= 'inline-size'
+      contributeValue(
         styleState,
-        'transform',
-        finalizeTransformAccumulator(styleState.transformAccumulator),
-        1,
-        true
+        containerName ? 'container' : 'containerType',
+        containerName ? `${containerName} / ${containerType}` : containerType,
+        mergeStyle
       )
-      styleState.transformAccumulator = undefined
     }
-    convertDeferredInline(styleState, mergeStyle)
-  }
 
-  // streaming already applied every winner; only the residue completes here
-  completeStreaming(styleState, mergeStyle)
+    if (
+      process.env.NODE_ENV === 'development' &&
+      (debug === 'profile' || (globalThis as any).time)
+    ) {
+      // @ts-expect-error
+      time`split-styles-propsend`
+    }
+
+    conditionalStates = styleState.flatStateKeys || null
+    usesSafeArea = !!styleState.flatUsesSafeArea
+    hasMedia = styleState.flatMediaKeys?.size ? styleState.flatMediaKeys : false
+    pseudoGroups = styleState.flatGroupKeys?.size ? styleState.flatGroupKeys : undefined
+    mediaGroups = styleState.flatGroupMedia?.size ? styleState.flatGroupMedia : undefined
+
+    // a platform driver with native pseudo states rides the emitter path: the
+    // whole frame completes inline instead of as classes. The frame is neutral,
+    // so choosing the policy after the pass costs nothing to undo.
+    if (styleProps.canPlatformPseudo && styleState.flatHasPlatformPseudo) {
+      shouldDoClasses = false
+      styleState.flatShouldDoClasses = false
+      if (styleState.transformAccumulator) {
+        mergeStyle(
+          styleState,
+          'transform',
+          finalizeTransformAccumulator(styleState.transformAccumulator),
+          true
+        )
+        styleState.transformAccumulator = undefined
+      }
+      convertDeferredInline(styleState, mergeStyle)
+    }
+
+    // streaming already applied every winner; only the residue completes here
+    completeStreaming(styleState, mergeStyle)
+  } finally {
+    releaseConditionPayloads(conditionWrapperBase)
+  }
 
   // hand the selected transition to animation drivers and keep it out of native
   // destination styles, where `transition` is not a React Native style key.
@@ -2480,7 +1988,6 @@ function mergeStyle(
   styleState: GetStyleState,
   key: string,
   val: any,
-  _importance: number,
   disableNormalize = false,
   originalVal?: any
 ) {
@@ -2491,7 +1998,8 @@ function mergeStyle(
   // overriddenContextProps using the original token value (like '8') rather
   // than the resolved CSS variable, so children's functional variants can look
   // up token values. membership is a per-staticConfig cached Set.
-  const contextPropSet = getContextPropSet(staticConfig)
+  const contextPropSet = (styleState as DirectState).flatStyleStaticConfig!
+    .styledContextKeys
   if (contextPropSet?.has(key)) {
     styleState.overriddenContextProps ||= {}
     // priority: originalVal from propMapper, tracked original from variant
@@ -2544,13 +2052,10 @@ function recordStyleTokenProvenance(
   }
   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)
+    (tokenName in styleState.theme ||
+      tokenName in (styleState.conf.themes?.[styleState.flatThemeName || ''] || {}) ||
+      Object.values(styleState.conf.tokensParsed).some(
+        (category) => tokenName in category
       ))
   if (isConfiguredToken) {
     ;(styleState.tokenProvenance ||= {})[key] = originalVal
@@ -2585,7 +2090,6 @@ const resolveAcceptedStyle = (
     _state,
     key,
     value,
-    _importance,
     disableNormalize,
     originalValue
   ) => {
@@ -2637,13 +2141,13 @@ export type MergeStyle = (
   state: GetStyleState,
   key: string,
   value: any,
-  importance: number,
   disableNormalize?: boolean,
   originalValue?: any
 ) => void
 
 type DirectState = GetStyleState & {
   flatPass?: StylePass
+  flatStyleStaticConfig?: StyleStaticConfig
   /** streaming winner per property: packed precedence + 1, base 0 */
   flatUsed?: Record<string, number>
   flatTransitions?: AtomicSlotEntry[]
@@ -2658,9 +2162,6 @@ type DirectState = GetStyleState & {
   flatTextShadow?: Record<string, any>
   flatWebShadow?: any[]
   flatScanCursor?: ConditionCursor | null
-  flatCompoundOutputDepth?: number
-  flatPropSawCondition?: boolean
-  flatWeakContribution?: boolean
   /** the value being contributed is known to carry clauses: its property
    * will see 2+ contributions, so CSS emission opens the combined slot
    * directly instead of building a single class it would discard */
@@ -2695,23 +2196,22 @@ function streamWriteCSS(
   if (property.charCodeAt(0) === 116 && property.startsWith('transition')) {
     const transitions = (direct.flatTransitions ||= [])
     for (let index = 0; index < transitions.length; index++) {
-      if (
-        transitions[index].property === property &&
-        transitions[index].identity === identity
-      ) {
-        transitions[index].value = value
-        transitions[index].condition = condition
+      if (transitions[index][0] === property && transitions[index][3] === identity) {
+        transitions[index][1] = value
+        transitions[index][2] = condition
         return
       }
     }
-    transitions.push({
+    transitions.push([
       property,
       value,
       condition,
       identity,
-      selector: cursor ? conditionTexts[cursor + conditionSelectorOffset] || '' : '',
-      wrappers: cursor ? conditionWrapperCopy(cursor) : undefined,
-    })
+      cursor ? conditionTexts[cursor + conditionSelectorOffset] || '' : '',
+      cursor ? conditionWrappers : undefined,
+      cursor ? conditionNumbers[cursor + conditionWrapperOffset] >> 3 : 0,
+      cursor ? conditionNumbers[cursor + conditionWrapperOffset] & 7 : 0,
+    ])
     return
   }
   streamAtomic(
@@ -2724,7 +2224,7 @@ function streamWriteCSS(
     cursor ? conditionWrappers : undefined,
     cursor ? conditionNumbers[cursor + conditionWrapperOffset] >> 3 : 0,
     cursor ? conditionNumbers[cursor + conditionWrapperOffset] & 7 : 0,
-    direct.flatWeakContribution === true,
+    false,
     original
   )
 }
@@ -2754,14 +2254,9 @@ function streamWriteInline(
   const importance = condition ? Math.floor(condition / 256) + 1 : 0
   const used = (direct.flatUsed ||= {})
   const previous = used[property]
-  if (previous !== undefined) {
-    if (previous > importance) return
-    // a weak write restores a styled default: any earlier write owns the
-    // property
-    if (direct.flatWeakContribution === true) return
-  }
+  if (previous !== undefined && previous > importance) return
   used[property] = importance
-  merge(state, property, value, 1, !normalize, original)
+  merge(state, property, value, !normalize, original)
 }
 
 /**
@@ -2791,23 +2286,20 @@ function streamRetractInline(
  */
 function convertDeferredInline(state: GetStyleState, merge: MergeStyle) {
   const direct = state as DirectState
-  const used = (direct.flatUsed ||= {})
   const consume = (entries: AtomicSlotEntry[]) => {
     for (let index = 0; index < entries.length; index++) {
       const entry = entries[index]
-      const condition = entry.condition
+      const condition = entry[2]
       if (condition && !(condition & 1)) continue
-      const importance = condition ? Math.floor(condition / 256) + 1 : 0
-      const previous = used[entry.property]
-      if (previous !== undefined && previous > importance) continue
-      used[entry.property] = importance
-      merge(
+      streamWriteInline(
         state,
-        entry.property,
-        entry.value,
-        1,
-        true,
-        entry.original !== undefined ? entry.original : entry.value
+        entry[0],
+        entry[1],
+        null,
+        merge,
+        entry[8] !== undefined ? entry[8] : entry[1],
+        false,
+        condition
       )
     }
   }
@@ -2890,11 +2382,6 @@ function emitUnderCondition(
   warnSource: any
 ): number {
   const condition = conditionNumbers[cursor + conditionValueOffset]
-  // a real conditional clause reached emission intent (active or not): the
-  // prop loop uses this to restore a displaced plain styled default
-  if (merge && property && condition) {
-    ;(state as DirectState).flatPropSawCondition = true
-  }
   if (!(conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag)) {
     if (warnMode && process.env.NODE_ENV === 'development') {
       warnRefusedValue(
@@ -2970,15 +2457,6 @@ const directStyleHandler: FlatValueHandler<GetStyleState> = {
   ) {
     if (isBase) {
       if (start === end) return
-      feedCompoundSegment(
-        state as DirectState,
-        source,
-        start,
-        end,
-        true,
-        valid || failure === 'invalid-character' || failure === 'stray-comment-close',
-        ''
-      )
       if (!valid) {
         if (failure === 'invalid-character' || failure === 'stray-comment-close') {
           // refusal belongs to the clause grammar. Keep only the decision until
@@ -3056,17 +2534,6 @@ const directStyleHandler: FlatValueHandler<GetStyleState> = {
       : conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag
         ? conditionNumbers[cursor + conditionValueOffset]
         : 0
-    feedCompoundSegment(
-      directState,
-      source,
-      start,
-      end,
-      false,
-      valid && Boolean(condition),
-      condition && directState.flatPass?.[passCompoundIndexes]
-        ? conditionTexts[cursor + conditionKeyOffset] || ''
-        : ''
-    )
     if (!condition) return
     if (!valid) {
       if (process.env.NODE_ENV === 'development') {
@@ -3175,7 +2642,7 @@ const directStyleHandler: FlatValueHandler<GetStyleState> = {
       process.env.NODE_ENV === 'development' &&
       !hasBase &&
       result & 4 &&
-      (property in tokenCategories.color || property in tokenCategoryByProperty) &&
+      property in propToTokenCategoryCode &&
       splitComponents(source.slice(lastPayloadStart)).length > 1
     ) {
       warnOnce(
@@ -3350,9 +2817,6 @@ function tokenVariable(
   if (category) {
     const own = state.conf.tokensParsed[category]?.[lookupName]
     if (own) return fillTokenLookup(own, false, lookupName)
-    for (const sibling of ['color', 'space', 'size', 'radius', 'zIndex'] as const) {
-      if (sibling !== category && state.conf.tokensParsed[sibling]?.[lookupName]) return
-    }
   } else {
     const first = lookupName.charCodeAt(0)
     if ((first >= 48 && first <= 57) || first === 43 || first === 45 || first === 46) {
@@ -3371,7 +2835,7 @@ function tokenVariable(
 }
 
 // literal strings dominate authored values, and each pays tokenVariable's
-// full miss path (category probe, sibling scans, theme lookups). Remember the
+// full miss path (category probe and theme lookups). Remember the
 // misses per (config revision, theme record, theme name); a supported registry
 // mutation bumps the revision and swaps the whole cache. Font-keyed
 // properties resolve through mutable per-pass fontFamily state and stay
@@ -3435,16 +2899,15 @@ function configuredValue(state: GetStyleState, property: string, raw: string): a
     if (misses.has(missKey)) return raw
   }
 
+  if (process.env.NODE_ENV === 'development') {
+    const category = getTokenCategoryForProperty(property)
+    if (category && category !== 'color' && state.conf.tokensParsed.color?.[name]) {
+      warnOnce(`"${name}" contributes to "color", not "${property}"`)
+    }
+  }
   const lookup = tokenVariable(state, property, name)
   if (!lookup || !isVariable(lookup.value)) {
     if (misses) misses.add(missKey)
-    if (
-      process.env.NODE_ENV === 'development' &&
-      tokenCategoryByProperty[property] &&
-      state.conf.tokensParsed.color?.[name]
-    ) {
-      warnOnce(`"${name}" contributes to "color", not "${property}"; keeping it literal`)
-    }
     return raw
   }
   const resolveValues =
@@ -3636,6 +3099,13 @@ function emitProperty(
 ) {
   const direct = state as DirectState
   const condition = cursor ? conditionNumbers[cursor + conditionValueOffset] : 0
+  if (process.env.TAMAGUI_TARGET === 'web' && value === false && !condition) {
+    clearDirectStyle(state, property)
+    if (direct.flatStyleStaticConfig?.styledContextKeys?.has(property)) {
+      ;(state.overriddenContextProps ||= {})[property] = false
+    }
+    return
+  }
   if (condition & 4) (state.flatEnterKeys ||= new Set()).add(property)
   if (condition & 8) (state.flatExitKeys ||= new Set()).add(property)
 
@@ -3703,12 +3173,7 @@ function emitProperty(
     // a base CSS write displaces an earlier inline base for the property, but
     // never an inline conditional winner and never on a weak styled-default
     // restore: the style object is live during the streaming pass
-    if (
-      !condition &&
-      state.style &&
-      direct.flatWeakContribution !== true &&
-      !(direct.flatUsed && direct.flatUsed[property])
-    ) {
+    if (!condition && state.style && !(direct.flatUsed && direct.flatUsed[property])) {
       delete state.style[property]
     }
     streamWriteCSS(state, property, value, cursor, originalValue)
@@ -4410,12 +3875,10 @@ function contributeStyleObjectInner(
 ) {
   const directState = state as DirectState
   const parent = (directState.flatPass?.[passParentCursor] as ConditionCursor) || null
-  const hasDefault = Object.prototype.hasOwnProperty.call(value, 'default')
+  const hasDefault = 'default' in value
   let hasBase = false
   const base = hasDefault ? value.default : undefined
   if (base != null) {
-    const baseString = String(base)
-    feedCompoundSegment(directState, baseString, 0, baseString.length, true, true, '')
     emitAtParentCondition(state, property, base, merge, base, contextOnly)
     hasBase = true
   }
@@ -4449,18 +3912,6 @@ function contributeStyleObjectInner(
         1,
         payload
       )
-      const payloadString = String(payload)
-      feedCompoundSegment(
-        directState,
-        payloadString,
-        0,
-        payloadString.length,
-        false,
-        Boolean(condition),
-        condition && directState.flatPass?.[passCompoundIndexes]
-          ? conditionTexts[cursor + conditionKeyOffset] || ''
-          : ''
-      )
     }
     releaseConditionCursors(watermark)
   }
@@ -4486,16 +3937,17 @@ function contributeValue(
   if (isConditionTransport(value)) {
     // a wrapping component's conditional contributions arrive as resolved
     // atoms: replay each into a cursor at this position, no text reparsed
-    if (value.hasBase) {
-      contributeValue(state, property, value.base, merge, value.base, contextOnly)
+    if (value[transportHasBase]) {
+      const base = value[transportBase]
+      contributeValue(state, property, base, merge, base, contextOnly)
     }
-    for (let offset = 0; offset < value.entries.length; ) {
-      const entryValue = value.entries[offset]
+    for (let offset = transportEntries; offset < value.length; ) {
+      const entryValue = value[offset]
       const watermark = conditionCursorTop
       try {
         const cursor = acquireTransportCursor(
           state,
-          value.entries,
+          value,
           offset,
           ((state as DirectState).flatPass?.[passParentCursor] as ConditionCursor) || null
         )
@@ -4544,8 +3996,7 @@ function contributeValue(
       }
       const isObjectValue =
         value && typeof value === 'object' && !Array.isArray(value) && !isVariable(value)
-      const objectHasDefault =
-        isObjectValue && Object.prototype.hasOwnProperty.call(value, 'default')
+      const objectHasDefault = isObjectValue && 'default' in value
       const firstChild =
         isObjectValue && !objectHasDefault ? acquireConditionCursor(effective) : null
       if (
@@ -4696,40 +4147,37 @@ export function clearDirectStyle(state: GetStyleState, property: string) {
 // ── HOC clause transport ─────────────────────────────────────────────────────
 // A conditional contribution whose key the host cannot style hands the wrapped
 // component its RESOLVED atoms, never serialized condition text: the inner
-// pass replays them straight into a cursor. Values are recognized only through
-// a module-private WeakSet, so the transport cannot become publicly authorable.
-
-interface ConditionTransport {
-  hasBase: boolean
-  base: any
-  entries: unknown[]
-}
+// pass replays them straight into a cursor. the private symbol makes the tuple
+// impossible to author through public style values.
 
-const conditionTransports = new WeakSet<ConditionTransport>()
+const conditionTransportTag = Symbol()
+const transportHasBase = 1
+const transportBase = 2
+const transportEntries = 3
+const transportEntryWidth = 2
+type ConditionTransport = [typeof conditionTransportTag, boolean, any, ...unknown[]]
 
 function isConditionTransport(value: unknown): value is ConditionTransport {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    conditionTransports.has(value as ConditionTransport)
-  )
+  return Array.isArray(value) && value[0] === conditionTransportTag
 }
 
-const transportEntryWidth = 2
-
-function appendConditionEntry(entries: unknown[], cursor: ConditionCursor, value: any) {
-  entries.push(value, conditionTexts[cursor + conditionKeyOffset] || '')
+function appendConditionEntry(
+  transport: ConditionTransport,
+  cursor: ConditionCursor,
+  value: any
+) {
+  transport.push(value, conditionTexts[cursor + conditionKeyOffset] || '')
 }
 
 /** rebuild a transported clause's cursor by re-parsing its canonical key */
 function acquireTransportCursor(
   state: GetStyleState,
-  entries: unknown[],
+  transport: ConditionTransport,
   offset: number,
   parent: ConditionCursor | null
 ): ConditionCursor {
   const cursor = acquireConditionCursor(parent)
-  const key = entries[offset + 1] as string
+  const key = transport[offset + 1] as string
   if (key) resolveConditionText(state, cursor, key)
   commitConditionCursor(state, cursor)
   return cursor
@@ -4745,13 +4193,11 @@ function mergeConditionTransport(
   if (isConditionTransport(prev)) {
     transport = prev
   } else {
-    transport = { hasBase: false, base: undefined, entries: [] }
-    conditionTransports.add(transport)
+    transport = [conditionTransportTag, false, undefined]
     if (prev != null) {
       const isObjectValue =
         typeof prev === 'object' && !Array.isArray(prev) && !isVariable(prev)
-      const objectHasDefault =
-        isObjectValue && Object.prototype.hasOwnProperty.call(prev, 'default')
+      const objectHasDefault = isObjectValue && 'default' in prev
       const authoredWatermark = conditionCursorTop
       try {
         const firstCursor =
@@ -4772,8 +4218,8 @@ function mergeConditionTransport(
             const payload = (prev as Record<string, any>)[key]
             if (payload == null) continue
             if (key === 'default') {
-              transport.hasBase = true
-              transport.base = payload
+              transport[transportHasBase] = true
+              transport[transportBase] = payload
               continue
             }
             const watermark = conditionCursorTop
@@ -4784,12 +4230,12 @@ function mergeConditionTransport(
               resolveConditionText(state, keyCursor, key)
               commitConditionCursor(state, keyCursor)
             }
-            appendConditionEntry(transport.entries, keyCursor, payload)
+            appendConditionEntry(transport, keyCursor, payload)
             if (keyCursor !== firstCursor) releaseConditionCursors(watermark)
           }
         } else {
-          transport.hasBase = true
-          transport.base = prev
+          transport[transportHasBase] = true
+          transport[transportBase] = prev
         }
       } finally {
         releaseConditionCursors(authoredWatermark)
@@ -4799,13 +4245,17 @@ function mergeConditionTransport(
   // a repeat contribution under the same condition set replaces its entry and
   // moves to the end: the wrapped pass sees last-wins in authored order
   const cursorKey = conditionTexts[cursor + conditionKeyOffset] || ''
-  for (let offset = 0; offset < transport.entries.length; offset += transportEntryWidth) {
-    if (transport.entries[offset + 1] === cursorKey) {
-      transport.entries.splice(offset, transportEntryWidth)
+  for (
+    let offset = transportEntries;
+    offset < transport.length;
+    offset += transportEntryWidth
+  ) {
+    if (transport[offset + 1] === cursorKey) {
+      transport.splice(offset, transportEntryWidth)
       break
     }
   }
-  appendConditionEntry(transport.entries, cursor, value)
+  appendConditionEntry(transport, cursor, value)
   return transport
 }
 
@@ -4814,10 +4264,8 @@ type VariantScanContext = [GetStyleState, string, string]
 const variantValueHandler: FlatValueHandler<VariantScanContext> = {
   segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
     const state = ctx[0]
-    const directState = state as DirectState
     if (start === end) return
     if (isBase) {
-      feedCompoundSegment(directState, source, start, end, true, valid, '')
       if (!valid) return
       emitResolvedVariant(ctx[1], source.slice(start, end), state, ctx[2], null)
       return
@@ -4825,22 +4273,11 @@ const variantValueHandler: FlatValueHandler<VariantScanContext> = {
     if (!valid || !chainValid) return
     // the clause's own condition: parent composition happens downstream where
     // the resolved output emits, exactly like every other conditional value
-    const cursor = directState.flatScanCursor
+    const cursor = (state as DirectState).flatScanCursor
     const condition =
       cursor && conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag
         ? conditionNumbers[cursor + conditionValueOffset]
         : 0
-    feedCompoundSegment(
-      directState,
-      source,
-      start,
-      end,
-      false,
-      Boolean(condition),
-      condition && directState.flatPass?.[passCompoundIndexes]
-        ? conditionTexts[cursor! + conditionKeyOffset] || ''
-        : ''
-    )
     if (!condition) return
     emitResolvedVariant(ctx[1], source.slice(start, end), state, ctx[2], cursor!)
   },
@@ -4872,42 +4309,6 @@ const variantValueHandler: FlatValueHandler<VariantScanContext> = {
   },
 }
 
-// per-staticConfig union of every key the styled context declares, cached so
-// context-membership checks on the style write path are one Set lookup instead
-// of re-deriving config each time (issues #3670, #3676)
-const contextPropSets = new WeakMap<StaticConfig, Set<string> | null>()
-export function getContextPropSet(staticConfig: StaticConfig): Set<string> | null {
-  const cached = contextPropSets.get(staticConfig)
-  if (cached !== undefined) return cached
-  const contextConfig = staticConfig.context || staticConfig.parentStaticConfig?.context
-  const inheritedContextPropKeys =
-    !staticConfig.context ||
-    staticConfig.context === staticConfig.parentStaticConfig?.context
-      ? staticConfig.parentStaticConfig?.contextProps
-      : undefined
-  const contextPropKeys = staticConfig.contextProps || inheritedContextPropKeys
-  let set: Set<string> | null = null
-  if (contextConfig?.props) {
-    set ||= new Set()
-    for (const key in contextConfig.props) set.add(key)
-  }
-  if (contextPropKeys) {
-    set ||= new Set()
-    for (const key of contextPropKeys) set.add(key)
-  }
-  if (contextConfig?.propKeys) {
-    set ||= new Set()
-    for (const key of contextConfig.propKeys) set.add(key)
-  }
-  const parentPropKeys = staticConfig.parentStaticConfig?.context?.propKeys
-  if (parentPropKeys) {
-    set ||= new Set()
-    for (const key of parentPropKeys) set.add(key)
-  }
-  contextPropSets.set(staticConfig, set)
-  return set
-}
-
 function emitMappedValue(
   styleState: GetStyleState,
   key: string,
@@ -4965,8 +4366,8 @@ const contributeMappedValue: PropMapper = (
     )
   }
 
-  const { conf, styleProps, staticConfig } = styleState
-  const { variants } = staticConfig
+  const { conf, styleProps } = styleState
+  const variants = (styleState as DirectState).flatStyleStaticConfig!.variants
   const { disableExpandShorthands, noExpand, resolveValues } = styleProps
   const shorthands = conf.shorthands
 
@@ -5093,18 +4494,20 @@ function resolveVariants(
   styleState: GetStyleState,
   parentVariantKey: string
 ) {
-  const variantDefinition = styleState.staticConfig.variants?.[key]
+  const variantDefinition = (styleState as DirectState).flatStyleStaticConfig!.variants?.[
+    key
+  ]
   if (isConditionTransport(value)) {
     // conditional variant selections transported through an HOC: resolve each
     // branch under its replayed condition
-    if (value.hasBase) {
-      emitResolvedVariant(key, value.base, styleState, parentVariantKey, null)
+    if (value[transportHasBase]) {
+      emitResolvedVariant(key, value[transportBase], styleState, parentVariantKey, null)
     }
-    for (let offset = 0; offset < value.entries.length; ) {
-      const entryValue = value.entries[offset]
+    for (let offset = transportEntries; offset < value.length; ) {
+      const entryValue = value[offset]
       const watermark = conditionCursorTop
       try {
-        const cursor = acquireTransportCursor(styleState, value.entries, offset, null)
+        const cursor = acquireTransportCursor(styleState, value, offset, null)
         emitResolvedVariant(key, entryValue, styleState, parentVariantKey, cursor)
       } finally {
         releaseConditionCursors(watermark)
@@ -5142,8 +4545,7 @@ function resolveVariants(
   // argument shape) falls through whole
   const isObjectValue =
     value && typeof value === 'object' && !Array.isArray(value) && !isVariable(value)
-  const objectHasDefault =
-    isObjectValue && Object.prototype.hasOwnProperty.call(value, 'default')
+  const objectHasDefault = isObjectValue && 'default' in value
   const objectWatermark = conditionCursorTop
   try {
     const firstCursor =
@@ -5156,18 +4558,7 @@ function resolveVariants(
       for (const objKey in value) {
         const payload = value[objKey]
         if (payload == null) continue
-        const directState = styleState as DirectState
-        const payloadString = String(payload)
         if (objKey === 'default') {
-          feedCompoundSegment(
-            directState,
-            payloadString,
-            0,
-            payloadString.length,
-            true,
-            true,
-            ''
-          )
           emitResolvedVariant(key, payload, styleState, parentVariantKey, null)
           continue
         }
@@ -5180,17 +4571,6 @@ function resolveVariants(
           resolveConditionText(styleState, cursor, objKey)
           condition = commitConditionCursor(styleState, cursor)
         }
-        if (directState.flatPass?.[passCompoundIndexes]) {
-          feedCompoundSegment(
-            directState,
-            payloadString,
-            0,
-            payloadString.length,
-            false,
-            Boolean(condition),
-            condition ? conditionTexts[cursor + conditionKeyOffset] || '' : ''
-          )
-        }
         // an unresolvable key still flows down as its (unresolved) cursor so the
         // downstream contribution warns and drops it, never emits unconditioned
         emitResolvedVariant(key, payload, styleState, parentVariantKey, cursor)
@@ -5212,37 +4592,15 @@ function emitResolvedVariant(
   parentVariantKey: string,
   conditionCursor: ConditionCursor | null
 ) {
-  const { staticConfig, conf, debug } = styleState
+  const { conf, debug } = styleState
   const styleProps = styleState.styleProps
-  const { variants } = staticConfig
+  const variants = (styleState as DirectState).flatStyleStaticConfig!.variants
   if (!variants) return
 
   const variant = variants[key]
   let variantValue = getVariantDefinition(variant, value, conf, styleState)
 
-  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-    console.groupCollapsed(`♦️♦️♦️ resolve variant ${key}`)
-    console.info({
-      key,
-      value,
-      variantValue,
-      variants,
-    })
-    console.groupEnd()
-  }
-
   if (!variantValue) {
-    // variant at key exists, but no matching variant
-    // disabling warnings, its fine to pass through, could re-enable later somehoiw
-    if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === '1') {
-      // don't warn on missing booleans
-      if (typeof value !== 'boolean') {
-        const name = styleState.styleProps.displayName || '[UnnamedComponent]'
-        console.warn(
-          `No variant found: ${name} has variant "${key}", but no matching value "${value}"`
-        )
-      }
-    }
     return
   }
 
@@ -5269,43 +4627,38 @@ function emitResolvedVariant(
   }
   const { noSkip } = styleProps
   const originals = styleOriginalValues.get(variantValue)
-  const directState = styleState as DirectState
-  directState.flatCompoundOutputDepth = (directState.flatCompoundOutputDepth || 0) + 1
-  try {
-    for (const outputKey in variantValue) {
-      if (!noSkip && outputKey in skipProps) continue
-      // normalize per value at the variant boundary (numbers gain units on
-      // web, px-strings become numbers on native), the same normalization the
-      // materialized variant object received before streaming replaced it —
-      // atomic identity depends on it
-      const rawOutputValue = variantValue[outputKey]
-      const outputValue = styleProps.noNormalize
-        ? rawOutputValue
-        : normalizeValueWithProperty(
-            rawOutputValue,
-            conf.shorthands[outputKey] || outputKey
-          )
-      const originalValue = originals?.[outputKey] ?? rawOutputValue
-
-      const contextPropSet = getContextPropSet(staticConfig)
-      if (contextPropSet?.has(outputKey)) {
-        styleState.overriddenContextProps ||= {}
-        styleState.overriddenContextProps[outputKey] = originalValue
-        styleState.originalContextPropValues ||= {}
-        styleState.originalContextPropValues[outputKey] = originalValue
-      }
+  for (const outputKey in variantValue) {
+    if (!noSkip && outputKey in skipProps) continue
+    // normalize per value at the variant boundary (numbers gain units on
+    // web, px-strings become numbers on native), the same normalization the
+    // materialized variant object received before streaming replaced it —
+    // atomic identity depends on it
+    const rawOutputValue = variantValue[outputKey]
+    const outputValue = styleProps.noNormalize
+      ? rawOutputValue
+      : normalizeValueWithProperty(
+          rawOutputValue,
+          conf.shorthands[outputKey] || outputKey
+        )
+    const originalValue = originals?.[outputKey] ?? rawOutputValue
 
-      contributeMappedValue(
-        outputKey,
-        outputValue,
-        styleState,
-        parentVariantKey === key && outputKey === key,
-        conditionCursor || undefined,
-        originalValue
-      )
+    const contextPropSet = (styleState as DirectState).flatStyleStaticConfig!
+      .styledContextKeys
+    if (contextPropSet?.has(outputKey)) {
+      styleState.overriddenContextProps ||= {}
+      styleState.overriddenContextProps[outputKey] = originalValue
+      styleState.originalContextPropValues ||= {}
+      styleState.originalContextPropValues[outputKey] = originalValue
     }
-  } finally {
-    directState.flatCompoundOutputDepth!--
+
+    contributeMappedValue(
+      outputKey,
+      outputValue,
+      styleState,
+      parentVariantKey === key && outputKey === key,
+      conditionCursor || undefined,
+      originalValue
+    )
   }
 }
 
@@ -5334,160 +4687,3 @@ const variableToFontNameCache = new WeakMap<Variable, string>()
 // the prop -> token-category tables live in their own module; re-exported
 // here because they have always been part of this module's public surface
 export * from './tokenCategories'
-
-// goes through specificity finding best matching variant function
-function getVariantDefinition(
-  variant: any,
-  value: any,
-  conf: TamaguiInternalConfig,
-  { theme }: Partial<GetStyleState>
-): any {
-  if (!variant) return
-  if (value === undefined) return
-  if (typeof variant === 'function') {
-    return variant
-  }
-  if (Object.prototype.hasOwnProperty.call(variant, value)) {
-    return variant[value]
-  }
-  for (const { key, parts } of getCompiledVariantResolvers(variant)) {
-    for (const part of parts) {
-      if (matchesVariantResolver(part, value, conf, theme)) {
-        return variant[key]
-      }
-    }
-  }
-
-  return
-}
-
-type VariantResolverName = (typeof variantResolverNames)[number]
-
-const variantResolverNameSet = new Set<string>(variantResolverNames)
-
-type CompiledVariantResolver = {
-  key: string
-  parts: VariantResolverName[]
-}
-
-const variantResolverCache = new WeakMap<object, readonly CompiledVariantResolver[]>()
-
-const preparedStyleStaticConfigs = new WeakSet<StaticConfig>()
-
-export function prepareStyleStaticConfig(staticConfig: StaticConfig): StaticConfig {
-  if (preparedStyleStaticConfigs.has(staticConfig)) return staticConfig
-  preparedStyleStaticConfigs.add(staticConfig)
-  getContextPropSet(staticConfig)
-  prepareStaticConfigCompounds(staticConfig)
-  const variants = staticConfig.variants
-  if (variants) {
-    for (const key in variants) {
-      const variant = variants[key]
-      if (variant && typeof variant === 'object') getCompiledVariantResolvers(variant)
-    }
-  }
-  return staticConfig
-}
-
-function getCompiledVariantResolvers(variant: object) {
-  let cached = variantResolverCache.get(variant)
-  if (cached) {
-    return cached
-  }
-  const compiled: CompiledVariantResolver[] = []
-  for (const key in variant) {
-    const parts = parseVariantResolverKey(key)
-    if (parts) {
-      compiled.push({ key, parts })
-    }
-  }
-  variantResolverCache.set(variant, compiled)
-  return compiled
-}
-
-function parseVariantResolverKey(key: string): VariantResolverName[] | null {
-  if (!key) return null
-  const parts: VariantResolverName[] = []
-  let start = 0
-  for (let index = 0; index <= key.length; index++) {
-    if (index !== key.length && key.charCodeAt(index) !== 124) continue
-    let partStart = start
-    let partEnd = index
-    while (partStart < partEnd && key.charCodeAt(partStart) <= 32) partStart++
-    while (partEnd > partStart && key.charCodeAt(partEnd - 1) <= 32) partEnd--
-    if (partStart === partEnd) return null
-    const part = key.slice(partStart, partEnd)
-    if (!variantResolverNameSet.has(part)) return null
-    parts.push(part as VariantResolverName)
-    start = index + 1
-  }
-  return parts
-}
-
-function hasNumericPrefix(value: string, suffixLength: number): boolean {
-  if (value.length <= suffixLength) return false
-  return Number.isFinite(Number(value.slice(0, value.length - suffixLength)))
-}
-
-function matchesVariantResolver(
-  resolverName: VariantResolverName,
-  value: any,
-  conf: TamaguiInternalConfig,
-  theme: Partial<GetStyleState>['theme']
-) {
-  const string = typeof value === 'string'
-  const number = typeof value === 'number'
-  const rem = string && value.endsWith('rem') && hasNumericPrefix(value, 3)
-
-  switch (resolverName) {
-    case 'Size':
-    case 'Space':
-    case 'Radius':
-    case 'ZIndex':
-      // styles are authored by devs and never validated at runtime: any number
-      // or string routes to the token variant, which passes unknown values
-      // through. Size keeps its historical variable exclusion so variables
-      // route to the Space/Radius/ZIndex fallbacks.
-      return (
-        value === true ||
-        number ||
-        string ||
-        (resolverName !== 'Size' && isVariable(value))
-      )
-    // a token or theme color, otherwise any string is taken to be a raw CSS
-    // color and left for the browser to resolve. checking that against a CSS
-    // color-name table costs 2.3KB gzip to reject values that were never valid
-    // anyway. `red/50` opacity modifiers stay limited to token and theme
-    // colors, which the branches above already covered.
-    case 'Color':
-      return (value != null && value in conf.tokensParsed.color) || string
-    case 'Theme':
-      return string && !!theme && value in theme
-    case 'FontSize':
-      return value === true || !!conf.fontsParsed.body?.size?.[value] || number || rem
-    case 'FontStyle':
-      return (
-        !!conf.fontsParsed.body?.style?.[value] ||
-        value === 'normal' ||
-        value === 'italic'
-      )
-    case 'FontTransform':
-      return (
-        !!conf.fontsParsed.body?.transform?.[value] ||
-        value === 'none' ||
-        value === 'capitalize' ||
-        value === 'uppercase' ||
-        value === 'lowercase'
-      )
-    case 'FontLineHeight':
-      return !!conf.fontsParsed.body?.lineHeight?.[value] || number || rem
-    case 'FontLetterSpacing':
-      return !!conf.fontsParsed.body?.letterSpacing?.[value] || number || rem
-    case 'number':
-    case 'string':
-    case 'boolean':
-      return typeof value === resolverName
-    case 'any':
-      return true
-  }
-}