@birdycom/omniacss-migrate 0.0.0-stage → 0.11.1

package/src/cli.mjs

@@ -0,0 +1,139 @@
+// File: packages/migrate/src/cli.mjs
+// OmniaCSS migrate CLI (used by bin/omniacss-migrate.mjs and `omniacss migrate`): scan | setup | codemod | build | css
+// Author: Serge Cools | Framework: OmniaCSS
+
+import path from "node:path";
+import fs from "node:fs/promises";
+import { parseArgs } from "node:util";
+import { loadProject } from "./project.mjs";
+import { scanDir, formatScan } from "./scan.mjs";
+import { runCodemod, formatCodemod } from "./codemod.mjs";
+import { planSetup, applySetup, formatPlan } from "./setup.mjs";
+import { compileToken } from "./resolve.mjs";
+
+export const HELP = `
+omniacss-migrate - switch from Tailwind CSS to OmniaCSS and keep your class names
+
+  omniacss-migrate scan <dir>                    coverage report: how many classes the compat layer supports
+  omniacss-migrate setup <project> [--write]     plan (default) or apply the switch (deps, vite/postcss config, CSS)
+  omniacss-migrate codemod <dir> [--write]       rewrite classes to native OmniaCSS names where 1:1 (dry run by default)
+  omniacss-migrate build [-c glob]... [-o file]  write the compat + core CSS once (no Vite/PostCSS needed)
+  omniacss-migrate css "<class>"                 print the CSS for one class
+
+Bootstrap 3/4/5 -> OmniaCSS + OmniaUI
+  omniacss-migrate bootstrap scan <dir>              report: what converts, what stays (grid), what needs a hand
+  omniacss-migrate bootstrap codemod <dir> --write   rewrite classes, swap the <link>, write bootstrap-compat.css
+
+Options
+  --write               apply changes (setup, codemod)
+  --top <n>             rows in the unsupported list (scan, codemod; default 40)
+  --json                machine readable output (scan)
+  --breakpoints <omnia|tailwind>   sm/md/lg values (default omnia)
+  --dark <class|media>  dark mode strategy (default: detected)
+  --tailwind <3|4>      naming flavor (default: detected)
+  --keep-brand-colors   keep literal brand colors from tailwind.config instead of mapping to Omnia tokens
+  --bs <3|4|5>          (bootstrap) Bootstrap version (default: detected)
+  --breakpoints exact   (bootstrap) keep Bootstrap's px breakpoints as min-[…]: variants instead of the nearest Omnia breakpoint
+  --compat <file>       (bootstrap) where to write the compat stylesheet (default bootstrap-compat.css)
+  --omnia-href, --omniaui-href, --compat-href   (bootstrap) stylesheet URLs that replace the Bootstrap <link>
+`;
+
+function parse(args) {
+  return parseArgs({
+  args, allowPositionals: true,
+  options: {
+    write: { type: "boolean" }, top: { type: "string" }, json: { type: "boolean" }, help: { type: "boolean", short: "h" },
+    breakpoints: { type: "string" }, dark: { type: "string" }, tailwind: { type: "string" }, "keep-brand-colors": { type: "boolean" },
+    content: { type: "string", short: "c", multiple: true }, output: { type: "string", short: "o" }, backup: { type: "boolean" },
+    bs: { type: "string" }, compat: { type: "string" }, "omnia-href": { type: "string" }, "omniaui-href": { type: "string" }, "compat-href": { type: "string" },
+  },
+  });
+}
+
+let values, positionals;
+
+function ctxOptions() {
+  return {
+    breakpoints: values.breakpoints, darkMode: values.dark, v4: values.tailwind ? Number(values.tailwind) >= 4 : undefined,
+    keepBrandColors: values["keep-brand-colors"],
+  };
+}
+
+export async function run(args = process.argv.slice(2)) {
+  ({ values, positionals } = parse(args));
+  const [command, target] = positionals;
+  if (!command || values.help || command === "help") { console.log(HELP); return; }
+  const cwd = process.cwd();
+  const dir = path.resolve(cwd, target || ".");
+  const top = Number(values.top || 40);
+
+  if (command === "bootstrap") {
+    const [, sub, where] = positionals;
+    if (!["scan", "codemod"].includes(sub)) { console.log(HELP); process.exitCode = 1; return; }
+    const { migrateBootstrap, formatBootstrap } = await import("./bootstrap/migrate.mjs");
+    const report = await migrateBootstrap(path.resolve(cwd, where || "."), {
+      write: sub === "codemod" && !!values.write, version: values.bs ? Number(values.bs) : undefined,
+      breakpoints: values.breakpoints === "exact" ? "exact" : "omnia", compatFile: values.compat,
+      omniaHref: values["omnia-href"], omniauiHref: values["omniaui-href"], compatHref: values["compat-href"],
+    });
+    console.log(formatBootstrap(report, { top }));
+    return;
+  }
+
+  if (command === "scan") {
+    const { ctx, info } = await loadProject(dir, ctxOptions());
+    const stats = await scanDir(dir, { ctx });
+    if (values.json) {
+      console.log(JSON.stringify({ dir, files: stats.files, occurrences: stats.occurrences, supported: stats.supported, coverage: +stats.coverage.toFixed(2),
+        unsupported: Object.fromEntries([...stats.unsupported].sort((a, b) => b[1] - a[1]).slice(0, top)) }, null, 2));
+    } else {
+      console.log(`Tailwind ${info.tailwindVersion ?? "?"} project, dark mode: ${ctx.darkMode}, ${info.themeVars.size} custom theme variables\n`);
+      console.log(formatScan(stats, { top }));
+    }
+    return;
+  }
+
+  if (command === "setup") {
+    const plan = await planSetup(dir, { keepBrandColors: values["keep-brand-colors"] });
+    if (values.write) await applySetup(plan, { backup: values.backup });
+    console.log(formatPlan(plan, dir, { write: !!values.write }));
+    return;
+  }
+
+  if (command === "codemod") {
+    const { ctx } = await loadProject(dir, { ...ctxOptions(), breakpoints: values.breakpoints || "omnia" });
+    const report = await runCodemod(dir, { ctx, write: !!values.write, cwd: dir });
+    console.log(formatCodemod(report, { top }));
+    return;
+  }
+
+  if (command === "build") {
+    const postcss = (await import("postcss")).default;
+    const plugin = (await import("./postcss.mjs")).default;
+    const output = values.output || "omnia-compat.css";
+    const content = values.content?.length ? values.content : undefined;
+    const input = '@import "tailwindcss";\n';
+    const result = await postcss([plugin({ cwd: dir, content, ...ctxOptionsForPlugin() })]).process(input, { from: path.join(dir, "entry.css") });
+    await fs.writeFile(path.resolve(cwd, output), result.css);
+    console.log(`Wrote ${output} (${(result.css.length / 1024).toFixed(1)} KB)`);
+    return;
+  }
+
+  if (command === "css") {
+    const { ctx } = await loadProject(cwd, ctxOptions());
+    for (const token of positionals.slice(1).length ? positionals.slice(1) : [target]) {
+      const css = compileToken(token, ctx);
+      console.log(css ?? `/* ${token}: not supported */`);
+    }
+    return;
+  }
+
+  console.error(`Unknown command: ${command}`);
+  console.log(HELP);
+  process.exitCode = 1;
+}
+
+function ctxOptionsForPlugin() {
+  return { breakpoints: values.breakpoints, darkMode: values.dark, tailwind: values.tailwind ? Number(values.tailwind) : undefined };
+}
+

