@birdycom/omniacss-migrate 0.0.0-stage → 0.11.0

package/src/index.mjs

@@ -0,0 +1,12 @@
+// File: packages/migrate/src/index.mjs
+// Public API of @birdycom/omniacss-migrate.
+// Author: Serge Cools | Framework: OmniaCSS
+export { createContext, resolveToken, resolveUtility, parseToken, compileToken, compileTokens, serialize, SCREENS } from "./resolve.mjs";
+export { extractTokens, classStrings } from "./extract.mjs";
+export { scanDir, formatScan } from "./scan.mjs";
+export { runCodemod, formatCodemod } from "./codemod.mjs";
+export { planSetup, applySetup, formatPlan } from "./setup.mjs";
+export { loadProject, themeFromConfig } from "./project.mjs";
+export { COLOR_MAP } from "./values.mjs";
+export { default as postcss } from "./postcss.mjs";
+export { default as vite } from "./vite.mjs";

package/src/native.mjs

@@ -0,0 +1,72 @@
+// File: packages/migrate/src/native.mjs
+// Codemod brain: find the native OmniaCSS class that has exactly the same declarations as a Tailwind-style class.
+// The index is read from the shipped @birdycom/omniacss CSS, so it always matches the installed version.
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
+import { parseToken, resolveToken } from "./resolve.mjs";
+import { esc } from "./variants.mjs";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+
+function findOmniaCss(cwd) {
+  const tries = [
+    () => createRequire(path.join(cwd, "package.json")).resolve("@birdycom/omniacss/dist/omnia.css"),
+    () => createRequire(import.meta.url).resolve("@birdycom/omniacss/dist/omnia.css"),
+    () => path.resolve(here, "../../core/dist/omnia.css"),
+  ];
+  for (const t of tries) { try { const p = t(); if (fs.existsSync(p)) return p; } catch { /* next */ } }
+  throw new Error("@birdycom/omniacss-migrate: cannot find @birdycom/omniacss/dist/omnia.css (npm install @birdycom/omniacss)");
+}
+
+const normDecls = (body) =>
+  body.replace(/\/\*[\s\S]*?\*\//g, "").split(";").map((s) => s.trim().replace(/\s+/g, " ")).filter(Boolean).map((s) => s.replace(/\s*:\s*/, ":")).join(";");
+
+let cached;
+
+/** Index of Omnia's own classes: declarations -> class names, plus the set of every class name. */
+export function loadOmniaIndex(cwd = process.cwd()) {
+  const file = findOmniaCss(cwd);
+  if (cached?.file === file) return cached;
+  const css = fs.readFileSync(file, "utf8").replace(/\r\n/g, "\n");
+  const names = new Set();
+  for (const m of css.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)) names.add(m[1].replace(/\\(.)/g, "$1"));
+  const byDecls = new Map();
+  for (const m of css.matchAll(/^\.((?:\\.|[A-Za-z0-9_-])+) \{\n([^}]*)\}/gm)) {
+    const name = m[1].replace(/\\(.)/g, "$1");
+    const key = normDecls(m[2]);
+    if (!key) continue;
+    const list = byDecls.get(key) || [];
+    if (!list.includes(name)) list.push(name);
+    byDecls.set(key, list);
+  }
+  cached = { file, names, byDecls };
+  return cached;
+}
+
+const SAFE_VARIANTS = new Set(["sm", "md", "lg", "dark", "hover", "focus", "active", "focus-visible", "focus-within", "disabled", "group-hover", "first", "last", "odd", "even"]);
+
+/**
+ * Native Omnia class for a Tailwind-style token, or null.
+ * @returns {{ native: string } | { collision: true } | null}
+ */
+export function nativeFor(token, ctx, index) {
+  const p = parseToken(token, ctx);
+  if (p.foreign || p.important || !p.body) return null;
+  if (!p.variants.every((v) => SAFE_VARIANTS.has(v))) return null;
+  const r = resolveToken(p.neg ? "-" + p.utility : p.utility, ctx);
+  if (!r || r.marker) return r?.marker ? { native: token } : null;
+  if (r.rules.length !== 1 || r.rules[0].media.length || r.rules[0].selectors.length !== 1) return null;
+  const rule = r.rules[0];
+  if (rule.selectors[0] !== `.${esc(p.neg ? "-" + p.utility : p.utility)}`) return null;
+  const key = rule.decls.map(([k, v]) => `${k}:${v.replace(/\s+/g, " ")}`).join(";");
+  const list = index.byDecls.get(normDecls(key));
+  if (!list) return index.names.has(p.utility) ? { collision: true } : null;
+  const base = list.includes(p.utility) ? p.utility : [...list].sort((a, b) => a.length - b.length)[0];
+  const native = p.variants.length ? `${p.variants.join(":")}:${base}` : base;
+  if (p.variants.length && !index.names.has(native)) return null;
+  return { native };
+}

