rnwind 0.0.2 → 0.0.4

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

@@ -27,14 +27,18 @@ const DEFAULT_TRANSFORM_OPTIONS = {
     },
     include: lightningcss.Features.Nesting | lightningcss.Features.MediaQueries,
     exclude: lightningcss.Features.LogicalProperties | lightningcss.Features.DirSelector | lightningcss.Features.LightDark,
-    targets: {
-        // eslint-disable-next-line sonarjs/no-identical-expressions
-        safari: (16 << 16) | (4 << 8),
-        // eslint-disable-next-line camelcase, sonarjs/no-identical-expressions
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-    },
+    // NOTE: deliberately no `targets`. With targets that include
+    // color-mix-supporting browsers (Safari 16.4+, Chrome 111+, …),
+    // lightningcss EVALUATES `color-mix(in oklab, var(--theme-color)
+    // <pct>%, transparent)` at parse time using whichever value of
+    // `--theme-color` it sees first in the cascade. Tailwind v4 emits
+    // exactly this shape for `<prop>-<themed>/<N>` utilities (e.g.
+    // `border-text/20`), so the resulting RGB color is locked to ONE
+    // scheme — every variant gets the same value. By dropping targets,
+    // lightningcss leaves color-mix as an unparsed function and our
+    // per-scheme `unparsedToEntries` substitution path runs instead,
+    // producing the right rgba(...) for each scheme. Targets in this
+    // pipeline are otherwise unused — we never re-emit CSS from the AST.
 };
 /**
  * Parses one source file's Tailwind usage into RN-ready style objects.
@@ -58,6 +62,13 @@ class TailwindParser {
     compiler;
     themeSchemes;
     schemeAliases;
+    /**
+     * Scheme names declared via `@custom-variant <name> …;`. A scheme
+     * listed here but absent from {@link themeSchemes} (no `@variant`
+     * override block) draws its values from the base `@theme` — the
+     * standard Tailwind v4 "light defaults + dark override" shape.
+     */
+    customVariantSchemes;
     /**
      * Memoise `resolveCandidates` results by candidate-list fingerprint.
      * Fast Refresh hits this on every save: oxide's scan is cheap, but
@@ -81,19 +92,42 @@ class TailwindParser {
         this.config = config;
         this.themeSchemes = themeVars.extractThemeVars(config.themeCss);
         this.schemeAliases = themeVars.extractSchemeAliases(config.themeCss);
+        this.customVariantSchemes = themeVars.extractCustomVariantSchemes(config.themeCss);
         this.scanner = new oxide.Scanner({ sources: config.sources ? [...config.sources] : [] });
     }
     /**
-     * Schemes declared by the user — either every `@variant <name>` block
-     * found (in declaration order) or just `['base']` for themes without
-     * any variants. Used to decide how many per-scheme buckets the
-     * per-atom resolver fills. Exposed publicly so Metro integration can
-     * hand the names to the `.d.ts` generator without a full parse.
+     * Schemes declared by the user — the union of every `@custom-variant
+     * <name>` declaration and every `@variant <name>` block, or just
+     * `['base']` for themes without any. Used to decide how many
+     * per-scheme buckets the per-atom resolver fills. Exposed publicly so
+     * Metro integration can hand the names to the `.d.ts` generator
+     * without a full parse.
+     *
+     * Both sources matter. `@variant` blocks alone miss the common
+     * Tailwind v4 shape where the light palette sits in the base `@theme`
+     * and only `@variant dark` overrides it: there `light` exists solely
+     * as a `@custom-variant` and would otherwise be dropped, collapsing
+     * every themed atom to a single bucket that can't switch.
+     * `@custom-variant` order wins (it's where users enumerate their
+     * schemes); any `@variant`-only scheme is appended after.
      * @returns Scheme names.
      */
     get declaredSchemes() {
-        const variants = [...this.themeSchemes.keys()].filter((name) => name !== themeVars.BASE_SCHEME);
-        return variants.length > 0 ? variants : [themeVars.BASE_SCHEME];
+        const ordered = [];
+        const seen = new Set();
+        for (const name of this.customVariantSchemes) {
+            if (seen.has(name))
+                continue;
+            seen.add(name);
+            ordered.push(name);
+        }
+        for (const name of this.themeSchemes.keys()) {
+            if (name === themeVars.BASE_SCHEME || seen.has(name))
+                continue;
+            seen.add(name);
+            ordered.push(name);
+        }
+        return ordered.length > 0 ? ordered : [themeVars.BASE_SCHEME];
     }
     /**
      * Build an effective var table for one scheme — base vars overridden by
@@ -186,6 +220,19 @@ class TailwindParser {
         catch (error) {
             throw wrapThemeError(error);
         }
+        // Tailwind v4 emits opacity-suffixed themed colors as a pre-resolved
+        // sRGB fallback PLUS a `@supports`-gated var()-based override:
+        //   border-color: color-mix(in srgb, #0A0A0A 20%, transparent);
+        //   @supports (color: color-mix(in lab, red, red)) {
+        //     border-color: color-mix(in oklab, var(--color-text) 20%, transparent);
+        //   }
+        // Lightningcss takes the OUTER fallback (locked to whichever scheme
+        // the compiler resolved first), and our per-scheme substitution
+        // never gets a chance. Unwrap the @supports so the var()-based
+        // declaration overrides the fallback in the same rule — lightningcss
+        // emits the override as `unparsed` and the parser's themeVars-aware
+        // path produces correct rgba per scheme.
+        css = unwrapColorMixSupports(css);
         // `compiler.build(candidates)` memoizes across calls — it returns CSS for
         // every candidate the compiler has EVER seen in this process. To keep
         // parser output pure per-call we restrict outputs to this call's
@@ -918,20 +965,24 @@ function parseFirstShadow(raw) {
  * @returns Pixel lengths + the remainder text (color expression).
  */
 function extractShadowLengths(head) {
-    const lengthRegex = /(?<![A-Za-z(])-?\d*\.?\d+(?:px|rem|em|%)?/g;
+    // Take ONLY the leading run of length tokens, stopping at the first
+    // non-length token (the color). A previous global digit-regex scanned
+    // the whole string, so a <4-length shadow like `0 1px 1px rgb(0 0 0 /
+    // 0.05)` stole a digit out of the color expression — corrupting the
+    // alpha (opacity) or a digit-leading hex. Whitespace-splitting can't
+    // reach inside the color because we break as soon as a token isn't a
+    // bare/`px`/`rem`/`em`/`%` length.
+    // Unambiguous integer-or-decimal (no `\d*\.?\d+` overlap) so there's no
+    // super-linear backtracking on long digit runs.
+    const isLength = /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|%)?$/;
+    const parts = head.split(/\s+/);
     const lengths = [];
-    const matches = [];
-    let next = lengthRegex.exec(head);
-    while (next !== null && lengths.length < 4) {
-        matches.push({ text: next[0], index: next.index });
-        lengths.push(parseLengthToken(next[0]));
-        next = lengthRegex.exec(head);
-    }
-    let remainder = head;
-    for (const { text, index } of matches.toReversed()) {
-        remainder = `${remainder.slice(0, index)}${remainder.slice(index + text.length)}`;
+    let index = 0;
+    while (index < parts.length && lengths.length < 4 && isLength.test(parts[index])) {
+        lengths.push(parseLengthToken(parts[index]));
+        index += 1;
     }
-    return { lengths, remainder };
+    return { lengths, remainder: parts.slice(index).join(' ') };
 }
 /**
  * Coerce one shadow length token into a pixel number. Accepts bare
@@ -1470,6 +1521,68 @@ function resolveAngleExpression(text) {
  * @param css Tailwind's compiled CSS.
  * @returns Map of custom-property name → resolved value.
  */
+/**
+ * Strip `\@supports (color: color-mix(in lab, red, red)) { … }` wrappers
+ * from Tailwind v4's compiled CSS, hoisting their inner declarations up
+ * to the parent rule.
+ *
+ * Tailwind emits opacity-suffixed themed colors with both a pre-resolved
+ * sRGB fallback AND a var()-based override gated behind the color-mix
+ * `\@supports` clause. The OUTER fallback hard-codes a single scheme's
+ * value of the theme token; the inner override is var()-based and
+ * substitutes correctly per scheme. By unwrapping the gate, the inner
+ * declaration becomes a sibling of the fallback in the same rule body —
+ * lightningcss takes the LATER one (the var()-based unparsed form), and
+ * the parser's themeVars-aware path produces correct rgba per scheme.
+ * Modern RN-targeted browsers all support color-mix anyway, so dropping
+ * the gating is safe.
+ * @param css Tailwind-compiled CSS.
+ * @returns CSS with the color-mix support gates unwrapped.
+ */
+function unwrapColorMixSupports(css) {
+    const guard = '@supports (color: color-mix(in lab, red, red))';
+    let out = '';
+    let cursor = 0;
+    while (cursor < css.length) {
+        const head = css.indexOf(guard, cursor);
+        if (head === -1) {
+            out += css.slice(cursor);
+            break;
+        }
+        out += css.slice(cursor, head);
+        const brace = css.indexOf('{', head);
+        if (brace === -1) {
+            out += css.slice(head);
+            break;
+        }
+        const blockEnd = findMatchingClose(css, brace + 1);
+        if (blockEnd === -1) {
+            out += css.slice(head);
+            break;
+        }
+        const inner = css.slice(brace + 1, blockEnd);
+        // Only unwrap when the gated declaration substitutes a USER theme
+        // token (`var(--color-…)`). Tailwind also gates `--tw-*` internal
+        // composers (shadow color, ring color, …) on the same supports
+        // clause; their outer fallback is the optimized hex/oklch value
+        // the parser's own composed-prop pass needs (`applyComposedShadow`
+        // reads `--tw-shadow-color` from the rule's local vars). Unwrapping
+        // them would replace the resolvable color with an unresolvable
+        // `color-mix(... var(--tw-shadow-alpha), transparent)` text and
+        // break the composed-shadow path.
+        // Keep the gate intact for non-themed colors — the outer fallback
+        // wins, which is what Tailwind intended.
+        out += inner.includes('var(--color-') ? inner : css.slice(head, blockEnd + 1);
+        cursor = blockEnd + 1;
+    }
+    return out;
+}
+/**
+ * Extract every `--name: value` declaration from the `:root` blocks in
+ * Tailwind's compiled CSS into a flat map.
+ * @param css Tailwind-compiled CSS.
+ * @returns Map of custom-property name → resolved value.
+ */
 function extractRootCustomProperties(css) {
     const out = new Map();
     let cursor = 0;