rnwind 0.0.9 → 0.0.11

package/lib/cjs/core/parser/tw-parser.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var node = require('@tailwindcss/node');
+var tailwindNode = require('@tailwindcss/node');
 var oxide = require('@tailwindcss/oxide');
 var culori = require('culori');
 var lightningcss = require('lightningcss');
@@ -14,6 +14,25 @@ var themeVars = require('./theme-vars.cjs');
 var tokens = require('./tokens.cjs');
 var color = require('./color.cjs');
 
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var tailwindNode__namespace = /*#__PURE__*/_interopNamespaceDefault(tailwindNode);
+
 /**
  * Default LightningCSS transform options for TailwindParser's visitor.
  * Its taken from official Tailwind source:
@@ -61,6 +80,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;
     /**
@@ -148,6 +169,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[themeVars.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 === themeVars.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
@@ -159,7 +216,7 @@ class TailwindParser {
             return this.compiler;
         const ready = themeVars.compileReadyTheme(this.config.themeCss, this.themeSchemes);
         try {
-            this.compiler = await node.compile(withInlineTheme(ready), {
+            this.compiler = await tailwindNode.compile(withInlineTheme(ready), {
                 base: process.cwd(),
                 onDependency: () => { },
             });
@@ -167,6 +224,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;
     }
     /**
@@ -339,7 +403,65 @@ class TailwindParser {
             if (!referencedKeyframes.has(name))
                 keyframes$1.delete(name);
         }
-        return { atoms, keyframes: keyframes$1, propertyDefaults, gradientAtoms, hapticAtoms, candidates: [...candidates], schemes, breakpoints };
+        const themeTokens = this.buildThemeTokens(compiledTheme);
+        return { atoms, keyframes: keyframes$1, 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 = tokens.substituteThemeVars(raw, resolver);
+    return color.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__namespace.__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-') ? (color.normalizeColorString(raw) ?? raw) : raw;
+        }
+        return table;
+    }
+    catch {
+        return null;
     }
 }
 /**
@@ -388,6 +510,7 @@ function emptyOutput() {
         candidates: [],
         schemes: [themeVars.BASE_SCHEME],
         breakpoints: new Map(),
+        themeTokens: {},
     };
 }
 /**