rnwind 0.0.10 → 0.0.12

package/src/core/parser/color.ts

@@ -1,5 +1,5 @@
 import type { CssColor, LABColor } from 'lightningcss'
-import { formatHex, rgb as culoriRgb } from 'culori'
+import { formatHex, interpolate, rgb as culoriRgb } from 'culori'
 
 /**
  * Clamp a 0-255 float to the integer byte range RN color strings accept.
@@ -136,35 +136,196 @@ function xyzToHex(color: { type: 'xyz-d50' | 'xyz-d65'; x: number; y: number; z:
   return withAlpha(formatHex({ mode, x: color.x, y: color.y, z: color.z }) ?? null, color.alpha)
 }
 
+/**
+ * Map a CSS `color-mix(in <space>, …)` interpolation space to the culori mode
+ * key culori's {@link interpolate} understands. `srgb` is culori's `rgb`;
+ * `srgb-linear` is `lrgb`; the lab/lch/oklab/oklch/hsl/hwb spaces share their
+ * CSS name. Unknown spaces fall back to `rgb` so a mix still resolves to a
+ * concrete color rather than leaking the raw expression.
+ * @param space Lowercased interpolation-space token (after `in `).
+ * @returns culori interpolation mode key.
+ */
+function colorMixModeFor(space: string): string {
+  if (space === 'srgb') return 'rgb'
+  if (space === 'srgb-linear') return 'lrgb'
+  const known = new Set(['oklab', 'oklch', 'lab', 'lch', 'hsl', 'hwb', 'xyz', 'xyz-d50', 'xyz-d65'])
+  return known.has(space) ? space : 'rgb'
+}
+
+/**
+ * Split a `color-mix()` argument list at top-level commas (parens-aware) so a
+ * nested `rgb(0, 0, 0)` color slot doesn't fragment the split.
+ * @param body Text between the outer `color-mix(` parentheses.
+ * @returns Comma-separated argument fragments (trimmed).
+ */
+function splitColorMixArgs(body: string): string[] {
+  const parts: string[] = []
+  let depth = 0
+  let start = 0
+  for (let index = 0; index < body.length; index += 1) {
+    const ch = body[index]
+    if (ch === '(') depth += 1
+    else if (ch === ')') depth -= 1
+    else if (ch === ',' && depth === 0) {
+      parts.push(body.slice(start, index).trim())
+      start = index + 1
+    }
+  }
+  parts.push(body.slice(start).trim())
+  return parts
+}
+
+/**
+ * Peel an optional trailing `<num>%` weight off a `color-mix()` color slot.
+ * `#ff0000 50%` → `{ color: '#ff0000', weight: 0.5 }`; a bare color → weight
+ * `null` (caller fills the complement / defaults to 50/50).
+ * @param slot One color argument (color text, optionally suffixed with a percentage).
+ * @returns Color text plus its 0–1 weight, or null weight when unspecified.
+ */
+function parseColorMixSlot(slot: string): { color: string; weight: number | null } {
+  const trimmed = slot.trim()
+  if (!trimmed.endsWith('%')) return { color: trimmed, weight: null }
+  // End-anchored `<num>%` matcher (no leading `.*?` — avoids the super-linear
+  // backtracking ESLint flags). Split the color off at the last whitespace
+  // before the percentage token.
+  const pct = COLOR_MIX_SLOT_PCT.exec(trimmed)
+  if (!pct) return { color: trimmed, weight: null }
+  const color = trimmed.slice(0, pct.index).trim()
+  if (color.length === 0) return { color: trimmed, weight: null }
+  const weight = Number(pct[1]) / 100
+  return { color, weight: Number.isFinite(weight) ? weight : null }
+}
+
+/** End-anchored `<num>%` matcher for slicing a color-mix slot's weight off its right edge. No backtracking. */
+ 
+const COLOR_MIX_SLOT_PCT = /\s(-?\d+(?:\.\d+)?)%$/
+
+/**
+ * Resolve a two-color CSS `color-mix(in <space>, A [p1%], B [p2%])` to a
+ * concrete sRGB color via culori's {@link interpolate}. CSS weight rules:
+ * with one percentage the other fills the complement; with none it is 50/50;
+ * with both, the interpolation point is `p2 / (p1 + p2)`. RN can't evaluate
+ * `color-mix()` at paint time, so this is the only path that lowers it.
+ * @param text Trimmed CSS value beginning with `color-mix(`.
+ * @returns sRGB hex/rgba string, or null when the shape/colors can't resolve.
+ */
+function resolveColorMix(text: string): string | null {
+  if (!text.endsWith(')')) return null
+  const open = text.indexOf('(')
+  if (open === -1) return null
+  const args = splitColorMixArgs(text.slice(open + 1, -1))
+  if (args.length !== 3) return null
+  const spaceClause = args[0]!.toLowerCase()
+  if (!spaceClause.startsWith('in ')) return null
+  const mode = colorMixModeFor(spaceClause.slice(3).trim())
+  const first = parseColorMixSlot(args[1]!)
+  const second = parseColorMixSlot(args[2]!)
+  if (first.color.length === 0 || second.color.length === 0) return null
+  const point = colorMixPoint(first.weight, second.weight)
+  if (point === null) return null
+  try {
+    const mixed = interpolate([first.color, second.color], mode as never)(point)
+    if (!mixed) return null
+    const back = culoriRgb(mixed) as { r?: number; g?: number; b?: number; alpha?: number } | undefined
+    if (!back || ![back.r, back.g, back.b].every((v) => typeof v === 'number' && Number.isFinite(v))) return null
+    const alpha = typeof back.alpha === 'number' ? back.alpha : 1
+    return rgbIntsToString(clampByte(back.r! * 255), clampByte(back.g! * 255), clampByte(back.b! * 255), alpha)
+  } catch {
+    // culori threw on an unparseable color slot — drop rather than leak the raw string.
+    return null
+  }
+}
+
+/**
+ * Compute the 0–1 interpolation point (weight of the SECOND color) from the
+ * two optional `color-mix()` weights, applying CSS normalization.
+ * @param firstWeight 0–1 weight of color A, or null when unspecified.
+ * @param secondWeight 0–1 weight of color B, or null when unspecified.
+ * @returns Interpolation point in `[0, 1]`, or null when both weights are 0.
+ */
+function colorMixPoint(firstWeight: number | null, secondWeight: number | null): number | null {
+  if (firstWeight === null && secondWeight === null) return 0.5
+  if (firstWeight !== null && secondWeight === null) return 1 - firstWeight
+  if (firstWeight === null && secondWeight !== null) return secondWeight
+  const sum = firstWeight! + secondWeight!
+  if (sum === 0) return null
+  return secondWeight! / sum
+}
+
+/**
+ * CSS-wide cascade keywords that resolve a property against the inherited /
+ * initial / previous-layer value at paint time. React Native has NO color
+ * cascade — there is no inherited `color` for an arbitrary style prop and no
+ * cascade layers — so as a `color` / `backgroundColor` / `borderColor` value
+ * every one of these reaches RN as an invalid color string. `currentColor`
+ * belongs here too: it resolves to the element's inherited `color`, which RN
+ * never threads into other color props. The color path must DROP these (omit
+ * the key) rather than leak the keyword. NOTE: `transparent` is NOT here — it
+ * is a real color that {@link cssColorToString} / {@link normalizeColorString}
+ * lower to `rgba(0, 0, 0, 0)`, which RN paints correctly.
+ */
+const CSS_WIDE_COLOR_KEYWORDS: ReadonlySet<string> = new Set([
+  'currentcolor',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+])
+
 /**
  * Modern CSS color functions RN's native view manager can't paint —
  * everything else (hex, `rgb()`/`rgba()`, `hsl()`/`hsla()`, named colors,
- * `transparent`, `currentColor`) RN reads directly and must pass through
- * untouched. Custom `@theme` tokens reach the parser as `var(--color-x)`
- * (only the default palette is `theme(inline)`-d), so they flow through the
- * unparsed-string path where the typed {@link cssColorToString} never runs —
- * this is the one place that lowers their wide-gamut values to sRGB.
+ * `transparent`) RN reads directly and must pass through untouched. The
+ * CSS-wide cascade keywords (`currentColor`, `inherit`, …) are NOT readable —
+ * they have no RN equivalent and are dropped via {@link isCssWideColorKeyword}.
+ * Custom `@theme` tokens reach the parser as `var(--color-x)` (only the default
+ * palette is `theme(inline)`-d), so they flow through the unparsed-string path
+ * where the typed {@link cssColorToString} never runs — this is the one place
+ * that lowers their wide-gamut values to sRGB. `color-mix(` is in the list too,
+ * but it takes the dedicated {@link resolveColorMix} path — culori's `rgb()`
+ * parser can't read it.
  */