package/src/codemod.mjs

@@ -0,0 +1,82 @@
+// File: packages/migrate/src/codemod.mjs
+// Codemod: rewrite Tailwind-style class names to native OmniaCSS classes where the declarations are identical.
+// Everything else is left untouched and reported. Dry-run unless `write` is true.
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs/promises";
+import path from "node:path";
+import { classStrings, walk, DEFAULT_EXTENSIONS } from "./extract.mjs";
+import { isClassString, makeKind } from "./scan.mjs";
+import { loadOmniaIndex, nativeFor } from "./native.mjs";
+
+export const MANIFEST = "omniacss-migrate.manifest.json";
+
+/**
+ * @param {string} dir
+ * @param {{ ctx: object, write?: boolean, extensions?: string[], cwd?: string }} o
+ */
+export async function runCodemod(dir, o) {
+  const { ctx, write = false } = o;
+  const index = loadOmniaIndex(o.cwd || dir);
+  const kind = makeKind(ctx);
+  const memo = new Map();
+  const map = (t) => { if (!memo.has(t)) memo.set(t, nativeFor(t, ctx, index)); return memo.get(t); };
+  const files = await walk(dir, { extensions: o.extensions || DEFAULT_EXTENSIONS });
+  const report = { dir, write, files: [], total: 0, rewritten: 0, unchanged: 0, leftovers: new Map(), collisions: new Map(), mapping: new Map() };
+  for (const file of files) {
+    let text;
+    try { text = await fs.readFile(file, "utf8"); } catch { continue; }
+    const edits = [];
+    for (const s of classStrings(text)) {
+      if (!s.words.length) continue;
+      const kinds = s.words.map(kind);
+      if (!isClassString(kinds, s.hinted)) continue;
+      s.spans.forEach((sp, i) => {
+        if (kinds[i] !== "supported") return;
+        report.total++;
+        const r = map(sp.token);
+        if (r?.native && r.native !== sp.token) {
+          edits.push({ ...sp, to: r.native });
+          report.rewritten++;
+          report.mapping.set(sp.token, r.native);
+        } else if (r?.collision) {
+          report.collisions.set(sp.token, (report.collisions.get(sp.token) || 0) + 1);
+          report.leftovers.set(sp.token, (report.leftovers.get(sp.token) || 0) + 1);
+        } else if (r?.native) report.unchanged++;
+        else report.leftovers.set(sp.token, (report.leftovers.get(sp.token) || 0) + 1);
+      });
+    }
+    if (!edits.length) continue;
+    let out = text;
+    for (const e of edits.sort((a, b) => b.start - a.start)) out = out.slice(0, e.start) + e.to + out.slice(e.end);
+    report.files.push({ file, changes: edits.length, sample: edits.slice(0, 5).map((e) => `${e.token} -> ${e.to}`) });
+    if (write) await fs.writeFile(file, out);
+  }
+  const native = new Set(report.mapping.values());
+  const manifestFile = path.join(o.manifestDir || dir, MANIFEST);
+  if (write && native.size) {
+    const prev = JSON.parse(await fs.readFile(manifestFile, "utf8").catch(() => "{}"));
+    for (const t of prev.native || []) native.add(t);
+    const ambiguous = [...native].filter((t) => report.leftovers.has(t));
+    await fs.writeFile(manifestFile, JSON.stringify({ note: "Written by omniacss-migrate codemod: native OmniaCSS classes the compat layer must not emit.", native: [...native].sort(), ambiguous }, null, 1) + "\n");
+    report.manifestFile = manifestFile;
+  }
+  report.ambiguous = [...native].filter((t) => report.leftovers.has(t));
+  return report;
+}
+
+export function formatCodemod(r, { top = 25 } = {}) {
+  const pct = r.total ? ((r.rewritten / r.total) * 100).toFixed(1) : "0";
+  const lines = [];
+  lines.push(`${r.write ? "Rewrote" : "Dry run, would rewrite"} ${r.rewritten} of ${r.total} class occurrences (${pct}%) in ${r.files.length} files under ${r.dir}`);
+  for (const f of r.files.slice(0, 15)) lines.push(`  ${f.file}  (${f.changes})  e.g. ${f.sample.slice(0, 3).join(", ")}`);
+  if (r.files.length > 15) lines.push(`  ... and ${r.files.length - 15} more files`);
+  const left = [...r.leftovers.entries()].sort((a, b) => b[1] - a[1]);
+  lines.push("", `Left as they are (no 1:1 native class): ${left.reduce((n, [, c]) => n + c, 0)} occurrences, ${left.length} unique`);
+  for (const [t, n] of left.slice(0, top)) lines.push(`  ${String(n).padStart(5)}  ${t}${r.collisions.has(t) ? "   (name exists in OmniaCSS with different meaning)" : ""}`);
+  if (r.manifestFile) lines.push("", `Wrote ${r.manifestFile}: the compat layer skips these native classes so names never collide.`);
+  if (r.ambiguous?.length) lines.push(`Ambiguous (both a native class and a Tailwind-style leftover): ${r.ambiguous.slice(0, 10).join(", ")}`);
+  lines.push("", "Note: leftover classes keep working only while the compat layer (@birdycom/omniacss-migrate/postcss) stays enabled.");
+  if (!r.write) lines.push("Run again with --write to apply.");
+  return lines.join("\n");
+}

