rainbowindex 0.1.4 → 0.2.0

package/dist/optimize-6NWJVT6W.mjs

@@ -0,0 +1,24 @@
+// src/cli/optimize.ts
+import { transform } from "lightningcss";
+function optimizeCSS(css) {
+  try {
+    const result = transform({
+      filename: "output.css",
+      code: Buffer.from(css),
+      minify: true,
+      targets: {
+        chrome: 96 << 16,
+        firefox: 91 << 16,
+        safari: 15 << 16 | 4 << 8
+      }
+    });
+    return result.code.toString();
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    const sanitized = msg.replace(/\/[a-zA-Z][\w.-]*(?:\/[\w.-]+)+/g, "<path>").replace(/[A-Z]:\\[\w.-]+(?:\\[\w.-]+)+/gi, "<path>");
+    throw new Error(`CSS optimization failed: ${sanitized}`);
+  }
+}
+export {
+  optimizeCSS
+};

package/dist/safelist-DRk1XXxi.d.ts

@@ -0,0 +1,239 @@
+/**
+ * Generative color system — color domain model, OKLCH ramp generation,
+ * and light-dark() pairing.
+ *
+ * 2 numbers (chroma + hue) → 19-stop palette with automatic dark mode.
+ *
+ * The ramp is sampled from a fixed reference profile (`L_PROFILE` / `C_SHAPE` /
+ * `H_DRIFT`, captured from the reference palette): lightness is a curved,
+ * compressed scale (low suffix → light, high → dark), chroma is an asymmetric
+ * bell peaking at stop 500, and hue is near-flat. Dark mode is a simple ramp
+ * reversal — the dark value is the stop the ramp reaches at the mirror position
+ * (`1000 - suffix`), so stop 500 pivots to itself.
+ */
+/** Per-color dark mode override strategy. */
+type ColorDarkOverride = {
+    strategy: "mirror";
+} | {
+    strategy: "fixed";
+} | {
+    strategy: "shift";
+    chromaDelta: number;
+    hueDelta: number;
+};
+/**
+ * Color definition — discriminated union supporting:
+ * - Generative: `brand: 0.18 330;` → 19-stop palette with auto dark mode
+ * - Explicit: `accent: oklch(0.72 0.21 330);` → single color value
+ * - Pair: `surface: oklch(0.98 0.01 260) / oklch(0.15 0.01 260);` → light/dark pair
+ * - Alias: `theme: brand;` → references another color's palette via var()
+ */
+type ColorDefinition = {
+    type: "generative";
+    chroma: number;
+    hue: number;
+    dark?: ColorDarkOverride;
+    inline?: boolean;
+    parabolic?: boolean;
+    chromaBoost?: boolean;
+} | {
+    type: "explicit";
+    value: string;
+} | {
+    type: "keyword";
+    value: string;
+} | {
+    type: "pair";
+    light: string;
+    dark: string;
+} | {
+    type: "alias";
+    source: string;
+};
+interface DarkModeConfig {
+    mode: "auto" | "off";
+    chromaBoost: number;
+    hueShift: number;
+}
+
+/**
+ * Default theme values — the static data that ships if the user writes no directives.
+ * `directives.ts` (Phase 5) parses user overrides and merges them with these defaults.
+ */
+
+interface TextSize {
+    fontSize: string;
+    lineHeight: string;
+}
+type FluidUnit = "vw" | "vi" | "vmin" | "vmax";
+interface FluidConfig {
+    min: string;
+    max: string;
+    unit?: FluidUnit;
+    multiplier?: number;
+}
+interface AnimationDefinition {
+    shorthand: string;
+    keyframes: string;
+}
+interface Theme {
+    spacing: {
+        base: string;
+    };
+    colors: Record<string, ColorDefinition>;
+    text: Record<string, TextSize>;
+    breakpoints: Record<string, string>;
+    rounded: Record<string, string>;
+    shadows: Record<string, string>;
+    weights: Record<string, number>;
+    easing: Record<string, string>;
+    fluid: FluidConfig;
+    animations: Record<string, AnimationDefinition>;
+    blur: Record<string, string>;
+}
+/**
+ * Keyword corner-shape values. `superellipse(N)` is represented separately
+ * as `{ superellipse: N }` since the numeric parameter isn't a keyword.
+ * Single source for the type, the scale table below, and the @rounded
+ * modifier parser (directives/parsers.ts).
+ */
+declare const CORNER_SHAPE_KEYWORDS: readonly ["round", "scoop", "bevel", "notch", "square", "squircle"];
+type CornerShapeKeyword = (typeof CORNER_SHAPE_KEYWORDS)[number];
+type CornerShape = CornerShapeKeyword | {
+    superellipse: number;
+};
+declare const defaultTheme: Theme;
+
+/**
+ * ri() — class merge function.
+ * Replaces both tailwind-merge and clsx.
+ *
+ * Re-exported from the package's main and browser entries as `ri()`.
+ * Right-to-left scan: rightmost class wins when two classes set the same CSS property.
+ *
+ * ## Concurrency
+ *
+ * The default `ri()` export uses module-level state published by
+ * `finalizeCompilationContext()`. This is safe for single-compilation
+ * environments (typical browser usage, single Vite build, PostCSS).
+ *
+ * In multi-tenant / SSR / concurrent-compilation environments, use
+ * `createRi(snapshot)` instead — it captures a frozen snapshot of the
+ * compilation state and uses its own independent cache:
+ *
+ *   const snapshot = finalizeCompilationContext(ctx);
+ *   const ri = createRi(snapshot);
+ */
+type ClassInput = string | false | null | undefined | ClassInput[];
+declare const DEFAULT_TEXT_SIZES: readonly ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl"];
+interface CompilationContext {
+    customStaticProps: Record<string, string[]>;
+    textSizes: Set<string>;
+    fontFamilies: Set<string>;
+    colorNames: Set<string>;
+}
+/**
+ * Frozen snapshot of compilation state for SSR-safe ri() instances.
+ * Created by finalizeCompilationContext() and consumed by createRi().
+ */
+interface CompilationSnapshot {
+    readonly customStaticProps: Readonly<Record<string, string[]>>;
+    readonly textSizes: ReadonlySet<string>;
+    readonly fontFamilies: ReadonlySet<string>;
+    readonly colorNames: ReadonlySet<string>;
+}
+/**
+ * Merge class names with conflict resolution (replaces both tailwind-merge and clsx).
+ * Rightmost class wins when two classes set the same CSS property.
+ * Falsy values are filtered.
+ *
+ * @example
+ * ri('p-2 bg-red-500', 'p-4')           // → 'bg-red-500 p-4'
+ * ri('px-2 py-1', 'p-4')                // → 'p-4' (shorthand wins)
+ * ri('flex', isActive && 'bg-blue-500') // → 'flex bg-blue-500'
+ * ri('text-lg text-red-500')            // → 'text-lg text-red-500' (different properties)
+ */
+declare function ri(...inputs: ClassInput[]): string;
+/**
+ * Create an isolated ri() instance bound to a specific compilation snapshot.
+ * Use this in SSR or multi-compilation environments where the global ri()
+ * would be corrupted by concurrent compilations.
+ *
+ * @example
+ * const snapshot = finalizeCompilationContext(ctx);
+ * const ri = createRi(snapshot);
+ * ri('p-2 bg-red-500', 'p-4') // → 'bg-red-500 p-4'
+ */
+declare function createRi(snapshot?: CompilationSnapshot): (...inputs: ClassInput[]) => string;
+/**
+ * Create a fresh compilation context.
+ * Called at the start of each compile() pass.
+ */
+declare function createCompilationContext(): CompilationContext;
+/**
+ * Register a custom utility's CSS properties in the compilation context.
+ * Called by the engine when processing @utility directives.
+ */
+declare function registerCustomUtility(ctx: CompilationContext, name: string, properties: string[]): void;
+/**
+ * Register custom text sizes so the merge function correctly classifies
+ * text-{custom} as a font-size utility rather than a color utility.
+ */
+declare function registerCustomTextSizes(ctx: CompilationContext, sizes: string[]): void;
+/**
+ * Register custom font family names so the merge function correctly classifies
+ * font-{custom} as a font-family utility rather than a font-weight utility.
+ */
+declare function registerCustomFontFamilies(ctx: CompilationContext, families: string[]): void;
+/**
+ * Register the resolved theme's color names so the merge function classifies
+ * bare flat colors (border-accent for `@color { accent: … }`) as color
+ * utilities rather than width/weight ones. Shaded forms (accent-500) already
+ * match the shade pattern and need no registration.
+ */
+declare function registerColorNames(ctx: CompilationContext, names: string[]): void;
+declare function finalizeCompilationContext(ctx: CompilationContext): CompilationSnapshot;
+
+/**
+ * `safelist()` — declare utility classes that must be emitted regardless of
+ * whether the consumer's source files reference them directly.
+ *
+ * At runtime this is a plain identity-join: pass any number of strings (and
+ * falsy values, which are filtered) and receive a single space-joined string
+ * suitable for `className`. The function performs no global registration, has
+ * no side effects, and is tree-shake-safe.
+ *
+ * The build-time meaning comes from the scanner: when the source-file
+ * extractor encounters a `safelist(...)` call, it extracts every literal
+ * string argument as a class declaration — so the classes get emitted in the
+ * final CSS even though the consumer's source never names them literally.
+ *
+ * Primary use case is component libraries that ship classNames inside their
+ * bundled code (e.g. a curated icon set whose strokes are described by
+ * utility classes). The library wraps its declarations in `safelist(...)`,
+ * the consumer's setup points the scanner at the library's `dist/`, and the
+ * classes flow through unchanged. The Vite plugin auto-discovers libraries
+ * that opt in via a `rainbowindex.safelistSources` field in their
+ * `package.json`, so consumers typically don't have to add `@source` lines
+ * by hand.
+ *
+ *   const ICON_BASE = safelist("stroke-cap-round", "stroke-join-round");
+ *   const SidebarLeft = defineIcon({
+ *     primitives: SIDEBAR,
+ *     className: safelist(ICON_BASE, "-scale-x-100"),
+ *   });
+ *
+ * Scanner contract:
+ * - Only STATIC string literals at the call site are extracted. Values
+ *   passed through variables (`safelist(ICON_BASE, ...)`) won't be re-read
+ *   at the outer call site, but the original `safelist("stroke-cap-round",
+ *   ...)` that produced `ICON_BASE` is itself extracted, so the classes are
+ *   still covered.
+ * - Template literals with no `${…}` interpolation are extracted; templates
+ *   with interpolation are skipped.
+ * - Falsy arguments are dropped at runtime so conditional fragments compose
+ *   naturally: `safelist("flex", side === "left" && "flex-row-reverse")`.
+ */
+declare function safelist(...parts: ReadonlyArray<string | false | null | undefined>): string;
+
+export { type AnimationDefinition as A, type ColorDefinition as C, DEFAULT_TEXT_SIZES as D, type FluidConfig as F, type TextSize as T, type CompilationContext as a, type CompilationSnapshot as b, type Theme as c, createCompilationContext as d, createRi as e, defaultTheme as f, finalizeCompilationContext as g, registerCustomFontFamilies as h, registerCustomTextSizes as i, registerCustomUtility as j, ri as k, type DarkModeConfig as l, type CornerShape as m, registerColorNames as r, safelist as s };