-const RN_UNREADABLE_COLOR_PREFIXES: readonly string[] = ['oklch(', 'oklab(', 'lab(', 'lch(', 'color(', 'hwb(']
+const RN_UNREADABLE_COLOR_PREFIXES: readonly string[] = ['oklch(', 'oklab(', 'lab(', 'lch(', 'color(', 'hwb(', 'color-mix(']
 
 /**
  * Lower a wide-gamut / modern CSS color STRING (`oklch(…)`, `lab(…)`,
- * `color(display-p3 …)`, …) to an sRGB hex/rgba string RN can paint. Returns
- * `null` for anything RN already understands (hex, rgb, hsl, named) so the
- * caller keeps the original text — only the unrepresentable forms convert.
+ * `color(display-p3 …)`, `color-mix(…)`) to an sRGB hex/rgba string RN can
+ * paint. Returns `null` for anything RN already understands (hex, rgb, hsl,
+ * named) so the caller keeps the original text — only the unrepresentable
+ * forms convert. `color-mix()` is resolved via culori's interpolator; when it
+ * (or any other modern form) can't resolve, returns null so the caller DROPS
+ * the value rather than leaking the raw, RN-unreadable string.
  * Mirrors {@link cssColorToString}'s culori lowering for the string path.
  * @param text Resolved CSS color text (post theme-var substitution).
  * @returns sRGB color string, or `null` when no conversion is needed/possible.
  */
 export function normalizeColorString(text: string): string | null {
-  const lower = text.trim().toLowerCase()
+  const trimmed = text.trim()
+  const lower = trimmed.toLowerCase()
   if (!RN_UNREADABLE_COLOR_PREFIXES.some((prefix) => lower.startsWith(prefix))) return null
+  if (lower.startsWith('color-mix(')) return resolveColorMix(trimmed)
   const parsed = culoriRgb(text)
   if (!parsed || ![parsed.r, parsed.g, parsed.b].every((v) => typeof v === 'number' && Number.isFinite(v))) return null
   const alpha = typeof parsed.alpha === 'number' ? parsed.alpha : 1
   return rgbIntsToString(clampByte(parsed.r * 255), clampByte(parsed.g * 255), clampByte(parsed.b * 255), alpha)
 }
 
