rnwind 0.0.8 → 0.0.10

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,8 +16,10 @@ 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 { ThemeTable, ThemeTables } from '../types'
 import type { Declaration as LcDeclaration, TokenOrValue } from 'lightningcss'
 
 /**
@@ -152,6 +154,14 @@ export interface ParsedOutput {
    * provider's `windowWidth`.
    */
   breakpoints: ReadonlyMap<string, number>
+  /**
+   * Per-scheme user theme token tables (`--color-*`, `--spacing-*`, …) with
+   * `--color-*` values lowered to sRGB. The style-builder emits these as
+   * `registerThemeTokens({...})` in the manifest so `useColor` / `useToken` /
+   * `useSize` resolve out of the box, without the user threading a `tables`
+   * prop on the provider. Keyed by scheme (`base` + each declared variant).
+   */
+  themeTokens: ThemeTables
 }
 
 /**
@@ -259,6 +269,33 @@ export class TailwindParser {
     return merged
   }
 
+  /**
+   * Build the per-scheme theme token tables for `registerThemeTokens` —
+   * the data source for `useColor` / `useToken` / `useSize`. Emits one table
+   * per scheme the user wrote tokens under (`base` + each variant block /
+   * `.dark` override). `--color-*` values are lowered to sRGB (matching the
+   * className path) using `resolver` so a wide-gamut or `var()`-referencing
+   * token resolves to an RN-renderable string; other tokens pass through.
+   * @param resolver Full compiled `:root` table, for resolving `var()` refs.
+   * @returns Scheme → (token name → value) map.
+   */
+  private buildThemeTokens(resolver: ReadonlyMap<string, string>): ThemeTables {
+    const out: ThemeTables = {}
+    for (const scheme of this.themeSchemes.keys()) {
+      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 = {}
+      for (const [name, raw] of userTable) {
+        table[name] = name.startsWith('--color-') ? lowerColorToken(raw, schemeResolver) : raw
+      }
+      out[scheme] = table
+    }
+    return out
+  }
+
   /**
    * Build the Tailwind compiler on first use and cache it. The theme CSS
    * gets a `theme(inline)` modifier on its `@import 'tailwindcss'` so
@@ -398,7 +435,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 +453,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 })
             },
@@ -442,10 +482,25 @@ export class TailwindParser {
       if (!referencedKeyframes.has(name)) keyframes.delete(name)
     }
 
-    return { atoms, keyframes, propertyDefaults, gradientAtoms, hapticAtoms, candidates: [...candidates], schemes, breakpoints }
+    const themeTokens = this.buildThemeTokens(compiledTheme)
+    return { atoms, keyframes, propertyDefaults, gradientAtoms, hapticAtoms, candidates: [...candidates], schemes, breakpoints, themeTokens }
   }
 }
 
+/**
+ * Lower a `--color-*` token value to an RN-renderable sRGB string, matching
+ * the className path: resolve any `var()` ref via `resolver`, then lower a
+ * wide-gamut form (`oklch(…)`, `lab(…)`, `color(p3 …)`) to sRGB. Hex / rgb /
+ * named colors pass through unchanged.
+ * @param raw Raw token value.
+ * @param resolver Var name → value table for resolving `var()` references.
+ * @returns RN-safe color string.
+ */
+function lowerColorToken(raw: string, resolver: ReadonlyMap<string, string>): string {
+  const substituted = substituteThemeVars(raw, resolver)
+  return normalizeColorString(substituted) ?? substituted
+}
+
 /**
  * Wrap an error from `@tailwindcss/node`'s compiler or `lightningcss`'s
  * transform with a `rnwind:` prefix so the user sees a clear "this came
@@ -493,6 +548,7 @@ function emptyOutput(): ParsedOutput {
     candidates: [],
     schemes: [BASE_SCHEME],
     breakpoints: new Map(),
+    themeTokens: {},
   }
 }
 
@@ -582,8 +638,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 +785,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 +825,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 +888,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 +1004,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 +1041,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 +1057,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 +1092,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 +1261,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 +1477,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 +1705,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)
     }

package/src/core/parser/typography.ts

@@ -3,25 +3,25 @@ import { dimensionPercentageToNumber } from './length'
 import type { RNEntry } from './types'
 
 /**
- * Expand lightningcss's `Display` typed value to an RN `{display}` entry.
- *  - `keyword` variant (`none`, `flex`, `grid`, `inline`, …) passes through.
- *  - `pair` variant (the modern CSS model — `{inside: {type}, outside,
- *    isListItem}`) collapses to RN's `'flex'` / `'grid'` when the inside
- *    type matches, otherwise skips.
+ * Display values React Native's `display` style prop actually accepts.
+ * Everything else (`block`, `inline`, `inline-block`, `grid`, `table`, …)
+ * has no RN analog — RN lays out as flex by default, and emitting an invalid
+ * value triggers a dev warning + silent drop. So we drop them outright.
+ */
+const RN_DISPLAY_VALUES: ReadonlySet<string> = new Set(['none', 'flex', 'contents'])
+
+/**
+ * Expand lightningcss's `Display` typed value to an RN `{display}` entry,
+ * keeping only the values RN supports (`none` / `flex` / `contents`).
+ *  - `keyword` variant emits only when the keyword is RN-valid.
+ *  - `pair` variant (the modern CSS model) collapses `flex` inside to
+ *    `'flex'`; `flow` (`block`/`inline`) and `grid` have no RN analog → drop.
  * @param value Typed display value.
  * @returns RN entries (zero or one).
  */
 export function displayToEntries(value: Display): readonly RNEntry[] {
-  if (value.type === 'keyword') return [['display', value.value]]
-  if (value.type === 'pair') {
-    const inside = value.inside.type
-    // `flow` is the default inside mode — maps to `block` / `inline` /
-    // `inline-block` based on the outer; RN only distinguishes `block`-ish
-    // from `flex`, so collapse the `flow` family to the `outside` keyword.
-    if (inside === 'flow') return [['display', value.outside]]
-    if (inside === 'flex') return [['display', 'flex']]
-    if (inside === 'grid') return [['display', 'grid']]
-  }
+  if (value.type === 'keyword') return RN_DISPLAY_VALUES.has(value.value) ? [['display', value.value]] : []
+  if (value.type === 'pair' && value.inside.type === 'flex') return [['display', 'flex']]
   return []
 }