rnwind 0.0.11 → 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

@@ -1373,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]] : []
 }
 
 /**

package/src/core/style-builder/union-builder.ts

@@ -1,5 +1,5 @@
 import { createHash, randomBytes } from 'node:crypto'
-import { existsSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
 import path from 'node:path'
 import type { GradientAtomInfo, HapticRequest, KeyframeBlock, SchemedStyle, TailwindParser } from '../parser'
 import type { ThemeTables } from '../types'
@@ -8,6 +8,12 @@ import { buildSchemeSources, type AtomSerializedCache } from './build-style'
 /** Manifest module basename — the file SchemeProvider imports via the resolver. */
 const MANIFEST_BASENAME = 'schemes.js'
 
+/** Suffix every per-scheme style file carries on disk. */
+const SCHEME_FILE_SUFFIX = '.style.js'
+
+/** Registry key for the always-loaded fallback scheme — never reaped. */
+const COMMON_SCHEME = 'common'
+
 /**
  * Atomic file write — stage to a `.tmp.<pid>.<nonce>` sibling, then
  * `rename()` into place. Skips the write entirely when the existing
@@ -66,7 +72,34 @@ function setsEqual(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
  * @returns Absolute path, e.g. `<cacheDir>/dark.style.js`.
  */
 function schemeFilePath(cacheDir: string, scheme: string): string {
-  return path.join(cacheDir, `${scheme}.style.js`)
+  return path.join(cacheDir, `${scheme}${SCHEME_FILE_SUFFIX}`)
+}
+
+/**
+ * List scheme names whose `<scheme>.style.js` exists on disk but is NOT in
+ * the set the current build emits — orphans left by a removed variant
+ * (e.g. user drops `@variant dark`, or a theme swap via git pull). The
+ * always-loaded `common` scheme is never an orphan. The manifest
+ * (`schemes.js`) doesn't carry the `.style.js` suffix, so it's skipped.
+ * @param cacheDir Absolute cache directory.
+ * @param liveSchemes Scheme names the current build writes.
+ * @returns Orphaned scheme names safe to delete.
+ */
+function findOrphanedSchemes(cacheDir: string, liveSchemes: ReadonlySet<string>): readonly string[] {
+  let names: readonly string[]
+  try {
+    names = readdirSync(cacheDir)
+  } catch {
+    return []
+  }
+  const orphans: string[] = []
+  for (const name of names) {
+    if (!name.endsWith(SCHEME_FILE_SUFFIX)) continue
+    const scheme = name.slice(0, -SCHEME_FILE_SUFFIX.length)
+    if (scheme === COMMON_SCHEME || liveSchemes.has(scheme)) continue
+    orphans.push(scheme)
+  }
+  return orphans
 }
 
 /**
@@ -156,6 +189,15 @@ class UnionBuilder {
     return this.serializedMissesCount
   }
 
+  /**
+   * Snapshot of the scheme keys currently tracked in `schemeSignatures` —
+   * exposed for tests to assert orphan-signature cleanup.
+   * @returns Scheme signature keys (includes the `__manifest` sentinel).
+   */
+  public schemeSignatureKeys(): readonly string[] {
+    return [...this.schemeSignatures.keys()]
+  }
+
   /**
    * Absolute path of one scheme's style file.
    * @param scheme Registry key.
@@ -285,7 +327,7 @@ class UnionBuilder {
     for (const [scheme, source] of Object.entries(schemeSources)) {
       const signature = signatureOf(source)
       const target = schemeFilePath(this.cacheDir, scheme)
-      if (this.schemeSignatures.get(scheme) === signature && existsSync(target)) continue
+      if (this.canSkipWrite(scheme, signature, target, source)) continue
       if (writeIfChanged(target, source)) changed.push(scheme)
       this.schemeSignatures.set(scheme, signature)
     }
@@ -297,9 +339,47 @@ class UnionBuilder {
       this.schemeSignatures.set('__manifest', manifestSignature)
     }
 
+    this.reapOrphanedSchemes(new Set(Object.keys(schemeSources)))
     return { changedSchemes: changed }
   }
 
+  /**
+   * Whether the current write for one scheme can be skipped. A skip is
+   * safe only when the cached signature matches AND the bytes on disk
+   * still equal the expected source — an `existsSync` pass alone would
+   * keep a truncated or externally-modified file (corrupt content with a
+   * stale-but-matching signature). The byte read happens only on a
+   * signature match, so the common no-change path stays cheap.
+   * @param scheme Scheme registry key.
+   * @param signature Signature of the source about to be written.
+   * @param target Absolute path of the scheme file.
+   * @param source Expected file content.
+   * @returns Whether writing this scheme can be skipped.
+   */
+  private canSkipWrite(scheme: string, signature: string, target: string, source: string): boolean {
+    if (this.schemeSignatures.get(scheme) !== signature) return false
+    try {
+      return readFileSync(target, 'utf8') === source
+    } catch {
+      // Missing or unreadable on disk — must rewrite.
+      return false
+    }
+  }
+
+  /**
+   * Delete `<scheme>.style.js` files left behind by a scheme that's no
+   * longer part of the build (removed `@variant`, theme swap), and drop
+   * their cached signatures so a later re-introduction rewrites cleanly.
+   * The `common` file and the manifest are never touched.
+   * @param liveSchemes Scheme names the current build wrote.
+   */
+  private reapOrphanedSchemes(liveSchemes: ReadonlySet<string>): void {
+    for (const scheme of findOrphanedSchemes(this.cacheDir, liveSchemes)) {
+      rmSync(schemeFilePath(this.cacheDir, scheme), { force: true })
+      this.schemeSignatures.delete(scheme)
+    }
+  }
+
   /**
    * Ensure the manifest + common scheme files exist on disk so Metro's
    * resolver can SHA1 them at boot before the first transform runs.