+/**
+ * Whether a resolved color STRING is a CSS-wide cascade keyword
+ * (`currentColor`, `inherit`, `initial`, `unset`, `revert`, `revert-layer`)
+ * with no React Native equivalent. RN has no color cascade, so the color path
+ * must DROP (omit the key) when this is true rather than emit the keyword —
+ * RN would otherwise receive an invalid color string and render nothing.
+ * `transparent` is NOT a cascade keyword: it is a concrete color the converters
+ * lower to `rgba(0, 0, 0, 0)`, so it returns false here and resolves normally.
+ * @param text Resolved color text (post theme-var substitution / typed-color stringification).
+ * @returns True when the value is an RN-unrepresentable CSS-wide keyword.
+ */
+export function isCssWideColorKeyword(text: string): boolean {
+  return CSS_WIDE_COLOR_KEYWORDS.has(text.trim().toLowerCase())
+}
+
 /**
  * Convert a lightningcss `CssColor` to an RN-safe color string. RGB
  * passes through unchanged. LAB / LCH / OKLAB / OKLCH / `color(xyz-…)`
@@ -213,6 +374,16 @@ export function cssColorToString(color: CssColor): string {
       return 'currentColor'
     }
     case 'light-dark': {
+      // `light-dark(L, D)` is a RUNTIME CSS function — the browser picks the
+      // branch from the element's `color-scheme`. rnwind has no runtime CSS
+      // evaluation, and the active scheme is NOT threaded into this typed
+      // converter (it takes a bare `CssColor`, and every one of its ~15 call
+      // sites — border / shorthand / gradient / declaration dispatchers — calls
+      // it without a scheme). Scheme resolution instead happens UPSTREAM, at the
+      // CSS-block walk (`@custom-variant` + `.dark {}` selectors in
+      // theme-vars.ts), which compiles a separate atom + var table per scheme.
+      // So the `.light` branch is the correct compile-time default here; the
+      // dark value is carried by the scheme-specific atom, not by this function.
       return cssColorToString(color.light)
     }
     default: {

package/src/core/parser/declaration.ts

@@ -1,7 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity -- the main Declaration → RN-entries dispatcher is intentionally a flat switch so each branch keeps its narrowed value type */
 import type { Declaration as LcDeclaration, TokenOrValue } from 'lightningcss'
 import { kebabToCamel } from './case-convert'