package/dist/vite.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vite';
+
+declare function rainbowindexVite(): Plugin;
+
+export { rainbowindexVite as default };

package/dist/vite.mjs

@@ -0,0 +1,320 @@
+import {
+  postcss_default
+} from "./chunk-KCSNR2TV.mjs";
+import {
+  expandApplyGroups,
+  findClosingBrace,
+  hasRIActivation,
+  isAtRuleBoundary,
+  isAtRuleNameChar,
+  isSourceFile
+} from "./chunk-RPXZ3O6R.mjs";
+import {
+  devWarn
+} from "./chunk-5N4GPK26.mjs";
+
+// src/integrations/vite.ts
+import { existsSync } from "fs";
+import { access, readFile, readdir } from "fs/promises";
+import { join, relative, resolve } from "path";
+var CSS_FILE_RE = /\.(?:module\.)?css$/;
+var REMOVAL_BODY_DIRECTIVES = /* @__PURE__ */ new Set([
+  "color",
+  "text",
+  "spacing",
+  "breakpoint",
+  "rounded",
+  "shadow",
+  "weight",
+  "ease",
+  "blur",
+  "z",
+  "animate",
+  "leading",
+  "tracking",
+  "opacity",
+  "duration"
+]);
+var KEYWORD_BODY_DIRECTIVES = /* @__PURE__ */ new Set(["fluid"]);
+var REMOVAL_RE = /!([\w][\w-]*)\s*;/g;
+var FLUID_KEYWORD_RE = /\b(no-parabolic|parabolic|no-shift|shift)\s*;?/g;
+var COLOR_FLAG_RE = /(?<=[{;\s]|^)(inline|no-parabolic|parabolic)\s*(?:;|(?=}))/g;
+function rewriteTopLevel(body, rewrite) {
+  if (!body.includes("{")) return rewrite(body);
+  let out = "";
+  let segStart = 0;
+  let depth = 0;
+  for (let i = 0; i < body.length; i++) {
+    const ch = body[i];
+    if (ch === "{") {
+      if (depth === 0) {
+        out += rewrite(body.slice(segStart, i));
+        segStart = i;
+      }
+      depth++;
+    } else if (ch === "}") {
+      if (depth > 0) depth--;
+      if (depth === 0) {
+        out += body.slice(segStart, i + 1);
+        segStart = i + 1;
+      }
+    }
+  }
+  out += depth === 0 ? rewrite(body.slice(segStart)) : body.slice(segStart);
+  return out;
+}
+function rewriteColorOptionFlag(_match, keyword) {
+  if (keyword === "inline") return "--ri-inline: true;";
+  const negated = keyword.startsWith("no-");
+  return `--ri-${negated ? keyword.slice(3) : keyword}: ${negated ? "false" : "true"};`;
+}
+function rewriteColorOptionFlags(body) {
+  if (!body.includes("{")) return body;
+  let out = "";
+  let segStart = 0;
+  let depth = 0;
+  let blockStart = -1;
+  for (let i = 0; i < body.length; i++) {
+    const ch = body[i];
+    if (ch === "{") {
+      if (depth === 0) {
+        out += body.slice(segStart, i + 1);
+        blockStart = i + 1;
+      }
+      depth++;
+    } else if (ch === "}") {
+      if (depth > 0) depth--;
+      if (depth === 0 && blockStart !== -1) {
+        out += body.slice(blockStart, i).replace(COLOR_FLAG_RE, rewriteColorOptionFlag);
+        out += "}";
+        segStart = i + 1;
+        blockStart = -1;
+      }
+    }
+  }
+  out += body.slice(segStart);
+  return out;
+}
+function rewriteDirectiveBodies(code) {
+  let out = "";
+  let last = 0;
+  let i = 0;
+  while (i < code.length) {
+    const at = code.indexOf("@", i);
+    if (at === -1) break;
+    if (!isAtRuleBoundary(code, at)) {
+      i = at + 1;
+      continue;
+    }
+    let nameEnd = at + 1;
+    while (nameEnd < code.length && isAtRuleNameChar(code.charCodeAt(nameEnd))) nameEnd++;
+    const name = code.slice(at + 1, nameEnd);
+    const removals = REMOVAL_BODY_DIRECTIVES.has(name);
+    const keywords = KEYWORD_BODY_DIRECTIVES.has(name);
+    if (!removals && !keywords) {
+      i = nameEnd;
+      continue;
+    }
+    let braceIdx = nameEnd;
+    while (braceIdx < code.length) {
+      const ch = code[braceIdx];
+      if (ch === "{" || ch === ";" || ch === "}") break;
+      braceIdx++;
+    }
+    if (code[braceIdx] !== "{") {
+      i = braceIdx + 1;
+      continue;
+    }
+    const close = findClosingBrace(code, braceIdx);
+    const bodyStart = braceIdx + 1;
+    const bodyEnd = close === -1 ? code.length : close;
+    let rewritten = rewriteTopLevel(code.slice(bodyStart, bodyEnd), (span) => {
+      let s = span;
+      if (removals) s = s.replace(REMOVAL_RE, "--ri-rm: $1;");
+      if (keywords) {
+        s = s.replace(FLUID_KEYWORD_RE, (_, kw) => {
+          const negated = kw.startsWith("no-");
+          return `--ri-${negated ? kw.slice(3) : kw}: ${negated ? "false" : "true"};`;
+        });
+      }
+      return s;
+    });
+    if (name === "color") rewritten = rewriteColorOptionFlags(rewritten);
+    out += code.slice(last, bodyStart) + rewritten;
+    last = bodyEnd;
+    i = bodyEnd;
+  }
+  if (last === 0) return code;
+  return out + code.slice(last);
+}
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", "dist"]);
+var POSTCSS_CONFIG_FILES = [
+  "postcss.config.js",
+  "postcss.config.mjs",
+  "postcss.config.ts",
+  "postcss.config.cjs"
+];
+function isIgnorableDirectoryReadError(err) {
+  return !!err && typeof err === "object" && "code" in err && (err.code === "ENOENT" || err.code === "ENOTDIR" || err.code === "EACCES" || err.code === "EPERM");
+}
+function hasLocalPostCSSConfig(root) {
+  return POSTCSS_CONFIG_FILES.some((name) => existsSync(resolve(root, name)));
+}
+function rainbowindexVite() {
+  let root = process.cwd();
+  let logger;
+  const riCSSFiles = /* @__PURE__ */ new Set();
+  const fileVersions = /* @__PURE__ */ new Map();
+  let hotUpdateCount = 0;
+  const PRUNE_INTERVAL = 50;
+  return {
+    name: "rainbowindex",
+    enforce: "pre",
+    async config(config) {
+      root = config.root ?? process.cwd();
+      if (!hasLocalPostCSSConfig(root)) {
+        return {
+          css: {
+            postcss: {
+              plugins: [postcss_default()]
+            }
+          }
+        };
+      }
+      return {};
+    },
+    configureServer(server) {
+      root = server.config?.root ?? process.cwd();
+      logger = {
+        info: (msg) => server.config.logger?.info?.(msg, { timestamp: true }),
+        warn: (msg) => server.config.logger?.warn?.(msg, { timestamp: true })
+      };
+      if (hasLocalPostCSSConfig(root)) {
+        logger.info("[rainbowindex] Using local PostCSS config \u2014 skipped auto-injection.");
+      } else {
+        logger.info("[rainbowindex] Injected PostCSS plugin (no local postcss.config.* found).");
+      }
+      server.httpServer?.once("listening", async () => {
+        const cssFiles = [];
+        const fileMap = server.moduleGraph.fileToModulesMap;
+        if (fileMap) {
+          for (const [file] of fileMap) {
+            if (CSS_FILE_RE.test(file)) {
+              cssFiles.push(file);
+            }
+          }
+        }
+        if (cssFiles.length === 0) {
+          const diskCSS = await findCSSFilesOnDisk(root);
+          cssFiles.push(...diskCSS);
+        }
+        await Promise.all(cssFiles.map((file) => checkCSSFileAsync(file)));
+        if (riCSSFiles.size === 0) {
+          logger?.warn(
+            `[RI-1602] rainbowindex Vite plugin is registered but no CSS entry with \`@import "rainbowindex"\` was found under ${root}. Create one (e.g. src/index.css) and import it from your app entry, then restart the dev server. Or run \`rainbowindex init\` to wire it up automatically.`
+          );
+        } else {
+          const list = [...riCSSFiles].map((f) => relative(root, f).replaceAll("\\", "/")).join(", ");
+          logger?.info(`[rainbowindex] CSS entries: ${list}`);
+        }
+      });
+    },
+    transform(code, id) {
+      const file = id.split("?")[0];
+      if (CSS_FILE_RE.test(file)) {
+        fileVersions.set(file, (fileVersions.get(file) ?? 0) + 1);
+        if (hasRIActivation(code)) {
+          riCSSFiles.add(file);
+          let safe = rewriteDirectiveBodies(code);
+          const expandWarnings = [];
+          safe = expandApplyGroups(safe, expandWarnings);
+          for (const w of expandWarnings) {
+            (logger?.warn ?? console.warn)(`[rainbowindex] ${w}`);
+          }
+          return safe !== code ? safe : null;
+        }
+        riCSSFiles.delete(file);
+      }
+      return null;
+    },
+    async handleHotUpdate({ file, server, modules }) {
+      if (++hotUpdateCount % PRUNE_INTERVAL === 0) {
+        await pruneDeletedFiles();
+      }
+      if (CSS_FILE_RE.test(file)) {
+        await checkCSSFileAsync(file);
+        return;
+      }
+      if (!isSourceFile(file)) return;
+      const extraModules = [];
+      for (const cssFile of riCSSFiles) {
+        const mods = server.moduleGraph.getModulesByFile(cssFile);
+        if (mods) {
+          for (const mod of mods) {
+            if (!modules.includes(mod)) {
+              extraModules.push(mod);
+            }
+          }
+        }
+      }
+      if (extraModules.length > 0) {
+        return [...modules, ...extraModules];
+      }
+    }
+  };
+  async function pruneDeletedFiles() {
+    const tracked = /* @__PURE__ */ new Set([...riCSSFiles, ...fileVersions.keys()]);
+    const checks = [...tracked].map(async (file) => {
+      try {
+        await access(file);
+      } catch {
+        riCSSFiles.delete(file);
+        fileVersions.delete(file);
+      }
+    });
+    await Promise.all(checks);
+  }
+  async function collectCSSFiles(dir, results) {
+    let entries;
+    try {
+      entries = await readdir(dir, { withFileTypes: true });
+    } catch (err) {
+      if (!isIgnorableDirectoryReadError(err)) {
+        const msg = err instanceof Error ? err.message : String(err);
+        devWarn(`[RI-1601] Failed to scan CSS files in "${dir}": ${msg}`);
+      }
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (SKIP_DIRS.has(entry.name) || entry.name.startsWith(".")) continue;
+        await collectCSSFiles(join(dir, entry.name), results);
+      } else if (entry.isFile() && CSS_FILE_RE.test(entry.name)) {
+        results.push(join(dir, entry.name));
+      }
+    }
+  }
+  async function findCSSFilesOnDisk(root2) {
+    const results = [];
+    await collectCSSFiles(root2, results);
+    return results;
+  }
+  async function checkCSSFileAsync(file) {
+    const versionBefore = fileVersions.get(file) ?? 0;
+    try {
+      const raw = await readFile(file, "utf-8");
+      if ((fileVersions.get(file) ?? 0) !== versionBefore) return;
+      if (hasRIActivation(raw)) {
+        riCSSFiles.add(file);
+      } else {
+        riCSSFiles.delete(file);
+      }
+    } catch (_err) {
+      if ((fileVersions.get(file) ?? 0) !== versionBefore) return;
+      riCSSFiles.delete(file);
+    }
+  }
+}
+export {
+  rainbowindexVite as default
+};