package/src/core.mjs

@@ -0,0 +1,67 @@
+// File: packages/migrate/src/core.mjs
+// Bridge to @birdycom/omniacss: the on-demand engine that emits tokens + Omnia-native classes.
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs/promises";
+import path from "node:path";
+import { createRequire } from "node:module";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+let enginePromise;
+
+/** Load @birdycom/omniacss/engine (installed package first, monorepo sibling as fallback). */
+export function loadEngine(cwd = process.cwd()) {
+  enginePromise ||= (async () => {
+    const tries = [
+      () => createRequire(path.join(cwd, "package.json")).resolve("@birdycom/omniacss/engine"),
+      () => createRequire(import.meta.url).resolve("@birdycom/omniacss/engine"),
+      () => path.resolve(here, "../../core/src/engine.mjs"),
+    ];
+    for (const t of tries) {
+      try { const p = t(); await fs.access(p); return await import(pathToFileURL(p).href); } catch { /* next */ }
+    }
+    throw new Error("@birdycom/omniacss-migrate: cannot find @birdycom/omniacss. Install it with: npm install @birdycom/omniacss");
+  })();
+  return enginePromise;
+}
+
+const cache = new Map();
+let classNames, classNamesFor;
+
+/** Every class name that exists in the full Omnia CSS (cached): lets us ignore unrelated words in the content. */
+export function omniaClassNames(full) {
+  if (classNames && classNamesFor === full.length) return classNames;
+  classNames = new Set();
+  for (const m of full.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)) classNames.add(m[1].replace(/\\(.)/g, "$1"));
+  classNamesFor = full.length;
+  return classNames;
+}
+
+/**
+ * Omnia core CSS for a project: tokens (every var(--color-*) the compat output uses) plus the Omnia-native
+ * classes found in the content. Classes the compat layer resolves are excluded, so a Tailwind-style `p-4`
+ * never collides with Omnia's own `p-4`.
+ * @param {{ candidates: Set<string>, compatCss: string, exclude: Set<string>, cwd?: string, layer?: string|false, mode?: true|"tokens" }} o
+ */
+export async function buildCoreCss({ candidates, compatCss, exclude, cwd, layer = "omnia", mode = true }) {
+  const engine = await loadEngine(cwd);
+  const full = mode === true ? await engine.loadFullCss() : await fs.readFile(path.join(engine.DIST, "oc-colors.css"), "utf8");
+  const set = new Set();
+  if (mode === true) {
+    const known = omniaClassNames(full);
+    for (const c of candidates) if (known.has(c) && !exclude.has(c)) set.add(c);
+  }
+  const key = `${layer}|${mode}|${hash(compatCss)}|${[...set].sort().join(" ")}`;
+  if (cache.has(key)) return cache.get(key);
+  const css = engine.generate(full, set, { layer, referencedBy: [compatCss] });
+  cache.clear();
+  cache.set(key, css);
+  return css;
+}
+
+function hash(s) {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  return h;
+}