package/src/postcss.mjs

@@ -0,0 +1,308 @@
+// File: packages/migrate/src/postcss.mjs
+// PostCSS plugin "keep your classes": replaces the framework directives in your CSS
+//   @import "tailwindcss";  /  @tailwind base|components|utilities;
+// with OmniaCSS core + compat CSS for the classes found in your content, and expands @apply, theme() and @theme.
+//
+//   // postcss.config.js
+//   import omniaMigrate from "@birdycom/omniacss-migrate/postcss";
+//   export default { plugins: [omniaMigrate({ content: ["resources/views/**/*.blade.php", "resources/js/**/*.{vue,tsx}"] })] };
+//
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs/promises";
+import path from "node:path";
+import postcss from "postcss";
+import { createContext, resolveToken, serialize } from "./resolve.mjs";
+import { KEYFRAMES } from "./utilities.mjs";
+import { extractTokens } from "./extract.mjs";
+import { loadProject, parseThemeBlocks } from "./project.mjs";
+import { preflight } from "./preflight.mjs";
+import { buildCoreCss } from "./core.mjs";
+import { COLOR_MAP } from "./values.mjs";
+import { applyVariant } from "./variants.mjs";
+
+const TW_IMPORT = /^["']tailwindcss(?:\/(theme|preflight|utilities|base|components)(?:\.css)?)?["']/;
+const fileTokenCache = new Map();
+
+/** Default content globs when none are given. */
+export async function defaultContent(cwd) {
+  const has = (p) => fs.stat(path.join(cwd, p)).then(() => true, () => false);
+  if (await has("artisan")) return ["resources/views/**/*.blade.php", "resources/js/**/*.{js,ts,jsx,tsx,vue}", "app/**/*.php"];
+  if (await has("astro.config.mjs")) return ["src/**/*.{astro,html,md,mdx,jsx,tsx,vue,svelte}"];
+  if (await has("nuxt.config.ts")) return ["{app,components,pages,layouts}/**/*.vue"];
+  return ["index.html", "src/**/*.{html,js,ts,jsx,tsx,vue,svelte}"];
+}
+
+/** Collect candidate class tokens from content globs. Returns { tokens, files }. */
+export async function collectTokens(patterns, cwd) {
+  const tokens = new Set(), files = [];
+  for (const pattern of [].concat(patterns)) {
+    for await (const rel of fs.glob(pattern, { cwd, exclude: (p) => /node_modules|[\\/]\.git[\\/]|[\\/]vendor[\\/]|[\\/]storage[\\/]/.test(p) })) {
+      const file = path.resolve(cwd, rel);
+      const st = await fs.stat(file).catch(() => null);
+      if (!st || !st.isFile()) continue;
+      files.push(file);
+      let entry = fileTokenCache.get(file);
+      if (!entry || entry.mtime !== st.mtimeMs) {
+        entry = { mtime: st.mtimeMs, tokens: new Set(extractTokens(await fs.readFile(file, "utf8"))) };
+        fileTokenCache.set(file, entry);
+      }
+      for (const t of entry.tokens) tokens.add(t);
+    }
+  }
+  return { tokens, files };
+}
+
+/** `underline {hover:,focus:}bg-red-500` style brace expansion used by @source inline(). */
+function expandBraces(s) {
+  const m = s.match(/\{([^{}]*)\}/);
+  if (!m) return [s];
+  return m[1].split(",").flatMap((alt) => expandBraces(s.slice(0, m.index) + alt + s.slice(m.index + m[0].length)));
+}
+
+const projectCache = new Map();
+async function getProject(cwd, options) {
+  const key = cwd + JSON.stringify([options.tailwind, options.darkMode, options.breakpoints, options.arbitraryColors, options.keepBrandColors]);
+  if (!projectCache.has(key)) {
+    projectCache.set(key, loadProject(cwd, {
+      v4: options.tailwind ? options.tailwind >= 4 : undefined,
+      darkMode: options.darkMode, breakpoints: options.breakpoints, arbitraryColors: options.arbitraryColors,
+      keepBrandColors: options.keepBrandColors, screens: options.screens, tokensFile: options.tokensFile,
+    }));
+  }
+  return projectCache.get(key);
+}
+
+/** theme(colors.red.500) / theme(spacing.4) / --spacing(4) inside declaration values. */
+function replaceThemeFunctions(value, ctx) {
+  if (!/theme\(|--spacing\(|--alpha\(/.test(value)) return value;
+  return value
+    .replace(/--spacing\(\s*([\d.]+)\s*\)/g, (_, n) => `${+n * 0.25}rem`)
+    .replace(/--alpha\(\s*(.+?)\s*\/\s*([\d.]+)%\s*\)/g, (_, c, p) => `color-mix(in oklab, ${c} ${p}%, transparent)`)
+    .replace(/theme\(\s*['"]?([^'")]+?)['"]?\s*(?:,\s*[^)]+)?\)/g, (all, key) => {
+      let m = key.match(/^colors?[.\-/]([\w-]+?)(?:[.\-/](\d+))?(?:\/(\d+))?$/);
+      if (m) {
+        const name = m[2] ? `${m[1]}-${m[2]}` : m[1];
+        const token = COLOR_MAP[name];
+        if (token) return `var(${token})`;
+        if (ctx.hasTheme(`--color-${name}`)) return `var(--color-${name})`;
+      }
+      m = key.match(/^spacing[.\-/](.+)$/);
+      if (m && /^[\d.]+$/.test(m[1])) return `${+m[1] * 0.25}rem`;
+      m = key.match(/^--[\w-]+$/);
+      if (m) return `var(${key})`;
+      return all;
+    });
+}
+
+function withTheme(ctx, extra, patch = {}) {
+  const themeVars = new Set([...ctx.themeVars, ...extra]);
+  return { ...ctx, ...patch, themeVars, hasTheme: (n) => themeVars.has(n) };
+}
+
+/**
+ * @param {object} [options]
+ * @param {string|string[]} [options.content]  globs of files that contain class names (default: detected per framework)
+ * @param {string} [options.cwd]
+ * @param {true|"tokens"|false} [options.core=true]  true: Omnia core on demand; "tokens": only color tokens + base; false: you load Omnia yourself
+ * @param {boolean} [options.preflight=true]   include the base reset
+ * @param {boolean} [options.layers=true]      wrap output in cascade layers (omnia, theme, base, components, utilities)
+ * @param {3|4} [options.tailwind]             naming flavor (default: detected from package.json / CSS)
+ * @param {"class"|"media"} [options.darkMode]
+ * @param {"omnia"|"tailwind"} [options.breakpoints="omnia"]
+ * @param {"nearest"|"keep"} [options.arbitraryColors="nearest"]
+ * @param {string[]} [options.safelist]        extra class names to always emit
+ */
+export default function omniaMigrate(options = {}) {
+  return {
+    postcssPlugin: "omniacss-migrate",
+    async Once(root, { result }) {
+      const twImports = [], twDirectives = [], applies = [], themes = [], sources = [], misc = [];
+      root.walkAtRules((at) => {
+        const n = at.name;
+        if (n === "import" && TW_IMPORT.test(at.params.trim())) twImports.push(at);
+        else if (n === "tailwind") twDirectives.push(at);
+        else if (n === "apply") applies.push(at);
+        else if (n === "theme") themes.push(at);
+        else if (n === "source") sources.push(at);
+        else if (["plugin", "config", "reference", "custom-variant", "utility", "variant"].includes(n)) misc.push(at);
+      });
+      const hasEntry = twImports.length || twDirectives.length;
+      if (!hasEntry && !applies.length && !themes.length && !misc.length) return;
+
+      const cwd = options.cwd || process.cwd();
+      const { ctx: baseCtx, info, themeDecls: configTheme } = await getProject(cwd, options);
+      const cssDir = result.opts.from ? path.dirname(result.opts.from) : cwd;
+
+      // --- per-file theme / variants -------------------------------------------------------------------------
+      const themeDecls = [...configTheme];
+      const keyframes = [];
+      for (const at of themes) {
+        at.walkDecls((decl) => { if (decl.prop.startsWith("--") && !/^initial$/.test(decl.value)) themeDecls.push([decl.prop, decl.value]); });
+        at.walkAtRules("keyframes", (k) => keyframes.push(k.toString()));
+      }
+      let patch = {};
+      const customVariants = {};
+      for (const at of misc.filter((a) => a.name === "custom-variant")) {
+        const m = at.params.match(/^([\w-]+)\s*\(([\s\S]*)\)$/);
+        if (!m) continue;
+        if (m[1] === "dark") {
+          const attr = m[2].match(/\[data-[\w-]+=["']?[\w-]+["']?\]/);
+          const cls = m[2].match(/\.([\w-]+)/);
+          if (m[2].includes("prefers-color-scheme")) patch.darkMode = "media";
+          else { patch.darkMode = "class"; patch.darkSelector = attr ? attr[0] : cls ? `.${cls[1]}` : ".dark"; }
+        } else customVariants[m[1]] = m[2];
+      }
+      const ctx = withTheme(baseCtx, themeDecls.map(([k]) => k), { ...patch, customVariants, ...(options.important ? { important: true } : {}) });
+
+      // --- content ---------------------------------------------------------------------------------------------
+      let compatCss = "", exclude = new Set(), candidates = new Set(), files = [];
+      if (hasEntry) {
+        const globs = [];
+        for (const at of sources) {
+          const p = at.params.trim();
+          const inline = p.match(/^inline\(\s*["'](.+)["']\s*\)$/);
+          if (inline) { expandBraces(inline[1]).flatMap((s) => s.split(/\s+/)).forEach((t) => t && candidates.add(t)); continue; }
+          if (/^not\b/.test(p)) continue;
+          const g = p.replace(/^["']|["']$/g, "");
+          globs.push(path.relative(cwd, path.resolve(cssDir, g)).replace(/\\/g, "/"));
+        }
+        let content = options.content ?? null;
+        if (!content) content = [...await defaultContent(cwd), ...globs];
+        else content = [].concat(content).concat(globs);
+        const collected = await collectTokens(content, cwd);
+        files = collected.files;
+        for (const t of collected.tokens) candidates.add(t);
+        for (const t of options.safelist || []) candidates.add(t);
+
+        const resolved = [];
+        const manifest = options.manifest === false ? {} : JSON.parse(await fs.readFile(path.join(cwd, "omniacss-migrate.manifest.json"), "utf8").catch(() => "{}"));
+        const native = new Set(manifest.native || []);
+        for (const t of candidates) {
+          if (native.has(t)) continue; // already rewritten to a native OmniaCSS class by the codemod
+          const r = resolveToken(t, ctx);
+          if (r) { resolved.push(r); exclude.add(t); }
+        }
+        compatCss = serialize(resolved);
+      }
+
+      // --- build replacement nodes -------------------------------------------------------------------------------
+      const layers = options.layers !== false;
+      const wrap = (name, css) => (layers && css.trim() ? `@layer ${name} {\n${css}\n}` : css);
+      const pieces = {};
+      pieces.order = layers ? "@layer omnia, theme, base, components, utilities;" : "";
+      const themeBody = themeDecls.map(([k, v]) => `  ${k}: ${v};`).join("\n");
+      pieces.theme = wrap("theme", (themeBody ? `:root, :host {\n${themeBody}\n}\n` : "") + keyframes.join("\n"));
+      pieces.preflight = options.preflight === false ? "" : wrap("base", preflight({ borderColor: ctx.v4 ? "currentColor" : `var(${COLOR_MAP["gray-200"]})` }));
+      pieces.core = options.core === false ? "" : await buildCoreCss({ candidates, compatCss, exclude, cwd, layer: layers ? "omnia" : false, mode: options.core === "tokens" ? "tokens" : true });
+      pieces.utilities = wrap("utilities", compatCss);
+      const all = [pieces.order, pieces.theme, pieces.preflight, pieces.core, pieces.utilities];
+      const mk = (css) => postcss.parse(css, { from: undefined }).nodes;
+      const place = (at, css) => { const nodes = css ? mk(css) : []; if (nodes.length) at.replaceWith(nodes); else at.remove(); };
+
+      for (const at of twImports) {
+        const sub = at.params.trim().match(TW_IMPORT)?.[1];
+        if (!sub) place(at, all.filter(Boolean).join("\n"));
+        else if (sub === "theme") place(at, [pieces.order, pieces.theme].filter(Boolean).join("\n"));
+        else if (sub === "preflight" || sub === "base") place(at, [pieces.preflight, pieces.core].filter(Boolean).join("\n"));
+        else if (sub === "utilities") place(at, pieces.utilities);
+        else at.remove();
+      }
+      for (const at of twDirectives) {
+        const what = at.params.trim();
+        if (what === "base") place(at, [pieces.order, pieces.theme, pieces.preflight, pieces.core].filter(Boolean).join("\n"));
+        else if (what === "utilities") place(at, pieces.utilities);
+        else at.remove();
+      }
+      // `@import` must stay in front of all rules (your own imports used to follow the framework import)
+      if (hasEntry) {
+        const imports = [];
+        root.each((n) => { if (n.type === "atrule" && n.name === "import") imports.push(n); });
+        // the layer order statement goes first of all, so layers used inside imported files keep the intended order
+        const order = [];
+        root.each((n) => { if (n.type === "atrule" && n.name === "layer" && !n.nodes && /^omnia,\s*theme,/.test(n.params)) order.push(n); });
+        const top = [...order, ...imports];
+        if (top.length) {
+          top.forEach((n) => n.remove());
+          if (root.first?.type === "atrule" && root.first.name === "charset") root.first.after(top); else root.prepend(top);
+        }
+      }
+      for (const at of themes) at.remove();
+      for (const at of sources) at.remove();
+      for (const at of misc) {
+        if (at.name === "variant") expandVariant(at, ctx);
+        else if (at.name === "utility") expandUtility(at);
+        else at.remove();
+      }
+
+      // --- @apply and theme() ---------------------------------------------------------------------------------------------------
+      const classIndex = new Map();
+      root.walkRules((r) => { if (/^\.[\w-]+$/.test(r.selector)) classIndex.set(r.selector.slice(1), r); });
+      const usedKeyframes = new Set();
+      for (const at of applies) expandApply(at, ctx, classIndex, usedKeyframes, result);
+      if (usedKeyframes.size) root.append(mk([...usedKeyframes].map((k) => KEYFRAMES[k]).filter(Boolean).join("\n")));
+      root.walkDecls((decl) => { const v = replaceThemeFunctions(decl.value, ctx); if (v !== decl.value) decl.value = v; });
+
+      for (const file of files) result.messages.push({ type: "dependency", plugin: "omniacss-migrate", file: path.resolve(file), parent: result.opts.from });
+    },
+  };
+}
+omniaMigrate.postcss = true;
+
+function expandUtility(at) {
+  if (/--value|--modifier/.test(at.toString())) { at.remove(); return; }
+  const rule = postcss.rule({ selector: `.${at.params.trim()}` });
+  at.each((n) => rule.append(n.clone()));
+  at.replaceWith(rule);
+}
+
+/** `.card { @variant dark { … } }` -> nested rule / at-rule */
+function expandVariant(at, ctx) {
+  const st = { sels: ["&"], media: [], prelude: [], rank: 0 };
+  if (!applyVariant(at.params.trim(), st, ctx)) { at.remove(); return; }
+  let content = (at.nodes || []).map((n) => n.clone());
+  if (st.sels[0] !== "&") { const r = postcss.rule({ selector: st.sels.join(", ") }); r.append(content); content = [r]; }
+  for (let i = st.media.length - 1; i >= 0; i--) {
+    const m = st.media[i].match(/^@(\S+)\s*(.*)$/);
+    const a = postcss.atRule({ name: m[1], params: m[2] }); a.append(content); content = [a];
+  }
+  if (content.length) at.replaceWith(content); else at.remove();
+}
+
+function expandApply(at, ctx, classIndex, usedKeyframes, result) {
+  const parent = at.parent;
+  if (!parent || parent.type !== "rule") { at.warn(result, "@apply outside a rule is not supported"); at.remove(); return; }
+  let params = at.params;
+  let important = false;
+  if (/\s*!important\s*$/.test(params)) { important = true; params = params.replace(/\s*!important\s*$/, ""); }
+  const actx = important ? { ...ctx, important: true } : ctx;
+  const tokens = params.split(/\s+/).filter(Boolean);
+  const inline = [];
+  const extras = [];
+  for (const token of tokens) {
+    const r = resolveToken(token, actx, { selector: "&" });
+    if (!r) {
+      const src = classIndex.get(token);
+      if (src && src !== parent) { src.each((n) => { if (n.type === "decl") inline.push([n.prop, n.value, n.important]); }); continue; }
+      at.warn(result, `@apply: cannot resolve "${token}"`);
+      continue;
+    }
+    r.keyframes.forEach((k) => usedKeyframes.add(k));
+    for (const rule of r.rules) {
+      if (rule.selectors.length === 1 && rule.selectors[0] === "&" && !rule.media.length) inline.push(...rule.decls.map(([p, v]) => [p, v.replace(/ !important$/, ""), / !important$/.test(v)]));
+      else extras.push(rule);
+    }
+  }
+  const nodes = inline.map(([prop, value, imp]) => postcss.decl({ prop, value, important: !!imp }));
+  if (nodes.length) at.replaceWith(nodes); else at.remove();
+  if (!extras.length) return;
+  const flat = parent.parent && parent.parent.type !== "rule";
+  let anchor = parent;
+  for (const x of extras) {
+    const sels = flat ? x.selectors.flatMap((s) => parent.selectors.map((ps) => s.replace(/&/g, ps))) : x.selectors;
+    let css = `${sels.join(",\n")} {\n${x.decls.map(([p, v]) => `  ${p}: ${v};`).join("\n")}\n}`;
+    for (let i = x.media.length - 1; i >= 0; i--) css = `${x.media[i]} {\n${css}\n}`;
+    const parsed = postcss.parse(css, { from: undefined }).nodes;
+    if (flat) { for (const n of parsed) { anchor.after(n); anchor = n; } } else parent.append(parsed);
+  }
+}

package/src/preflight.mjs

@@ -0,0 +1,52 @@
+// File: packages/migrate/src/preflight.mjs
+// Base reset that replaces the CSS reset of a utility framework, so migrated markup renders the same.
+// Uses Omnia palette tokens only. Emitted inside `@layer base`.
+// Author: Serge Cools | Framework: OmniaCSS
+
+/** @param {{ borderColor?: string }} [o] */
+export function preflight(o = {}) {
+  const border = o.borderColor || "currentColor";
+  return `*, ::before, ::after, ::backdrop, ::file-selector-button {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+}
+html, :host {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  -webkit-tap-highlight-color: transparent;
+}
+*, ::before, ::after, ::backdrop, ::file-selector-button { border-color: ${border}; }
+hr { height: 0; color: inherit; border-top-width: 1px; }
+abbr:where([title]) { text-decoration: underline dotted; }
+h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
+a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
+b, strong { font-weight: bolder; }
+code, kbd, samp, pre { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-size: 1em; }
+small { font-size: 80%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
+:-moz-focusring { outline: auto; }
+progress { vertical-align: baseline; }
+summary { display: list-item; }
+ol, ul, menu { list-style: none; }
+img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
+img, video { max-width: 100%; height: auto; }
+button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; }
+:where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
+::file-selector-button { margin-inline-end: 4px; }
+::placeholder { opacity: 1; color: color-mix(in oklab, currentColor 50%, transparent); }
+textarea { resize: vertical; }
+::-webkit-search-decoration { -webkit-appearance: none; }
+::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
+:-moz-ui-invalid { box-shadow: none; }
+button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; }
+[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
+button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }
+`;
+}

package/src/project.mjs

@@ -0,0 +1,194 @@
+// File: packages/migrate/src/project.mjs
+// Read a project's own Tailwind setup (CSS @theme blocks, tailwind.config.*, package.json) into a resolver context.
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import vm from "node:vm";
+import { createContext } from "./resolve.mjs";
+import { nearestToken, parseColor } from "./values.mjs";
+
+const IGNORE = new Set(["node_modules", "vendor", ".git", "storage", "dist", "build", "public", "bootstrap", ".next", ".nuxt", ".output"]);
+
+export async function findFiles(dir, test, max = 400) {
+  const out = [];
+  async function rec(d, depth) {
+    if (depth > 8 || out.length >= max) return;
+    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)) await rec(path.join(d, e.name), depth + 1); } else if (test(e.name)) out.push(path.join(d, e.name));
+    }
+  }
+  await rec(dir, 0);
+  return out;
+}
+
+/** Extract `--x: value` pairs from every `@theme { … }` block of a CSS string. */
+export function parseThemeBlocks(css) {
+  const vars = new Map();
+  const re = /@theme\b[^{]*\{/g;
+  let m;
+  while ((m = re.exec(css))) {
+    let depth = 1, i = re.lastIndex;
+    const start = i;
+    while (i < css.length && depth) { if (css[i] === "{") depth++; else if (css[i] === "}") depth--; i++; }
+    const body = css.slice(start, i - 1).replace(/\/\*[\s\S]*?\*\//g, "");
+    // only top-level declarations (skip nested @keyframes blocks)
+    let flat = "", d = 0;
+    for (const ch of body) { if (ch === "{") d++; else if (ch === "}") d--; else if (d === 0) flat += ch; }
+    for (const decl of flat.split(";")) {
+      const k = decl.indexOf(":");
+      if (k < 0) continue;
+      const name = decl.slice(0, k).trim();
+      if (name.startsWith("--")) vars.set(name, decl.slice(k + 1).trim());
+    }
+    re.lastIndex = i;
+  }
+  return vars;
+}
+
+/** Load tailwind.config.{js,cjs,mjs,ts}; returns { config, file } or null. */
+export async function loadTailwindConfig(dir) {
+  for (const name of ["tailwind.config.js", "tailwind.config.mjs", "tailwind.config.cjs", "tailwind.config.ts"]) {
+    const file = path.join(dir, name);
+    const text = await fs.readFile(file, "utf8").catch(() => null);
+    if (text == null) continue;
+    if (!name.endsWith(".ts")) {
+      try {
+        const mod = await import(pathToFileURL(file).href + "?t=" + Date.now());
+        return { config: mod.default ?? mod, file };
+      } catch { /* fall back to a sandboxed evaluation below */ }
+    }
+    try {
+      const body = text.replace(/^\s*import\s+[^;]*;?\s*$/gm, "").replace(/export\s+default\s+/, "module.exports = ").replace(/\/\*\*[\s\S]*?\*\//g, "");
+      const mod = { exports: {} };
+      const stub = new Proxy(function () { return stub; }, { get: (_, k) => (k === "default" ? stub : k === Symbol.toPrimitive ? () => "" : stub), apply: () => stub });
+      vm.runInNewContext(body, { module: mod, exports: mod.exports, require: () => stub, process, console }, { timeout: 2000 });
+      return { config: mod.exports.default ?? mod.exports, file };
+    } catch { return { config: null, file, error: true }; }
+  }
+  return null;
+}
+
+const flatColors = (obj, prefix = "") => {
+  const out = {};
+  for (const [k, v] of Object.entries(obj || {})) {
+    const name = k === "DEFAULT" ? prefix : prefix ? `${prefix}-${k}` : k;
+    if (typeof v === "string") out[name] = v;
+    else if (v && typeof v === "object") Object.assign(out, flatColors(v, name));
+  }
+  return out;
+};
+
+/**
+ * Turn a tailwind.config theme into @theme-style declarations.
+ * Colors given as literals are mapped to the nearest Omnia palette token; var()/hsl(var()) stay as written.
+ * @returns {{ decls: Array<[string,string]>, screens: Record<string,string>, notes: string[] }}
+ */
+export function themeFromConfig(config, ctx, { keepColors = false } = {}) {
+  const decls = [], notes = [], screens = {};
+  const theme = config?.theme || {};
+  const ext = theme.extend || {};
+  const colorSets = [theme.colors, ext.colors];
+  const stdKeys = new Set(["inherit", "current", "transparent", "black", "white"]);
+  for (const set of colorSets) {
+    if (!set || typeof set !== "object") continue;
+    for (const [name, raw] of Object.entries(flatColors(set))) {
+      if (typeof raw !== "string") continue;
+      let val = raw.replace(/<alpha-value>/g, "1");
+      if (stdKeys.has(name) && set === theme.colors) continue;
+      if (/^(var\(|hsl\(var|rgb\(var|hsla\(var)/i.test(val) || /var\(/.test(val)) { decls.push([`--color-${name}`, val]); continue; }
+      const parsed = parseColor(val);
+      if (parsed && !keepColors) {
+        const n = nearestToken(val, ctx);
+        if (n) { decls.push([`--color-${name}`, `var(${n.token})`]); notes.push(`color ${name}: ${raw} -> ${n.token}`); continue; }
+      }
+      decls.push([`--color-${name}`, val]);
+    }
+  }
+  const scalar = (obj, prefix, map = (v) => v) => {
+    for (const [k, v] of Object.entries(obj || {})) {
+      if (typeof v === "string" || typeof v === "number") decls.push([`--${prefix}-${k === "DEFAULT" ? "DEFAULT" : k}`, String(map(v))]);
+    }
+  };
+  scalar(ext.borderRadius || theme.borderRadius, "radius");
+  scalar(ext.spacing, "spacing");
+  scalar(ext.boxShadow, "shadow");
+  for (const [k, v] of Object.entries({ ...(theme.fontFamily || {}), ...(ext.fontFamily || {}) })) {
+    if (["sans", "serif", "mono"].includes(k) && !ext.fontFamily?.[k]) continue;
+    decls.push([`--font-${k}`, Array.isArray(v) ? v.map((f) => (/[\s\d]/.test(f) && !/^["']/.test(f) ? `"${f}"` : f)).join(", ") : String(v)]);
+  }
+  for (const [k, v] of Object.entries({ ...(theme.screens || {}), ...(ext.screens || {}) })) {
+    if (typeof v === "string") screens[k] = v.endsWith("px") ? `${+v.slice(0, -2) / 16}rem` : v;
+  }
+  if (ext.keyframes || ext.animation) notes.push("custom keyframes/animation in tailwind.config are not migrated (add them to your CSS)");
+  if (config?.plugins?.length) notes.push(`${config.plugins.length} tailwind plugin(s) in config: only tailwindcss-animate style classes are emulated`);
+  return { decls, screens, notes };
+}
+
+/**
+ * Build resolver options for a project directory.
+ * @param {string} dir project root
+ * @param {object} [overrides] options for createContext()
+ */
+export async function loadProject(dir, overrides = {}) {
+  const info = { dir, tailwindVersion: null, themeVars: new Map(), cssFiles: [], configFile: null, notes: [] };
+  let pkg = {};
+  try { pkg = JSON.parse(await fs.readFile(path.join(dir, "package.json"), "utf8")); } catch { /* no package.json */ }
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (deps.tailwindcss) info.tailwindVersion = parseInt(String(deps.tailwindcss).replace(/[^\d.]/g, ""), 10) || null;
+  if (!info.tailwindVersion && (deps["@tailwindcss/vite"] || deps["@tailwindcss/postcss"])) info.tailwindVersion = 4;
+
+  info.cssFiles = await findFiles(dir, (n) => n.endsWith(".css") || n.endsWith(".scss"));
+  let darkSelector = null, darkMode = null;
+  for (const f of info.cssFiles) {
+    const css = await fs.readFile(f, "utf8").catch(() => "");
+    for (const [k, v] of parseThemeBlocks(css)) info.themeVars.set(k, v);
+    if (/@import\s+["']tailwindcss/.test(css) || /@theme\b/.test(css)) info.tailwindVersion ||= 4;
+    if (/@tailwind\s+(base|utilities|components)/.test(css)) info.tailwindVersion ||= 3;
+    const cv = css.match(/@custom-variant\s+dark\s*\(([^;]*)\)\s*;/);
+    if (cv) {
+      darkMode = "class";
+      const sel = cv[1].match(/\.([\w-]+)/);
+      const attr = cv[1].match(/\[data-[\w-]+=["']?[\w-]+["']?\]/);
+      darkSelector = attr ? attr[0] : sel ? `.${sel[1]}` : ".dark";
+    }
+  }
+
+  const loaded = await loadTailwindConfig(dir);
+  let cfg = null;
+  if (loaded) {
+    info.configFile = loaded.file;
+    cfg = loaded.config;
+    info.tailwindVersion ||= 3;
+    if (loaded.error) info.notes.push("tailwind.config could not be evaluated; theme extensions were not read");
+  }
+  if (cfg) {
+    const dm = Array.isArray(cfg.darkMode) ? cfg.darkMode[0] : cfg.darkMode;
+    if (dm === "class" || dm === "selector") { darkMode ||= "class"; if (Array.isArray(cfg.darkMode) && cfg.darkMode[1]) darkSelector ||= cfg.darkMode[1]; }
+    else if (dm === "media") darkMode ||= "media";
+  }
+
+  const probe = createContext({ ...overrides });
+  const fromConfig = cfg ? themeFromConfig(cfg, probe, { keepColors: overrides.keepBrandColors }) : { decls: [], screens: {}, notes: [] };
+  info.notes.push(...fromConfig.notes);
+  const themeDecls = new Map(fromConfig.decls);
+  const themeVars = new Set([...info.themeVars.keys(), ...themeDecls.keys()]);
+  const v4 = overrides.v4 ?? (info.tailwindVersion ? info.tailwindVersion >= 4 : true);
+  const ctx = createContext({
+    v4,
+    darkMode: overrides.darkMode || darkMode || (v4 ? "media" : "media"),
+    darkSelector: overrides.darkSelector || darkSelector || ".dark",
+    themeVars,
+    screens: { ...fromConfig.screens, ...(overrides.screens || {}) },
+    container: cfg?.theme?.container ? { center: !!cfg.theme.container.center, padding: typeof cfg.theme.container.padding === "string" ? cfg.theme.container.padding : undefined } : {},
+    prefix: cfg?.prefix || overrides.prefix,
+    important: cfg?.important === true,
+    breakpoints: overrides.breakpoints,
+    arbitraryColors: overrides.arbitraryColors,
+    tokensFile: overrides.tokensFile,
+  });
+  return { ctx, info, themeDecls, themeCss: info.themeVars };
+}