@birdycom/omniacss-migrate 0.0.0-stage → 0.11.0

package/src/values.mjs

@@ -0,0 +1,184 @@
+// File: packages/migrate/src/values.mjs
+// Value helpers for the compat resolver: arbitrary values, spacing scale, colors (Omnia tokens only), theme lookup.
+// Author: Serge Cools | Framework: OmniaCSS
+
+import { createRequire } from "node:module";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const here = path.dirname(fileURLToPath(import.meta.url));
+export const COLOR_MAP = JSON.parse(fs.readFileSync(path.join(here, "data/colors.json"), "utf8"));
+
+const fmt = (n) => String(+n.toFixed(5));
+export const isNum = (s) => /^-?(\d+\.?\d*|\.\d+)$/.test(s);
+export const rem = (n) => (n === 0 ? "0px" : `${fmt(n * 0.25)}rem`);
+
+export const TYPE_HINTS = "length|color|percentage|number|url|string|angle|family-name|image|position|size|line-width|absolute-size|relative-size|bg-size|integer|ratio|vector|shadow|any";
+
+/** `[37px]`, `[length:var(--x)]`, `(--x)`, `(length:--x)` -> { type, value } or null. */
+export function arb(v) {
+  if (typeof v !== "string") return null;
+  let m = v.match(/^\[(?:([a-z-]+):(?!:))?([\s\S]*)\]$/);
+  if (m && (!m[1] || new RegExp(`^(${TYPE_HINTS})$`).test(m[1]))) return { type: m[1] || null, value: normalizeArb(m[2]) };
+  if (m && m[1]) return { type: null, value: normalizeArb(m[1] + ":" + m[2]) };
+  m = v.match(/^\((?:([a-z-]+):)?(--[^)]+)\)$/);
+  if (m) return { type: m[1] || null, value: `var(${m[2]})` };
+  return null;
+}
+
+/** Underscores are spaces inside arbitrary values (except url() and escaped `\_`). */
+export function normalizeArb(s) {
+  if (/^url\(/.test(s)) return s;
+  return s.replace(/\\_/g, "\u0000").replace(/_/g, " ").replace(/\u0000/g, "_");
+}
+
+export function inferType(val) {
+  if (/^(#[0-9a-f]{3,8}$|rgba?\(|hsla?\(|oklch\(|oklab\(|lab\(|lch\(|color\(|color-mix\(|hwb\()/i.test(val)) return "color";
+  if (/^(url\(|(repeating-)?(linear|radial|conic)-gradient\()/.test(val)) return "image";
+  if (/^-?(\d+\.?\d*|\.\d+)(px|rem|em|%|vw|vh|vmin|vmax|svh|dvh|lvh|ch|ex|cm|mm|in|pt|pc|fr|cqw|cqh)$/.test(val) || /^(calc|clamp|min|max)\(/.test(val)) return "length";
+  if (isNum(val)) return "number";
+  return null;
+}
+
+/** Negate a CSS length. */
+export function negate(val) {
+  if (val === "0px" || val === "0") return val;
+  if (/^[\d.]/.test(val)) return "-" + val;
+  if (val.startsWith("-") && /^-[\d.]/.test(val)) return val.slice(1);
+  return `calc(${val} * -1)`;
+}
+
+/**
+ * Spacing value (margin, padding, gap, inset, sizing …).
+ * @param {string} v token value ("4", "px", "1/2", "[37px]", "full", "auto" …)
+ * @param {object} ctx resolver context
+ * @param {{ neg?: boolean, keywords?: Record<string,string>, fractions?: boolean }} [o]
+ */
+export function spacing(v, ctx, o = {}) {
+  let out = null;
+  if (o.keywords && Object.hasOwn(o.keywords, v)) out = o.keywords[v];
+  else if (arb(v)) out = arb(v).value;
+  else if (ctx.hasTheme(`--spacing-${v}`)) out = `var(--spacing-${v})`;
+  else if (v === "px") out = "1px";
+  else if (isNum(v) && +v >= 0) out = rem(+v);
+  else if (o.fractions !== false && /^(\d+)\/(\d+)$/.test(v)) { const [a, b] = v.split("/").map(Number); out = b ? `${fmt((a / b) * 100)}%` : null; }
+  if (out == null) return null;
+  return o.neg ? negate(out) : out;
+}
+
+// --- colors -----------------------------------------------------------------------------------------------
+
+let paletteCache;
+/** Omnia palette (from @birdycom/omniacss dist/oc-colors.css) as OKLab points, for approximating arbitrary colors. */
+function palette(ctx) {
+  if (paletteCache) return paletteCache;
+  const files = [ctx.tokensFile, path.resolve(here, "../../core/dist/oc-colors.css")].filter(Boolean);
+  try { files.unshift(require.resolve("@birdycom/omniacss/tokens")); } catch { /* monorepo fallback */ }
+  let css = "";
+  for (const f of files) { try { css = fs.readFileSync(f, "utf8"); break; } catch { /* next */ } }
+  const FAMILIES = new Set("red pink orange yellow violet magenta purple indigo lime green teal cyan turquoise blue shallowblue duskblue twilightblue stormblue frostblue mistblue vividblue skycyan wheat peru brown white snow azure beige ivory linen silver gray black".split(" "));
+  paletteCache = [];
+  for (const m of css.matchAll(/--color-([a-z]+)-(\d+): oklch\(([\d.]+)% ([\d.]+) (none|[\d.]+)(?:deg)?\)/g)) {
+    if (!FAMILIES.has(m[1]) || m[2] === "100") continue;
+    const L = +m[3] / 100, C = +m[4], H = m[5] === "none" ? 0 : (+m[5] * Math.PI) / 180;
+    paletteCache.push({ token: `--color-${m[1]}-${m[2]}`, lab: [L, C * Math.cos(H), C * Math.sin(H)] });
+  }
+  return paletteCache;
+}
+
+function rgbToOklab(r, g, b) {
+  const lin = (v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+  [r, g, b] = [lin(r), lin(g), lin(b)];
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s];
+}
+
+/** Parse #hex / rgb() / hsl() into [r,g,b,alpha] or null. */
+export function parseColor(str) {
+  str = str.trim();
+  let m = str.match(/^#([0-9a-f]{3,8})$/i);
+  if (m) {
+    let h = m[1];
+    if (h.length <= 4) h = [...h].map((c) => c + c).join("");
+    if (h.length !== 6 && h.length !== 8) return null;
+    return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)).concat(h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1);
+  }
+  m = str.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i);
+  if (m) return [+m[1], +m[2], +m[3], m[4] ? (m[4].endsWith("%") ? parseFloat(m[4]) / 100 : +m[4]) : 1];
+  m = str.match(/^hsla?\(\s*([\d.]+)(?:deg)?[\s,]+([\d.]+)%[\s,]+([\d.]+)%(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i);
+  if (m) {
+    const h = +m[1] / 360, s = +m[2] / 100, l = +m[3] / 100;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => { const k = (n + h * 12) % 12; return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)); };
+    return [f(0) * 255, f(8) * 255, f(4) * 255, m[4] ? (m[4].endsWith("%") ? parseFloat(m[4]) / 100 : +m[4]) : 1];
+  }
+  m = str.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+(none|[\d.]+)(?:deg)?(?:\s*\/\s*([\d.]+%?))?\s*\)$/i);
+  if (m) {
+    const l = m[2] ? +m[1] / 100 : +m[1], C = +m[3], H = m[4] === "none" ? 0 : (+m[4] * Math.PI) / 180;
+    const a = C * Math.cos(H), b = C * Math.sin(H);
+    const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3, m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3, s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    const lin = [4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_, -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_, -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_];
+    const enc = (v) => { v = Math.min(1, Math.max(0, v)); return (v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055) * 255; };
+    return [...lin.map(enc), m[5] ? (m[5].endsWith("%") ? parseFloat(m[5]) / 100 : +m[5]) : 1];
+  }
+  return null;
+}
+
+/** Nearest Omnia token (`--color-x-y`) for a color string; null if it cannot be parsed. */
+export function nearestToken(str, ctx) {
+  const c = parseColor(str);
+  if (!c) return null;
+  const [L, A, B] = rgbToOklab(c[0], c[1], c[2]);
+  let best = null;
+  for (const p of palette(ctx)) {
+    const d = (L - p.lab[0]) ** 2 * 1.4 + (A - p.lab[1]) ** 2 + (B - p.lab[2]) ** 2;
+    if (!best || d < best.d) best = { d, token: p.token };
+  }
+  return best ? { token: best.token, alpha: c[3] } : null;
+}
+
+/** Wrap an Omnia-token color with an alpha (0..100 %). */
+export const withAlpha = (color, pct) => `color-mix(in oklab, ${color} ${fmt(pct)}%, transparent)`;
+
+/** Color for an arbitrary/literal value, mapped to the Omnia palette unless ctx.arbitraryColors === "keep". */
+function literalColor(val, ctx) {
+  if (ctx.arbitraryColors === "keep") return val;
+  const n = nearestToken(val, ctx);
+  if (!n) return val;
+  const base = `var(${n.token})`;
+  return n.alpha < 1 ? withAlpha(base, n.alpha * 100) : base;
+}
+
+/**
+ * Resolve a color name/value ("red-500", "white", "primary", "[#fff]", "(--x)") with an optional opacity modifier.
+ * @returns {string|null}
+ */
+export function color(v, mod, ctx, { hinted = false } = {}) {
+  let out = null;
+  const a = arb(v);
+  if (a) {
+    if (a.type && a.type !== "color") return null;
+    if (!a.type && !hinted && inferType(a.value) !== "color" && !/^var\(/.test(a.value)) return null;
+    out = /^var\(/.test(a.value) ? a.value : literalColor(a.value, ctx);
+  } else if (v === "transparent" || v === "current" || v === "inherit") out = v === "current" ? "currentColor" : v;
+  else if (ctx.hasTheme(`--color-${v}`)) out = `var(--color-${v})`;
+  else if (ctx.customColors?.has(v)) out = ctx.customColors.get(v);
+  else if (COLOR_MAP[v]) out = `var(${COLOR_MAP[v]})`;
+  if (out == null) return null;
+  if (mod != null && mod !== "") {
+    const ma = arb(mod);
+    let pct = ma ? (+ma.value <= 1 ? +ma.value * 100 : +ma.value) : +mod;
+    if (!Number.isFinite(pct)) return out;
+    if (out === "transparent") return out;
+    out = withAlpha(out, pct);
+  }
+  return out;
+}
+
+/** Shared by utilities: 0-100 style number -> fraction (opacity-50 -> 0.5). */
+export const frac = (n) => fmt(+n / 100);
+export { fmt };

package/src/variants.mjs

@@ -0,0 +1,189 @@
+// File: packages/migrate/src/variants.mjs
+// Variant handling: hover:, md:, dark:, group-hover:, data-[state=open]:, [&>svg]:, has-[...]: …
+// A variant transforms a "state" ({ sels, media, prelude, rank }) around the utility's class selector.
+// Author: Serge Cools | Framework: OmniaCSS
+
+import { arb, normalizeArb } from "./values.mjs";
+
+/** Escape a string for use in a CSS class selector. */
+export function esc(s) {
+  return s.replace(/^\d/, (c) => `\\3${c} `).replace(/[^A-Za-z0-9_ -￿-]/g, (c) => `\\${c}`).replace(/^-(\d)/, "-\\3$1 ");
+}
+
+/** Split on `sep` outside of [] and (). */
+export function splitTop(str, sep) {
+  const out = [];
+  let depth = 0, cur = "";
+  for (let i = 0; i < str.length; i++) {
+    const ch = str[i];
+    if (ch === "\\") { cur += ch + (str[++i] ?? ""); continue; }
+    if (ch === "[" || ch === "(") depth++;
+    else if (ch === "]" || ch === ")") depth--;
+    if (ch === sep && depth === 0) { out.push(cur); cur = ""; } else cur += ch;
+  }
+  out.push(cur);
+  return out;
+}
+
+// Rank: static pseudo-classes in cascade order (hover < focus < active < disabled …), then group/peer, dark, media, screens.
+const PSEUDO_ORDER = ["first-letter", "first-line", "marker", "selection", "file", "placeholder", "backdrop", "before", "after", "first", "last", "only", "odd", "even", "first-of-type", "last-of-type", "only-of-type",
+  "visited", "target", "open", "default", "checked", "indeterminate", "placeholder-shown", "autofill", "optional", "required", "valid", "invalid", "user-valid", "user-invalid", "in-range", "out-of-range", "read-only", "empty",
+  "focus-within", "hover", "focus", "focus-visible", "active", "enabled", "disabled"];
+
+const PSEUDO_CLASS = {
+  first: ":first-child", last: ":last-child", only: ":only-child", odd: ":nth-child(odd)", even: ":nth-child(even)", "first-of-type": ":first-of-type", "last-of-type": ":last-of-type", "only-of-type": ":only-of-type",
+  visited: ":visited", target: ":target", open: ":is([open], :popover-open, :open)", default: ":default", checked: ":checked", indeterminate: ":indeterminate", "placeholder-shown": ":placeholder-shown", autofill: ":autofill",
+  optional: ":optional", required: ":required", valid: ":valid", invalid: ":invalid", "user-valid": ":user-valid", "user-invalid": ":user-invalid", "in-range": ":in-range", "out-of-range": ":out-of-range", "read-only": ":read-only",
+  empty: ":empty", "focus-within": ":focus-within", hover: ":hover", focus: ":focus", "focus-visible": ":focus-visible", active: ":active", enabled: ":enabled", disabled: ":disabled", inert: ":is([inert], [inert] *)",
+};
+const PSEUDO_ELEMENT = {
+  before: "::before", after: "::after", "first-letter": "::first-letter", "first-line": "::first-line", marker: "::marker", placeholder: "::placeholder", backdrop: "::backdrop", file: "::file-selector-button",
+};
+const MEDIA = {
+  print: "print", "motion-safe": "(prefers-reduced-motion: no-preference)", "motion-reduce": "(prefers-reduced-motion: reduce)", portrait: "(orientation: portrait)", landscape: "(orientation: landscape)",
+  "contrast-more": "(prefers-contrast: more)", "contrast-less": "(prefers-contrast: less)", "forced-colors": "(forced-colors: active)", "pointer-fine": "(pointer: fine)", "pointer-coarse": "(pointer: coarse)",
+  "pointer-none": "(pointer: none)", "any-pointer-fine": "(any-pointer: fine)", "any-pointer-coarse": "(any-pointer: coarse)", "noscript": "(scripting: none)",
+};
+const ARIA = ["busy", "checked", "disabled", "expanded", "hidden", "pressed", "readonly", "required", "selected"];
+
+const quoteAttr = (s) => {
+  const m = s.match(/^([^=~|^$*]+)([~|^$*]?=)(.*)$/);
+  if (!m) return s;
+  let v = m[3];
+  if (!/^["']/.test(v)) v = `"${v}"`;
+  return `${m[1]}${m[2]}${v}`;
+};
+
+/** Selector pattern ("&:hover", "&[data-x]") that a pseudo-ish variant name applies to the element, or null. */
+function innerPattern(name, ctx) {
+  const st = { sels: ["&"], media: [], prelude: [], rank: 0 };
+  const ok = applyVariant(name, st, ctx, { inner: true });
+  return ok && !st.media.length ? st.sels[0] : null;
+}
+
+/**
+ * Apply one variant to the state.
+ * @returns {boolean} false when the variant is unknown
+ */
+export function applyVariant(name, st, ctx, { inner = false } = {}) {
+  const mapSels = (fn) => { st.sels = st.sels.map(fn); };
+  const rankOf = (n) => { const i = PSEUDO_ORDER.indexOf(n); return (i < 0 ? 40 : i) + 1; };
+
+  if (PSEUDO_CLASS[name]) { mapSels((s) => addSimple(s, PSEUDO_CLASS[name])); st.rank += rankOf(name) * 10; return true; }
+  if (name === "selection") { st.sels = st.sels.flatMap((s) => [`${s} ::selection`, `${s}::selection`]); st.rank += 40; return true; }
+  if (PSEUDO_ELEMENT[name]) {
+    mapSels((s) => s + PSEUDO_ELEMENT[name]);
+    if (name === "before" || name === "after") st.prelude.push(["content", "var(--oc-content, \"\")"]);
+    st.rank += rankOf(name) * 10; return true;
+  }
+  if (name === "dark") {
+    if (ctx.darkMode === "media") st.media.unshift("@media (prefers-color-scheme: dark)");
+    else mapSels((s) => `${ctx.darkSelector} ${s}`);
+    st.rank += 5000; return true;
+  }
+  if (name === "ltr" || name === "rtl") { mapSels((s) => `[dir="${name}"] ${s}`); st.rank += 4000; return true; }
+  if (MEDIA[name]) { st.media.unshift(`@media ${MEDIA[name]}`); st.rank += 6000; return true; }
+  if (name === "starting") { st.media.unshift("@starting-style"); st.rank += 6500; return true; }
+  if (name === "*") { mapSels((s) => `${s} > *`); st.rank += 3000; return true; }
+  if (name === "**") { mapSels((s) => `${s} *`); st.rank += 3000; return true; }
+
+  // screens
+  if (ctx.screens[name]) { st.media.unshift(`@media (min-width: ${ctx.screens[name]})`); st.rank += 10000 + ctx.screenRank(name); return true; }
+  let m = name.match(/^max-(.+)$/);
+  if (m && ctx.screens[m[1]]) { st.media.unshift(`@media (width < ${ctx.screens[m[1]]})`); st.rank += 9000 - ctx.screenRank(m[1]); return true; }
+  m = name.match(/^(min|max)-(\[.+\])$/);
+  if (m) { const a = arb(m[2]); st.media.unshift(`@media (${m[1]}-width: ${a.value})`); st.rank += m[1] === "min" ? 10050 : 8999; return true; }
+  // container queries
+  m = name.match(/^@(?:(min|max)-)?(.+?)(?:\/([\w-]+))?$/);
+  if (m) {
+    const [, kind, size, cname] = m;
+    const sizes = { "3xs": 16, "2xs": 18, xs: 20, sm: 24, md: 28, lg: 32, xl: 36, "2xl": 42, "3xl": 48, "4xl": 56, "5xl": 64, "6xl": 72, "7xl": 80 };
+    const a = arb(size);
+    const width = a ? a.value : sizes[size] ? `${sizes[size]}rem` : null;
+    if (width) {
+      const cond = kind === "max" ? `(width < ${width})` : `(min-width: ${width})`;
+      st.media.unshift(`@container ${cname ? cname + " " : ""}${cond}`);
+      st.rank += 20000 + (sizes[size] || 0); return true;
+    }
+  }
+  // supports
+  m = name.match(/^(not-)?supports-(.+)$/);
+  if (m) {
+    const a = arb(m[2]);
+    const cond = a ? (/^[\w-]+:/.test(a.value) ? `(${a.value})` : a.value) : `(${m[2]}: var(--oc-x))`;
+    st.media.unshift(`@supports ${m[1] ? "not " : ""}${cond}`); st.rank += 6200; return true;
+  }
+  // data- / aria-
+  m = name.match(/^data-(.+)$/);
+  if (m) {
+    const a = arb(m[1]);
+    const attr = a ? `[data-${quoteAttr(a.value)}]` : `[data-${m[1]}]`;
+    mapSels((s) => addSimple(s, attr)); st.rank += 3500; return true;
+  }
+  m = name.match(/^aria-(.+)$/);
+  if (m) {
+    const a = arb(m[1]);
+    const attr = a ? `[aria-${quoteAttr(a.value)}]` : `[aria-${m[1]}="true"]`;
+    mapSels((s) => addSimple(s, attr)); st.rank += 3500; return true;
+  }
+  // group / peer
+  m = name.match(/^(group|peer)(?:-(.+?))?(?:\/([\w-]+))?$/);
+  if (m && m[2] !== undefined) {
+    const [, kind, innerName, gname] = m;
+    const base = `.${kind}${gname ? "\\/" + esc(gname) : ""}`;
+    let pattern;
+    const a = arb(innerName);
+    if (a) pattern = a.value.includes("&") ? a.value : `&${a.value}`;
+    else pattern = innerPattern(innerName, ctx);
+    if (!pattern) return false;
+    const rel = pattern.replace(/&/g, base);
+    mapSels((s) => (kind === "group" ? `${rel} ${s}` : `${rel} ~ ${s}`));
+    st.rank += 2000; return true;
+  }
+  // has / not / in / nth
+  m = name.match(/^(has|not|in)-(.+)$/);
+  if (m) {
+    const [, kind, innerName] = m;
+    const a = arb(innerName);
+    let pattern;
+    if (a) pattern = a.value.includes("&") ? a.value : `&${a.value}`;
+    else pattern = innerPattern(innerName, ctx);
+    if (kind === "not" && !pattern) {
+      const med = MEDIA[innerName];
+      if (med) { st.media.unshift(`@media not ${med}`); st.rank += 6000; return true; }
+      if (ctx.screens[innerName]) { st.media.unshift(`@media (width < ${ctx.screens[innerName]})`); st.rank += 9000; return true; }
+    }
+    if (!pattern) return false;
+    const rest = pattern.startsWith("&") ? pattern.slice(1) : pattern;
+    if (kind === "has") mapSels((s) => addSimple(s, `:has(${rest})`));
+    else if (kind === "not") mapSels((s) => addSimple(s, `:not(${rest})`));
+    else mapSels((s) => `:where(${rest || "*"}) ${s}`);
+    st.rank += 3200; return true;
+  }
+  m = name.match(/^nth-(last-)?(of-type-)?(.+)$/);
+  if (m) {
+    const a = arb(m[3]);
+    const arg = a ? a.value : m[3];
+    mapSels((s) => `${s}:nth-${m[1] ? "last-" : ""}${m[2] ? "of-type" : "child"}(${arg})`); st.rank += 450; return true;
+  }
+  if (ctx.customVariants && Object.hasOwn(ctx.customVariants, name)) {
+    const p = ctx.customVariants[name].trim();
+    if (p.startsWith("@")) st.media.unshift(p); else mapSels((s) => p.replace(/&/g, s));
+    st.rank += 3000; return true;
+  }
+  // arbitrary variant: [&>*]:, [&_svg]:, [@media(min-width:900px)]:
+  m = name.match(/^\[([\s\S]+)\]$/);
+  if (m) {
+    const body = normalizeArb(m[1]);
+    if (body.startsWith("@")) { st.media.unshift(body.replace(/^@(media|supports|container)\s*/, "@$1 ")); st.rank += 6100; return true; }
+    if (!body.includes("&")) return false;
+    mapSels((s) => body.replace(/&/g, s)); st.rank += 3000; return true;
+  }
+  return false;
+}
+
+/** Append a simple selector (pseudo-class, attribute …) in front of a trailing pseudo-element: `.a::after` + `:hover` -> `.a:hover::after`. */
+function addSimple(sel, suffix) {
+  const m = sel.match(/^(.*?)(::[a-z-]+)$/s);
+  return m ? m[1] + suffix + m[2] : sel + suffix;
+}

package/src/vite.mjs

@@ -0,0 +1,81 @@
+// File: packages/migrate/src/vite.mjs
+// Vite plugin: drop-in replacement for the Tailwind Vite plugin. It puts the "keep your classes" PostCSS plugin
+// in front of your existing PostCSS plugins (autoprefixer …) and removes any Tailwind PostCSS plugin.
+//
+//   // vite.config.js
+//   import omniaMigrate from "@birdycom/omniacss-migrate/vite";
+//   export default defineConfig({ plugins: [laravel({ ... }), omniaMigrate()] });
+//
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+import postcss from "postcss";
+import omniaMigratePostcss from "./postcss.mjs";
+
+// every PostCSS entry that belongs to the Tailwind ecosystem is dropped (@tailwindcss/postcss, tailwindcss, @iconify/tailwind4 …)
+const isTailwind = (name) => /tailwind/i.test(name);
+
+/** Load the project's postcss.config.* into a plugin array (Tailwind removed). */
+async function loadExistingPlugins(root) {
+  const file = ["postcss.config.js", "postcss.config.mjs", "postcss.config.cjs"].map((f) => path.join(root, f)).find((f) => fs.existsSync(f));
+  if (!file) return [];
+  let cfg;
+  try { const mod = await import(pathToFileURL(file).href); cfg = mod.default ?? mod; } catch { return []; }
+  if (typeof cfg === "function") cfg = cfg({ env: process.env.NODE_ENV || "development" });
+  const plugins = cfg?.plugins;
+  if (!plugins) return [];
+  const req = createRequire(path.join(root, "package.json"));
+  const out = [];
+  if (Array.isArray(plugins)) {
+    for (const p of plugins) {
+      if (typeof p === "string") { if (isTailwind(p)) continue; try { const m = req(p); out.push((m.default ?? m)()); } catch { /* skip */ } }
+      else if (p && (p.postcssPlugin === "tailwindcss" || p.postcssPlugin === "@tailwindcss/postcss" || p.postcssPlugin === "internal:tailwind")) continue;
+      else if (typeof p === "function" && (p.name === "tailwindcss" || p.postcssPlugin === "tailwindcss")) continue;
+      else out.push(p);
+    }
+  } else {
+    for (const [name, opts] of Object.entries(plugins)) {
+      if (isTailwind(name) || opts === false) continue;
+      try {
+        const m = await import(pathToFileURL(req.resolve(name)).href).catch(() => ({ default: req(name) }));
+        const factory = m.default ?? m;
+        out.push(typeof factory === "function" ? factory(opts) : factory);
+      } catch { /* plugin not installed: skip */ }
+    }
+  }
+  return out;
+}
+
+/** @param {Parameters<typeof omniaMigratePostcss>[0]} [options] */
+export default function omniaMigrate(options = {}) {
+  let root = process.cwd();
+  return {
+    name: "omniacss-migrate",
+    enforce: "pre",
+    // Vite inlines `@import` before PostCSS plugins run, and `@import "tailwindcss"` no longer resolves once the package is gone:
+    // so the directive entry files are compiled here, before Vite looks at them. @apply in imported files is handled by the PostCSS plugin below.
+    async transform(code, id) {
+      const file = id.split("?")[0];
+      if (!/\.(css|pcss|postcss)$/.test(file)) return null;
+      if (!/@import\s+["']tailwindcss|@tailwind\s+\w+|@apply\s|@theme\b/.test(code)) return null;
+      const result = await postcss([omniaMigratePostcss({ cwd: root, ...options })]).process(code, { from: file, map: false });
+      for (const m of result.messages) if (m.type === "dependency" && m.file) this.addWatchFile(m.file);
+      return { code: result.css, map: null };
+    },
+    configResolved(config) {
+      root = config.root;
+    },
+    async config(config) {
+      const root = path.resolve(config.root || process.cwd());
+      config.css ||= {};
+      const existing = config.css.postcss;
+      if (typeof existing === "string") return; // custom config dir: use the PostCSS plugin there instead
+      const others = existing && typeof existing === "object" && existing.plugins ? existing.plugins : await loadExistingPlugins(root);
+      const keep = others.filter((p) => !(p && (p.postcssPlugin === "tailwindcss" || p.postcssPlugin === "@tailwindcss/postcss" || p.name === "tailwindcss")) && p !== omniaMigratePostcss);
+      config.css.postcss = { ...(existing && typeof existing === "object" ? existing : {}), plugins: [omniaMigratePostcss({ cwd: root, ...options }), ...keep] };
+    },
+  };
+}