package/src/data/colors.json

@@ -0,0 +1,290 @@
+{
+ "amber-50": "--color-beige-2",
+ "amber-100": "--color-wheat-2",
+ "amber-200": "--color-orange-2",
+ "amber-300": "--color-orange-10",
+ "amber-400": "--color-orange-40",
+ "amber-500": "--color-orange-60",
+ "amber-600": "--color-peru-60",
+ "amber-700": "--color-peru-80",
+ "amber-800": "--color-peru-95",
+ "amber-900": "--color-brown-70",
+ "amber-950": "--color-black-20",
+ "black": "--color-black-100",
+ "blue-50": "--color-frostblue-2",
+ "blue-100": "--color-frostblue-50",
+ "blue-200": "--color-mistblue-10",
+ "blue-300": "--color-vividblue-20",
+ "blue-400": "--color-vividblue-60",
+ "blue-500": "--color-vividblue-80",
+ "blue-600": "--color-blue-30",
+ "blue-700": "--color-blue-50",
+ "blue-800": "--color-vividblue-95",
+ "blue-900": "--color-stormblue-50",
+ "blue-950": "--color-stormblue-80",
+ "cyan-50": "--color-azure-50",
+ "cyan-100": "--color-azure-60",
+ "cyan-200": "--color-skycyan-2",
+ "cyan-300": "--color-cyan-60",
+ "cyan-400": "--color-skycyan-60",
+ "cyan-500": "--color-skycyan-70",
+ "cyan-600": "--color-skycyan-90",
+ "cyan-700": "--color-teal-60",
+ "cyan-800": "--color-teal-80",
+ "cyan-900": "--color-duskblue-30",
+ "cyan-950": "--color-twilightblue-50",
+ "emerald-50": "--color-azure-50",
+ "emerald-100": "--color-azure-60",
+ "emerald-200": "--color-turquoise-2",
+ "emerald-300": "--color-turquoise-40",
+ "emerald-400": "--color-green-2",
+ "emerald-500": "--color-green-10",
+ "emerald-600": "--color-green-40",
+ "emerald-700": "--color-teal-60",
+ "emerald-800": "--color-teal-80",
+ "emerald-900": "--color-teal-95",
+ "emerald-950": "--color-black-20",
+ "fuchsia-50": "--color-frostblue-2",
+ "fuchsia-100": "--color-frostblue-40",
+ "fuchsia-200": "--color-mistblue-2",
+ "fuchsia-300": "--color-violet-20",
+ "fuchsia-400": "--color-violet-60",
+ "fuchsia-500": "--color-magenta-60",
+ "fuchsia-600": "--color-magenta-70",
+ "fuchsia-700": "--color-violet-95",
+ "fuchsia-800": "--color-purple-50",
+ "fuchsia-900": "--color-purple-60",
+ "fuchsia-950": "--color-purple-95",
+ "gray-50": "--color-snow-50",
+ "gray-100": "--color-linen-30",
+ "gray-200": "--color-silver-2",
+ "gray-300": "--color-silver-20",
+ "gray-400": "--color-gray-20",
+ "gray-500": "--color-black-2",
+ "gray-600": "--color-duskblue-20",
+ "gray-700": "--color-shallowblue-30",
+ "gray-800": "--color-shallowblue-40",
+ "gray-900": "--color-shallowblue-50",
+ "gray-950": "--color-black-40",
+ "green-50": "--color-azure-50",
+ "green-100": "--color-beige-50",
+ "green-200": "--color-turquoise-2",
+ "green-300": "--color-turquoise-20",
+ "green-400": "--color-green-2",
+ "green-500": "--color-green-10",
+ "green-600": "--color-green-30",
+ "green-700": "--color-green-50",
+ "green-800": "--color-green-70",
+ "green-900": "--color-teal-90",
+ "green-950": "--color-black-20",
+ "indigo-50": "--color-frostblue-20",
+ "indigo-100": "--color-frostblue-50",
+ "indigo-200": "--color-mistblue-10",
+ "indigo-300": "--color-vividblue-30",
+ "indigo-400": "--color-vividblue-60",
+ "indigo-500": "--color-blue-30",
+ "indigo-600": "--color-blue-40",
+ "indigo-700": "--color-blue-50",
+ "indigo-800": "--color-indigo-50",
+ "indigo-900": "--color-stormblue-60",
+ "indigo-950": "--color-stormblue-90",
+ "lime-50": "--color-beige-2",
+ "lime-100": "--color-beige-50",
+ "lime-200": "--color-yellow-2",
+ "lime-300": "--color-yellow-60",
+ "lime-400": "--color-yellow-70",
+ "lime-500": "--color-green-2",
+ "lime-600": "--color-green-20",
+ "lime-700": "--color-green-50",
+ "lime-800": "--color-green-70",
+ "lime-900": "--color-green-80",
+ "lime-950": "--color-black-20",
+ "mauve-50": "--color-snow-50",
+ "mauve-100": "--color-linen-50",
+ "mauve-200": "--color-silver-2",
+ "mauve-300": "--color-silver-20",
+ "mauve-400": "--color-silver-70",
+ "mauve-500": "--color-silver-95",
+ "mauve-600": "--color-shallowblue-20",
+ "mauve-700": "--color-shallowblue-30",
+ "mauve-800": "--color-duskblue-50",
+ "mauve-900": "--color-black-30",
+ "mauve-950": "--color-black-40",
+ "mist-50": "--color-snow-50",
+ "mist-100": "--color-linen-50",
+ "mist-200": "--color-silver-2",
+ "mist-300": "--color-silver-20",
+ "mist-400": "--color-gray-20",
+ "mist-500": "--color-black-2",
+ "mist-600": "--color-duskblue-20",
+ "mist-700": "--color-black-10",
+ "mist-800": "--color-black-20",
+ "mist-900": "--color-black-30",
+ "mist-950": "--color-black-40",
+ "neutral-50": "--color-snow-50",
+ "neutral-100": "--color-linen-20",
+ "neutral-200": "--color-silver-2",
+ "neutral-300": "--color-silver-20",
+ "neutral-400": "--color-gray-20",
+ "neutral-500": "--color-black-2",
+ "neutral-600": "--color-shallowblue-20",
+ "neutral-700": "--color-black-10",
+ "neutral-800": "--color-black-20",
+ "neutral-900": "--color-black-30",
+ "neutral-950": "--color-black-40",
+ "olive-50": "--color-snow-50",
+ "olive-100": "--color-linen-40",
+ "olive-200": "--color-snow-60",
+ "olive-300": "--color-silver-10",
+ "olive-400": "--color-gray-10",
+ "olive-500": "--color-black-2",
+ "olive-600": "--color-gray-90",
+ "olive-700": "--color-black-10",
+ "olive-800": "--color-black-20",
+ "olive-900": "--color-black-30",
+ "olive-950": "--color-black-40",
+ "orange-50": "--color-linen-2",
+ "orange-100": "--color-wheat-2",
+ "orange-200": "--color-wheat-50",
+ "orange-300": "--color-orange-30",
+ "orange-400": "--color-orange-60",
+ "orange-500": "--color-red-30",
+ "orange-600": "--color-red-50",
+ "orange-700": "--color-brown-40",
+ "orange-800": "--color-brown-60",
+ "orange-900": "--color-brown-70",
+ "orange-950": "--color-black-20",
+ "pink-50": "--color-linen-20",
+ "pink-100": "--color-white-60",
+ "pink-200": "--color-pink-30",
+ "pink-300": "--color-pink-60",
+ "pink-400": "--color-violet-60",
+ "pink-500": "--color-violet-70",
+ "pink-600": "--color-red-60",
+ "pink-700": "--color-brown-50",
+ "pink-800": "--color-brown-60",
+ "pink-900": "--color-brown-70",
+ "pink-950": "--color-brown-95",
+ "purple-50": "--color-frostblue-2",
+ "purple-100": "--color-frostblue-50",
+ "purple-200": "--color-mistblue-2",
+ "purple-300": "--color-violet-20",
+ "purple-400": "--color-indigo-2",
+ "purple-500": "--color-violet-80",
+ "purple-600": "--color-indigo-20",
+ "purple-700": "--color-indigo-30",
+ "purple-800": "--color-indigo-40",
+ "purple-900": "--color-indigo-50",
+ "purple-950": "--color-indigo-70",
+ "red-50": "--color-linen-20",
+ "red-100": "--color-snow-60",
+ "red-200": "--color-pink-40",
+ "red-300": "--color-pink-60",
+ "red-400": "--color-red-30",
+ "red-500": "--color-red-50",
+ "red-600": "--color-red-60",
+ "red-700": "--color-brown-50",
+ "red-800": "--color-brown-60",
+ "red-900": "--color-brown-80",
+ "red-950": "--color-black-30",
+ "rose-50": "--color-linen-30",
+ "rose-100": "--color-snow-60",
+ "rose-200": "--color-pink-30",
+ "rose-300": "--color-pink-60",
+ "rose-400": "--color-brown-10",
+ "rose-500": "--color-red-50",
+ "rose-600": "--color-red-60",
+ "rose-700": "--color-brown-50",
+ "rose-800": "--color-brown-60",
+ "rose-900": "--color-brown-70",
+ "rose-950": "--color-brown-95",
+ "sky-50": "--color-frostblue-2",
+ "sky-100": "--color-frostblue-40",
+ "sky-200": "--color-skycyan-10",
+ "sky-300": "--color-skycyan-50",
+ "sky-400": "--color-skycyan-70",
+ "sky-500": "--color-skycyan-80",
+ "sky-600": "--color-vividblue-80",
+ "sky-700": "--color-vividblue-95",
+ "sky-800": "--color-stormblue-40",
+ "sky-900": "--color-stormblue-50",
+ "sky-950": "--color-twilightblue-50",
+ "slate-50": "--color-snow-50",
+ "slate-100": "--color-frostblue-10",
+ "slate-200": "--color-azure-60",
+ "slate-300": "--color-silver-20",
+ "slate-400": "--color-frostblue-90",
+ "slate-500": "--color-twilightblue-10",
+ "slate-600": "--color-duskblue-20",
+ "slate-700": "--color-twilightblue-40",
+ "slate-800": "--color-duskblue-50",
+ "slate-900": "--color-duskblue-60",
+ "slate-950": "--color-shallowblue-90",
+ "stone-50": "--color-snow-50",
+ "stone-100": "--color-linen-20",
+ "stone-200": "--color-silver-2",
+ "stone-300": "--color-silver-20",
+ "stone-400": "--color-silver-70",
+ "stone-500": "--color-black-2",
+ "stone-600": "--color-gray-90",
+ "stone-700": "--color-black-10",
+ "stone-800": "--color-black-20",
+ "stone-900": "--color-black-30",
+ "stone-950": "--color-black-40",
+ "taupe-50": "--color-snow-50",
+ "taupe-100": "--color-linen-50",
+ "taupe-200": "--color-silver-2",
+ "taupe-300": "--color-silver-20",
+ "taupe-400": "--color-silver-70",
+ "taupe-500": "--color-gray-60",
+ "taupe-600": "--color-gray-90",
+ "taupe-700": "--color-black-10",
+ "taupe-800": "--color-black-20",
+ "taupe-900": "--color-black-30",
+ "taupe-950": "--color-black-40",
+ "teal-50": "--color-azure-50",
+ "teal-100": "--color-azure-60",
+ "teal-200": "--color-turquoise-2",
+ "teal-300": "--color-turquoise-40",
+ "teal-400": "--color-turquoise-60",
+ "teal-500": "--color-turquoise-70",
+ "teal-600": "--color-teal-40",
+ "teal-700": "--color-teal-60",
+ "teal-800": "--color-teal-80",
+ "teal-900": "--color-teal-90",
+ "teal-950": "--color-shallowblue-40",
+ "violet-50": "--color-frostblue-10",
+ "violet-100": "--color-frostblue-50",
+ "violet-200": "--color-mistblue-2",
+ "violet-300": "--color-mistblue-40",
+ "violet-400": "--color-indigo-2",
+ "violet-500": "--color-indigo-10",
+ "violet-600": "--color-indigo-20",
+ "violet-700": "--color-indigo-30",
+ "violet-800": "--color-indigo-40",
+ "violet-900": "--color-indigo-50",
+ "violet-950": "--color-indigo-70",
+ "white": "--color-white-100",
+ "yellow-50": "--color-beige-2",
+ "yellow-100": "--color-wheat-2",
+ "yellow-200": "--color-yellow-2",
+ "yellow-300": "--color-yellow-60",
+ "yellow-400": "--color-orange-20",
+ "yellow-500": "--color-orange-50",
+ "yellow-600": "--color-orange-70",
+ "yellow-700": "--color-peru-80",
+ "yellow-800": "--color-peru-95",
+ "yellow-900": "--color-peru-95",
+ "yellow-950": "--color-black-20",
+ "zinc-50": "--color-snow-50",
+ "zinc-100": "--color-linen-30",
+ "zinc-200": "--color-silver-2",
+ "zinc-300": "--color-silver-20",
+ "zinc-400": "--color-silver-70",
+ "zinc-500": "--color-black-2",
+ "zinc-600": "--color-shallowblue-20",
+ "zinc-700": "--color-black-10",
+ "zinc-800": "--color-black-20",
+ "zinc-900": "--color-black-30",
+ "zinc-950": "--color-black-40"
+}

