rainbowindex 0.4.0 → 0.5.0

package/dist/cli.mjs

@@ -2,28 +2,30 @@
 import {
   CSS_ENTRY_CANDIDATES,
   enumerateClassNames
-} from "./chunk-YLB6FGIG.mjs";
+} from "./chunk-NXJZX6KI.mjs";
 import {
   DEFAULT_EXCLUDES,
   DEFAULT_PATTERNS,
   compileScannedProject,
   getFontPreloadLinks
-} from "./chunk-4SVFFDS2.mjs";
+} from "./chunk-DT5HYIM3.mjs";
 import {
   MAX_DIRECTIVE_INPUT_SIZE,
+  codepointCompare,
+  extractClassesFromSource,
   extractDirectives,
   hasApplyLikeDirective,
   hasRIActivation,
   listVariants,
   resolveDirectives
-} from "./chunk-6DAHUFNU.mjs";
+} from "./chunk-ZI5ZYNSU.mjs";
 import {
   devWarn
-} from "./chunk-5Y7EXXLS.mjs";
+} from "./chunk-KRZL4IDK.mjs";
 
 // src/entries/cli.ts
 import { realpathSync } from "fs";
-import { resolve as resolve6 } from "path";
+import { resolve as resolve7 } from "path";
 import { pathToFileURL } from "url";
 
 // src/cli/args.ts
@@ -153,6 +155,22 @@ Examples:
   rainbowindex generate-types
   rainbowindex generate-types --strict --css src/styles.css`
   },
+  scan: {
+    summary: "Show what the class scanner extracts (debugging)",
+    usage: "  rainbowindex scan <file|glob...>",
+    flags: [],
+    positionals: "globs",
+    body: `Output:
+  One line per extracted class candidate, per file. Scanner warnings (skipped
+  over-long lines, unreadable files) print to stderr with [RI-NNNN] codes.
+  A class missing here was never seen by the scanner \u2014 check how it appears
+  in the markup. A class listed here that still does not generate fails
+  later \u2014 check the build warnings.
+
+Examples:
+  rainbowindex scan src/components/icons/logo.tsx
+  rainbowindex scan "src/**/*.tsx"`
+  },
   "preload-fonts": {
     summary: 'Generate <link rel="preload"> tags',
     usage: "  rainbowindex preload-fonts [options]",
@@ -261,6 +279,11 @@ function parseArgs(argv, callbacks) {
   if (opts.command === "create" && !opts.targetDir) {
     throw new Error("create requires a project directory. Example: rainbowindex create my-app");
   }
+  if (opts.command === "scan" && opts.globs.length === 0) {
+    throw new Error(
+      'scan requires at least one file or glob. Example: rainbowindex scan "src/**/*.tsx"'
+    );
+  }
   if (opts.watch && !opts.output) {
     throw new Error(
       '--output is required with --watch. Example: rainbowindex "src/**/*.tsx" --watch -o dist/styles.css'
@@ -303,8 +326,7 @@ function printHelp(subcommand) {
 ${spec.usage}`,
       ...spec.intro ? [spec.intro] : [],
       `Options:
-${renderFlagLines(spec.flags)}
-${HELP_LINE}`,
+${[renderFlagLines(spec.flags), HELP_LINE].filter(Boolean).join("\n")}`,
       spec.body
     ];
     console.log(`
@@ -321,6 +343,7 @@ Usage:
   rainbowindex create <dir>            Scaffold a Vite app with Rainbow Index ready
   rainbowindex generate-types          Generate TypeScript types for ri()
   rainbowindex preload-fonts           Generate font preload link tags
