@tamagui/web 3.0.0-beta.669.1 → 3.0.0-beta.719.1

package/src/helpers/directStyle.ts

@@ -13,16 +13,17 @@ import {
   type StyleObject,
 } from '@tamagui/helpers'
 import {
-  canonicalClauseModifier,
-  clauseConditionSetKey,
-  clauseSubjectClassRepetitions,
-  createClausePrecedenceOrder,
-  getClausePrecedenceKeyFromKinds,
-  isRootThemeName,
+  canonicalStateModifierNames,
+  isContainerSizeQueryText,
+  isModifierName,
+  modifierKindMedia,
+  modifierKindPlatform,
+  modifierKindState,
+  modifierKindTheme,
   scanFlatValue,
+  stateModifierSelectors,
   type ClausePrecedenceKey,
-  type ClausePrecedenceOrder,
-  type ModifierKind,
+  type FlatValueHandler,
   type ParsedValue,
 } from '@tamagui/style-grammar/runtime'
 
@@ -32,9 +33,9 @@ import type { GetStyleState } from '../types'
 import { warnOnce, warnRefusedValue } from './warnOnce'
 import { expandStyle } from './expandStyle'
 import { getCSSStyleAtomic } from './getCSSStylesAtomic'
+import { getConfigRevisionState } from './grammarConfig'
 import { isColorStyleKey } from './getDynamicVal'
 import { shouldInsertStyleRules, updateRules } from './insertStyleRule'
-import { mediaObjectToString } from './mediaObjectToString'
 import { normalizeColor } from './normalizeColor'
 import { parseNativeStyle } from './parseNativeStyle.native'
 import { parseNativeTransform } from './parseNativeTransform.native'
@@ -54,20 +55,6 @@ export type MergeStyle = (
   originalValue?: any
 ) => void
 
