rnwind 0.0.8 → 0.0.10

package/lib/esm/core/parser/tw-parser.d.ts

@@ -2,6 +2,7 @@ import { type SourceEntry } from '@tailwindcss/oxide';
 import { type GradientAtomInfo } from './gradient';
 import { type HapticRequest } from './haptics';
 import type { RNStyle } from './types';
+import type { ThemeTables } from '../types';
 /** Parser configuration — one instance per Metro session, theme CSS fixed. */
 export interface TailwindParserConfig {
     /**
@@ -94,6 +95,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;
 }
 /**
  * Parses one source file's Tailwind usage into RN-ready style objects.
@@ -170,6 +179,17 @@ export declare class TailwindParser {
      * @returns Effective var name → value lookup for the scheme.
      */
     private effectiveVars;
+    /**
+     * 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;
     /**
      * Build the Tailwind compiler on first use and cache it. The theme CSS
      * gets a `theme(inline)` modifier on its `@import 'tailwindcss'` so

package/lib/esm/core/parser/tw-parser.mjs

@@ -5,11 +5,12 @@ import { Features, transform } from 'lightningcss';
 import { declarationToRnEntries } from './declaration.mjs';
 import { detectGradientAtom } from './gradient.mjs';
 import { detectHapticAtom } from './haptics.mjs';
-import { keyframesName, keyframeSelectorOffset, pickAnimationName } from './keyframes.mjs';
+import { keyframesName, keyframeSelectorOffsets, pickAnimationName } from './keyframes.mjs';
 import { serializeInitialValue } from './property.mjs';
 import { classNameFromSelector } from './selector.mjs';
 import { extractThemeVars, extractSchemeAliases, extractCustomVariantSchemes, BASE_SCHEME, compileReadyTheme } from './theme-vars.mjs';
-import { serializeTokens } from './tokens.mjs';
+import { substituteThemeVars, serializeTokens, coerceUnparsedValue } from './tokens.mjs';
+import { normalizeColorString } from './color.mjs';
 
 /**
  * Default LightningCSS transform options for TailwindParser's visitor.
@@ -145,6 +146,33 @@ class TailwindParser {
             merged.set(k, v);
         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.
+     */
+    buildThemeTokens(resolver) {
+        const out = {};
+        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 = {};
+            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
@@ -281,7 +309,8 @@ 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
@@ -302,8 +331,8 @@ class TailwindParser {
                             const steps = [];
                             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)
+                                const offsets = keyframeSelectorOffsets(frame.selectors);
+                                if (offsets.length === 0)
                                     continue;
                                 const style = {};
                                 const frameDecls = frame.declarations.declarations ?? [];
@@ -311,7 +340,10 @@ class TailwindParser {
                                     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 });
                         },
@@ -332,9 +364,23 @@ 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, resolver) {
+    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
@@ -381,6 +427,7 @@ function emptyOutput() {
         candidates: [],
         schemes: [BASE_SCHEME],
         breakpoints: new Map(),
+        themeTokens: {},
     };
 }
 /**
@@ -452,8 +499,8 @@ function processStyleRule(declarations, className, ctx, nestedRules = []) {
             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
@@ -598,7 +645,7 @@ function applyMediaRule(nested, className, bucket, ctx, ruleSchemeTables, ruleLo
         for (const [k, v] of collectRuleLocalVars(decls))
             nestedLocalVars.set(k, v);
         applyComposedTransformToScheme(schemeBucket, nestedLocalVars);
-        applyComposedShadowToScheme(schemeBucket, nestedLocalVars);
+        applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table);
         bucket[scheme] = schemeBucket;
     }
 }
@@ -635,7 +682,7 @@ function applyInteractiveNestedRule(nested, bucket, ctx, ruleSchemeTables, ruleL
         for (const [k, v] of collectRuleLocalVars(decls))
             nestedLocalVars.set(k, v);
         applyComposedTransformToScheme(schemeBucket, nestedLocalVars);
-        applyComposedShadowToScheme(schemeBucket, nestedLocalVars);
+        applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table);
         bucket[scheme] = schemeBucket;
     }
 }
@@ -701,7 +748,7 @@ function applyNestedSchemeRule(nested, bucket, ctx, ruleSchemeTables, ruleLocalV
     for (const [k, v] of collectRuleLocalVars(innerDecls))
         nestedLocalVars.set(k, v);
     applyComposedTransformToScheme(schemeBucket, nestedLocalVars);
-    applyComposedShadowToScheme(schemeBucket, nestedLocalVars);
+    applyComposedShadowToScheme(schemeBucket, nestedLocalVars, table);
     bucket[targetScheme] = schemeBucket;
 }
 /**
@@ -802,12 +849,13 @@ function applyComposedTransformToScheme(style, ruleLocalVars) {
  * 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, ruleLocalVars) {
+function applyComposedShadowToScheme(style, ruleLocalVars, table) {
     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;
@@ -836,8 +884,9 @@ function applyComposedShadowToScheme(style, ruleLocalVars) {
  * @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, schemes, ruleLocalVars) {
+function applyComposedShadow(bucket, schemes, ruleLocalVars, schemeTables) {
     const rawShadow = ruleLocalVars.get('--tw-shadow');
     const rawShadowColor = ruleLocalVars.get('--tw-shadow-color');
     // Color-only utility (`shadow-red-50`, `shadow-gray-200`, …): emit
@@ -846,10 +895,11 @@ function applyComposedShadow(bucket, schemes, ruleLocalVars) {
     // 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;
@@ -882,35 +932,62 @@ function applyComposedShadow(bucket, schemes, ruleLocalVars) {
  * @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, schemes, ruleLocalVars) {
+function applyComposedRing(bucket, schemes, ruleLocalVars, schemeTables) {
     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 = 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) {
-    const text = unwrapVariableFallback(raw).trim();
-    if (text.length === 0)
+function resolveCustomColorString(raw, table) {
+    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 (text.startsWith('#'))
-        return text;
-    return parseCssColorToHex(text);
+    if (coerced.startsWith('#') || coerced.startsWith('rgb') || coerced.startsWith('hsl'))
+        return coerced;
+    return normalizeColorString(coerced) ?? parseCssColorToHex(coerced);
 }
 /**
  * Parse any CSS color expression into an `#rrggbb` string via culori.
@@ -1016,6 +1093,12 @@ function parseShadowColor(expr) {
         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 };
 }
 /**
@@ -1220,8 +1303,8 @@ function resolveLengthExpression(text) {
     if (evaluated.unit === '%')
         return `${stripTrailingZeros(evaluated.value)}%`;
     if (evaluated.unit === 'rem')
-        return evaluated.value * 16;
-    return evaluated.value;
+        return roundTransformValue(evaluated.value * 16);
+    return roundTransformValue(evaluated.value);
 }
 /**
  * Evaluate a CSS length expression to a `{value, unit}` pair.
@@ -1448,19 +1531,38 @@ function parseArithmeticFactor(tokens, cursor) {
     return number_;
 }
 /**
- * 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) {
     const trimmed = text.trim();
     const percent = /^(-?\d+(?:\.\d+)?)%$/.exec(trimmed);
     if (percent)
-        return Number(percent[1]) / 100;
+        return roundTransformValue(Number(percent[1]) / 100);
     const bare = /^-?\d+(?:\.\d+)?$/.exec(trimmed);
     if (bare)
-        return Number(trimmed);
-    return null;
+        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) {
+    return Math.round(value * 10_000) / 10_000;
 }
 /**
  * Extract the angle from Tailwind's `skewX(12deg)` / `skewY(-5deg)` /