package/src/extract.mjs

@@ -0,0 +1,91 @@
+// File: packages/migrate/src/extract.mjs
+// Extract class-like tokens from source text (Blade, Vue, JSX/TSX, JS, HTML …), keeping arbitrary values
+// such as `w-[37px]`, `[&_svg:not([class*='size-'])]:size-4` and `bg-(--brand)` intact.
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs/promises";
+import path from "node:path";
+
+export const DEFAULT_EXTENSIONS = ["blade.php", "php", "vue", "jsx", "tsx", "js", "ts", "mjs", "html", "svelte", "astro", "mdx", "twig", "erb"];
+const IGNORE_DIRS = new Set(["node_modules", "vendor", ".git", "storage", "dist", "build", "public", ".next", ".nuxt", ".output", "bootstrap", ".cache", ".turbo", ".astro"]);
+
+const DELIM = /[\s"'`{},;<>=|\\$+?^~]/;
+
+/**
+ * Call `cb(token, start, end)` for every class-like token in `text`.
+ * Arbitrary values such as `w-[37px]` stay in one piece.
+ */
+export function scanTokens(text, cb) {
+  let cur = "", depth = 0, mark = 0, start = 0;
+  const flush = (end) => {
+    if (cur) {
+      const lead = cur.length - cur.replace(/^[.:]+/, "").length;
+      const t = cur.replace(/^[.:]+/, "").replace(/[.:,]+$/, "");
+      if (t && t.length <= 250 && /^[A-Za-z0-9!@\[*(-]/.test(t)) cb(t, start + lead, start + lead + t.length);
+    }
+    cur = "";
+  };
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (depth > 0) {
+      if (/\s/.test(ch) || cur.length > 250) { i = mark; cur = ""; depth = 0; continue; } // not an arbitrary value after all
+      cur += ch;
+      if (ch === "[" || ch === "(") depth++;
+      else if (ch === "]" || ch === ")") depth--;
+      continue;
+    }
+    if (ch === "[" || ch === "(") {
+      const prev = cur.slice(-1);
+      const next = text[i + 1];
+      const attach = ch === "[" ? (cur === "" ? !!next && !/[\s"'`\]]/.test(next) : /[-:!]/.test(prev)) : /[-:!]/.test(prev);
+      if (attach) { if (!cur) start = i; mark = i; depth = 1; cur += ch; continue; }
+      flush(i); continue;
+    }
+    if (DELIM.test(ch) || ch === ")" || ch === "]" || ch === "&" || (ch === "#" && cur === "")) { flush(i); continue; }
+    if (!cur) start = i;
+    cur += ch;
+  }
+  flush(text.length);
+}
+
+/** Class-like tokens in a text (duplicates are kept, so callers can count occurrences). */
+export function extractTokens(text) {
+  const out = [];
+  scanTokens(text, (t) => out.push(t));
+  return out;
+}
+
+/** Walk `dir` and return files with one of the given extensions. */
+export async function walk(dir, { extensions = DEFAULT_EXTENSIONS, ignore = IGNORE_DIRS } = {}) {
+  const files = [];
+  async function rec(d) {
+    let entries;
+    try { entries = await fs.readdir(d, { withFileTypes: true }); } catch { return; }
+    for (const e of entries) {
+      if (e.isDirectory()) { if (!ignore.has(e.name) && !e.name.startsWith(".")) await rec(path.join(d, e.name)); continue; }
+      if (extensions.some((x) => e.name.endsWith("." + x))) files.push(path.join(d, e.name));
+    }
+  }
+  await rec(dir);
+  return files;
+}
+
+const STRING_RE = /"(?:[^"\\\n]|\\.){0,3000}"|'(?:[^'\\\n]|\\.){0,3000}'|`(?:[^`\\]|\\.){0,4000}`/g;
+const CLASS_CONTEXT = /(class(Name)?|:class|\bcn|clsx|cva|twMerge|classNames|tv|@class)\W{0,6}$/;
+
+/**
+ * Candidate class strings: quoted strings (and attribute values) with their preceding context.
+ * @returns {Array<{ words: string[], spans: Array<{token:string,start:number,end:number}>, hinted: boolean }>}
+ */
+export function classStrings(text) {
+  const out = [];
+  for (const m of text.matchAll(STRING_RE)) {
+    const inner = m[0].slice(1, -1);
+    if (!inner.trim()) continue;
+    const before = text.slice(Math.max(0, m.index - 24), m.index);
+    const tokens = [];
+    scanTokens(inner, (t, s, e) => tokens.push({ token: t, start: m.index + 1 + s, end: m.index + 1 + e }));
+    out.push({ words: tokens.map((t) => t.token), spans: tokens, hinted: CLASS_CONTEXT.test(before) });
+  }
+  return out;
+}