rnwind 0.0.10 → 0.0.12

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';
@@ -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;
     /**
@@ -158,7 +161,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[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;
@@ -192,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;
     }
     /**
@@ -381,6 +400,50 @@ 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;
+    }
+}
 /**
  * Wrap an error from `@tailwindcss/node`'s compiler or `lightningcss`'s
  * transform with a `rnwind:` prefix so the user sees a clear "this came
@@ -1145,6 +1208,12 @@ function parseRgbaExpression(text) {
     if (typeof alphaText === 'string') {
         opacity = alphaText.endsWith('%') ? Number(alphaText.slice(0, -1)) / 100 : Number(alphaText);
     }
+    // CSS Color 4: a `none` (or otherwise non-numeric) alpha parses to NaN here.
+    // Its used value when compositing is 0 (fully transparent) — and crucially
+    // RN throws on a NaN `shadowOpacity`, so collapse any non-finite alpha to 0
+    // before it can reach a numeric style prop.
+    if (!Number.isFinite(opacity))
+        opacity = 0;
     const hex = `#${[r, g, b]
         .map((n) => Math.max(0, Math.min(255, Math.round(Number(n))))
         .toString(16)