-type Condition = {
-  key: string
-  active: boolean
-  emit: boolean
-  selector: string
-  wrappers?: string[]
-  enter?: true
-  exit?: true
-  theme?: string
-  precedence: ClausePrecedenceKey
-  classRepetitions: number
-  unsupportedState?: string
-}
-
 type DirectAtomic = {
   baseRules: number
   conditions?: Record<
@@ -94,21 +81,204 @@ type DirectState = GetStyleState & {
   flatWebShadow?: Record<string, any>
 }
 
-// keyed by the CANONICAL modifier spelling: `canonicalClauseModifier` has
-// already folded `active`, `pressed`, `starting` and `ending` into their one
-// spelling before anything looks in here
-const stateSelectors: Record<string, string> = {
-  hover: ':hover',
-  press: ':active',
-  focus: ':focus',
-  'focus-visible': ':focus-visible',
-  'focus-within': ':focus-within',
-  disabled: '[aria-disabled]',
-  open: '[data-state="open"]',
-  checked: '[data-state="checked"]',
-  highlighted: '[data-highlighted]',
-  selected: '[data-state="active"]',
-  invalid: '[aria-invalid="true"]',
+const directStyleHandler: FlatValueHandler<GetStyleState> = {
+  segment(
+    state,
+    start,
+    end,
+    isBase,
+    valid,
+    source,
+    chainStart,
+    chainEnd,
+    chainValid,
+    chainCount,
+    _result,
+    failure,
+    failureIndex,
+    property,
+    merge,
+    originalValue,
+    contextOnly
+  ) {
+    if (isBase) {
+      if (start === end) return
+      if (!valid) {
+        if (process.env.NODE_ENV === 'development') {
+          warnRefusedValue(
+            property,
+            source,
+            failure === 'invalid-character'
+              ? `"${source[failureIndex]}" would end the declaration or rule`
+              : failure === 'unterminated-string'
+                ? 'an unterminated string'
+                : failure === 'unterminated-comment'
+                  ? 'an unterminated "/*" comment'
+                  : failure === 'stray-comment-close'
+                    ? 'a stray "*/"'
+                    : 'an unterminated "("'
+          )
+        }
+        return
+      }
+      const value = source.slice(start, end)
+      emitValue(
+        state,
+        property,
+        value,
+        0,
+        '',
+        undefined,
+        '',
+        '',
+        merge,
+        value,
+        contextOnly
+      )
+      return 5
+    }
+    if (!chainValid) {
+      if (process.env.NODE_ENV === 'development') {
+        warnRefusedValue(
+          property,
+          source,
+          failure === 'invalid-character'
+            ? `"${source[failureIndex]}" would end the declaration or rule`
+            : failure === 'unterminated-string'
+              ? 'an unterminated string'
+              : failure === 'unterminated-comment'
+                ? 'an unterminated "/*" comment'
+                : failure === 'stray-comment-close'
+                  ? 'a stray "*/"'
+                  : 'an unterminated "("'
+        )
+      }
+      return
+    }
+    if (start === end) {
+      if (process.env.NODE_ENV === 'development') {
+        warnRefusedValue(property, source, 'a conditional clause has no value')
+      }
+      return
+    }
+    if (property === 'aspectRatio' && chainCount === 1) {
+      const left = Number(source.slice(chainStart, chainEnd))
+      const right = Number(source.slice(start, end))
+      if (
+        chainStart < chainEnd &&
+        Number.isFinite(left) &&
+        left > 0 &&
+        Number.isFinite(right) &&
+        right > 0
+      ) {
+        return 12
+      }
+    }
+    const condition = resolveClauseChain(
+      state,
+      source,
+      chainStart,
+      chainEnd,
+      property,
+      undefined,
+      valid ? merge : undefined,
+      undefined,
+      contextOnly,
+      start,
+      end,
+      1
+    )
+    if (!condition) return
+    if (!valid) {
+      if (process.env.NODE_ENV === 'development') {
+        warnRefusedValue(
+          property,
+          source,
+          failure === 'invalid-character'
+            ? `"${source[failureIndex]}" would end the declaration or rule`
+            : failure === 'unterminated-string'
+              ? 'an unterminated string'
+              : failure === 'unterminated-comment'
+                ? 'an unterminated "/*" comment'
+                : failure === 'stray-comment-close'
+                  ? 'a stray "*/"'
+                  : 'an unterminated "("'
+        )
+      }
+      return
+    }
+    return 4 | (condition & 12 ? 2 : 0)
+  },
+  chain() {
+    return true
+  },
+  end(
+    state,
+    source,
+    result,
+    lastPayloadStart,
+    chainCount,
+    property,
+    merge,
+    originalValue,
+    contextOnly
+  ) {
+    let hasBase = !!(result & 1)
+    if (result & 8 && chainCount === 1) {
+      emitValue(
+        state,
+        property,
+        source,
+        0,
+        '',
+        undefined,
+        '',
+        '',
+        merge,
+        originalValue ?? source,
+        contextOnly
+      )
+      hasBase = true
+    }
+    if (
+      process.env.NODE_ENV === 'development' &&
+      !hasBase &&
+      result & 4 &&
+      (property in tokenCategories.color || property in tokenCategoryByProperty) &&
+      splitComponents(source.slice(lastPayloadStart)).length > 1
+    ) {
+      warnOnce(
+        `${property}="${source}" has multiple values after its first conditional. Write the base value before the first conditional.`
+      )
+    }
+    if ((!isWeb || !state.flatShouldDoClasses) && result & 2 && !hasBase) {
+      const value =
+        property === 'opacity'
+          ? 1
+          : property === 'scale' || property === 'scaleX' || property === 'scaleY'
+            ? 1
+            : property === 'rotate'
+              ? '0deg'
+              : property === 'x' || property === 'y'
+                ? 0
+                : null
+      if (value !== null) {
+        emitValue(
+          state,
+          property,
+          value,
+          0,
+          '',
+          undefined,
+          '',
+          '',
+          merge,
+          value,
+          contextOnly
+        )
+      }
+    }
+  },
 }
 
 const legacyTransformParts = new Set([
@@ -202,41 +372,6 @@ const borderStyleDefaults: Record<string, string> = {
   borderLeftWidth: 'borderLeftStyle',
 }
 
-const mediaQueries = new WeakMap<object, Record<string, string>>()
-const clausePrecedenceOrders = new WeakMap<object, ClausePrecedenceOrder>()
-function queryFor(state: GetStyleState, name: string): string | undefined {
-  let queries = mediaQueries.get(state.conf)
-  if (!queries) {
-    queries = {}
-    const media = state.conf.media || {}
-    for (const key in media) queries[key] = mediaObjectToString(media[key])
-    mediaQueries.set(state.conf, queries)
-  }
-  return queries[name]
-}
-
-function precedenceOrderFor(state: GetStyleState): ClausePrecedenceOrder {
-  let order = clausePrecedenceOrders.get(state.conf)
-  if (!order) {
-    order = createClausePrecedenceOrder(state.conf.media)
-    clausePrecedenceOrders.set(state.conf, order)
-  }
-  return order
-}
-
-function stateIsActive(state: GetStyleState, name: string): boolean {
-  const component = state.componentState
-  if (name === 'hover') return !!component.hover
-  if (name === 'press') return !!(component.press || component.pressIn)
-  if (name === 'focus') return !!component.focus
-  if (name === 'focus-visible') return !!component.focusVisible
-  if (name === 'focus-within') return !!component.focusWithin
-  if (name === 'disabled') return !!(component.disabled || state.props.disabled)
-  if (name === 'enter') return !!component.unmounted
-  if (name === 'exit') return !!state.styleProps.isExiting
-  return false
-}
-
 export function platformMatches(name: string): boolean {
   if (name === 'web') return isWeb
   if (name === 'native') return !isWeb
@@ -247,164 +382,278 @@ export function platformMatches(name: string): boolean {
   return name === 'tv' && isTV
 }
 
-function groupCondition(state: GetStyleState, modifier: string, out: Condition) {
-  const slash = modifier.indexOf('/')
-  const stateName = modifier.slice(6, slash === -1 ? undefined : slash)
-  const groupName = slash === -1 ? 'true' : modifier.slice(slash + 1)
-  const selector = stateSelectors[stateName]
-  if (!selector || !groupName) return false
-  out.selector += `:where(.t_group_${groupName}${selector} *)`
-  if (stateName === 'hover') (out.wrappers ||= []).push('@media (hover: hover)')
-  const component = state.componentState.group?.[groupName]
-  const context = state.flatGroupContext?.[groupName]
-  out.active &&= !!(component?.pseudo ?? context?.state.pseudo)?.[stateName]
-  ;(state.flatGroupKeys ||= new Set()).add(groupName)
-  return true
-}
-
-function containerCondition(state: GetStyleState, modifier: string, out: Condition) {
-  const slash = modifier.indexOf('/')
-  const size = modifier.slice(1, slash === -1 ? undefined : slash)
-  const name = slash === -1 ? null : modifier.slice(slash + 1)
-  const query = queryFor(state, size)
-  if (!query || (name !== null && !name)) return false
-  const key = name === null ? '@' : `@${name}`
-  ;(out.wrappers ||= []).push(
-    name === null ? `@container ${query}` : `@container ${name} ${query}`
-  )
-  const component = state.componentState.group?.[key]
-  const context = state.flatGroupContext?.[key]
-  const active = component?.media?.[size]
-  out.active &&=
-    active === undefined
-      ? !!(context?.state.layout && mediaKeyMatch(size, context.state.layout))
-      : !!active
-  ;(state.flatGroupKeys ||= new Set()).add(key)
-  ;(state.flatGroupMedia ||= new Set()).add(size)
-  return true
-}
-
-/**
- * Resolve one modifier chain against the live state, or null when the runtime
- * has no such modifier. Exported because the variant scanner in `propMapper`
- * has to refuse exactly the chains this one refuses; two answers to "is this a
- * modifier" is how the prop and variant paths came to disagree about how much
- * of a bad value survives.
- */
-export function getCondition(state: GetStyleState, source: string): Condition | null {
-  const out = { key: '', active: true, emit: true, selector: '' } as Condition
-  const canonical: string[] = []
-  const kinds: ModifierKind[] = []
-  const seenModifiers = new Set<string>()
+export function resolveClauseChain(
+  state: GetStyleState,
+  source: string,
+  start: number,
+  end: number,
+  property?: string,
+  raw?: any,
+  merge?: MergeStyle,
+  originalValue?: any,
+  contextOnly = false,
+  payloadStart = -1,
+  payloadEnd = -1,
+  warning = 0
+): number {
+  const compiled = getConfigRevisionState(state.conf)
+  const sourceStart = start
+  let key = ''
+  let active = true
+  let emit = true
+  let selector = ''
+  let wrappers: string[] | undefined
+  let theme = ''
+  let enter = false
+  let exit = false
+  let unsupportedState = ''
+  let platformRank = 0
+  let depth = 0
+  let categoryRank = 0
+  let withinRank = 0
   let selfStateSpecificity = 0
-  let start = 0
-  for (let index = 0; index <= source.length; index++) {
-    if (index !== source.length && source.charCodeAt(index) !== 58) continue
-    let modifier = canonicalClauseModifier(source.slice(start, index))
+  for (let index = start; index <= end; index++) {
+    if (index !== end && source.charCodeAt(index) !== 58) continue
+    let modifier = source.slice(start, index)
     start = index + 1
-    if (!modifier) return null
-    if (seenModifiers.has(modifier)) continue
-    seenModifiers.add(modifier)
-
-    if (modifier.startsWith('group-')) {
-      if (!groupCondition(state, modifier, out)) return null
-      canonical.push(modifier)
-      kinds.push('group')
-      continue
-    }
-    if (modifier.charCodeAt(0) === 64) {
-      if (!containerCondition(state, modifier, out)) return null
-      canonical.push(modifier)
-      kinds.push('container')
-      continue
-    }
-    if (modifier in stateSelectors || modifier === 'enter' || modifier === 'exit') {
-      canonical.push(modifier)
-      kinds.push('state')
-      selfStateSpecificity++
-      const selector = stateSelectors[modifier]
+    let code = compiled.modifiers[modifier]
+    let kind = code & 7
+    let rank = code >> 3
+    let stateSelector = ''
+    let conditionStateName = ''
+    let groupName = ''
+    let containerSize = ''
+    let containerName = ''
+    let containerQuery = ''
+    if (kind === modifierKindState) {
+      modifier = canonicalStateModifierNames[rank]
+      stateSelector = stateModifierSelectors[rank]
+    } else if (!kind && modifier.startsWith('group-')) {
+      const slash = modifier.indexOf('/')
+      const authoredState = modifier.slice(6, slash === -1 ? undefined : slash)
+      code = compiled.modifiers[authoredState]
+      if ((code & 7) !== modifierKindState) kind = 0
+      else {
+        rank = code >> 3
+        groupName = slash === -1 ? 'true' : modifier.slice(slash + 1)
+        if (
+          rank === 6 ||
+          rank === 7 ||
+          (slash !== -1 && !isModifierName(groupName, 0, groupName.length))
+        ) {
+          kind = 0
+        } else {
+          kind = 5
+          const stateName = canonicalStateModifierNames[rank]
+          conditionStateName = stateName
+          stateSelector = stateModifierSelectors[rank]
+          modifier = `group-${stateName}${slash === -1 ? '' : modifier.slice(slash)}`
+        }
+      }
+    } else if (!kind && modifier.charCodeAt(0) === 64) {
+      const slash = modifier.indexOf('/')
+      containerSize = modifier.slice(1, slash === -1 ? undefined : slash)
+      containerName = slash === -1 ? '' : modifier.slice(slash + 1)
       if (
-        !isWeb &&
-        modifier !== 'hover' &&
-        modifier !== 'press' &&
-        modifier !== 'focus' &&
-        modifier !== 'focus-visible' &&
-        modifier !== 'focus-within' &&
-        modifier !== 'disabled' &&
-        modifier !== 'enter' &&
-        modifier !== 'exit'
+        isModifierName(containerSize, 0, containerSize.length) &&
+        (slash === -1 || isModifierName(containerName, 0, containerName.length)) &&
+        ((code = compiled.modifiers[containerSize]) & 7) === modifierKindMedia &&
+        (containerQuery = compiled.mediaQueries[containerSize]) &&
+        isContainerSizeQueryText(containerQuery)
       ) {
-        out.unsupportedState = modifier
+        kind = 6
+        rank = code >> 3
       }
-      if (modifier === 'enter' || modifier === 'exit') {
-        const cls = modifier === 'enter' ? '.t_unmounted' : '.t_exiting'
-        out.selector += `:is(${cls}, ${cls} *)`
-        out[modifier] = true
-      } else if (selector) {
-        out.selector += selector
+    }
+    if (!kind) {
+      if (warning && process.env.NODE_ENV === 'development') {
+        warnRefusedValue(
+          property!,
+          warning === 1 ? source : raw,
+          `unknown modifier "${source.slice(sourceStart, end)}"`
+        )
       }
-      if (modifier === 'hover') (out.wrappers ||= []).push('@media (hover: hover)')
-      out.active &&= stateIsActive(state, modifier)
-      if (
-        modifier === 'hover' ||
-        modifier === 'press' ||
-        modifier === 'focus' ||
-        modifier === 'focus-visible' ||
-        modifier === 'focus-within'
-      ) {
-        ;(state.flatStateKeys ||= new Set()).add(modifier)
+      return 0
+    }
+
+    let slotStart = 0
+    let duplicate = false
+    let inserted = !key
+    if (!key) key = modifier
+    else {
+      while (slotStart <= key.length) {
+        let slotEnd = key.indexOf(':', slotStart)
+        if (slotEnd === -1) slotEnd = key.length
+        let order = 0
+        const compareLength = Math.min(modifier.length, slotEnd - slotStart)
+        for (let offset = 0; offset < compareLength; offset++) {
+          order = modifier.charCodeAt(offset) - key.charCodeAt(slotStart + offset)
+          if (order) break
+        }
+        order ||= modifier.length - (slotEnd - slotStart)
+        if (!order) {
+          duplicate = true
+          break
+        }
+        if (order < 0) {
+          key = `${key.slice(0, slotStart)}${modifier}:${key.slice(slotStart)}`
+          inserted = true
+          break
+        }
+        if (slotEnd === key.length) break
+        slotStart = slotEnd + 1
       }
-      continue
+      if (!duplicate && !inserted) key += `:${modifier}`
     }
-    if (modifier in (state.conf.media || {})) {
-      const query = queryFor(state, modifier)
-      if (!query) return null
-      canonical.push(modifier)
-      kinds.push('media')
-      ;(out.wrappers ||= []).push(`@media ${query}`)
-      out.active &&= !!state.flatMediaState?.[modifier]
-      ;(state.flatMediaKeys ||= new Set()).add(modifier)
+    if (duplicate) continue
+
+    if (kind === modifierKindPlatform) {
+      if (rank > platformRank) platformRank = rank
+      const matches = platformMatches(modifier)
+      active &&= matches
+      emit &&= matches
       continue
     }
-    if (isRootThemeName(modifier) && modifier in (state.conf.themes || {})) {
-      canonical.push(modifier)
-      kinds.push('theme')
-      out.theme = modifier
-      out.selector += `:where(.t_${modifier}, .t_${modifier} *)`
-      out.active &&=
+    depth++
+    const nextCategory =
+      kind === modifierKindMedia
+        ? 0
+        : kind === 6
+          ? 1
+          : kind === modifierKindTheme
+            ? 2
+            : kind === 5
+              ? 3
+              : 4
+    if (nextCategory > categoryRank) {
+      categoryRank = nextCategory
+      withinRank = rank
+    } else if (nextCategory === categoryRank && rank > withinRank) {
+      withinRank = rank
+    }
+
+    if (kind === modifierKindMedia) {
+      const query = compiled.mediaQueries[modifier]
+      if (!query) return 0
+      ;(wrappers ||= []).push(`@media ${query}`)
+      active &&= !!state.flatMediaState?.[modifier]
+      ;(state.flatMediaKeys ||= new Set()).add(modifier)
+    } else if (kind === modifierKindTheme) {
+      theme = modifier
+      selector += `:where(.t_${modifier}, .t_${modifier} *)`
+      active &&=
         state.flatThemeName === modifier ||
         state.flatThemeName?.startsWith(`${modifier}_`) === true
-      continue
-    }
-    if (
-      modifier === 'web' ||
-      modifier === 'native' ||
-      modifier === 'ios' ||
-      modifier === 'android' ||
-      modifier === 'tv' ||
-      modifier === 'tvos' ||
-      modifier === 'androidtv'
-    ) {
-      canonical.push(modifier)
-      kinds.push('platform')
-      const matches = platformMatches(modifier)
-      out.active &&= matches
-      out.emit &&= matches
-      continue
+    } else if (kind === 5) {
+      selector += `:where(.t_group_${groupName}${stateSelector} *)`
+      if (rank === 0) (wrappers ||= []).push('@media (hover: hover)')
+      const component = state.componentState.group?.[groupName]
+      const context = state.flatGroupContext?.[groupName]
+      active &&= !!(component?.pseudo ?? context?.state.pseudo)?.[conditionStateName]
+      ;(state.flatGroupKeys ||= new Set()).add(groupName)
+    } else if (kind === 6) {
+      const groupKey = `@${containerName}`
+      ;(wrappers ||= []).push(
+        containerName
+          ? `@container ${containerName} ${containerQuery}`
+          : `@container ${containerQuery}`
+      )
+      const component = state.componentState.group?.[groupKey]
+      const context = state.flatGroupContext?.[groupKey]
+      const match = component?.media?.[containerSize]
+      active &&=
+        match === undefined
+          ? !!(
+              context?.state.layout && mediaKeyMatch(containerSize, context.state.layout)
+            )
+          : !!match
+      ;(state.flatGroupKeys ||= new Set()).add(groupKey)
+      ;(state.flatGroupMedia ||= new Set()).add(containerSize)
+    } else {
+      selfStateSpecificity++
+      if (!isWeb && stateSelector[0] === '[' && modifier !== 'disabled') {
+        unsupportedState = modifier
+      }
+      if (stateSelector[0] === '.') {
+        selector += `:is(${stateSelector}, ${stateSelector} *)`
+        if (rank === 6) enter = true
+        else exit = true
+      } else {
+        selector += stateSelector
+      }
+      if (rank === 0) (wrappers ||= []).push('@media (hover: hover)')
+      const component = state.componentState
+      active &&=
+        rank === 0
+          ? !!component.hover
+          : rank === 4
+            ? !!(component.press || component.pressIn)
+            : rank === 2
+              ? !!component.focus
+              : rank === 3
+                ? !!component.focusVisible
+                : rank === 1
+                  ? !!component.focusWithin
+                  : rank === 5
+                    ? !!(component.disabled || state.props.disabled)
+                    : rank === 6
+                      ? !!component.unmounted
+                      : rank === 7
+                        ? !!state.styleProps.isExiting
+                        : false
+      if (stateSelector[0] === ':') {
+        ;(state.flatStateKeys ||= new Set()).add(modifier)
+      }
     }
-    return null
   }
-  out.key = clauseConditionSetKey(canonical)
-  out.precedence = getClausePrecedenceKeyFromKinds(
-    canonical,
-    kinds,
-    precedenceOrderFor(state)
-  )
-  out.classRepetitions = clauseSubjectClassRepetitions(
-    out.precedence,
-    selfStateSpecificity
-  )
-  return out
+  if (depth > 5) {
+    throw new Error(
+      `a flat value clause supports at most 5 non-platform conditions; received ${depth} in "${source.slice(sourceStart, end)}:"`
+    )
+  }
+  const precedence =
+    (platformRank << 26) | (depth << 23) | (categoryRank << 20) | withinRank
+  const condition =
+    precedence * 256 +
+    selfStateSpecificity * 32 +
+    16 +
+    (active ? 1 : 0) +
+    (emit ? 2 : 0) +
+    (enter ? 4 : 0) +
+    (exit ? 8 : 0)
+  if (warning && unsupportedState && process.env.NODE_ENV === 'development') {
+    warnOnce(
+      `${property}: "${unsupportedState}:" has no native component-state source; dropping the clause`
+    )
+  }
+  if (
+    merge &&
+    property &&
+    condition & 2 &&
+    (condition & 1 ||
+      (isWeb && state.flatShouldDoClasses) ||
+      (warning === 1 &&
+        !isWeb &&
+        theme &&
+        supportsDynamicColorIOS &&
+        isColorStyleKey(property)))
+  ) {
+    const value = payloadStart === -1 ? raw : source.slice(payloadStart, payloadEnd)
+    emitValue(
+      state,
+      property,
+      value,
+      condition,
+      key,
+      wrappers,
+      selector,
+      theme,
+      merge,
+      warning === 2 ? originalValue : (originalValue ?? value),
+      contextOnly
+    )
+  }
+  return condition
 }
 
 interface TokenLookup {
@@ -499,10 +748,7 @@ function configuredValue(state: GetStyleState, property: string, raw: string): a
     }
   }
 
-  const safeArea =
-    process.env.TAMAGUI_RUNTIME_SAFE_AREA === 'disabled'
-      ? undefined
-      : resolveSafeAreaVariable(name)
+  const safeArea = resolveSafeAreaVariable(name)
   if (safeArea !== undefined) {
     state.flatUsesSafeArea = true
     return safeArea
@@ -639,23 +885,31 @@ function directAtomic(
   state: DirectState,
   property: string,
   value: any,
-  condition: Condition | null,
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string,
   isDefault = false
 ) {
   const atomics = (state.flatAtomics ||= {})
   const atomicKey = property.startsWith('transition') ? 'transition' : property
   const existing = atomics[atomicKey]
-  const contribution = directStyleSignature(property, value, condition?.key || '')
+  const contribution = directStyleSignature(property, value, conditionKey)
   const signature = existing ? existing.signature + contribution : contribution
   const next = getCSSStyleAtomic(
     property,
     value,
-    condition?.selector,
-    condition?.wrappers,
+    conditionSelector,
+    conditionWrappers,
     signature,
     true,
     atomicKey,
-    condition?.classRepetitions
+    condition
+      ? 1 +
+          ((Math.floor(condition / 256) >>> 23) & 7) +
+          (Math.floor(condition / 256) >>> 26) * 6 -
+          ((condition >>> 5) & 7)
+      : undefined
   )
   if (!next) return
   const identifier = next[StyleObjectIdentifier]
@@ -675,12 +929,10 @@ function directAtomic(
     }
     if (slotted) {
       atomic.conditions = {
-        [atomicKey === 'transition'
-          ? `${condition?.key || ''}\0${property}`
-          : condition!.key]: {
+        [atomicKey === 'transition' ? `${conditionKey}\0${property}` : conditionKey]: {
           count: nextRules.length,
           index: 0,
-          precedence: condition?.precedence ?? 0,
+          precedence: condition ? Math.floor(condition / 256) : 0,
           default: isDefault,
         },
       }
@@ -710,9 +962,7 @@ function directAtomic(
     }
     if (slotted) {
       const slot =
-        atomicKey === 'transition'
-          ? `${condition?.key || ''}\0${property}`
-          : condition!.key
+        atomicKey === 'transition' ? `${conditionKey}\0${property}` : conditionKey
       const previous = existing.conditions?.[slot]
       if (previous) {
         rules.splice(previous.index, previous.count)
@@ -726,7 +976,7 @@ function directAtomic(
         }
         delete existing.conditions![slot]
       }
-      const precedence = condition?.precedence ?? 0
+      const precedence = condition ? Math.floor(condition / 256) : 0
       let insertionIndex = rules.length
       if (existing.conditions) {
         for (const key in existing.conditions) {
@@ -766,7 +1016,10 @@ function directAtomic(
 function emitBorderStyleDefault(
   state: GetStyleState,
   property: string,
-  condition: Condition | null
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string
 ) {
   if (!isWeb || !state.flatShouldDoClasses || state.styleProps.noNormalize === false) {
     return
@@ -777,11 +1030,20 @@ function emitBorderStyleDefault(
   if (
     atomic?.baseRules ||
     (state.classNames[target] && !atomic) ||
-    (condition && atomic?.conditions?.[condition.key])
+    (condition && atomic?.conditions?.[conditionKey])
   ) {
     return
   }
-  directAtomic(state as DirectState, target, 'solid', condition, true)
+  directAtomic(
+    state as DirectState,
+    target,
+    'solid',
+    condition,
+    conditionKey,
+    conditionWrappers,
+    conditionSelector,
+    true
+  )
 }
 
 export function flushDirectStyles(state: GetStyleState, clear = false) {
@@ -807,19 +1069,23 @@ function emitProperty(
   state: GetStyleState,
   property: string,
   value: any,
-  condition: Condition | null,
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string,
+  conditionTheme: string,
   merge: MergeStyle,
   originalValue: any,
   contextOnly: boolean
 ) {
   const direct = state as DirectState
-  if (condition?.enter) (state.flatEnterKeys ||= new Set()).add(property)
-  if (condition?.exit) (state.flatExitKeys ||= new Set()).add(property)
+  if (condition & 4) (state.flatEnterKeys ||= new Set()).add(property)
+  if (condition & 8) (state.flatExitKeys ||= new Set()).add(property)
 
-  if (!isWeb && condition?.theme) {
+  if (!isWeb && conditionTheme) {
     if (supportsDynamicColorIOS && isColorStyleKey(property)) {
       const schemes = ((direct.flatDynamicColors ||= {})[property] ||= {})
-      schemes[condition.theme] =
+      schemes[conditionTheme] =
         typeof originalValue === 'string' && /^[a-z]+$/i.test(originalValue)
           ? originalValue
           : value
@@ -830,7 +1096,7 @@ function emitProperty(
   }
 
   if (contextOnly) {
-    if (!condition || condition.active) {
+    if (!condition || condition & 1) {
       ;(state.overriddenContextProps ||= {})[property] = originalValue
     }
     return
@@ -849,15 +1115,24 @@ function emitProperty(
     if (!condition) {
       if (state.style) delete state.style[property]
     }
-    directAtomic(state as DirectState, property, value, condition)
+    directAtomic(
+      state as DirectState,
+      property,
+      value,
+      condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector
+    )
     return
   }
 
   if (condition) {
-    if (!condition.active) return
+    if (!(condition & 1)) return
+    const precedence = Math.floor(condition / 256)
     const previous = direct.flatPrecedence?.[property]
-    if (previous !== undefined && condition.precedence < previous) return
-    ;(direct.flatPrecedence ||= {})[property] = condition.precedence
+    if (previous !== undefined && precedence < previous) return
+    ;(direct.flatPrecedence ||= {})[property] = precedence
     ;(state.flatActiveConditions ||= {})[property] = true
   } else if (state.flatActiveConditions?.[property]) {
     return
@@ -892,7 +1167,11 @@ function emitBorder(
   state: GetStyleState,
   property: string,
   raw: string,
-  condition: Condition | null,
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string,
+  conditionTheme: string,
   merge: MergeStyle,
   originalValue: any,
   contextOnly: boolean
@@ -926,18 +1205,54 @@ function emitBorder(
   if (style === 'none' && width === undefined) width = '0'
   if (width !== undefined) {
     for (const target of targets.width) {
-      emitResolved(state, target, width, condition, merge, originalValue, contextOnly)
+      emitResolved(
+        state,
+        target,
+        width,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
     }
   }
   if (style !== undefined) {
     const styleTargets = !isWeb && property === 'border' ? ['borderStyle'] : targets.style
     for (const target of styleTargets) {
-      emitProperty(state, target, style, condition, merge, originalValue, contextOnly)
+      emitProperty(
+        state,
+        target,
+        style,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
     }
   }
   if (color !== undefined) {
     for (const target of targets.color) {
-      emitResolved(state, target, color, condition, merge, originalValue, contextOnly)
+      emitResolved(
+        state,
+        target,
+        color,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
     }
   }
 }
@@ -945,7 +1260,11 @@ function emitBorder(
 function emitTextDecoration(
   state: GetStyleState,
   raw: string,
-  condition: Condition | null,
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string,
+  conditionTheme: string,
   merge: MergeStyle,
   originalValue: any,
   contextOnly: boolean
@@ -964,7 +1283,19 @@ function emitTextDecoration(
             part === 'none'
           ? 'textDecorationLine'
           : 'textDecorationColor'
-    emitResolved(state, property, part, condition, merge, originalValue, contextOnly)
+    emitResolved(
+      state,
+      property,
+      part,
+      condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector,
+      conditionTheme,
+      merge,
+      originalValue,
+      contextOnly
+    )
   }
 }
 
@@ -990,17 +1321,57 @@ function emitTransform(
   state: GetStyleState,
   property: string,
   value: any,
-  condition: Condition | null,
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string,
+  conditionTheme: string,
   merge: MergeStyle,
   originalValue: any,
   contextOnly: boolean
 ) {
   if (!isWeb || !state.flatShouldDoClasses) {
     if (!isWeb && property === 'scale') {
-      emitProperty(state, 'scaleX', value, condition, merge, originalValue, contextOnly)
-      emitProperty(state, 'scaleY', value, condition, merge, originalValue, contextOnly)
+      emitProperty(
+        state,
+        'scaleX',
+        value,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
+      emitProperty(
+        state,
+        'scaleY',
+        value,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
     } else {
-      emitProperty(state, property, value, condition, merge, originalValue, contextOnly)
+      emitProperty(
+        state,
+        property,
+        value,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
     }
     return
   }
@@ -1025,7 +1396,19 @@ function emitTransform(
       if (target === '--t-x' || target === '--t-y') targetValue = `${targetValue}px`
       else if (target === 'rotate') targetValue = `${targetValue}deg`
     }
-    emitProperty(state, target, targetValue, condition, merge, originalValue, contextOnly)
+    emitProperty(
+      state,
+      target,
+      targetValue,
+      condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector,
+      conditionTheme,
+      merge,
+      originalValue,
+      contextOnly
+    )
     if (target === '--t-x' || target === '--t-y') addComposition(state, 'translate')
     else if (target.startsWith('--t-scale')) addComposition(state, 'scale')
   }
@@ -1035,7 +1418,11 @@ function emitResolved(
   state: GetStyleState,
   property: string,
   raw: string,
-  condition: Condition | null,
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string,
+  conditionTheme: string,
   merge: MergeStyle,
   originalValue: any,
   contextOnly: boolean
@@ -1051,7 +1438,19 @@ function emitResolved(
       value = Number(value)
     }
   }
-  emitProperty(state, property, value, condition, merge, originalValue, contextOnly)
+  emitProperty(
+    state,
+    property,
+    value,
+    condition,
+    conditionKey,
+    conditionWrappers,
+    conditionSelector,
+    conditionTheme,
+    merge,
+    originalValue,
+    contextOnly
+  )
 }
 
 function shadowUnit(part: any) {
@@ -1076,7 +1475,11 @@ function emitWebShadow(
     state,
     'boxShadow',
     state.flatBoxShadow ? `${state.flatBoxShadow}, ${next}` : next,
-    null,
+    0,
+    '',
+    undefined,
+    '',
+    '',
     merge,
     originalValue,
     contextOnly
@@ -1099,7 +1502,11 @@ function emitWebTextShadow(
     state,
     'textShadow',
     `${shadowUnit(offset.width)} ${shadowUnit(offset.height)} ${shadowUnit(shadow.textShadowRadius)} ${shadow.textShadowColor}`,
-    null,
+    0,
+    '',
+    undefined,
+    '',
+    '',
     merge,
     originalValue,
     contextOnly
@@ -1110,7 +1517,11 @@ function emitValue(
   state: GetStyleState,
   property: string,
   raw: any,
-  condition: Condition | null,
+  condition: number,
+  conditionKey: string,
+  conditionWrappers: string[] | undefined,
+  conditionSelector: string,
+  conditionTheme: string,
   merge: MergeStyle,
   originalValue: any,
   contextOnly: boolean
@@ -1129,7 +1540,14 @@ function emitValue(
     )
   }
 
-  emitBorderStyleDefault(state, property, condition)
+  emitBorderStyleDefault(
+    state,
+    property,
+    condition,
+    conditionKey,
+    conditionWrappers,
+    conditionSelector
+  )
 
   if (
     typeof raw === 'string' &&
@@ -1159,7 +1577,11 @@ function emitValue(
             .sort()
             .map((key) => ({ [key]: direct.flatLegacyTransforms![key] }))
         ),
-        null,
+        0,
+        '',
+        undefined,
+        '',
+        '',
         merge,
         originalValue,
         contextOnly
@@ -1170,6 +1592,10 @@ function emitValue(
         'transform',
         `${property}(${value})`,
         condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
         merge,
         originalValue,
         contextOnly
@@ -1248,11 +1674,34 @@ function emitValue(
   }
 
   if (typeof raw === 'string' && property in borderTargets) {
-    emitBorder(state, property, raw, condition, merge, originalValue, contextOnly)
+    emitBorder(
+      state,
+      property,
+      raw,
+      condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector,
+      conditionTheme,
+      merge,
+      originalValue,
+      contextOnly
+    )
     return
   }
   if (typeof raw === 'string' && property === 'textDecoration') {
-    emitTextDecoration(state, raw, condition, merge, originalValue, contextOnly)
+    emitTextDecoration(
+      state,
+      raw,
+      condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector,
+      conditionTheme,
+      merge,
+      originalValue,
+      contextOnly
+    )
     return
   }
   if (typeof raw === 'string' && property === 'background') {
@@ -1263,6 +1712,10 @@ function emitValue(
         'backgroundColor',
         parts[0],
         condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
         merge,
         originalValue,
         contextOnly
@@ -1301,7 +1754,7 @@ function emitValue(
             `native transform "${property}" cannot represent "${value}"; dropping it`
           )
         }
-        if (condition?.active && state.flatTransforms) {
+        if (condition & 1 && state.flatTransforms) {
           delete state.flatTransforms[property]
         }
         return
@@ -1312,7 +1765,19 @@ function emitValue(
         value = Number(value)
       }
     }
-    emitTransform(state, property, value, condition, merge, originalValue, contextOnly)
+    emitTransform(
+      state,
+      property,
+      value,
+      condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector,
+      conditionTheme,
+      merge,
+      originalValue,
+      contextOnly
+    )
     return
   }
 
@@ -1320,9 +1785,33 @@ function emitValue(
     // css reads the shorthand, so skip the four-corner expansion here. a string
     // value still needs its token resolved, which is what emitResolved does.
     if (typeof raw === 'string') {
-      emitResolved(state, property, raw, condition, merge, originalValue, contextOnly)
+      emitResolved(
+        state,
+        property,
+        raw,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
     } else {
-      emitProperty(state, property, raw, condition, merge, originalValue, contextOnly)
+      emitProperty(
+        state,
+        property,
+        raw,
+        condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
+        merge,
+        originalValue,
+        contextOnly
+      )
     }
     return
   }
@@ -1339,6 +1828,10 @@ function emitValue(
         property,
         transform,
         condition,
+        conditionKey,
+        conditionWrappers,
+        conditionSelector,
+        conditionTheme,
         merge,
         originalValue,
         contextOnly
@@ -1382,6 +1875,10 @@ function emitValue(
             key,
             parsedValue,
             condition,
+            conditionKey,
+            conditionWrappers,
+            conditionSelector,
+            conditionTheme,
             merge,
             originalValue,
             contextOnly
@@ -1393,6 +1890,10 @@ function emitValue(
           property === 'backgroundImage' ? 'experimental_backgroundImage' : property,
           parsed,
           condition,
+          conditionKey,
+          conditionWrappers,
+          conditionSelector,
+          conditionTheme,
           merge,
           originalValue,
           contextOnly
@@ -1410,7 +1911,19 @@ function emitValue(
     ? null
     : expandStyle(property, value, state.conf.settings.styleCompat || 'web')
   if (!expanded) {
-    emitProperty(state, property, value, condition, merge, originalValue, contextOnly)
+    emitProperty(
+      state,
+      property,
+      value,
+      condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector,
+      conditionTheme,
+      merge,
+      originalValue,
+      contextOnly
+    )
     return
   }
 
@@ -1431,6 +1944,10 @@ function emitValue(
           expanded[index][0],
           parts[partIndex],
           condition,
+          conditionKey,
+          conditionWrappers,
+          conditionSelector,
+          conditionTheme,
           merge,
           originalValue,
           contextOnly
@@ -1445,6 +1962,10 @@ function emitValue(
       expanded[index][0],
       expanded[index][1],
       condition,
+      conditionKey,
+      conditionWrappers,
+      conditionSelector,
+      conditionTheme,
       merge,
       originalValue,
       contextOnly
@@ -1452,36 +1973,6 @@ function emitValue(
   }
 }
 
-function emitSegment(
-  state: GetStyleState,
-  property: string,
-  source: string,
-  start: number,
-  end: number,
-  condition: Condition | null,
-  merge: MergeStyle,
-  originalValue: any,
-  contextOnly: boolean
-) {
-  while (start < end && source.charCodeAt(start) <= 32) start++
-  while (end > start && source.charCodeAt(end - 1) <= 32) end--
-  if (start === end) return false
-  if (
-    !condition ||
-    (condition.emit &&
-      (condition.active ||
-        (isWeb && state.flatShouldDoClasses) ||
-        (!isWeb &&
-          condition.theme &&
-          supportsDynamicColorIOS &&
-          isColorStyleKey(property))))
-  ) {
-    const value = source.slice(start, end)
-    emitValue(state, property, value, condition, merge, value, contextOnly)
-  }
-  return true
-}
-
 export function contributeStyleString(
   state: GetStyleState,
   property: string,
@@ -1490,10 +1981,6 @@ export function contributeStyleString(
   originalValue?: any,
   contextOnly = false
 ) {
-  if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === 'disabled') {
-    emitValue(state, property, source, null, merge, originalValue ?? source, contextOnly)
-    return true
-  }
   if (
     isWeb &&
     source.indexOf(':') !== -1 &&
@@ -1510,140 +1997,31 @@ export function contributeStyleString(
   // with no colon is emitted verbatim by contract. Keep the two paths in mind
   // together when reading a bug report about one of them.
   if (source.indexOf(':') === -1) {
-    emitValue(state, property, source, null, merge, originalValue ?? source, contextOnly)
-    return true
-  }
-
-  // The scan collects and the emit happens after it, because `parseValue`
-  // reports a refused modifier or a rule-breaking character as one failure over
-  // the WHOLE value: there is no such thing as the good half of a value the
-  // grammar rejects. Emitting as the scan went is what used to make this path
-  // lose the base it had already read while the variant path kept it.
-  const conditions: (Condition | null)[] = []
-  const starts: number[] = []
-  const ends: number[] = []
-  let pending: Condition | null = null
-  // the first thing that made the value unusable, and the whole refusal test
-  let refused = ''
-  let lifecycle = false
-
-  scanFlatValue(source, {
-    segment(start, end, isBase) {
-      if (start === end) {
-        // an empty base is simply no base; an empty clause payload is a clause
-        // with nothing in it, which parseValue reports as `empty-payload`
-        if (!isBase && !refused) refused = 'a conditional clause has no value'
-        return
-      }
-      conditions.push(pending)
-      starts.push(start)
-      ends.push(end)
-    },
-    chain(start, end) {
-      if (refused) return false
-      const next = getCondition(state, source.slice(start, end))
-      if (!next) {
-        refused = `unknown modifier "${source.slice(start, end)}"`
-        return false
-      }
-      if (process.env.NODE_ENV === 'development' && next.unsupportedState) {
-        warnOnce(
-          `${property}: "${next.unsupportedState}:" has no native component-state source; dropping the clause`
-        )
-      }
-      pending = next
-      lifecycle ||= !!(next.enter || next.exit)
-      return true
-    },
-    error(code, index) {
-      if (refused) return
-      refused =
-        code === 'invalid-character'
-          ? `"${source[index]}" would end the declaration or rule`
-          : code === 'unterminated-string'
-            ? 'an unterminated string'
-            : code === 'unterminated-comment'
-              ? 'an unterminated "/*" comment'
-              : code === 'stray-comment-close'
-                ? 'a stray "*/"'
-                : 'an unterminated "("'
-    },
-  })
-
-  if (refused) {
-    // `16:9` is the one value whose top-level colon is content rather than a
-    // clause, and only this property can hold it
-    if (property === 'aspectRatio') {
-      emitValue(
-        state,
-        property,
-        source,
-        null,
-        merge,
-        originalValue ?? source,
-        contextOnly
-      )
-      return true
-    }
-    if (process.env.NODE_ENV === 'development') {
-      warnRefusedValue(property, source, refused)
-    }
-    return true
-  }
-
-  let hasBase = false
-  let lastPayloadStart = 0
-  for (let index = 0; index < conditions.length; index++) {
-    const condition = conditions[index]
-    lastPayloadStart = starts[index]
-    const emitted = emitSegment(
+    emitValue(
       state,
       property,
       source,
-      starts[index],
-      ends[index],
-      condition,
+      0,
+      '',
+      undefined,
+      '',
+      '',
       merge,
-      originalValue,
+      originalValue ?? source,
       contextOnly
     )
-    if (!condition && emitted) hasBase = true
-  }
-
-  if (
-    process.env.NODE_ENV === 'development' &&
-    !hasBase &&
-    conditions.length > 0 &&
-    (property in tokenCategories.color || property in tokenCategoryByProperty) &&
-    splitComponents(source.slice(lastPayloadStart)).length > 1
-  ) {
-    warnOnce(
-      `${property}="${source}" has multiple values after its first conditional. Write the base value before the first conditional.`
-    )
+    return true
   }
 
-  // a lifecycle-only value (`opacity="enter:0 exit:0"`) has no resting value to
-  // return to. CSS does not need one: the property is simply absent and the
-  // browser's own default applies. A style object does need one, because an
-  // animation driver can only animate between values it can see, and that is
-  // every native render plus every web render a driver drives inline. Without
-  // this the enter style lands and then the target style has no such key at
-  // all, so the driver has nothing to animate toward and the element snaps.
-  if ((!isWeb || !state.flatShouldDoClasses) && lifecycle && !hasBase) {
-    const value =
-      property === 'opacity'
-        ? 1
-        : property === 'scale' || property === 'scaleX' || property === 'scaleY'
-          ? 1
-          : property === 'rotate'
-            ? '0deg'
-            : property === 'x' || property === 'y'
-              ? 0
-              : null
-    if (value !== null) {
-      emitValue(state, property, value, null, merge, value, contextOnly)
-    }
-  }
+  scanFlatValue(
+    source,
+    directStyleHandler,
+    state,
+    property,
+    merge,
+    originalValue,
+    contextOnly
+  )
   return true
 }
 
@@ -1654,29 +2032,34 @@ export function contributeFrontendValue(
   merge: MergeStyle,
   contextOnly = false
 ) {
-  if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === 'disabled') {
-    return false
-  }
   if (value.base !== null) {
-    emitValue(state, property, value.base, null, merge, value.base, contextOnly)
+    emitValue(
+      state,
+      property,
+      value.base,
+      0,
+      '',
+      undefined,
+      '',
+      '',
+      merge,
+      value.base,
+      contextOnly
+    )
   }
   for (const clause of value.clauses) {
-    const condition = getCondition(state, clause.modifiers.join(':'))
-    if (
-      condition &&
-      condition.emit &&
-      (condition.active || (isWeb && state.flatShouldDoClasses))
-    ) {
-      emitValue(
-        state,
-        property,
-        clause.payload,
-        condition,
-        merge,
-        clause.payload,
-        contextOnly
-      )
-    }
+    const source = clause.modifiers.join(':')
+    resolveClauseChain(
+      state,
+      source,
+      0,
+      source.length,
+      property,
+      clause.payload,
+      merge,
+      clause.payload,
+      contextOnly
+    )
   }
   return true
 }
@@ -1690,24 +2073,20 @@ export function contributeVariantClauseValue(
   originalValue?: any,
   contextOnly = false
 ) {
-  if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === 'disabled') {
-    return
-  }
-  const condition = getCondition(state, conditionSource)
-  if (!condition) {
-    if (process.env.NODE_ENV === 'development') {
-      warnRefusedValue(property, value, `unknown modifier "${conditionSource}"`)
-    }
-    return
-  }
-  if (process.env.NODE_ENV === 'development' && condition.unsupportedState) {
-    warnOnce(
-      `${property}: "${condition.unsupportedState}:" has no native component-state source; dropping the clause`
-    )
-  }
-  if (condition.emit && (condition.active || (isWeb && state.flatShouldDoClasses))) {
-    emitValue(state, property, value, condition, merge, originalValue, contextOnly)
-  }
+  resolveClauseChain(
+    state,
+    conditionSource,
+    0,
+    conditionSource.length,
+    property,
+    value,
+    merge,
+    originalValue,
+    contextOnly,
+    -1,
+    -1,
+    2
+  )
 }
 
 export function contributeStyleValue(
@@ -1718,16 +2097,24 @@ export function contributeStyleValue(
   originalValue?: any,
   contextOnly = false
 ) {
-  if (
-    process.env.TAMAGUI_RUNTIME_SAFE_AREA !== 'disabled' &&
-    value === 'safe' &&
-    isSafeAreaKey(property)
-  ) {
+  if (value === 'safe' && isSafeAreaKey(property)) {
     const expanded = expandSafeAreaValue(property)
     if (expanded) {
       state.flatUsesSafeArea = true
       for (const [key, resolved] of expanded) {
-        emitValue(state, key, resolved, null, merge, originalValue ?? value, contextOnly)
+        emitValue(
+          state,
+          key,
+          resolved,
+          0,
+          '',
+          undefined,
+          '',
+          '',
+          merge,
+          originalValue ?? value,
+          contextOnly
+        )
       }
       return true
     }
@@ -1743,7 +2130,19 @@ export function contributeStyleValue(
     )
   }
   if (value != null) {
-    emitValue(state, property, value, null, merge, originalValue ?? value, contextOnly)
+    emitValue(
+      state,
+      property,
+      value,
+      0,
+      '',
+      undefined,
+      '',
+      '',
+      merge,
+      originalValue ?? value,
+      contextOnly
+    )
     return true
   }
   return false