rnwind 0.0.10 → 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;
     /**
@@ -160,7 +181,16 @@ class TailwindParser {
      */
     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;
@@ -186,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: () => { },
             });
@@ -194,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;
     }
     /**
@@ -383,6 +420,50 @@ 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;
+    }
+}
 /**
  * Wrap an error from `@tailwindcss/node`'s compiler or `lightningcss`'s
  * transform with a `rnwind:` prefix so the user sees a clear "this came