rnwind 0.0.7 → 0.0.9

package/src/core/parser/theme-vars.ts

@@ -40,11 +40,18 @@ interface WalkStep {
  * @param start Start index of the block body (0 for top-level).
  * @param scheme Active scheme name for declarations inside this scope.
  * @param table Destination table, mutated in place.
+ * @param schemeClasses Selector-class → scheme-name map (from `@custom-variant` selectors).
  */
-function walkBlocks(source: string, start: number, scheme: string, table: ThemeSchemeTable): void {
+function walkBlocks(
+  source: string,
+  start: number,
+  scheme: string,
+  table: ThemeSchemeTable,
+  schemeClasses: ReadonlyMap<string, string>,
+): void {
   let index = start
   while (index < source.length) {
-    const step = nextWalkStep(source, index, scheme, table)
+    const step = nextWalkStep(source, index, scheme, table, schemeClasses)
     if (step.next === -1) return
     index = step.next
   }
@@ -56,9 +63,16 @@ function walkBlocks(source: string, start: number, scheme: string, table: ThemeS
  * @param index Current scan index.
  * @param scheme Active scheme name.
  * @param table Destination table.
+ * @param schemeClasses Selector-class → scheme-name map (from `@custom-variant` selectors).
  * @returns Step descriptor with the next scan index (or -1 for EOF).
  */
-function nextWalkStep(source: string, index: number, scheme: string, table: ThemeSchemeTable): WalkStep {
+function nextWalkStep(
+  source: string,
+  index: number,
+  scheme: string,
+  table: ThemeSchemeTable,
+  schemeClasses: ReadonlyMap<string, string>,
+): WalkStep {
   // Find the next TOP-LEVEL `--` (outside any `( ... )`). That's the only
   // place a custom-property declaration can start. `--foo` that appears
   // inside `var(--foo)` or `calc(... --value(integer) ...)` is part of a
@@ -73,7 +87,7 @@ function nextWalkStep(source: string, index: number, scheme: string, table: Them
     return { next: consumeDeclaration(source, atIndex, scheme, table) }
   }
   if (openIndex !== -1 && openIndex < blockClose) {
-    return { next: enterBlock(source, index, openIndex, scheme, table) }
+    return { next: enterBlock(source, index, openIndex, scheme, table, schemeClasses) }
   }
   return { next: -1 }
 }
@@ -126,9 +140,17 @@ function isDeclarationNext(atIndex: number, openIndex: number, blockClose: numbe
  * @param openIndex Index of the opening brace.
  * @param scheme Scheme active in the parent scope.
  * @param table Destination table.
+ * @param schemeClasses Selector-class → scheme-name map (from `@custom-variant` selectors).
  * @returns Index past the matching closing brace.
  */
-function enterBlock(source: string, index: number, openIndex: number, scheme: string, table: ThemeSchemeTable): number {
+function enterBlock(
+  source: string,
+  index: number,
+  openIndex: number,
+  scheme: string,
+  table: ThemeSchemeTable,
+  schemeClasses: ReadonlyMap<string, string>,
+): number {
   const header = source.slice(index, openIndex).trim()
   // Skip blocks that define utilities / at-rules that carry declarations
   // meant for a downstream compiler, not custom-property values for the
@@ -136,11 +158,55 @@ function enterBlock(source: string, index: number, openIndex: number, scheme: st
   // `--value(...)` meta-syntax which would otherwise confuse the
   // top-level declaration walker and spill into the extracted theme.
   if (isNonThemeAtRule(header)) return skipMatchingBrace(source, openIndex + 1)
-  const childScheme = variantNameOf(header) ?? scheme
-  walkBlocks(source, openIndex + 1, childScheme, table)
+  // Scheme scope switches on EITHER an `@variant <name> {` block OR a plain
+  // selector block targeting a scheme class (`.dark { … }` — Tailwind v4's
+  // standard dark-mode shape, often wrapped in `@layer base`). Without the
+  // selector case, `.dark`'s overrides poured into `base` and overwrote the
+  // light defaults, so every scheme rendered the dark values.
+  const childScheme = variantNameOf(header) ?? schemeFromSelector(header, schemeClasses) ?? scheme
+  walkBlocks(source, openIndex + 1, childScheme, table, schemeClasses)
   return skipMatchingBrace(source, openIndex + 1)
 }
 
+/**
+ * Map a plain selector block header to the scheme it overrides, using the
+ * class → scheme map derived from `@custom-variant` declarations. Returns the
+ * first scheme class found in the selector (`.dark { … }` → `dark`,
+ * `.scheme-dark, .scheme-dark * { … }` → `dark`), or null for at-rules and
+ * non-scheme selectors (which keep the parent scheme).
+ * @param header Block header text (the selector before the `{`).
+ * @param schemeClasses Class-name → scheme-name map.
+ * @returns Scheme name, or null.
+ */
+function schemeFromSelector(header: string, schemeClasses: ReadonlyMap<string, string>): string | null {
+  if (header.startsWith('@') || schemeClasses.size === 0) return null
+  for (const match of header.matchAll(CLASS_IN_SELECTOR)) {
+    const mapped = schemeClasses.get(match[1]!)
+    if (mapped) return mapped
+  }
+  return null
+}
+
+/**
+ * Build a `<selector-class> → <scheme-name>` map from every
+ * `@custom-variant <name> (<class-selector>);` declaration. Unlike
+ * {@link extractSchemeAliases} this KEEPS the `class === scheme` case
+ * (`.dark → dark`) — that's exactly the mapping needed to attribute a
+ * `.dark { … }` override block to the dark scheme.
+ * @param css Pre-stripped CSS source.
+ * @returns Class-name → scheme-name map.
+ */
+function buildSchemeClassMap(css: string): Map<string, string> {
+  const map = new Map<string, string>()
+  for (const match of css.matchAll(CUSTOM_VARIANT_WITH_SELECTOR)) {
+    const scheme = match[1]!
+    const selector = match[2]!
+    if (!isSchemeSelector(selector)) continue
+    for (const cls of selector.matchAll(CLASS_IN_SELECTOR)) map.set(cls[1]!, scheme)
+  }
+  return map
+}
+
 /**
  * Whether a block header belongs to an at-rule whose body should be
  * ignored by the theme-var extractor. `@utility` / `@media` / `@keyframes`
@@ -351,7 +417,8 @@ export const BASE_SCHEME = 'base'
 export function extractThemeVars(css: string): ThemeSchemeTable {
   const table: ThemeSchemeTable = new Map()
   const stripped = stripComments(css)
-  walkBlocks(stripped, 0, BASE_SCHEME, table)
+  const schemeClasses = buildSchemeClassMap(stripped)
+  walkBlocks(stripped, 0, BASE_SCHEME, table, schemeClasses)
   return table
 }
 

package/src/core/parser/tokens.ts

@@ -321,28 +321,47 @@ const COLOR_MIX_PCT_TAIL = /(-?\d+(?:\.\d+)?)%$/
 function applyAlphaToCssColor(color: string, multiplier: number): string | null {
   const trimmed = color.trim()
   if (trimmed === 'transparent') return 'rgba(0, 0, 0, 0)'
+  // Nested color-mix — Tailwind's `shadow-<token>/<opacity>` emits
+  // `color-mix(… color-mix(… <token> N%, transparent) <alpha>, transparent)`.
+  // Resolve the inner mix to a concrete color first, then apply this alpha.
+  if (trimmed.toLowerCase().startsWith('color-mix(')) {
+    const inner = evaluateColorMixWithTransparent(trimmed)
+    if (inner !== null) return applyAlphaToCssColor(inner, multiplier)
+  }
   return alphaFromHex(trimmed, multiplier) ?? alphaFromRgbFunction(trimmed, multiplier) ?? alphaFromCulori(trimmed, multiplier)
 }
 
+/**
+ * Round a composed alpha to 4 decimals — `0.2 * 1` round-trips through f32 as
+ * `0.20000000298…`; the rounded form keeps generated rgba strings compact.
+ * @param alpha Raw alpha product.
+ * @returns Rounded alpha.
+ */
+function roundAlpha(alpha: number): number {
+  return Math.round(alpha * 10_000) / 10_000
+}
+
 /**
  * Apply the alpha multiplier to a hex literal, expanding 3/4/6/8-digit forms.
- * @param text
- * @param multiplier
+ * @param text Candidate hex color string.
+ * @param multiplier Alpha multiplier (0…1).
+ * @returns `rgba(…)` string, or null when `text` is not a hex literal.
  */
 function alphaFromHex(text: string, multiplier: number): string | null {
   const hexMatch = /^#([0-9a-fA-F]{3,8})$/.exec(text)
   if (!hexMatch) return null
   const expanded = expandHex(hexMatch[1]!)
   if (!expanded) return null
-  return `rgba(${expanded.r}, ${expanded.g}, ${expanded.b}, ${expanded.alpha * multiplier})`
+  return `rgba(${expanded.r}, ${expanded.g}, ${expanded.b}, ${roundAlpha(expanded.alpha * multiplier)})`
 }
 
 /**
  * Apply alpha to an `rgb(…)` / `rgba(…)` literal. Walks the channels by
  * hand instead of a multi-capture regex (the linter flags the regex
  * form as backtracking-prone).
- * @param text
- * @param multiplier
+ * @param text Candidate `rgb(…)` / `rgba(…)` color string.
+ * @param multiplier Alpha multiplier (0…1).
+ * @returns `rgba(…)` string, or null when `text` is not an rgb function.
  */
 function alphaFromRgbFunction(text: string, multiplier: number): string | null {
   if (!text.startsWith('rgb(') && !text.startsWith('rgba(')) return null
@@ -354,7 +373,7 @@ function alphaFromRgbFunction(text: string, multiplier: number): string | null {
   const b = Math.round(Number(channels[2]))
   const baseAlpha = channels.length === 4 ? Number(channels[3]) : 1
   if (![r, g, b, baseAlpha].every((value) => Number.isFinite(value))) return null
-  return `rgba(${r}, ${g}, ${b}, ${baseAlpha * multiplier})`
+  return `rgba(${r}, ${g}, ${b}, ${roundAlpha(baseAlpha * multiplier)})`
 }
 
 /**
@@ -363,8 +382,9 @@ function alphaFromRgbFunction(text: string, multiplier: number): string | null {
  * `color-mix(in oklab, oklch(...) 50%, transparent)` resolve when
  * Tailwind emits the source color in a wide-gamut space (every
  * built-in `bg-red-500` / `shadow-red-500` does, in v4).
- * @param text
- * @param multiplier
+ * @param text Candidate wide-gamut / named CSS color string.
+ * @param multiplier Alpha multiplier (0…1).
+ * @returns `rgba(…)` string, or null when culori can't parse `text`.
  */
 function alphaFromCulori(text: string, multiplier: number): string | null {
   try {
@@ -375,7 +395,7 @@ function alphaFromCulori(text: string, multiplier: number): string | null {
     const g = Math.round(Math.max(0, Math.min(1, parsed.g!)) * 255)
     const b = Math.round(Math.max(0, Math.min(1, parsed.b!)) * 255)
     const baseAlpha = typeof parsed.alpha === 'number' ? parsed.alpha : 1
-    return `rgba(${r}, ${g}, ${b}, ${baseAlpha * multiplier})`
+    return `rgba(${r}, ${g}, ${b}, ${roundAlpha(baseAlpha * multiplier)})`
   } catch {
     // culori threw on an unrecognised CSS form — fall through.
     return null
@@ -450,6 +470,53 @@ export function coerceFontFamily(value: string): string {
   return unquoteCssString(first)
 }
 
+/**
+ * Generic CSS font-family keywords — NOT real React Native typefaces. A
+ * `font-family` stack made only of these (e.g. the default `font-sans`:
+ * `ui-sans-serif, system-ui, sans-serif`) should fall back to RN's system
+ * font rather than emit a bogus `fontFamily`.
+ */
+const GENERIC_FONT_FAMILIES: ReadonlySet<string> = new Set([
+  'ui-sans-serif',
+  'ui-serif',
+  'ui-monospace',
+  'ui-rounded',
+  'system-ui',
+  'sans-serif',
+  'serif',
+  'monospace',
+  'cursive',
+  'fantasy',
+  'math',
+  'emoji',
+  'fangsong',
+  '-apple-system',
+  'blinkmacsystemfont',
+  // Emoji / symbol fonts that Tailwind appends to the default sans stack —
+  // never the intended text typeface.
+  'apple color emoji',
+  'segoe ui emoji',
+  'segoe ui symbol',
+  'noto color emoji',
+])
+
+/**
+ * Pick the first CONCRETE typeface from a typed `font-family` LIST (a CSS
+ * fallback stack). RN takes one family, and generic keywords aren't real
+ * faces, so skip them. Returns undefined when the whole stack is generic
+ * (→ caller emits nothing → system font).
+ * @param families Typed `font-family` value — an array of family-name strings.
+ * @returns First concrete family name, or undefined.
+ */
+export function firstConcreteFontFamily(families: readonly unknown[]): string | undefined {
+  for (const entry of families) {
+    if (typeof entry !== 'string') continue
+    const bare = coerceFontFamily(entry)
+    if (bare.length > 0 && !GENERIC_FONT_FAMILIES.has(bare.toLowerCase())) return bare
+  }
+  return undefined
+}
+
 /**
  * Substitute every `var(--name [, fallback])` reference in `text` with
  * the value from `table` (or the fallback clause when the name misses).

package/src/core/parser/transform.ts

@@ -103,37 +103,48 @@ function angleToString(angle: Angle): string {
 
 /**
  * Convert a `NumberOrPercentage` to a plain number. Percentages become
- * their fractional equivalent (e.g. `50%` → `0.5`).
+ * their fractional equivalent (e.g. `50%` → `0.5`). Rounded so a literal
+ * like `scale-[1.7]` doesn't carry lightningcss's f32 noise
+ * (`1.7000000476837158`) into the RN `transform` array.
  * @param value Typed value.
  * @returns Plain number.
  */
 function numberOrPercentageToNumber(value: NumberOrPercentage): number {
-  if (value.type === 'percentage') return value.value
-  return value.value
+  return roundNumber(value.value)
 }
 
 /**
  * Convert a length-or-percentage used by translate into the shape RN
  * accepts (`number` for px, `string` for `%`). Percentages stay as
- * strings so RN layout can resolve them against the element size.
+ * strings so RN layout can resolve them against the element size. Pixel
+ * values are rounded to shed f32 noise (`3.3px` → `3.299999952…`).
  * @param value Typed length or percentage.
  * @returns RN-style translate value.
  */
 function lengthOrPercentToNumber(value: DimensionPercent | { type: 'value'; value: LengthValue }): number | string {
-  if (value.type === 'dimension') return lengthToPx(value.value)
-  if (value.type === 'value') return lengthToPx(value.value)
+  if (value.type === 'dimension') return roundNumber(lengthToPx(value.value))
+  if (value.type === 'value') return roundNumber(lengthToPx(value.value))
   if (value.type === 'percentage') return `${formatNumber(value.value * 100)}%`
   return 0
 }
 
+/**
+ * Round a number to 4 decimals — sheds lightningcss's f32 representation
+ * noise while staying well below subpixel / sub-percent precision.
+ * @param value Raw number.
+ * @returns Rounded number.
+ */
+function roundNumber(value: number): number {
+  return Math.round(value * 10_000) / 10_000
+}
+
 /**
  * Render a number without trailing IEEE noise.
  * @param value Number to format.
  * @returns Compact string form.
  */
 function formatNumber(value: number): string {
-  const rounded = Math.round(value * 10_000) / 10_000
-  return String(rounded)
+  return String(roundNumber(value))
 }
 
 /**

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

@@ -5,7 +5,7 @@ import { Features, transform, type TransformOptions } from 'lightningcss'
 import { declarationToRnEntries } from './declaration'
 import { detectGradientAtom, type GradientAtomInfo } from './gradient'
 import { detectHapticAtom, type HapticRequest } from './haptics'
-import { keyframeSelectorOffset, keyframesName, pickAnimationName } from './keyframes'
+import { keyframeSelectorOffsets, keyframesName, pickAnimationName } from './keyframes'
 import { serializeInitialValue } from './property'
 import { classNameFromSelector } from './selector'
 import {
@@ -16,7 +16,8 @@ import {
   extractThemeVars,
   type ThemeSchemeTable,
 } from './theme-vars'
-import { serializeTokens } from './tokens'
+import { coerceUnparsedValue, serializeTokens, substituteThemeVars } from './tokens'
+import { normalizeColorString } from './color'
 import type { RNStyle } from './types'
 import type { Declaration as LcDeclaration, TokenOrValue } from 'lightningcss'
 
@@ -398,7 +399,8 @@ export class TailwindParser {
                 // surface their role + resolved colour so the transformer
                 // can rewrite `<LinearGradient className="...">` into
                 // `colors={...}` / `start={...}` / `end={...}` props.
-                const gradient = detectGradientAtom(rule.value.declarations.declarations)
+                const gradientTable = schemeTables.get(BASE_SCHEME) ?? schemeTables.get(schemes[0] ?? BASE_SCHEME)
+                const gradient = detectGradientAtom(rule.value.declarations.declarations, gradientTable)
                 if (gradient) gradientAtoms.set(className, gradient)
                 // Haptics may live on the rule directly OR inside a
                 // nested pseudo (e.g. `&:active` for `active:haptic-*`).
@@ -415,14 +417,16 @@ export class TailwindParser {
               const steps: KeyframeStep[] = []
               const baseTable = schemeTables.get(BASE_SCHEME) ?? schemeTables.get(schemes[0] ?? BASE_SCHEME)
               for (const frame of rule.value.keyframes) {
-                const offset = keyframeSelectorOffset(frame.selectors)
-                if (!offset) continue
+                const offsets = keyframeSelectorOffsets(frame.selectors)
+                if (offsets.length === 0) continue
                 const style: RNStyle = {}
                 const frameDecls = frame.declarations.declarations ?? []
                 for (const decl of frameDecls) {
                   for (const [key, value] of declarationToRnEntries(decl, baseTable)) style[key] = value
                 }
-                steps.push({ offset, style })
+                // One frame can carry several offsets (`0%, 100% { … }`); emit a
+                // step for each so the terminal frame isn't lost.
+                for (const offset of offsets) steps.push({ offset, style })
               }
               keyframes.set(name, { name, steps })
             },
@@ -582,8 +586,8 @@ function processStyleRule(
     if (animationRef) ctx.referencedKeyframes.add(animationRef)
   }
   applyComposedTransform(bucket, ctx.schemes, ruleLocalVars)
-  applyComposedShadow(bucket, ctx.schemes, ruleLocalVars)
-  applyComposedRing(bucket, ctx.schemes, ruleLocalVars)
+  applyComposedShadow(bucket, ctx.schemes, ruleLocalVars, ruleSchemeTables)
+  applyComposedRing(bucket, ctx.schemes, ruleLocalVars, ruleSchemeTables)
   // Phase 2: nested rules — three orthogonal flavours, dispatched on
   // the lightningcss node `type`:
   //  - `media`: Tailwind v4 responsive variants (`sm:`, `md:`, …) wrap
@@ -729,7 +733,7 @@ function applyMediaRule(
     const nestedLocalVars = new Map(ruleLocalVars)
     for (const [k, v] of collectRuleLocalVars(decls)) nestedLocalVars.set(k, v)
     applyComposedTransformToScheme(schemeBucket, nestedLocalVars)
-    applyComposedShadowToScheme(schemeBucket, nestedLocalVars)
+    applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table)
     bucket[scheme] = schemeBucket
   }
 }
@@ -769,7 +773,7 @@ function applyInteractiveNestedRule(
     const nestedLocalVars = new Map(ruleLocalVars)
     for (const [k, v] of collectRuleLocalVars(decls)) nestedLocalVars.set(k, v)
     applyComposedTransformToScheme(schemeBucket, nestedLocalVars)
-    applyComposedShadowToScheme(schemeBucket, nestedLocalVars)
+    applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table)
     bucket[scheme] = schemeBucket
   }
 }
@@ -832,7 +836,7 @@ function applyNestedSchemeRule(
   const nestedLocalVars = new Map(ruleLocalVars)
   for (const [k, v] of collectRuleLocalVars(innerDecls)) nestedLocalVars.set(k, v)
   applyComposedTransformToScheme(schemeBucket, nestedLocalVars)
-  applyComposedShadowToScheme(schemeBucket, nestedLocalVars)
+  applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table)
   bucket[targetScheme] = schemeBucket
 }
 
@@ -948,12 +952,17 @@ function applyComposedTransformToScheme(style: RNStyle, ruleLocalVars: ReadonlyM
  * prop.
  * @param style Scheme-specific style map.
  * @param ruleLocalVars Combined outer+nested `--tw-*` vars.
+ * @param table Per-scheme var table for resolving `var(--color-x)` in colors.
  */
-function applyComposedShadowToScheme(style: RNStyle, ruleLocalVars: ReadonlyMap<string, string>): void {
+function applyComposedShadowToScheme(
+  style: RNStyle,
+  ruleLocalVars: ReadonlyMap<string, string>,
+  table?: ReadonlyMap<string, string>,
+): void {
   const rawShadow = ruleLocalVars.get('--tw-shadow')
   const rawShadowColor = ruleLocalVars.get('--tw-shadow-color')
   if (!rawShadow && rawShadowColor) {
-    const color = resolveCustomColorString(rawShadowColor)
+    const color = resolveCustomColorString(rawShadowColor, table)
     if (!color) return
     delete style.boxShadow
     style.shadowColor = color
@@ -980,11 +989,13 @@ function applyComposedShadowToScheme(style: RNStyle, ruleLocalVars: ReadonlyMap<
  * @param bucket Per-scheme style map for the atom.
  * @param schemes Scheme names active for this parse.
  * @param ruleLocalVars Rule-local `--tw-*` vars.
+ * @param schemeTables Per-scheme var tables for resolving `var(--color-x)`.
  */
 function applyComposedShadow(
   bucket: Record<string, RNStyle>,
   schemes: readonly string[],
   ruleLocalVars: ReadonlyMap<string, string>,
+  schemeTables: ReadonlyMap<string, ReadonlyMap<string, string>>,
 ): void {
   const rawShadow = ruleLocalVars.get('--tw-shadow')
   const rawShadowColor = ruleLocalVars.get('--tw-shadow-color')
@@ -994,9 +1005,10 @@ function applyComposedShadow(
   // where setting `--tw-shadow-color` swaps in a solid color). Offset /
   // blur / elevation come from the partner size utility's atom.
   if (!rawShadow && rawShadowColor) {
-    const color = resolveCustomColorString(rawShadowColor)
-    if (!color) return
     for (const scheme of schemes) {
+      // Resolve per scheme — a custom token may differ between light/dark.
+      const color = resolveCustomColorString(rawShadowColor, schemeTables.get(scheme))
+      if (!color) continue
       const style = bucket[scheme] ?? {}
       delete style.boxShadow
       style.shadowColor = color
@@ -1028,35 +1040,64 @@ function applyComposedShadow(
  * @param bucket Per-scheme style map for the atom.
  * @param schemes Scheme names active for this parse.
  * @param ruleLocalVars Rule-local `--tw-*` vars.
+ * @param schemeTables Per-scheme var tables for resolving `var(--color-x)`.
  */
 function applyComposedRing(
   bucket: Record<string, RNStyle>,
   schemes: readonly string[],
   ruleLocalVars: ReadonlyMap<string, string>,
+  schemeTables: ReadonlyMap<string, ReadonlyMap<string, string>>,
 ): void {
   const ringColor = ruleLocalVars.get('--tw-ring-color')
   if (!ringColor) return
-  const color = resolveCustomColorString(ringColor)
-  if (!color) return
   for (const scheme of schemes) {
+    // Resolve per scheme — a custom token may differ between light/dark.
+    const color = resolveCustomColorString(ringColor, schemeTables.get(scheme))
+    if (!color) continue
     const style = bucket[scheme] ?? {}
     if (!('borderColor' in style)) style.borderColor = color
     bucket[scheme] = style
   }
 }
 
+/**
+ * Tailwind composable shadow/inset-shadow alpha defaults. Their `100%` lives
+ * in an `@property` initial-value (not the rule's local vars), so after the
+ * `@supports` color-mix is unwrapped, `var(--tw-shadow-alpha)` is left dangling
+ * and the shadow color fails to resolve. Seed the default; a `/<opacity>`
+ * modifier still wins because the in-rule table value overrides it.
+ */
+const COMPOSABLE_ALPHA_DEFAULTS: ReadonlyMap<string, string> = new Map([
+  ['--tw-shadow-alpha', '100%'],
+  ['--tw-inset-shadow-alpha', '100%'],
+])
+
 /**
  * Resolve a CSS color string (`oklch(0.971 0.013 17.38)`, `#ff0000`,
  * `rgb(0 0 0 / 0.1)`) to the hex string RN's `shadowColor` accepts.
  * Wraps culori's parser via {@link parseCssColorToHex}.
- * @param raw Raw color text from a `--tw-shadow-color` custom prop.
+ *
+ * Custom `@theme` color tokens arrive as `var(--color-x)` (only the default
+ * palette is `theme(inline)`-d), so `table` is substituted FIRST — without it
+ * `shadow-<token>` / `ring-<token>` silently drop the color (culori can't
+ * parse a bare `var()`). The table is per-scheme so a token that differs
+ * between light/dark resolves to the right value for each.
+ * @param raw Raw color text from a `--tw-shadow-color` / `--tw-ring-color` prop.
+ * @param table Per-scheme var table for resolving `var(--color-x)` references.
  * @returns `#rrggbb` string, or null when culori can't parse it.
  */
-function resolveCustomColorString(raw: string): string | null {
-  const text = unwrapVariableFallback(raw).trim()
-  if (text.length === 0) return null
-  if (text.startsWith('#')) return text
-  return parseCssColorToHex(text)
+function resolveCustomColorString(raw: string, table?: ReadonlyMap<string, string>): string | null {
+  const seeded = new Map([...COMPOSABLE_ALPHA_DEFAULTS, ...(table ?? [])])
+  const substituted = substituteThemeVars(raw, seeded)
+  // `coerceUnparsedValue` collapses Tailwind's opacity shape
+  // `color-mix(in oklab, <color> <pct>%, transparent)` (emitted by
+  // `shadow-<token>` / `ring-<token>`) to a flat rgba/hex and unwraps
+  // `var(…, fallback)`. Modern spaces (`oklch(…)`) then lower via
+  // `normalizeColorString`; anything still un-RN-safe falls to culori.
+  const coerced = coerceUnparsedValue(unwrapVariableFallback(substituted).trim())
+  if (typeof coerced !== 'string' || coerced.length === 0 || coerced.startsWith('var(')) return null
+  if (coerced.startsWith('#') || coerced.startsWith('rgb') || coerced.startsWith('hsl')) return coerced
+  return normalizeColorString(coerced) ?? parseCssColorToHex(coerced)
 }
 
 /**
@@ -1168,6 +1209,11 @@ function parseShadowColor(expr: string): { color: string; opacity: number } {
   const rgba = parseRgbaExpression(working)
   if (rgba) return rgba
   if (working.startsWith('#')) return { color: working, opacity: 1 }
+  // Named (`red`) / modern (`hsl(…)`, `oklch(…)`) colors — culori → sRGB hex.
+  // Without this they fell to the default black at 0.1 alpha, silently losing
+  // the user's `shadow-[0_2px_4px_red]` color.
+  const hex = formatHexSafe(working)
+  if (hex) return { color: hex, opacity: 1 }
   return { color: '#000', opacity: 0.1 }
 }
 
@@ -1379,8 +1425,8 @@ function resolveLengthExpression(text: string): number | string | null {
   const evaluated = evaluateLengthExpr(trimmed)
   if (!evaluated) return null
   if (evaluated.unit === '%') return `${stripTrailingZeros(evaluated.value)}%`
-  if (evaluated.unit === 'rem') return evaluated.value * 16
-  return evaluated.value
+  if (evaluated.unit === 'rem') return roundTransformValue(evaluated.value * 16)
+  return roundTransformValue(evaluated.value)
 }
 
 /** Evaluated length + its unit. `''` means px or bare number. */
@@ -1607,17 +1653,36 @@ function parseArithmeticFactor(tokens: readonly string[], cursor: { index: numbe
 }
 
 /**
- * Resolve a scale factor expressed as a percentage (`150%`) or number (`1.5`).
+ * Resolve a scale factor expressed as a percentage (`150%`), number (`1.5`),
+ * or a `calc()` expression. Tailwind emits NEGATIVE scale utilities as a calc
+ * (`-scale-x-100` → `calc(100% * -1)`), so a plain percent/number regex
+ * silently dropped them — `-scale-*` (the horizontal-flip idiom) rendered
+ * nothing. Fall back to the shared arithmetic evaluator, reading `%` as a
+ * fraction (`100%` → 1) and rounding off f32 noise.
  * @param text Raw value.
- * @returns Scale number (e.g. 1.5 for 150%), or null.
+ * @returns Scale number (e.g. 1.5 for 150%, -1 for `calc(100% * -1)`), or null.
  */
 function resolveNumberOrPercent(text: string): number | null {
   const trimmed = text.trim()
   const percent = /^(-?\d+(?:\.\d+)?)%$/.exec(trimmed)
-  if (percent) return Number(percent[1]) / 100
+  if (percent) return roundTransformValue(Number(percent[1]) / 100)
   const bare = /^-?\d+(?:\.\d+)?$/.exec(trimmed)
-  if (bare) return Number(trimmed)
-  return null
+  if (bare) return roundTransformValue(Number(trimmed))
+  const evaluated = evaluateLengthExpr(trimmed)
+  if (!evaluated || evaluated.unit === 'rem') return null
+  return roundTransformValue(evaluated.unit === '%' ? evaluated.value / 100 : evaluated.value)
+}
+
+/**
+ * Round a composed-transform numeric value to 4 decimals. lightningcss
+ * serializes arbitrary literals (`scale-x-[0.333]`) back as noisy f32 text
+ * (`0.3330000042915344`), and the resolvers `Number()` that verbatim — round
+ * so the RN `transform` array stays clean.
+ * @param value Raw number.
+ * @returns Rounded number.
+ */
+function roundTransformValue(value: number): number {
+  return Math.round(value * 10_000) / 10_000
 }
 
 /**

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

@@ -1,7 +1,11 @@
 import type { Declaration as LcDeclaration } from 'lightningcss'
 import { lineHeightToEntries } from './typography'
+import { firstConcreteFontFamily } from './tokens'
 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'])
+
 /**
  * Build the RN `textDecorationLine` entry — string identity for the
  * single-line cases, joined-string for the array shape.
@@ -45,7 +49,9 @@ function letterSpacingToEntries(value: LcDeclaration['value']): readonly RNEntry
   if (inner?.type !== 'value' || !inner.value) return []
   const { unit, value: px } = inner.value
   if (typeof px !== 'number') return []
-  return [['letterSpacing', unit === 'px' ? px : px * 16]]
+  const resolved = unit === 'px' ? px : px * 16
+  // Round off lightningcss f32 noise (`0.1em` → `1.600000023841858`).
+  return [['letterSpacing', Math.round(resolved * 10_000) / 10_000]]
 }
 
 /**
@@ -81,6 +87,19 @@ export function dispatchTypographyDeclaration(decl: LcDeclaration): readonly RNE
     case 'text-decoration-line': {
       return textDecorationLineToEntries(decl.value)
     }
+    case 'text-decoration-style': {
+      // RN <Text> supports textDecorationStyle (solid/double/dotted/dashed).
+      const style = String(decl.value)
+      return RN_DECORATION_STYLES.has(style) ? [['textDecorationStyle', style]] : []
+    }
+    case 'font-family': {
+      // Typed `font-family` is a fallback LIST (`font-sans`, `font-mono`,
+      // `font-[Inter]`). RN takes one concrete typeface; an all-generic
+      // stack (default `font-sans`) emits nothing → system font. The themed
+      // `var(--font-*)` path goes through `coerceFontFamily` in declaration.ts.
+      const family = firstConcreteFontFamily(decl.value as readonly unknown[])
+      return family === undefined ? [] : [['fontFamily', family]]
+    }
     case 'aspect-ratio': {
       return aspectRatioToEntries(decl.value)
     }