@decocms/blocks-cli 7.20.10 → 7.21.1

package/scripts/migrate/transforms/tailwind.ts

@@ -1,4 +1,11 @@
 import type { TransformResult } from "../types";
+import {
+  PX_TO_SPACING,
+  TEXT_SIZE_MAP,
+  detectDaisyUiV5StructuralIssues,
+  detectLogicalPropertyConflict,
+  renameToken,
+} from "./tailwind-renames";
 
 /**
  * Tailwind v3 → v4 class migration transform.
@@ -9,6 +16,8 @@ import type { TransformResult } from "../types";
  * 3. Responsive class ordering (base → sm → md → lg → xl → 2xl)
  * 4. Arbitrary values → native equivalents (px-[16px] → px-4)
  * 5. Deprecated patterns
+ * 6. Flags (does not auto-fix) DaisyUI v5 structural breaks and v4
+ *    logical-vs-physical spacing property conflicts
  */
 
 // ── Breakpoint order (mobile-first) ─────────────────────────────
@@ -18,111 +27,6 @@ BREAKPOINT_ORDER.forEach((bp, i) => {
   BP_INDEX[bp] = i + 1; // base = 0
 });
 
-// ── Tailwind v3 → v4 class renames ──────────────────────────────
-// These are direct 1:1 replacements
-const CLASS_RENAMES: Record<string, string> = {
-  // Flexbox/Grid
-  "flex-grow-0": "grow-0",
-  "flex-grow": "grow",
-  "flex-shrink-0": "shrink-0",
-  "flex-shrink": "shrink",
-
-  // Overflow
-  "overflow-ellipsis": "text-ellipsis",
-
-  // Decoration
-  "decoration-clone": "box-decoration-clone",
-  "decoration-slice": "box-decoration-slice",
-
-  // Transforms (v4 applies transforms automatically)
-  "transform": "",  // remove — v4 applies automatically
-  "transform-gpu": "",
-  "transform-none": "transform-none", // this one stays
-
-  // Blur/filter (v4 applies automatically)
-  "filter": "",  // remove
-  "backdrop-filter": "",  // remove
-
-  // Ring width default
-  "ring": "ring-3", // v4 changed default from 3px to 1px
-};
-
-// ── DaisyUI v4 → v5 class renames ──────────────────────────────
-const DAISYUI_RENAMES: Record<string, string> = {
-  // Button changes
-  "btn-ghost": "btn-ghost",  // kept
-  "btn-outline": "btn-outline",  // kept
-  "btn-active": "btn-active",  // kept
-
-  // Alert/Badge
-  "badge-ghost": "badge-soft",
-  "alert-info": "alert-info",
-  "alert-success": "alert-success",
-  "alert-warning": "alert-warning",
-  "alert-error": "alert-error",
-
-  // Card
-  "card-compact": "card-sm",
-
-  // Modal
-  "modal-open": "modal-open",
-
-  // Drawer
-  "drawer-end": "drawer-end",
-
-  // Menu
-  "menu-horizontal": "menu-horizontal",
-
-  // Toast position classes (daisy v5 uses different system)
-  "toast-top": "toast-top",
-  "toast-bottom": "toast-bottom",
-  "toast-center": "toast-center",
-  "toast-end": "toast-end",
-  "toast-start": "toast-start",
-  "toast-middle": "toast-middle",
-
-  // Loading
-  "loading-spinner": "loading-spinner",
-  "loading-dots": "loading-dots",
-  "loading-ring": "loading-ring",
-  "loading-ball": "loading-ball",
-  "loading-bars": "loading-bars",
-  "loading-infinity": "loading-infinity",
-
-  // Sizes (daisy v5 naming)
-  "btn-xs": "btn-xs",
-  "btn-sm": "btn-sm",
-  "btn-md": "btn-md",
-  "btn-lg": "btn-lg",
-};
-
-// ── Spacing scale: px → Tailwind unit ───────────────────────────
-const PX_TO_SPACING: Record<number, string> = {};
-for (let i = 0; i <= 96; i++) {
-  PX_TO_SPACING[i * 4] = String(i);
-}
-PX_TO_SPACING[2] = "0.5";
-PX_TO_SPACING[6] = "1.5";
-PX_TO_SPACING[10] = "2.5";
-PX_TO_SPACING[14] = "3.5";
-
-// Text size: px → native class
-const TEXT_SIZE_MAP: Record<string, string> = {
-  "12": "xs",
-  "14": "sm",
-  "16": "base",
-  "18": "lg",
-  "20": "xl",
-  "24": "2xl",
-  "30": "3xl",
-  "36": "4xl",
-  "48": "5xl",
-  "60": "6xl",
-  "72": "7xl",
-  "96": "8xl",
-  "128": "9xl",
-};
-
 // Properties that accept spacing values
 const SPACING_PROPS = new Set([
   "p", "px", "py", "pt", "pb", "pl", "pr",
@@ -200,24 +104,7 @@ function parseClass(cls: string): ParsedClass {
 
 // ── Fix class renames ───────────────────────────────────────────
 function fixRenames(cls: string): string {
-  const parts = cls.split(":");
-  const utility = parts.pop()!;
-
-  // Check direct rename
-  if (CLASS_RENAMES[utility] !== undefined) {
-    const renamed = CLASS_RENAMES[utility];
-    if (renamed === "") return ""; // Remove class entirely
-    parts.push(renamed);
-    return parts.join(":");
-  }
-
-  // Check DaisyUI rename
-  if (DAISYUI_RENAMES[utility] && DAISYUI_RENAMES[utility] !== utility) {
-    parts.push(DAISYUI_RENAMES[utility]);
-    return parts.join(":");
-  }
-
-  return cls;
+  return renameToken(cls);
 }
 
 // ── Fix arbitrary values ────────────────────────────────────────
@@ -402,6 +289,11 @@ function fixClassNameString(classes: string): { fixed: string; changes: string[]
     }
   }
 
+  // 5. Flag (don't auto-fix) shorthand/longhand spacing conflicts — gotcha #42
+  for (const finding of detectLogicalPropertyConflict(classList)) {
+    changes.push(`MANUAL: ${finding.message}`);
+  }
+
   return { fixed: classList.join(" "), changes };
 }
 
@@ -626,6 +518,18 @@ export function transformTailwind(content: string): TransformResult {
   let changed = false;
   let result = content;
 
+  // ── Flag (don't auto-fix) DaisyUI v5 structural breaks — gotcha #37 ──
+  const daisyFindings = detectDaisyUiV5StructuralIssues(result);
+  if (daisyFindings.length > 0) {
+    // No content is rewritten here, but the caller (phase-transform) only
+    // surfaces `notes` when `changed` is true — mark it so these
+    // manual-review findings aren't silently dropped.
+    changed = true;
+    for (const finding of daisyFindings) {
+      notes.push(`MANUAL: ${finding.message}`);
+    }
+  }
+
   // ── Fix negative z-index on background images ──────────────────
   const zFix = fixNegativeZIndex(result);
   if (zFix.changed) {

package/scripts/migrate/types.ts

@@ -157,6 +157,15 @@ export interface MigrationContext {
   /** Font family from CMS config */
   fontFamily: string | null;
 
+  /**
+   * Statically-extracted content of the source site's `tailwind.config.ts`
+   * (colors, fontFamily, screens, safelist, plugins) — read during analyze,
+   * before the file is deleted in cleanup, so its content can be ported into
+   * the scaffolded `src/styles/app.css` @theme block instead of silently
+   * dropped. See analyzers/tailwind-config.ts.
+   */
+  tailwindConfig: import("./analyzers/tailwind-config").TailwindConfigExtract;
+
   /** All categorized source files */
   files: FileRecord[];
 
@@ -217,6 +226,15 @@ export function createContext(
     discoveredNpmDeps: {},
     themeColors: {},
     fontFamily: null,
+    tailwindConfig: {
+      colors: {},
+      fontFamily: {},
+      screens: {},
+      safelist: [],
+      safelistPatterns: [],
+      plugins: [],
+      reviewItems: [],
+    },
     files: [],
     sectionMetas: [],
     islandClassifications: [],

package/scripts/tailwind-lint.ts

@@ -18,6 +18,13 @@
 
 import { readFileSync, writeFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative } from "node:path";
+import {
+  CLASS_RENAMES,
+  DAISYUI_RENAMES,
+  PX_TO_SPACING,
+  TEXT_SIZE_MAP,
+  renameToken,
+} from "./migrate/transforms/tailwind-renames";
 
 // ── Breakpoint order (mobile-first) ─────────────────────────────
 const BREAKPOINT_ORDER = ["sm", "md", "lg", "xl", "2xl"] as const;
@@ -26,44 +33,6 @@ BREAKPOINT_ORDER.forEach((bp, i) => {
   BP_INDEX[bp] = i + 1;
 });
 
-// ── Tailwind v3 → v4 class renames ──────────────────────────────
-const CLASS_RENAMES: Record<string, string> = {
-  "flex-grow-0": "grow-0",
-  "flex-grow": "grow",
-  "flex-shrink-0": "shrink-0",
-  "flex-shrink": "shrink",
-  "overflow-ellipsis": "text-ellipsis",
-  "decoration-clone": "box-decoration-clone",
-  "decoration-slice": "box-decoration-slice",
-  "transform": "",
-  "transform-gpu": "",
-  "filter": "",
-  "backdrop-filter": "",
-  "ring": "ring-3",
-};
-
-// ── DaisyUI v4 → v5 class renames ──────────────────────────────
-const DAISYUI_RENAMES: Record<string, string> = {
-  "badge-ghost": "badge-soft",
-  "card-compact": "card-sm",
-};
-
-// ── Spacing scale ───────────────────────────────────────────────
-const PX_TO_SPACING: Record<number, string> = {};
-for (let i = 0; i <= 96; i++) {
-  PX_TO_SPACING[i * 4] = String(i);
-}
-PX_TO_SPACING[2] = "0.5";
-PX_TO_SPACING[6] = "1.5";
-PX_TO_SPACING[10] = "2.5";
-PX_TO_SPACING[14] = "3.5";
-
-const TEXT_SIZE_MAP: Record<string, string> = {
-  "12": "xs", "14": "sm", "16": "base", "18": "lg", "20": "xl",
-  "24": "2xl", "30": "3xl", "36": "4xl", "48": "5xl", "60": "6xl",
-  "72": "7xl", "96": "8xl", "128": "9xl",
-};
-
 const SPACING_PROPS = new Set([
   "p", "px", "py", "pt", "pb", "pl", "pr",
   "m", "mx", "my", "mt", "mb", "ml", "mr",
@@ -247,7 +216,7 @@ function scanFile(filePath: string): Issue[] {
     for (const cls of classList) {
       const parts = cls.split(":");
       const utility = parts[parts.length - 1];
-      if (CLASS_RENAMES[utility] !== undefined) {
+      if (CLASS_RENAMES[utility] !== undefined && CLASS_RENAMES[utility] !== utility) {
         const renamed = CLASS_RENAMES[utility];
         issues.push({
           file: filePath, line, type: "rename",
@@ -291,21 +260,7 @@ function fixClassOrder(classes: string): string {
 function fixClassName(classes: string): string {
   let classList = classes.split(/\s+/).filter(Boolean);
 
-  classList = classList.map((cls) => {
-    const parts = cls.split(":");
-    const utility = parts.pop()!;
-    if (CLASS_RENAMES[utility] !== undefined) {
-      const renamed = CLASS_RENAMES[utility];
-      if (renamed === "") return "";
-      parts.push(renamed);
-      return parts.join(":");
-    }
-    if (DAISYUI_RENAMES[utility] && DAISYUI_RENAMES[utility] !== utility) {
-      parts.push(DAISYUI_RENAMES[utility]);
-      return parts.join(":");
-    }
-    return cls;
-  }).filter(Boolean);
+  classList = classList.map(renameToken).filter(Boolean);
 
   classList = classList.map((cls) => {
     if (!cls.includes("[")) return cls;