@tamagui/tailwind 3.0.0-beta.924.1 → 3.0.1

package/src/candidate.ts

@@ -1,10 +1,15 @@
 import { isWeb } from '@tamagui/constants'
+import { stylePropsUnitless } from '@tamagui/helpers'
 import {
+  mergeFrontendCondition,
   plainValueToPayload,
   type FrontendClassPlan,
   type FrontendClassPlanEntry,
+  type FrontendClassSink,
   type StyleFrontendConfig,
 } from '@tamagui/core/internal-runtime'
+import { noteBoxShadow, noteTailwindTransform, tryCompose } from './compose'
+import { composedResolver } from './composedResolver'
 import {
   borderSideSuffix,
   configRevisionSymbol,
@@ -20,8 +25,12 @@ import {
 import {
   classifyCandidate,
   decodeArbitrary,
+  hasTokenName,
   type GrammarConfigView,
   type ParsedCandidate,
+  resolveTokenName,
+  tailwindLeadingRatios,
+  tailwindTrackingEms,
 } from '@tamagui/style-grammar/tooling/candidate'
 
 /**
@@ -54,25 +63,36 @@ export function isTokenValueProp(prop: string): boolean {
 }
 
 // CANONICAL arbitrary-value coercion. an arbitrary `[..]` whose inner is a UNITLESS number
-// (z-[400], aspect-[1.5], leading-[1.25]) or a PX length (p-[18px], text-[14px], border-[0.5px])
+// (z-[400], aspect-[1.5]) or a PX length (p-[18px], text-[14px], border-[0.5px])
 // resolves to a NUMBER: React Native REQUIRES numbers for dimensional + typography props and
 // silently DROPS "Npx"/"400" strings (Yoga parseCSSProperty<CSSNumber,CSSPercentage> rejects px;
 // StyleSheetTypes types fontSize/lineHeight/letterSpacing as number). web accepts the number and
 // re-adds px via CSS. anything carrying a real unit/function (%, rem, vh, deg, calc(), var(),
 // #hex, colors) stays a STRING.
-function arbitraryValue(inner: string): number | string {
+function arbitraryValue(inner: string, prop?: string): number | string {
   const px = /^(-?\d*\.?\d+)px$/.exec(inner)
-  if (px) return Number(px[1])
+  // a unitless prop (grid-cols-[77px]) never gets px re-added, so the length stays a string
+  if (px) return prop && stylePropsUnitless[prop] ? inner : Number(px[1])
   if (/^-?\d*\.?\d+$/.test(inner)) return Number(inner)
   return inner
 }
 
+/** the same coercion for a raw value that may still be wrapped in `[]` */
+function unwrapArbitraryValue(raw: string): number | string {
+  return arbitraryValue(
+    raw.length > 1 && raw[0] === '[' && raw[raw.length - 1] === ']'
+      ? decodeArbitrary(raw.slice(1, -1))
+      : raw
+  )
+}
+
 // tailwind sizing keywords / fractions for width/height/min/max props.
 // returns a CSS value, or null if `value` isn't a sizing keyword (falls through to normal parse).
 function tailwindSizingValue(prop: string, value: string): string | null {
   if (value === 'full') return '100%'
   if (value === 'auto') return 'auto'
-  if (value === 'screen') return /[Hh]eight/.test(prop) ? '100vh' : '100vw'
+  if (value === 'screen') return /[Hh]eight|[Bb]lock/.test(prop) ? '100vh' : '100vw'
+  if (/^[dls]v[hw]$/.test(value)) return `100${value}`
   if (value === 'min') return 'min-content'
   if (value === 'max') return 'max-content'
   if (value === 'fit') return 'fit-content'
@@ -83,20 +103,6 @@ function tailwindSizingValue(prop: string, value: string): string | null {
   return null
 }
 
-// unwrap a possibly-arbitrary value ([2px] → "2px") and coerce a bare number / px length to
-// a NUMBER (2px → 2, 0.5 → 0.5) so borderWidth/radius match tamagui's numeric props; other
-// units (1em, calc(…)) stay strings.
-function borderDimValue(raw: string): number | string {
-  let inner = raw
-  if (raw.length > 1 && raw[0] === '[' && raw[raw.length - 1] === ']') {
-    inner = decodeArbitrary(raw.slice(1, -1))
-  }
-  const px = /^(-?\d*\.?\d+)px$/.exec(inner)
-  if (px) return Number.parseFloat(px[1])
-  if (/^-?\d*\.?\d+$/.test(inner)) return Number(inner)
-  return inner
-}
-
 /**
  * Prefixes that write more than one longhand from a single candidate. The registry
  * already selected the token category and width-vs-color meaning; this only names
@@ -107,6 +113,8 @@ function expansionProps(parsed: ParsedCandidate): readonly string[] | null {
   const prefix = parsed.prefix
   if (!prefix) return null
   if (prefix === 'size') return sizeUtilityProps
+  if (prefix === 'translate') return ['x', 'y']
+  if (prefix === 'skew') return ['skewX', 'skewY']
   if (prefix === 'inset-x' || prefix === 'inset-y') {
     return insetAxisProps[prefix.slice('inset-'.length)]
   }
@@ -125,14 +133,15 @@ function expansionProps(parsed: ParsedCandidate): readonly string[] | null {
 /**
  * Adapt a registry-parsed candidate into the ordinary props shared rendering consumes.
  * Examples:
- *   "hover:bg-blue5" → backgroundColor + a `hover:blue5` program
+ *   "hover:bg-blue-5" → backgroundColor + a `hover:blue-5` program
  *   "sm:p-4" → padding + an `sm:4` program
  *   "bg-[red]" → { key: "backgroundColor", value: "red" }
  *   "w-100" → { key: "width", value: 100 }
  *   "opacity-50" → { key: "opacity", value: 0.5 }
  */
 function tailwindClassToFlatProp(
-  parsed: ParsedCandidate
+  parsed: ParsedCandidate,
+  grammarConfig?: GrammarConfigView
 ): { key: string; value: any } | null {
   if (parsed.kind !== 'dynamic' || !parsed.entry || parsed.rawValue === undefined) {
     return null
@@ -141,11 +150,83 @@ function tailwindClassToFlatProp(
   const category = parsed.entry.tokenCategory
   let value: any = parsed.rawValue
 
+  if (parsed.negative && value === '0' && parsed.convenience !== 'angle') {
+    return { key: prop, value: 0 }
+  }
+
+  if (parsed.convenience === 'zero') {
+    return { key: prop, value: 0 }
+  }
+
+  if (parsed.convenience === 'angle') {
+    return {
+      key: prop,
+      value: `${parsed.negative ? '-' : ''}${value}deg`,
+    }
+  }
+
+  // Tailwind's translate fractions and `full` are percentages, not configured
+  // spacing tokens. RN accepts percentage translate values, so preserve the
+  // exact CSS geometry for both axes and for negative candidates.
+  if ((prop === 'x' || prop === 'y') && parsed.valueKind !== 'token') {
+    const sized = tailwindSizingValue(prop, value)
+    if (sized != null) {
+      return {
+        key: prop,
+        value: parsed.negative && sized[0] !== '-' ? `-${sized}` : sized,
+      }
+    }
+  }
+
+  // named leading (leading-tight) is a unitless ratio, which v3 line height reads as such
+  if (parsed.convenience === 'leading-keyword') {
+    return { key: prop, value: tailwindLeadingRatios[value] }
+  }
+
+  // named tracking (tracking-wide) is em of the font size, which core lowers per host
+  if (parsed.convenience === 'tracking-keyword') {
+    const em = tailwindTrackingEms[value] * (parsed.negative ? -1 : 1)
+    return { key: prop, value: `${em}em` }
+  }
+
+  // Tailwind's numbered leading scale is the spacing scale (N * 0.25rem),
+  // represented as native points at the default 16px root size. Resolve it
+  // here instead of letting an application's same-named font token change the
+  // meaning of a Tailwind classname. Keep the unit until core lowers it for the
+  // target host, because a bare number is a V3 line-height ratio.
+  if (prop === 'lineHeight' && /^\d+(?:\.\d+)?$/.test(value)) {
+    return { key: prop, value: `${Number(value) * 4}px` }
+  }
+
+  // grid-cols-N → repeat(N, minmax(0, 1fr)), col-span-N → span N / span N
+  if (prop === 'gridTemplateColumns' && /^\d+$/.test(value)) {
+    return { key: prop, value: `repeat(${value}, minmax(0, 1fr))` }
+  }
+  if (prop === 'gridColumn' && /^\d+$/.test(value)) {
+    return { key: prop, value: `span ${value} / span ${value}` }
+  }
+  if (prop === 'gridRow' && /^\d+$/.test(value)) {
+    return { key: prop, value: `span ${value} / span ${value}` }
+  }
+  if (
+    (prop === 'gridColumnStart' ||
+      prop === 'gridColumnEnd' ||
+      prop === 'gridRowStart' ||
+      prop === 'gridRowEnd') &&
+    /^\d+$/.test(value)
+  ) {
+    return { key: prop, value: Number(value) }
+  }
+
   if (prop.endsWith('Width') && parsed.prefix?.startsWith('border')) {
     if (parsed.valueKind === 'token') {
       value = `${parsed.negative ? '-' : ''}${value}`
+      if (grammarConfig && parsed.entry?.tokenCategory) {
+        value =
+          resolveTokenName(grammarConfig, parsed.entry.tokenCategory, value) ?? value
+      }
     } else if (parsed.valueKind === 'arbitrary') {
-      value = borderDimValue(value)
+      value = unwrapArbitraryValue(value)
     } else {
       return null
     }
@@ -188,10 +269,9 @@ function tailwindClassToFlatProp(
     let lhValue: any
     if (value.length > 2 && value[0] === '[' && value[value.length - 1] === ']') {
       const inner = decodeArbitrary(value.slice(1, -1))
-      // px length → NUMBER (native-valid: leading-[20px] → 20). a UNITLESS value is a web
-      // lineHeight MULTIPLIER and MUST stay a string (a number would be px-ified to "1.25px"
-      // on web, breaking the multiplier). RN has no unitless multiplier, so this is web-only.
-      lhValue = /^-?\d*\.?\d+px$/.test(inner) ? Number.parseFloat(inner) : inner
+      // preserve both forms until core's target lowering: px is absolute and a
+      // unitless numeric string is a ratio on web and native.
+      lhValue = inner
     } else {
       lhValue = value
     }
@@ -222,23 +302,47 @@ function tailwindClassToFlatProp(
   }
 
   // arbitrary values: p-[4px], w-[100px], rounded-[8px], min-h-[100vh], rotate-[-8deg],
-  // h-[calc(100%-2px)], bg-[var(--color5)], bg-[#fff]. use the bracketed value directly as
+  // h-[calc(100%-2px)], bg-[var(--color-5)], bg-[#fff]. use the bracketed value directly as
   // CSS — no scaling/token resolution. tailwind encodes spaces inside [] as underscores.
   if (value.length > 2 && value[0] === '[' && value[value.length - 1] === ']') {
     const inner = decodeArbitrary(value.slice(1, -1))
     if (inner === '') return null
     // px-length + unitless arbitraries become NUMBERS (native requires numbers, drops "Npx"
     // strings); unit/function values stay strings. one canonical rule (arbitraryValue).
-    return { key: prop, value: arbitraryValue(inner) }
+    let resolved = arbitraryValue(inner, prop)
+    // rotate requires a unit-bearing string on native — a bare number from rotate-[45]
+    // triggers a redbox. append deg when the arbitrary resolved to a unitless number.
+    if (
+      (prop === 'rotate' ||
+        prop === 'rotateX' ||
+        prop === 'rotateY' ||
+        prop === 'rotateZ' ||
+        prop === 'skewX' ||
+        prop === 'skewY') &&
+      typeof resolved === 'number'
+    ) {
+      resolved = `${resolved}deg`
+    }
+    if (parsed.negative) {
+      if (typeof resolved === 'number') resolved = -resolved
+      else if (resolved[0] !== '-') resolved = `-${resolved}`
+    }
+    return { key: prop, value: resolved }
   }
 
   // tailwind sizing keywords / fractions (w-full → 100%, w-1/2 → 50%, w-auto, w-screen).
   // handled before isValidTailwindValue since fractions/keywords aren't plain CSS values. An
   // exact configured size token with the same spelling stays a token.
-  if (category === 'size' && parsed.valueKind !== 'token') {
+  if (
+    parsed.valueKind !== 'token' &&
+    (category === 'size' || parsed.convenience === 'sizing-keyword')
+  ) {
     const sized = tailwindSizingValue(prop, value)
     if (sized != null) {
-      return { key: prop, value: sized }
+      return {
+        key: prop,
+        value: parsed.negative && sized[0] !== '-' ? `-${sized}` : sized,
+      }
     }
   }
 
@@ -264,9 +368,12 @@ function tailwindClassToFlatProp(
     value = Number(value) / 100
   } else if (/^\d+(\.\d+)?$/.test(value)) {
     if (category === 'zIndex' && parsed.valueKind === 'convenience') {
-      value = Number(value)
+      value = Number(value) * (parsed.negative ? -1 : 1)
     } else if (category) {
       value = `${parsed.negative ? '-' : ''}${value}`
+      if (grammarConfig) {
+        value = resolveTokenName(grammarConfig, category, value) ?? value
+      }
     } else {
       value = Number(value)
     }
@@ -317,6 +424,71 @@ type TailwindParentPlan = {
 type CachedTailwindClassPlan = TailwindClassPlan | TailwindParentPlan
 
 const classPlanCache = new WeakMap<object, Map<string, CachedTailwindClassPlan>>()
+const nativeTarget = !isWeb || process.env.TAMAGUI_TARGET === 'native'
+const cssGridProps = new Set([
+  'gridTemplateColumns',
+  'gridColumn',
+  'gridColumnStart',
+  'gridColumnEnd',
+  'gridRow',
+  'gridRowStart',
+  'gridRowEnd',
+])
+const nativeUnsupportedProps = new Set([
+  'objectFit',
+  'order',
+  'overflowX',
+  'overflowY',
+  'textOverflow',
+  'whiteSpace',
+  'visibility',
+])
+const nativeUnsupportedSizingValues = new Set(['min', 'max', 'fit'])
+// values outside react native's style unions, which native would drop
+const nativeUnsupportedValues: Record<string, Set<string>> = {
+  display: new Set(['block', 'inline', 'inline-flex']),
+  position: new Set(['fixed', 'sticky']),
+}
+
+function shouldGateNative(parsed: ParsedCandidate): boolean {
+  if (!nativeTarget) return false
+  const properties = parsed.properties || {}
+  if (
+    process.env.TAMAGUI_CSS_GRID !== '1' &&
+    ((parsed.entry && cssGridProps.has(parsed.entry.prop)) ||
+      properties.display === 'grid' ||
+      Object.keys(properties).some((prop) => cssGridProps.has(prop)))
+  ) {
+    return true
+  }
+  if (
+    (parsed.entry && nativeUnsupportedProps.has(parsed.entry.prop)) ||
+    Object.keys(properties).some((prop) => nativeUnsupportedProps.has(prop))
+  ) {
+    return true
+  }
+  if (
+    parsed.convenience === 'sizing-keyword' &&
+    nativeUnsupportedSizingValues.has(parsed.rawValue || '')
+  ) {
+    return true
+  }
+  const entryProp = parsed.entry?.prop
+  if (
+    (entryProp && nativeUnsupportedValues[entryProp]?.has(parsed.rawValue || '')) ||
+    Object.keys(properties).some((prop) =>
+      nativeUnsupportedValues[prop]?.has(String(properties[prop]))
+    )
+  ) {
+    return true
+  }
+  return (
+    properties.overflow === 'auto' ||
+    (properties.cursor !== undefined &&
+      properties.cursor !== 'auto' &&
+      properties.cursor !== 'pointer')
+  )
+}
 
 function getClassPlanCache(grammarConfig: object) {
   let cache = classPlanCache.get(grammarConfig)
@@ -343,6 +515,89 @@ function createPlanEntry(
   return [property, payload, condition, modifiers]
 }
 
+// CSS shorthands reset every longhand, including logical ones. RN stores those
+// under different keys (`paddingStart` vs `paddingLeft`, `columnGap` vs `gap`),
+// so `ps-2 p-4` would otherwise keep the earlier logical value. Unmodified
+// shorthand plans prepend `unset` entries so both the tokenizer and the
+// renderer sink clear them. Conditional classes (`hover:p-4`) skip this.
+const shorthandResets: Record<string, readonly string[]> = {
+  padding: [
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingStart',
+    'paddingEnd',
+    'paddingInlineStart',
+    'paddingInlineEnd',
+    'paddingBlockStart',
+    'paddingBlockEnd',
+    'paddingHorizontal',
+    'paddingVertical',
+    'paddingInline',
+    'paddingBlock',
+  ],
+  margin: [
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'marginStart',
+    'marginEnd',
+    'marginInlineStart',
+    'marginInlineEnd',
+    'marginBlockStart',
+    'marginBlockEnd',
+    'marginHorizontal',
+    'marginVertical',
+    'marginInline',
+    'marginBlock',
+  ],
+  gap: ['rowGap', 'columnGap'],
+  borderRadius: [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderTopStartRadius',
+    'borderTopEndRadius',
+    'borderBottomStartRadius',
+    'borderBottomEndRadius',
+    'borderStartStartRadius',
+    'borderStartEndRadius',
+    'borderEndStartRadius',
+    'borderEndEndRadius',
+  ],
+  borderWidth: [
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderStartWidth',
+    'borderEndWidth',
+    'borderInlineStartWidth',
+    'borderInlineEndWidth',
+    'borderBlockStartWidth',
+    'borderBlockEndWidth',
+    'borderInlineWidth',
+    'borderBlockWidth',
+  ],
+  borderColor: [
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'borderStartColor',
+    'borderEndColor',
+    'borderInlineStartColor',
+    'borderInlineEndColor',
+    'borderBlockStartColor',
+    'borderBlockEndColor',
+    'borderInlineColor',
+    'borderBlockColor',
+  ],
+}
+
 function computeClassPlan(
   cls: string,
   grammarConfig: GrammarConfigView
@@ -372,13 +627,30 @@ function computeClassPlan(
     return isWeb ? 'raw' : null
   }
   const parsed = classification.parsed
+  if (!nativeTarget && parsed.entry?.prop === 'perspective') return 'raw'
+  if (shouldGateNative(parsed)) {
+    return null
+  }
+  if (parsed.entry?.prop === 'flex' && parsed.rawValue) {
+    const fraction = /^(\d+)\/(\d+)$/.exec(parsed.rawValue)
+    if (fraction && Number(fraction[2]) !== 0) {
+      const basis = `${(Number(fraction[1]) / Number(fraction[2])) * 100}%`
+      const entries = [
+        createPlanEntry('flexGrow', 1, parsed.modifiers),
+        createPlanEntry('flexShrink', 1, parsed.modifiers),
+        createPlanEntry('flexBasis', basis, parsed.modifiers),
+      ]
+      return entries.every(Boolean) ? (entries as TailwindPlanEntry[]) : 'raw'
+    }
+  }
   // named utilities first (flex-row, flex-1, hidden, …) — whole class → fixed prop(s).
   // these may emit multiple props and may have no dash, so handle before the generic parse.
   const util = parsed.kind === 'utility' ? parsed.properties : null
   if (util) {
     const entries: TailwindPlanEntry[] = []
     for (const p in util) {
-      const entry = createPlanEntry(p, util[p], parsed.modifiers)
+      const value = nativeTarget && p === 'transform' && util[p] === 'none' ? [] : util[p]
+      const entry = createPlanEntry(p, value, parsed.modifiers)
       if (!entry) return 'raw'
       entries.push(entry)
     }
@@ -390,10 +662,13 @@ function computeClassPlan(
   if (expandedProps) {
     const entries: TailwindPlanEntry[] = []
     for (const prop of expandedProps) {
-      const flatProp = tailwindClassToFlatProp({
-        ...parsed,
-        entry: parsed.entry ? { ...parsed.entry, prop } : parsed.entry,
-      })
+      const flatProp = tailwindClassToFlatProp(
+        {
+          ...parsed,
+          entry: parsed.entry ? { ...parsed.entry, prop } : parsed.entry,
+        },
+        grammarConfig
+      )
       if (!flatProp) return 'raw'
       const entry = createPlanEntry(flatProp.key, flatProp.value, parsed.modifiers)
       if (!entry) return 'raw'
@@ -401,7 +676,7 @@ function computeClassPlan(
     }
     return entries
   }
-  const flatProp = tailwindClassToFlatProp(parsed)
+  const flatProp = tailwindClassToFlatProp(parsed, grammarConfig)
   if (flatProp) {
     const entry = createPlanEntry(flatProp.key, flatProp.value, parsed.modifiers)
     return entry ? [entry] : 'raw'
@@ -424,12 +699,85 @@ export function getTailwindClassPlan(
   return plan
 }
 
+export function resolveTailwindCandidate(
+  candidate: string,
+  config: StyleFrontendConfig,
+  sink: FrontendClassSink
+): boolean | null {
+  const composed = tryCompose(candidate, getStyleGrammarConfig(config), sink)
+  if (composed !== undefined) return composed
+  const plan = getTailwindClassPlan(candidate, config)
+  if (plan === 'raw') return true
+  if (plan === null) return null
+  const parent = Array.isArray(plan) ? null : plan
+  const entries = parent ? parent.entries : plan
+  for (let index = 0; index < entries.length; index++) {
+    const entry = entries[index]
+    const transformTokenCategory =
+      entry[0] === 'x' || entry[0] === 'y'
+        ? 'space'
+        : entry[0] === 'perspective'
+          ? 'perspective'
+          : null
+    const transformValue =
+      transformTokenCategory && typeof entry[1] === 'string'
+        ? ((config as any).tokensParsed?.[transformTokenCategory]?.[entry[1]]?.val ??
+          entry[1])
+        : entry[1]
+    if (noteTailwindTransform(sink, [entry[0], transformValue, entry[2], entry[3]])) {
+      continue
+    }
+    // a text size carries its paired line height as a default that any leading
+    // utility overrides whatever the class order, as tailwind's --tw-leading does
+    if (entry[0] === 'lineHeight') {
+      sink(['__leading', entry[1], entry[2], entry[3]])
+      continue
+    }
+    if (
+      entry[0] === 'fontSize' &&
+      typeof entry[1] === 'string' &&
+      hasTokenName(getStyleGrammarConfig(config), 'lineHeight', entry[1])
+    ) {
+      sink(['__textLeading', entry[1], entry[2], entry[3]])
+    }
+    if (entry[0] === 'boxShadow' && typeof entry[1] === 'string') {
+      noteBoxShadow(
+        sink,
+        (config as any).tokensParsed?.boxShadow?.[entry[1]]?.val ?? entry[1],
+        entry[3] || []
+      )
+    }
+    sink(entry)
+  }
+  return parent?.preserveRawClass || false
+}
+
 export function resolveTailwindClassName(
   className: string,
   config: StyleFrontendConfig
 ): Record<string, any> {
   const result: Record<string, any> = {}
+  // composed utilities collect under `__`-prefixed keys and are folded once at the
+  // end, the same shape and the same order the runtime walk uses
+  let composedProps: Record<string, any> | null = null
   let rawClassName = ''
+  const sink: FrontendClassSink = (entry) => {
+    const [key, value, condition] = entry
+    if (key.charCodeAt(0) === 95 && key.charCodeAt(1) === 95) {
+      composedProps ||= {}
+      composedProps[key] = mergeFrontendCondition(composedProps[key], value, condition)
+      return
+    }
+    if (condition === undefined) {
+      const resets = shorthandResets[key]
+      if (resets) {
+        for (let i = 0; i < resets.length; i++) {
+          delete result[resets[i]]
+        }
+      }
+    }
+    setInAuthoredOrder(result, key, mergeFrontendCondition(result[key], value, condition))
+  }
   let start = 0
   for (let index = 0; index <= className.length; index++) {
     if (index !== className.length && className.charCodeAt(index) > 32) continue
@@ -438,34 +786,18 @@ export function resolveTailwindClassName(
       continue
     }
     const candidate = className.slice(start, index)
-    const plan = getTailwindClassPlan(candidate, config)
-    if (plan === 'raw') {
+    const preserveRaw = resolveTailwindCandidate(candidate, config, sink)
+    if (preserveRaw) {
       rawClassName = rawClassName ? `${rawClassName} ${candidate}` : candidate
-    } else if (plan) {
-      const parentPlan = plan as TailwindParentPlan
-      if (!Array.isArray(plan) && parentPlan.preserveRawClass) {
-        rawClassName = rawClassName ? `${rawClassName} ${candidate}` : candidate
-      }
-      const entries = Array.isArray(plan) ? plan : parentPlan.entries
-      for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
-        const [key, value, condition] = entries[entryIndex]
-        const previous = result[key]
-        let next = value
-        if (condition !== undefined) {
-          next =
-            previous && typeof previous === 'object' && !Array.isArray(previous)
-              ? { ...previous, [condition]: value }
-              : previous === undefined
-                ? { [condition]: value }
-                : { default: previous, [condition]: value }
-        } else if (previous && typeof previous === 'object' && !Array.isArray(previous)) {
-          next = { ...previous, default: value }
-        }
-        setInAuthoredOrder(result, key, next)
-      }
     }
     start = index + 1
   }
+  if (composedProps) {
+    const composed = composedResolver(composedProps)
+    for (const key in composed) {
+      setInAuthoredOrder(result, key, composed[key])
+    }
+  }
   if (rawClassName) result.className = rawClassName
   return result
 }
@@ -484,6 +816,10 @@ export function setInAuthoredOrder(
   key: string,
   value: any
 ): void {
+  if (value === 'unset') {
+    delete target[key]
+    return
+  }
   if (key in target) delete target[key]
   target[key] = value
 }

package/src/frontend.ts

@@ -1,11 +1,11 @@
 import {
   type FrontendStaticConfig,
   type FrontendStaticConfigNormalization,
-  type FrontendClassSink,
   type StyleFrontend,
   type StyleFrontendConfig,
 } from '@tamagui/core/internal-runtime'
-import { getTailwindClassPlan, resolveTailwindClassName } from './candidate'
+import { resolveTailwindCandidate, resolveTailwindClassName } from './candidate'
+import { composedResolver } from './composedResolver'
 
 /**
  * The Tailwind frontend descriptor.
@@ -66,21 +66,8 @@ function normalizeTailwindStaticConfig(
   return { baseStyle, passthroughClassName, variants }
 }
 
-function resolveTailwindCandidate(
-  candidate: string,
-  config: StyleFrontendConfig,
-  sink: FrontendClassSink
-): boolean | null {
-  const plan = getTailwindClassPlan(candidate, config)
-  if (plan === 'raw') return true
-  if (plan === null) return null
-  const parent = Array.isArray(plan) ? null : plan
-  const entries = parent ? parent.entries : plan
-  for (let index = 0; index < entries.length; index++) sink(entries[index])
-  return parent?.preserveRawClass || false
-}
-
 export const tailwindStyleFrontend: StyleFrontend = {
   resolveClassName: resolveTailwindCandidate,
   normalizeStaticConfig: normalizeTailwindStaticConfig,
+  compose: composedResolver,
 }