-import { cssColorToString, normalizeColorString } from './color'
+import { cssColorToString, isCssWideColorKeyword, normalizeColorString } from './color'
 import { dimensionPercentageToNumber, gapValueToValue, lengthPercentageOrAutoToValue, sizeLikeToValue } from './length'
 import {
   expandBorderColor,
@@ -57,6 +57,10 @@ const RN_UNSUPPORTED_PROPERTIES: ReadonlySet<string> = new Set([
   'clear',
   'table-layout',
   'caption-side',
+  // Web table-model props with no RN equivalent. `border-spacing` otherwise
+  // reaches the generic fallback and leaks an unresolved `calc(0.25rem * N)`.
+  'border-spacing',
+  'border-collapse',
   'transform-style',
   'background-blend-mode',
   'scroll-behavior',
@@ -73,6 +77,20 @@ const RN_UNSUPPORTED_PROPERTIES: ReadonlySet<string> = new Set([
   'field-sizing',
   'forced-color-adjust',
   'text-shadow',
+  // Web-only KEYS RN has no style prop for. `order` leaks through the negative
+  // variant (`-order-1` → `order: calc(1 * -1)` unparsed → resolves to `-1`);
+  // the positive `order-*` already drops since no typed branch claims it. Adding
+  // it here drops BOTH signs. `isolation` (`isolate` / `isolation-auto`) reaches
+  // the `custom` path as `isolation: isolate|auto` — also no RN equivalent.
+  'order',
+  'isolation',
+  // `normal-nums` reaches the `custom` path as `font-variant-numeric: normal`
+  // and leaked the non-RN key `fontVariantNumeric`. RN expresses numeric
+  // variants via the `fontVariant` array, not this property — drop it. (The
+  // `tabular-nums`/`oldstyle-nums`/… utilities carry their token in dropped
+  // `--tw-numeric-*` vars and already resolve to {}; mapping those to
+  // `fontVariant` is a tracked future enhancement, not a leak.)
+  'font-variant-numeric',
   'touch-action',
   'backdrop-filter',
   '-webkit-backdrop-filter',
@@ -82,6 +100,24 @@ const RN_UNSUPPORTED_PROPERTIES: ReadonlySet<string> = new Set([
   '-moz-osx-font-smoothing',
 ])
 
+/**
+ * Valid value sets for RN enum style props (keyed by the camelCase RN key).
+ * A value outside its prop's set is RN-invalid even when the string itself
+ * looks clean — RN ignores or warns on it (`position: 'fixed'`, `display:
+ * 'contents'`, `justifyContent: 'stretch' | 'baseline'`, `alignContent:
+ * 'normal'`). This is the dimension the leak-shape (`var(`/`calc(`/NaN) check
+ * misses. Both the typed `display` / `position` branches AND the generic
+ * unparsed fallback consult this — Tailwind routes some keyword-only values
+ * (`justify-content: baseline`) through the unparsed channel, which would
+ * otherwise emit them via `kebabToCamel` with no enum awareness.
+ */
+const RN_ENUM_VALUES: Readonly<Record<string, ReadonlySet<string>>> = {
+  position: new Set(['absolute', 'relative', 'static']),
+  display: new Set(['flex', 'none']),
+  justifyContent: new Set(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly']),
+  alignContent: new Set(['flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly']),
+}
+
 /** CSS single-sided logical-inline property → RN writing-direction Yoga key. */
 const LOGICAL_INLINE_TO_RN: Record<string, string> = {
   'margin-inline-start': 'marginStart',
@@ -245,6 +281,10 @@ function unparsedToEntries(
     // space (outside parens — `rgb(1 2 3)` keeps its inner spaces) means it's a
     // multi-token shorthand, not a color: drop it.
     if (hasTopLevelSpace(coerced)) return []
+    // CSS-wide cascade keywords (`inherit`, `currentColor`, `initial`, `unset`,
+    // `revert`, `revert-layer`) have no RN equivalent — RN has no color
+    // cascade. Drop rather than leak an invalid color string to RN.
+    if (isCssWideColorKeyword(coerced)) return []
     // Lower modern color spaces (`oklch(…)`, `lab(…)`, `color(p3 …)`) that
     // RN can't paint to sRGB; hex/rgb/hsl/named pass through unchanged.
     const color = normalizeColorString(coerced) ?? coerced
@@ -254,7 +294,14 @@ function unparsedToEntries(
     if (sides) return sides.map((key): RNEntry => [key, color])
     return [[kebabToCamel(property), color]]
   }
-  return [[kebabToCamel(property), coerced]]
+  const camelKey = kebabToCamel(property)
+  // Enum props whose value Tailwind sometimes routes through the unparsed
+  // channel (`justify-content: baseline` → `justifyContent: 'baseline'`),
+  // bypassing the typed dispatcher's keyword map. RN rejects values outside
+  // the prop's set, so gate them here exactly like the typed branches do.
+  const enumValues = RN_ENUM_VALUES[camelKey]
+  if (enumValues && typeof coerced === 'string' && !enumValues.has(coerced)) return []
+  return [[camelKey, coerced]]
 }
 
 /**
@@ -294,7 +341,12 @@ export function declarationToRnEntries(decl: LcDeclaration, themeVars?: Readonly
       // `background-color` narrows to `CssColor | 'background'` — the
       // literal keyword means UA default. Skip the keyword.
       if (typeof decl.value === 'string') return []
-      return [[kebabToCamel(decl.property), cssColorToString(decl.value)]]
+      const colorString = cssColorToString(decl.value)
+      // `currentColor` (lightningcss `{type:'currentcolor'}`) and any other
+      // CSS-wide cascade keyword have no RN equivalent — drop instead of
+      // leaking the keyword string to RN.
+      if (isCssWideColorKeyword(colorString)) return []
+      return [[kebabToCamel(decl.property), colorString]]
     }
     case 'border-color': {
       return expandBorderColor(decl.value)
@@ -370,10 +422,14 @@ export function declarationToRnEntries(decl: LcDeclaration, themeVars?: Readonly
       return [['fontStyle', decl.value.type]]
     }
     case 'display': {
-      return displayToEntries(decl.value)
+      // `displayToEntries` can still emit `contents` (a CSS value RN rejects —
+      // only `flex` / `none` are valid). Gate the result on the RN-valid set.
+      return displayToEntries(decl.value).filter(([, value]) => typeof value === 'string' && RN_ENUM_VALUES.display.has(value))
     }
     case 'position': {
-      return [['position', decl.value.type]]
+      // RN `position` accepts only `absolute` / `relative` / `static`; CSS
+      // `fixed` / `sticky` are invalid for RN, so drop them.
+      return RN_ENUM_VALUES.position.has(decl.value.type) ? [['position', decl.value.type]] : []
     }
     case 'font-size': {
       const px = fontSizeToPx(decl.value)

package/src/core/parser/layout-dispatcher.ts

@@ -1,6 +1,34 @@
 import type { Declaration as LcDeclaration } from 'lightningcss'
 import type { RNEntry } from './types'
 
+/**
+ * `justify-content` keywords RN accepts. CSS adds `stretch` / `normal` /
+ * `left` / `right` (and `start`/`end`, which we lower to `flex-start`/`flex-end`
+ * BEFORE this gate). RN rejects anything outside this set — drop it.
+ */
+const RN_JUSTIFY_CONTENT_VALUES: ReadonlySet<string> = new Set([
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+])
+
+/**
+ * `align-content` keywords RN accepts. Differs from `justify-content`: RN
+ * allows `stretch` here but rejects `normal`. Drop values outside the set.
+ */
+const RN_ALIGN_CONTENT_VALUES: ReadonlySet<string> = new Set([
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'space-between',
+  'space-around',
+  'space-evenly',
+])
+
 /**
  * Lower a CSS `overflow` keyword to one RN's `overflow` prop accepts
  * (`'visible' | 'hidden' | 'scroll'`). `auto` → `scroll` (auto means
@@ -105,12 +133,16 @@ export function dispatchLayoutDeclaration(decl: LcDeclaration): readonly RNEntry
       return v === null ? [] : [['alignSelf', v]]
     }
     case 'align-content': {
+      // After CSS→RN lowering, gate on RN's valid set — drops `normal`
+      // (`content-normal`) which RN's `alignContent` rejects.
       const v = mapAlignKeyword(decl.value)
-      return v === null ? [] : [['alignContent', v]]
+      return v === null || !RN_ALIGN_CONTENT_VALUES.has(v) ? [] : [['alignContent', v]]
     }
     case 'justify-content': {
+      // After CSS→RN lowering, gate on RN's valid set — drops `stretch`
+      // (`justify-stretch`) and any other keyword RN's `justifyContent` rejects.
       const v = mapJustifyKeyword(decl.value)
-      return v === null ? [] : [['justifyContent', v]]
+      return v === null || !RN_JUSTIFY_CONTENT_VALUES.has(v) ? [] : [['justifyContent', v]]
     }
     case 'overflow': {
       // Lightningcss splits CSS `overflow` into `{x, y}` axes; RN only

package/src/core/parser/shorthand.ts

@@ -10,7 +10,7 @@ import type {
   PaddingBlock,
   PaddingInline,
 } from 'lightningcss'
-import { cssColorToString } from './color'
+import { cssColorToString, isCssWideColorKeyword } from './color'
 import { dimensionPercentageToNumber, gapValueToValue, lengthPercentageOrAutoToValue } from './length'
 import type { RNEntry } from './types'
 
@@ -135,13 +135,19 @@ export function expandBorderColor(value: BorderColor): readonly RNEntry[] {
   const right = cssColorToString(value.right)
   const bottom = cssColorToString(value.bottom)
   const left = cssColorToString(value.left)
-  if (top === right && right === bottom && bottom === left) return [['borderColor', top]]
-  return [
+  // CSS-wide cascade keywords (`currentColor`, `inherit`, …) have no RN
+  // equivalent — drop any side that resolves to one rather than leak the
+  // keyword as a `borderColor`/`border*Color` value RN can't paint.
+  const sides: readonly (readonly [string, string])[] = [
     ['borderTopColor', top],
     ['borderRightColor', right],
     ['borderBottomColor', bottom],
     ['borderLeftColor', left],
   ]
+  const paintable = sides.filter(([, color]) => !isCssWideColorKeyword(color))
+  if (paintable.length === 0) return []
+  if (paintable.length === 4 && top === right && right === bottom && bottom === left) return [['borderColor', top]]
+  return paintable
 }
 
 /**

package/src/core/parser/tokens.ts

@@ -1,7 +1,7 @@
 import type { Token, TokenOrValue } from 'lightningcss'
 import { rgb as culoriRgb } from 'culori'
 import { BARE_NUMBER_REGEX, CALC_MUL_REGEX, CALC_RATIO_REGEX, LENGTH_PX_REGEX, LENGTH_REM_REGEX, REM_TO_PX } from './constants'
-import { cssColorToString } from './color'
+import { cssColorToString, normalizeColorString } from './color'
 import type { RNStyleValue } from './types'
 
 /**
@@ -247,6 +247,15 @@ export function coerceUnparsedValue(text: string): RNStyleValue | null {
   if (rem) return Number(rem[1]) * REM_TO_PX
   const colorMix = evaluateColorMixWithTransparent(trimmed)
   if (colorMix !== null) return colorMix
+  // Real two-color `color-mix(in <space>, A, B)` (not the `, transparent)`
+  // opacity shape) — resolve it to a concrete sRGB color via culori so the
+  // raw, RN-unreadable `color-mix(...)` string never reaches the StyleSheet.
+  if (trimmed.toLowerCase().startsWith('color-mix(')) {
+    // Resolved → concrete color; unresolvable → null (DROP). Either way the
+    // raw `color-mix(...)` text must never fall through to the string path
+    // below, where RN would receive an unreadable value and render nothing.
+    return normalizeColorString(trimmed)
+  }
   const fallback = extractVariableFallback(trimmed)
   if (fallback !== null) return coerceUnparsedValue(fallback)
   const calcRatio = CALC_RATIO_REGEX.exec(trimmed)

package/src/core/parser/tw-parser.ts

@@ -1,4 +1,5 @@
 import { compile } from '@tailwindcss/node'
+import * as tailwindNode from '@tailwindcss/node'
 import { Scanner, type SourceEntry } from '@tailwindcss/oxide'
 import { formatHex as culoriFormatHex } from 'culori'
 import { Features, transform, type TransformOptions } from 'lightningcss'
@@ -183,6 +184,8 @@ export interface ParsedOutput {
 export class TailwindParser {
   private readonly scanner: Scanner
   private compiler: TailwindCompiler | undefined
+  /** Full resolved base theme (built-in palette + user `@theme`), colors lowered to sRGB. Source for `useColor` / `useToken`. */
+  private baseThemeTokens: ThemeTable | null = null
   private readonly themeSchemes: ThemeSchemeTable
   private readonly schemeAliases: ReadonlyMap<string, string>
   /**
@@ -281,10 +284,16 @@ export class TailwindParser {
    */
   private buildThemeTokens(resolver: ReadonlyMap<string, string>): ThemeTables {
     const out: ThemeTables = {}
+    // BASE: the full resolved theme (built-in palette + user `@theme`). The
+    // runtime merges this under the active scheme, so `useColor('pink-500')`
+    // and `useColor('<your-token>')` both resolve in every scheme.
+    if (this.baseThemeTokens) out[BASE_SCHEME] = this.baseThemeTokens
+    // VARIANTS: only the per-scheme overrides the user wrote (`.dark { … }` /
+    // `@variant dark { … }`) — they layer on top of base at runtime.
     for (const scheme of this.themeSchemes.keys()) {
+      if (scheme === BASE_SCHEME) continue
       const userTable = this.themeSchemes.get(scheme)
       if (!userTable || userTable.size === 0) continue
-       
       const schemeResolver = new Map(resolver)
       for (const [k, v] of this.effectiveVars(scheme)) schemeResolver.set(k, v)
       const table: ThemeTable = {}
@@ -313,6 +322,13 @@ export class TailwindParser {
     } catch (error) {
       throw wrapThemeError(error)
     }
+    // Load the resolved design system ONCE to capture the FULL theme — the
+    // built-in palette (`pink-500`, …) plus the user's `@theme` tokens — so
+    // `useColor` / `useToken` resolve any theme value, not just the utilities
+    // a class happened to use (Tailwind tree-shakes `:root`, so the compiled
+    // CSS alone never carries the full palette). Best-effort: a load failure
+    // just narrows the hooks to the user's own tokens.
+    this.baseThemeTokens = await loadBaseThemeTokens(ready)
     return this.compiler
   }
 
@@ -501,6 +517,55 @@ function lowerColorToken(raw: string, resolver: ReadonlyMap<string, string>): st
   return normalizeColorString(substituted) ?? substituted
 }
 
+/** Theme token families excluded from the registered base table — pure Tailwind internals with no `useColor`/`useToken` value. */
+const INTERNAL_TOKEN_PREFIXES: readonly string[] = ['--tw-', '--default-']
+
+/** Shape of a resolved design-system theme entry from `@tailwindcss/node`'s unstable loader. */
+interface DesignSystemTheme {
+  theme?: { entries?: () => Iterable<[string, { value?: unknown }]> }
+}
+
+/**
+ * `@tailwindcss/node`'s `__unstable__loadDesignSystem` — exists at runtime but
+ * isn't in the package's published types, so it's accessed through a narrowed
+ * cast rather than a named import. Returns `undefined` when the (unstable) API
+ * isn't present, so {@link loadBaseThemeTokens} degrades gracefully.
+ */
+const loadDesignSystem = (tailwindNode as unknown as {
+  __unstable__loadDesignSystem?: (css: string, options: { base: string }) => Promise<DesignSystemTheme>
+}).__unstable__loadDesignSystem
+
+/**
+ * Load the FULL resolved Tailwind theme (built-in palette + the user's
+ * `@theme`) via the design-system API and flatten it to an RN-safe token
+ * table — `--color-*` values lowered to sRGB, everything else passed through.
+ * This is what lets `useColor` / `useToken` resolve ANY theme token, including
+ * built-ins a class never used (Tailwind tree-shakes the compiled `:root`, so
+ * the compiled CSS alone can't supply the full palette). Internal `--tw-*` /
+ * `--default-*` families are dropped. Returns `null` on any failure so the
+ * caller degrades to the user's own `@theme` tokens.
+ * @param themeCss Compile-ready theme CSS (variants stripped, custom-variants added).
+ * @returns Flattened base token table, or null.
+ */
+async function loadBaseThemeTokens(themeCss: string): Promise<ThemeTable | null> {
+  if (typeof loadDesignSystem !== 'function') return null
+  try {
+    const design = await loadDesignSystem(themeCss, { base: process.cwd() })
+    const entries = design.theme?.entries?.()
+    if (!entries) return null
+    const table: ThemeTable = {}
+    for (const [name, entry] of entries) {
+      const raw = entry?.value
+      if (typeof raw !== 'string') continue
+      if (INTERNAL_TOKEN_PREFIXES.some((prefix) => name.startsWith(prefix))) continue
+      table[name] = name.startsWith('--color-') ? (normalizeColorString(raw) ?? raw) : raw
+    }
+    return table
+  } catch {
+    return null
+  }
+}
+
 /**
  * Wrap an error from `@tailwindcss/node`'s compiler or `lightningcss`'s
  * transform with a `rnwind:` prefix so the user sees a clear "this came
@@ -1308,6 +1373,11 @@ function parseRgbaExpression(text: string): { color: string; opacity: number } |
   if (typeof alphaText === 'string') {
     opacity = alphaText.endsWith('%') ? Number(alphaText.slice(0, -1)) / 100 : Number(alphaText)
   }
+  // CSS Color 4: a `none` (or otherwise non-numeric) alpha parses to NaN here.
+  // Its used value when compositing is 0 (fully transparent) — and crucially
+  // RN throws on a NaN `shadowOpacity`, so collapse any non-finite alpha to 0
+  // before it can reach a numeric style prop.
+  if (!Number.isFinite(opacity)) opacity = 0
   const hex = `#${[r!, g!, b!]
     .map((n) =>
       Math.max(0, Math.min(255, Math.round(Number(n))))

package/src/core/parser/typography-dispatcher.ts

@@ -6,17 +6,26 @@ import type { RNEntry } from './types'
 /** RN-supported `textDecorationStyle` values (`wavy` has no RN equivalent). */
 const RN_DECORATION_STYLES: ReadonlySet<string> = new Set(['solid', 'double', 'dotted', 'dashed'])
 
+/**
+ * The only `textDecorationLine` keywords React Native renders. CSS `overline`
+ * has no RN analog, so any line string containing it (or any other unknown
+ * keyword) is dropped rather than leaked as a value RN warns on + ignores.
+ */
+const RN_DECORATION_LINES: ReadonlySet<string> = new Set(['none', 'underline', 'line-through', 'underline line-through'])
+
 /**
  * Build the RN `textDecorationLine` entry — string identity for the
- * single-line cases, joined-string for the array shape.
+ * single-line cases, joined-string for the array shape. Drops any value
+ * outside RN's enum (`overline`, `overline underline`, …) so no invalid
+ * keyword reaches the StyleSheet.
  * @param value Typed text-decoration-line.
- * @returns Single-entry list with `textDecorationLine`.
+ * @returns Single-entry list with a valid `textDecorationLine`, or empty.
  */
 function textDecorationLineToEntries(value: LcDeclaration['value']): readonly RNEntry[] {
-  if (value === 'none') return [['textDecorationLine', 'none']]
-  if (typeof value === 'string') return [['textDecorationLine', value]]
-  if (Array.isArray(value)) return [['textDecorationLine', value.join(' ')]]
-  return []
+  if (typeof value === 'string') return RN_DECORATION_LINES.has(value) ? [['textDecorationLine', value]] : []
+  if (!Array.isArray(value)) return []
+  const line = value.join(' ')
+  return RN_DECORATION_LINES.has(line) ? [['textDecorationLine', line]] : []
 }
 
 /**