+  rainbowindex scan <file...>          Show what the class scanner extracts
 
 Run \`rainbowindex <subcommand> --help\` for subcommand-specific options.
 
@@ -772,11 +795,40 @@ async function watchMode(opts, cwd) {
   process.on("SIGTERM", cleanup);
 }
 
+// src/cli/scan.ts
+import { readFile as readFile3 } from "fs/promises";
+import { relative as relative2, resolve as resolve5 } from "path";
+import { glob } from "tinyglobby";
+async function scanFiles(opts, cwd) {
+  const files = [...new Set(await glob(opts.globs, { cwd }))].sort(codepointCompare);
+  if (files.length === 0) {
+    throw new Error(`No files matched ${opts.globs.map((g) => `"${g}"`).join(", ")}.`);
+  }
+  for (const file of files) {
+    const path = resolve5(cwd, file);
+    const warnings = [];
+    const classes = extractClassesFromSource(
+      { path, content: await readFile3(path, "utf-8") },
+      warnings
+    );
+    const sorted = [...classes].sort(codepointCompare);
+    console.log(
+      `${relative2(cwd, path)} (${sorted.length} class${sorted.length === 1 ? "" : "es"})`
+    );
+    for (const cls of sorted) {
+      console.log(`  ${cls}`);
+    }
+    for (const warning of warnings) {
+      console.error(`  ${warning}`);
+    }
+  }
+}
+
 // src/cli/vite-setup.ts
 import { spawn } from "child_process";
 import { existsSync as existsSync3, readFileSync } from "fs";
-import { mkdir as mkdir2, readFile as readFile3, readdir, writeFile as writeFile3 } from "fs/promises";
-import { dirname as dirname3, relative as relative2, resolve as resolve5 } from "path";
+import { mkdir as mkdir2, readFile as readFile4, readdir, writeFile as writeFile3 } from "fs/promises";
+import { dirname as dirname3, relative as relative3, resolve as resolve6 } from "path";
 var VITE_CONFIG_FILES = [
   "vite.config.ts",
   "vite.config.mts",
@@ -839,32 +891,32 @@ async function initViteProject(opts, cwd, deps = {}) {
     ensureStylesheet(cssPath)
   ]);
   const entryChanged = cssCreated ? await ensureStylesheetImport(entryFile, cssPath) : false;
-  const rootLabel = relative2(process.cwd(), cwd) || ".";
+  const rootLabel = relative3(process.cwd(), cwd) || ".";
   console.log(`[rainbowindex] Initialized Vite project: ${rootLabel}`);
   if (dependencyInstalled) {
     console.log("[rainbowindex] Added dev dependency: rainbowindex");
   }
   if (configCreated) {
     console.log(
-      `[rainbowindex] Created Vite config: ${relative2(cwd, configPath).replaceAll("\\", "/")}`
+      `[rainbowindex] Created Vite config: ${relative3(cwd, configPath).replaceAll("\\", "/")}`
     );
   } else if (configChanged) {
     console.log(
-      `[rainbowindex] Updated Vite config: ${relative2(cwd, configPath).replaceAll("\\", "/")}`
+      `[rainbowindex] Updated Vite config: ${relative3(cwd, configPath).replaceAll("\\", "/")}`
     );
   }
   if (cssCreated) {
     console.log(
-      `[rainbowindex] Created stylesheet: ${relative2(cwd, cssPath).replaceAll("\\", "/")}`
+      `[rainbowindex] Created stylesheet: ${relative3(cwd, cssPath).replaceAll("\\", "/")}`
     );
   } else if (cssChanged) {
     console.log(
-      `[rainbowindex] Updated stylesheet: ${relative2(cwd, cssPath).replaceAll("\\", "/")}`
+      `[rainbowindex] Updated stylesheet: ${relative3(cwd, cssPath).replaceAll("\\", "/")}`
     );
   }
   if (entryChanged && entryFile) {
     console.log(
-      `[rainbowindex] Added stylesheet import: ${relative2(cwd, entryFile).replaceAll("\\", "/")}`
+      `[rainbowindex] Added stylesheet import: ${relative3(cwd, entryFile).replaceAll("\\", "/")}`
     );
   }
   if (!dependencyInstalled && !configChanged && !configCreated && !cssChanged && !cssCreated) {
@@ -888,7 +940,7 @@ async function createViteProject(opts, cwd, deps = {}) {
   const packageManager = deps.packageManager ?? detectPackageManager(cwd, deps.env);
   const runner = deps.runner ?? DEFAULT_RUNNER;
   const targetDir = opts.targetDir;
-  const targetRoot = resolve5(cwd, targetDir);
+  const targetRoot = resolve6(cwd, targetDir);
   await ensureScaffoldTargetIsUsable(targetRoot);
   const template = opts.template || DEFAULT_CREATE_TEMPLATE;
   const scaffold = getCreateCommand(packageManager, targetDir, template);
@@ -899,15 +951,15 @@ async function createViteProject(opts, cwd, deps = {}) {
     packageManager,
     runner
   });
-  const displayTarget = relative2(cwd, targetRoot) || ".";
+  const displayTarget = relative3(cwd, targetRoot) || ".";
   console.log(`[rainbowindex] Ready: ${displayTarget}`);
   console.log(`[rainbowindex] Next: cd ${displayTarget} && ${packageManager} run dev`);
 }
 function detectPackageManager(cwd, env = process.env) {
-  if (existsSync3(resolve5(cwd, "pnpm-lock.yaml"))) return "pnpm";
-  if (existsSync3(resolve5(cwd, "yarn.lock"))) return "yarn";
-  if (existsSync3(resolve5(cwd, "bun.lock")) || existsSync3(resolve5(cwd, "bun.lockb"))) return "bun";
-  if (existsSync3(resolve5(cwd, "package-lock.json")) || existsSync3(resolve5(cwd, "npm-shrinkwrap.json"))) {
+  if (existsSync3(resolve6(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync3(resolve6(cwd, "yarn.lock"))) return "yarn";
+  if (existsSync3(resolve6(cwd, "bun.lock")) || existsSync3(resolve6(cwd, "bun.lockb"))) return "bun";
+  if (existsSync3(resolve6(cwd, "package-lock.json")) || existsSync3(resolve6(cwd, "npm-shrinkwrap.json"))) {
     return "npm";
   }
   const packageJSON = readPackageJSONSync(cwd);
@@ -952,12 +1004,12 @@ async function installRainbowIndex(cwd, packageManager, runner) {
 async function ensureViteConfig(cwd, packageJSON, existingPath) {
   if (!existingPath) {
     const fileName = chooseViteConfigName(cwd, packageJSON);
-    const configPath = resolve5(cwd, fileName);
+    const configPath = resolve6(cwd, fileName);
     const content = 'import { defineConfig } from "vite";\nimport rainbowindex from "rainbowindex/vite";\n\nexport default defineConfig({\n	plugins: [rainbowindex()],\n});\n';
     await writeFile3(configPath, content, "utf-8");
     return { path: configPath, changed: true, created: true };
   }
-  const original = await readFile3(existingPath, "utf-8");
+  const original = await readFile4(existingPath, "utf-8");
   const updated = patchViteConfig(original, existingPath);
   if (updated === original) {
     return { path: existingPath, changed: false, created: false };
@@ -1086,14 +1138,14 @@ function findMatchingDelimiter(input, start, open, close) {
   return -1;
 }
 async function resolveStylesheetPath(cwd, cssFile) {
-  if (cssFile) return resolve5(cwd, cssFile);
+  if (cssFile) return resolve6(cwd, cssFile);
   const importedCSS = await findImportedStylesheet(cwd);
   if (importedCSS) return importedCSS;
   for (const candidate of CSS_ENTRY_CANDIDATES) {
-    const fullPath = resolve5(cwd, candidate);
+    const fullPath = resolve6(cwd, candidate);
     if (existsSync3(fullPath)) return fullPath;
   }
-  return existsSync3(resolve5(cwd, "src")) ? resolve5(cwd, "src/index.css") : resolve5(cwd, "index.css");
+  return existsSync3(resolve6(cwd, "src")) ? resolve6(cwd, "src/index.css") : resolve6(cwd, "index.css");
 }
 async function ensureStylesheet(cssPath) {
   if (!existsSync3(cssPath)) {
@@ -1101,7 +1153,7 @@ async function ensureStylesheet(cssPath) {
     await writeFile3(cssPath, '@import "rainbowindex";\n', "utf-8");
     return { changed: true, created: true };
   }
-  const original = await readFile3(cssPath, "utf-8");
+  const original = await readFile4(cssPath, "utf-8");
   if (/@import\s+["']rainbowindex["']/.test(original)) {
     return { changed: false, created: false };
   }
@@ -1128,7 +1180,7 @@ ${content}`;
 }
 async function ensureStylesheetImport(entryFile, cssPath) {
   if (!entryFile || !existsSync3(entryFile)) return false;
-  const original = await readFile3(entryFile, "utf-8");
+  const original = await readFile4(entryFile, "utf-8");
   const relativePath = toImportPath(dirname3(entryFile), cssPath);
   if (hasStylesheetImport(original, relativePath)) {
     return false;
@@ -1139,16 +1191,16 @@ async function ensureStylesheetImport(entryFile, cssPath) {
 }
 async function findImportedStylesheet(cwd) {
   for (const entryFile of ENTRY_FILES) {
-    const fullPath = resolve5(cwd, entryFile);
+    const fullPath = resolve6(cwd, entryFile);
     if (!existsSync3(fullPath)) continue;
-    const content = await readFile3(fullPath, "utf-8");
+    const content = await readFile4(fullPath, "utf-8");
     const matches = content.matchAll(
       /import\s+(?:.+?\s+from\s+)?["']([^"']+\.css(?:\?[^"']*)?)["']/g
     );
     for (const match of matches) {
       const importPath = match[1].split("?")[0];
       if (!importPath.startsWith(".")) continue;
-      const stylesheet = resolve5(dirname3(fullPath), importPath);
+      const stylesheet = resolve6(dirname3(fullPath), importPath);
       if (existsSync3(stylesheet)) return stylesheet;
     }
   }
@@ -1156,7 +1208,7 @@ async function findImportedStylesheet(cwd) {
 }
 async function findEntryFile(cwd) {
   for (const entryFile of ENTRY_FILES) {
-    const fullPath = resolve5(cwd, entryFile);
+    const fullPath = resolve6(cwd, entryFile);
     if (existsSync3(fullPath)) return fullPath;
   }
   return null;
@@ -1166,18 +1218,18 @@ function hasStylesheetImport(source, importPath) {
   return new RegExp(`import\\s+(?:.+?\\s+from\\s+)?["']${escapedPath}["']`).test(source);
 }
 function toImportPath(fromDir, targetFile) {
-  const rel = relative2(fromDir, targetFile).replaceAll("\\", "/");
+  const rel = relative3(fromDir, targetFile).replaceAll("\\", "/");
   return rel.startsWith(".") ? rel : `./${rel}`;
 }
 function findExistingViteConfig(cwd) {
   for (const name of VITE_CONFIG_FILES) {
-    const fullPath = resolve5(cwd, name);
+    const fullPath = resolve6(cwd, name);
     if (existsSync3(fullPath)) return fullPath;
   }
   return null;
 }
 function chooseViteConfigName(cwd, packageJSON) {
-  if (existsSync3(resolve5(cwd, "tsconfig.json")) || existsSync3(resolve5(cwd, "tsconfig.app.json")) || existsSync3(resolve5(cwd, "src/main.ts")) || existsSync3(resolve5(cwd, "src/main.tsx")) || packageJSON?.dependencies?.typescript || packageJSON?.devDependencies?.typescript) {
+  if (existsSync3(resolve6(cwd, "tsconfig.json")) || existsSync3(resolve6(cwd, "tsconfig.app.json")) || existsSync3(resolve6(cwd, "src/main.ts")) || existsSync3(resolve6(cwd, "src/main.tsx")) || packageJSON?.dependencies?.typescript || packageJSON?.devDependencies?.typescript) {
     return "vite.config.ts";
   }
   return packageJSON?.type === "module" ? "vite.config.js" : "vite.config.mjs";
@@ -1225,7 +1277,7 @@ function getInstallCommand(packageManager) {
   }
 }
 function readPackageJSONSync(cwd) {
-  const packagePath = resolve5(cwd, "package.json");
+  const packagePath = resolve6(cwd, "package.json");
   if (!existsSync3(packagePath)) return null;
   try {
     return JSON.parse(readFileSync(packagePath, "utf-8"));
@@ -1236,7 +1288,7 @@ function readPackageJSONSync(cwd) {
 
 // src/entries/cli.ts
 function getVersion() {
-  return true ? "0.4.0" : "unknown";
+  return true ? "0.5.0" : "unknown";
 }
 async function main() {
   const args = process.argv.slice(2);
@@ -1260,6 +1312,9 @@ async function main() {
     case "preload-fonts":
       await preloadFonts(opts, cwd);
       break;
+    case "scan":
+      await scanFiles(opts, cwd);
+      break;
     case "build": {
       if (opts.watch) {
         await watchMode(opts, cwd);
@@ -1280,7 +1335,7 @@ var isDirectExecution = (() => {
   const entry = process.argv[1];
   if (entry === void 0) return false;
   try {
-    return import.meta.url === pathToFileURL(realpathSync(resolve6(entry))).href;
+    return import.meta.url === pathToFileURL(realpathSync(resolve7(entry))).href;
   } catch {
     return false;
   }

package/dist/editor.d.ts

@@ -1,5 +1,5 @@
-import { P as ParsedDirective, R as ResolvedTheme } from './index-BB2HoeMj.js';
-export { b as createThemeSnapshot } from './index-BB2HoeMj.js';
+import { P as ParsedDirective, R as ResolvedTheme } from './index-Dp6i5TSv.js';
+export { b as createThemeSnapshot } from './index-Dp6i5TSv.js';
 import { b as CompilationSnapshot, C as ColorDefinition } from './context-ruu2x_jR.js';
 export { e as defaultTheme } from './context-ruu2x_jR.js';
 

package/dist/editor.mjs

@@ -2,7 +2,7 @@ import {
   CSS_ENTRY_CANDIDATES,
   UTILITY_VALUE_SPACES,
   enumerateClassNames
-} from "./chunk-YLB6FGIG.mjs";
+} from "./chunk-NXJZX6KI.mjs";
 import {
   isSourceFile
 } from "./chunk-3HRMFZGE.mjs";
@@ -27,7 +27,7 @@ import {
   parseUtility,
   severityForCode,
   warningCode
-} from "./chunk-6DAHUFNU.mjs";
+} from "./chunk-ZI5ZYNSU.mjs";
 import {
   computeDarkStop,
   defaultTheme,
@@ -38,7 +38,7 @@ import {
   oklabToLinearSrgb,
   oklchToOklab,
   resolverFor
-} from "./chunk-5Y7EXXLS.mjs";
+} from "./chunk-KRZL4IDK.mjs";
 
 // src/engine/inspector.ts
 var RESOLUTION_CACHE_CAP = 1e4;
@@ -383,7 +383,7 @@ function createEditorSession(options = {}) {
 }
 
 // src/entries/editor.ts
-var version = true ? "0.4.0" : "0.0.0-dev";
+var version = true ? "0.5.0" : "0.0.0-dev";
 var EDITOR_API_VERSION = 1;
 var editorCapabilities = Object.freeze([
   "class-candidates",

package/dist/{index-BB2HoeMj.d.ts → index-Dp6i5TSv.d.ts}

@@ -12,11 +12,9 @@ interface FontFace {
     style: string;
     /** font-display strategy. */
     display: string;
-    /** Unicode subsets — used as a Google Fonts URL hint. */
-    subset: string;
     /** Optional unicode-range descriptor emitted into the @font-face (local subsetting). */
     unicodeRange?: string;
-    /** Per-face preload override; when undefined the slot-level default applies. */
+    /** Whether to emit a preload link for this face's font file. */
     preload?: boolean;
     /** Whether the weight was explicitly set by the user (not a default).
      *  Used by refreshFontWeightDefaults() to avoid overriding user intent. */
@@ -38,19 +36,25 @@ interface FontSlot {
     features: string | null;
     /** Font variation settings — applied via the font-<slot> utility. */
     variation: string | null;
-    /** Slot-level preload default for faces that don't set their own. */
-    preload: boolean;
     /** One or more faces — each emits an @font-face for local providers. */
     faces: FontFace[];
-    /** User-specified fallback font for metrics-adjusted @font-face. */
-    metricsFallback?: string;
-    /** User-specified size-adjust percentage. */
+    /**
+     * CLS-fallback metrics config from the `metrics:` key. Absent = automatic
+     * (from the built-in table when the family is known); `null` = disabled via
+     * `metrics: none`; an object overrides the fallback font and/or the numbers.
+     */
+    metrics?: FontMetricsConfig | null;
+}
+/**
+ * Parsed `metrics:` value. `fallback` picks the local font to metric-match.
+ * The four override percentages are all-present or all-absent (the parser
+ * enforces arity); when absent they are computed from the built-in table.
+ */
+interface FontMetricsConfig {
+    fallback?: string;
     sizeAdjust?: number;
-    /** User-specified ascent-override percentage. */
     ascent?: number;
-    /** User-specified descent-override percentage. */
     descent?: number;
-    /** User-specified line-gap-override percentage. */
     lineGap?: number;
 }
 

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { PluginCreator } from 'postcss';
 export { C as ColorDefinition, a as CompilationContext, b as CompilationSnapshot, F as FluidConfig, T as TextSize, c as Theme, d as createCompilationContext, e as defaultTheme, f as finalizeCompilationContext, r as registerColorNames, g as registerCustomFontFamilies, h as registerCustomTextSizes, i as registerCustomUtility } from './context-ruu2x_jR.js';
 export { D as DEFAULT_TEXT_SIZES, c as createRi, r as ri, s as safelist } from './safelist-D9-Plqta.js';
-import { R as ResolvedTheme, P as ParsedDirective } from './index-BB2HoeMj.js';
-export { C as CompilationResult, a as CompiledRule, c as createCompiler } from './index-BB2HoeMj.js';
+import { R as ResolvedTheme, P as ParsedDirective } from './index-Dp6i5TSv.js';
+export { C as CompilationResult, a as CompiledRule, c as createCompiler } from './index-Dp6i5TSv.js';
 
 interface RainbowIndexOptions {
     sources?: string[];

package/dist/index.mjs

@@ -3,17 +3,17 @@ import {
 } from "./chunk-PD4ZXGJ6.mjs";
 import {
   postcss_default
-} from "./chunk-TLR6RP5L.mjs";
+} from "./chunk-CMB6BHVE.mjs";
 import {
   finalizeProjectCompilation,
   resolveGoogleFonts
-} from "./chunk-4SVFFDS2.mjs";
+} from "./chunk-DT5HYIM3.mjs";
 import {
   analyzeProjectCSS,
   createCompiler,
   extractClassesFromSource,
   pushWarningsDeduped
-} from "./chunk-6DAHUFNU.mjs";
+} from "./chunk-ZI5ZYNSU.mjs";
 import {
   DEFAULT_TEXT_SIZES,
   createCompilationContext,
@@ -25,7 +25,7 @@ import {
   registerCustomTextSizes,
   registerCustomUtility,
   ri
-} from "./chunk-5Y7EXXLS.mjs";
+} from "./chunk-KRZL4IDK.mjs";
 
 // src/project/index.ts
 async function compileProject(options) {

package/dist/vite.mjs

@@ -1,7 +1,7 @@
 import {
   postcss_default
-} from "./chunk-TLR6RP5L.mjs";
-import "./chunk-4SVFFDS2.mjs";
+} from "./chunk-CMB6BHVE.mjs";
+import "./chunk-DT5HYIM3.mjs";
 import {
   isSourceFile
 } from "./chunk-3HRMFZGE.mjs";
@@ -12,10 +12,10 @@ import {
   hasRIActivation,
   isAtRuleBoundary,
   isAtRuleNameChar
-} from "./chunk-6DAHUFNU.mjs";
+} from "./chunk-ZI5ZYNSU.mjs";
 import {
   devWarn
-} from "./chunk-5Y7EXXLS.mjs";
+} from "./chunk-KRZL4IDK.mjs";
 
 // src/integrations/vite.ts
 import { existsSync } from "fs";
@@ -57,61 +57,33 @@ var KEYWORD_BODY_DIRECTIVES = new Set(
 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);
+function mapTopLevelSpans(body, mapOutside, mapBlock) {
+  let brace = body.indexOf("{");
+  if (brace === -1) return mapOutside(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;
-      }
-    }
+  while (brace !== -1) {
+    out += mapOutside(body.slice(segStart, brace));
+    const close = findClosingBrace(body, brace);
+    if (close === -1) return out + body.slice(brace);
+    out += `{${mapBlock(body.slice(brace + 1, close))}}`;
+    segStart = close + 1;
+    brace = body.indexOf("{", segStart);
   }
-  out += depth === 0 ? rewrite(body.slice(segStart)) : body.slice(segStart);
-  return out;
+  return out + mapOutside(body.slice(segStart));
 }
+var keepSpan = (span) => span;
 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;
+  return mapTopLevelSpans(
+    body,
+    keepSpan,
+    (interior) => interior.replace(COLOR_FLAG_RE, rewriteColorOptionFlag)
+  );
 }
 function rewriteDirectiveBodies(code) {
   let out = "";
@@ -146,17 +118,21 @@ function rewriteDirectiveBodies(code) {
     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;
-    });
+    let rewritten = mapTopLevelSpans(
+      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;
+      },
+      keepSpan
+    );
     if (name === "color") rewritten = rewriteColorOptionFlags(rewritten);
     out += code.slice(last, bodyStart) + rewritten;
     last = bodyEnd;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rainbowindex",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "CSS-first system for building and maintaining consistent user interfaces",
 	"keywords": [
 		"css",
@@ -97,6 +97,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.16",
+		"@capsizecss/metrics": "^4.2.0",
 		"@types/node": "^25.9.1",
 		"@vitest/coverage-v8": "^4.1.0",
 		"postcss": "^8.5.8",