rnwind 0.0.9 → 0.0.11

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

@@ -1,3 +1,4 @@
+import * as tailwindNode from '@tailwindcss/node';
 import { compile } from '@tailwindcss/node';
 import { Scanner } from '@tailwindcss/oxide';
 import { formatHex } from 'culori';
@@ -9,7 +10,7 @@ import { keyframesName, keyframeSelectorOffsets, pickAnimationName } from './key
 import { serializeInitialValue } from './property.mjs';
 import { classNameFromSelector } from './selector.mjs';
 import { extractThemeVars, extractSchemeAliases, extractCustomVariantSchemes, BASE_SCHEME, compileReadyTheme } from './theme-vars.mjs';
-import { serializeTokens, substituteThemeVars, coerceUnparsedValue } from './tokens.mjs';
+import { substituteThemeVars, serializeTokens, coerceUnparsedValue } from './tokens.mjs';
 import { normalizeColorString } from './color.mjs';
 
 /**
@@ -59,6 +60,8 @@ class TailwindParser {
     config;
     scanner;
     compiler;
+    /** Full resolved base theme (built-in palette + user `@theme`), colors lowered to sRGB. Source for `useColor` / `useToken`. */
+    baseThemeTokens = null;
     themeSchemes;
     schemeAliases;
     /**
@@ -146,6 +149,42 @@ 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 = {};
+        // BASE: the full resolved theme (built-in palette + user `@theme`). The
+        // runtime merges this under the active scheme, so `useColor('pink-500')`
+        // and `useColor('<your-token>')` both resolve in every scheme.
+        if (this.baseThemeTokens)
+            out[BASE_SCHEME] = this.baseThemeTokens;
+        // VARIANTS: only the per-scheme overrides the user wrote (`.dark { … }` /
+        // `@variant dark { … }`) — they layer on top of base at runtime.
+        for (const scheme of this.themeSchemes.keys()) {
+            if (scheme === BASE_SCHEME)
+                continue;
+            const userTable = this.themeSchemes.get(scheme);
+            if (!userTable || userTable.size === 0)
+                continue;
+            const schemeResolver = new Map(resolver);
+            for (const [k, v] of this.effectiveVars(scheme))
+                schemeResolver.set(k, v);
+            const table = {};
+            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
@@ -165,6 +204,13 @@ class TailwindParser {
         catch (error) {
             throw wrapThemeError(error);
         }
+        // Load the resolved design system ONCE to capture the FULL theme — the
+        // built-in palette (`pink-500`, …) plus the user's `@theme` tokens — so
+        // `useColor` / `useToken` resolve any theme value, not just the utilities
+        // a class happened to use (Tailwind tree-shakes `:root`, so the compiled
+        // CSS alone never carries the full palette). Best-effort: a load failure
+        // just narrows the hooks to the user's own tokens.
+        this.baseThemeTokens = await loadBaseThemeTokens(ready);
         return this.compiler;
     }
     /**
@@ -337,7 +383,65 @@ 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;
+}
+/** Theme token families excluded from the registered base table — pure Tailwind internals with no `useColor`/`useToken` value. */
+const INTERNAL_TOKEN_PREFIXES = ['--tw-', '--default-'];
+/**
+ * `@tailwindcss/node`'s `__unstable__loadDesignSystem` — exists at runtime but
+ * isn't in the package's published types, so it's accessed through a narrowed
+ * cast rather than a named import. Returns `undefined` when the (unstable) API
+ * isn't present, so {@link loadBaseThemeTokens} degrades gracefully.
+ */
+const loadDesignSystem = tailwindNode.__unstable__loadDesignSystem;
+/**
+ * Load the FULL resolved Tailwind theme (built-in palette + the user's
+ * `@theme`) via the design-system API and flatten it to an RN-safe token
+ * table — `--color-*` values lowered to sRGB, everything else passed through.
+ * This is what lets `useColor` / `useToken` resolve ANY theme token, including
+ * built-ins a class never used (Tailwind tree-shakes the compiled `:root`, so
+ * the compiled CSS alone can't supply the full palette). Internal `--tw-*` /
+ * `--default-*` families are dropped. Returns `null` on any failure so the
+ * caller degrades to the user's own `@theme` tokens.
+ * @param themeCss Compile-ready theme CSS (variants stripped, custom-variants added).
+ * @returns Flattened base token table, or null.
+ */
+async function loadBaseThemeTokens(themeCss) {
+    if (typeof loadDesignSystem !== 'function')
+        return null;
+    try {
+        const design = await loadDesignSystem(themeCss, { base: process.cwd() });
+        const entries = design.theme?.entries?.();
+        if (!entries)
+            return null;
+        const table = {};
+        for (const [name, entry] of entries) {
+            const raw = entry?.value;
+            if (typeof raw !== 'string')
+                continue;
+            if (INTERNAL_TOKEN_PREFIXES.some((prefix) => name.startsWith(prefix)))
+                continue;
+            table[name] = name.startsWith('--color-') ? (normalizeColorString(raw) ?? raw) : raw;
+        }
+        return table;
+    }
+    catch {
+        return null;
     }
 }
 /**
@@ -386,6 +490,7 @@ function emptyOutput() {
         candidates: [],
         schemes: [BASE_SCHEME],
         breakpoints: new Map(),
+        themeTokens: {},
     };
 }
 /**