@birdycom/omniacss-migrate 0.11.2 → 0.12.1

package/README.md

@@ -31,9 +31,10 @@ export default defineConfig({ plugins: [laravel({ input: ["resources/css/app.css
 ```
 
 ```css
-/* resources/css/app.css: unchanged. Both forms are understood: */
+/* resources/css/app.css: the entry, under our own name (setup --write renames @import "tailwindcss" to it): */
+@import "@birdycom/omniacss-migrate";
+/* the Tailwind forms keep working too: */
 @import "tailwindcss";
-/* or */
 @tailwind base; @tailwind components; @tailwind utilities;
 ```
 
@@ -47,7 +48,7 @@ export default { plugins: [omniaMigrate({ content: ["resources/views/**/*.blade.
 
 ## What the plugin does
 
-- Replaces `@import "tailwindcss"` / `@tailwind base|components|utilities` with Omnia core (tokens + the Omnia classes you use), a small base reset and the compat CSS for the classes it finds in your content.
+- Replaces `@import "@birdycom/omniacss-migrate"` / `@import "tailwindcss"` / `@tailwind base|components|utilities` with Omnia core (tokens + the Omnia classes you use), a small base reset and the compat CSS for the classes it finds in your content.
 - Expands `@apply` (with variants, `!important`, and your own classes), `theme(colors.red.500)`, `--spacing(4)`, `@theme`, `@custom-variant`, `@variant`, `@source`, `@source inline("…")`; ignores `@plugin` and `@config`.
 - Reads `tailwind.config.{js,cjs,mjs}` (`darkMode`, `theme.colors`/`extend.colors`, `fontFamily`, `borderRadius`, `spacing`, `boxShadow`, `screens`, `container`, `prefix`, `important`) and your `@theme` blocks.
 - Output is wrapped in cascade layers `omnia, theme, base, components, utilities`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniacss-migrate",
-  "version": "0.11.2",
+  "version": "0.12.1",
   "description": "Switch a Laravel / Vue / React project from Tailwind CSS to OmniaCSS and keep your class names (PostCSS + Vite plugin, scan, setup, codemod), or convert a Bootstrap 3/4/5 site to OmniaCSS + OmniaUI.",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,10 @@
     "omniacss-migrate": "./bin/omniacss-migrate.mjs"
   },
   "exports": {
-    ".": "./src/index.mjs",
+    ".": {
+      "style": "./src/entry.css",
+      "default": "./src/index.mjs"
+    },
     "./postcss": "./src/postcss.mjs",
     "./vite": "./src/vite.mjs",
     "./cli": "./src/cli.mjs",
@@ -51,7 +54,7 @@
     "build:colors": "node scripts/build-color-map.mjs"
   },
   "dependencies": {
-    "@birdycom/omniacss": "^0.11.2",
+    "@birdycom/omniacss": "^0.12.1",
     "postcss": "^8.5.3"
   },
   "publishConfig": {

package/src/entry.css

@@ -0,0 +1,8 @@
+/* File: packages/migrate/src/entry.css
+   What `@import "@birdycom/omniacss-migrate";` resolves to when a bundler inlines the import itself (Vite with the
+   PostCSS plugin in postcss.config.js). The plugin replaces these directives with OmniaCSS core + compat CSS.
+   With the Vite plugin the import never gets this far: it is compiled before Vite looks at it.
+   Author: Serge Cools | Framework: OmniaCSS */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.mjs

@@ -8,5 +8,6 @@ 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 { loadOmniaIndex, nativeFor } from "./native.mjs";
 export { default as postcss } from "./postcss.mjs";
 export { default as vite } from "./vite.mjs";

package/src/postcss.mjs

@@ -1,6 +1,6 @@
 // File: packages/migrate/src/postcss.mjs
 // PostCSS plugin "keep your classes": replaces the framework directives in your CSS
-//   @import "tailwindcss";  /  @tailwind base|components|utilities;
+//   @import "tailwindcss";  /  @import "@birdycom/omniacss-migrate";  /  @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
@@ -21,7 +21,8 @@ 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)?)?["']/;
+// `@import "tailwindcss"`, or the same entry under our own name, so a project can drop every Tailwind mention.
+const TW_IMPORT = /^["'](?:tailwindcss|@birdycom\/omniacss-migrate)(?:\/(theme|preflight|utilities|base|components)(?:\.css)?)?["']/;
 const fileTokenCache = new Map();
 
 /** Default content globs when none are given. */
@@ -197,7 +198,8 @@ export default function omniaMigrate(options = {}) {
       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;
+      // `from`: the stylesheet being built, so Vite resolves url() in the generated CSS against it (no "did not pass from" warning).
+      const mk = (css) => postcss.parse(css, { from: result.opts.from }).nodes;
       const place = (at, css) => { const nodes = css ? mk(css) : []; if (nodes.length) at.replaceWith(nodes); else at.remove(); };
 
       for (const at of twImports) {
@@ -293,7 +295,8 @@ function expandApply(at, ctx, classIndex, usedKeyframes, result) {
       else extras.push(rule);
     }
   }
-  const nodes = inline.map(([prop, value, imp]) => postcss.decl({ prop, value, important: !!imp }));
+  // `source` of the @apply: Vite resolves url() in these declarations against the file they are written in.
+  const nodes = inline.map(([prop, value, imp]) => postcss.decl({ prop, value, important: !!imp, source: at.source }));
   if (nodes.length) at.replaceWith(nodes); else at.remove();
   if (!extras.length) return;
   const flat = parent.parent && parent.parent.type !== "rule";
@@ -302,7 +305,7 @@ function expandApply(at, ctx, classIndex, usedKeyframes, result) {
     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;
+    const parsed = postcss.parse(css, { from: at.source?.input.file ?? result.opts.from }).nodes;
     if (flat) { for (const n of parsed) { anchor.after(n); anchor = n; } } else parent.append(parsed);
   }
 }

package/src/project.mjs

@@ -146,7 +146,7 @@ export async function loadProject(dir, overrides = {}) {
   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 (/@import\s+["'](?:tailwindcss|@birdycom\/omniacss-migrate)/.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) {

package/src/setup.mjs

@@ -5,12 +5,14 @@
 
 import fs from "node:fs/promises";
 import path from "node:path";
+import { createRequire } from "node:module";
 import { loadProject, loadTailwindConfig, themeFromConfig, findFiles } from "./project.mjs";
 import { createContext } from "./resolve.mjs";
 
 const TW_PKGS = ["tailwindcss", "@tailwindcss/vite", "@tailwindcss/postcss"];
 const TW_NAME = "(?:@tailwindcss\\/vite|@tailwindcss\\/postcss|tailwindcss)";
-const VERSION = "^0.4.0";
+// The range written into the project: this package's own version, so it never goes stale.
+const VERSION = `^${createRequire(import.meta.url)("../package.json").version}`;
 
 const read = (f) => fs.readFile(f, "utf8").catch(() => null);
 
@@ -147,10 +149,17 @@ export async function planSetup(dir, { keepBrandColors = false } = {}) {
   let entryDone = false;
   for (const f of cssFiles) {
     const before = await read(f);
-    if (!/@import\s+["']tailwindcss|@tailwind\s+(base|utilities)/.test(before)) continue;
+    if (!/@import\s+["'](?:tailwindcss|@birdycom\/omniacss-migrate)|@tailwind\s+(base|utilities)/.test(before)) continue;
     detected.css.push(path.relative(dir, f));
-    if (entryDone) continue;
+    // `@import "tailwindcss"` -> `@import "@birdycom/omniacss-migrate"` (same entry, no Tailwind name left).
+    // The v3 `@tailwind …` directives stay: they may sit mid-file, where an @import is not allowed.
+    const renamed = before.replace(/(@import\s+)(["'])tailwindcss((?:\/[\w.-]+)?)\2/g, "$1$2@birdycom/omniacss-migrate$3$2");
+    const isEntry = !entryDone;
     entryDone = true;
+    if (!isEntry) {
+      if (renamed !== before) changes.push({ file: f, before, after: renamed, note: 'rename @import "tailwindcss" to @import "@birdycom/omniacss-migrate"' });
+      continue;
+    }
     const add = [];
     if (loaded?.config) {
       const t = themeFromConfig(loaded.config, createContext({}), { keepColors: keepBrandColors });
@@ -165,15 +174,17 @@ export async function planSetup(dir, { keepBrandColors = false } = {}) {
       if ((dm === "class" || dm === "selector") && !/@custom-variant\s+dark/.test(before)) add.push("@custom-variant dark (&:where(.dark, .dark *));");
     }
     if (add.length) {
-      const re = /^(@import\s+["']tailwindcss["'][^;\n]*;|@tailwind\s+utilities;)[ \t]*\r?\n/m;
-      const m = before.match(re);
-      const eol = before.includes("\r\n") ? "\r\n" : "\n";
-      const after = m ? before.replace(re, `${m[0]}${eol}${add.join(eol)}${eol}`) : before + eol + add.join(eol) + eol;
-      changes.push({ file: f, before, after, note: "carry tailwind.config theme into CSS (@theme) and dark mode variant" });
-    } else notes.push(`${path.relative(dir, f)}: the directives (@import "tailwindcss" / @tailwind …) are handled by the plugin; no change needed.`);
+      const re = /^(@import\s+["']@birdycom\/omniacss-migrate["'][^;\n]*;|@tailwind\s+utilities;)[ \t]*\r?\n/m;
+      const m = renamed.match(re);
+      const eol = renamed.includes("\r\n") ? "\r\n" : "\n";
+      const after = m ? renamed.replace(re, `${m[0]}${eol}${add.join(eol)}${eol}`) : renamed + eol + add.join(eol) + eol;
+      changes.push({ file: f, before, after, note: `carry tailwind.config theme into CSS (@theme) and dark mode variant${renamed !== before ? '; rename @import "tailwindcss"' : ""}` });
+    } else if (renamed !== before) {
+      changes.push({ file: f, before, after: renamed, note: 'rename @import "tailwindcss" to @import "@birdycom/omniacss-migrate" (the plugin handles it)' });
+    } else notes.push(`${path.relative(dir, f)}: the directives (@import "@birdycom/omniacss-migrate" / @tailwind …) are handled by the plugin; no change needed.`);
     if (/@plugin\s+['"]@iconify/.test(before)) notes.push("`@plugin '@iconify/...'` is ignored by the plugin (icon-[...] classes are not generated).");
   }
-  if (!detected.css.length) notes.push("No CSS file with Tailwind directives found. The plugin works on `@import \"tailwindcss\"` or `@tailwind base/components/utilities`.");
+  if (!detected.css.length) notes.push("No CSS file with Tailwind directives found. The plugin works on `@import \"@birdycom/omniacss-migrate\"`, `@import \"tailwindcss\"` or `@tailwind base/components/utilities`.");
   commands.push("npm uninstall " + (removed.join(" ") || "tailwindcss @tailwindcss/vite"));
   commands.push("npm install -D @birdycom/omniacss-migrate");
   return { changes, notes, commands, detected };

package/src/utilities.mjs

@@ -262,6 +262,7 @@ const SIDE = { t: "top", r: "right", b: "bottom", l: "left", s: "inline-start",
 function boxHandler(prop) {
   // m, mx, my, mt … (margin / padding / scroll-margin / scroll-padding)
   return (u, root) => {
+    // The side after the root: "mt" -> "t", "scroll-mt" -> "t", "scroll-p" -> "".
     const key = root.slice(prefixLen(prop));
     const v = sp(u, u.value, { keywords: { auto: "auto" }, fractions: false });
     if (v == null) return null;
@@ -275,7 +276,7 @@ function boxHandler(prop) {
     return null;
   };
 }
-const prefixLen = (prop) => ({ margin: 1, padding: 1, "scroll-margin": 2, "scroll-padding": 2 })[prop];
+const prefixLen = (prop) => ({ margin: 1, padding: 1, "scroll-margin": 8, "scroll-padding": 8 })[prop];
 
 function insetHandler(prop) {
   return (u) => {

package/src/vite.mjs

@@ -60,7 +60,7 @@ export default function omniaMigrate(options = {}) {
     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;
+      if (!/@import\s+["'](?:tailwindcss|@birdycom\/omniacss-migrate)|@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 };