@decocms/blocks-cli 7.32.1 → 7.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks-cli",
-  "version": "7.32.1",
+  "version": "7.33.1",
   "type": "module",
   "description": "Deco codegen (generate-blocks, generate-schema, generate-invoke) and Fresh-to-TanStack migration tooling",
   "repository": {
@@ -31,7 +31,7 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.32.1",
+    "@decocms/blocks": "7.33.1",
     "ts-morph": "^27.0.0",
     "tsx": "^4.22.5"
   },

package/scripts/migrate/analyzers/tailwind-config.ts

@@ -24,6 +24,10 @@ export interface TailwindConfigExtract {
   fontFamily: Record<string, string>;
   /** Custom breakpoints, e.g. "3xl" -> "1920px" */
   screens: Record<string, string>;
+  /** Custom animations, e.g. "fade-in" -> "fadeIn 0.5s ease-in" */
+  animations: Record<string, string>;
+  /** Custom keyframe stops, e.g. "fadeIn" -> { "0%": "opacity: 0", "100%": "opacity: 1" } */
+  keyframes: Record<string, Record<string, string>>;
   /** Literal safelist entries (string class names) */
   safelist: string[];
   /** Safelist regex patterns, kept as their source text */
@@ -40,6 +44,8 @@ function emptyExtract(): TailwindConfigExtract {
     colors: {},
     fontFamily: {},
     screens: {},
+    animations: {},
+    keyframes: {},
     safelist: [],
     safelistPatterns: [],
     plugins: [],
@@ -184,6 +190,84 @@ function extractScreens(obj: ObjectLiteralExpression): Record<string, string> {
   return result;
 }
 
+function extractAnimations(
+  obj: ObjectLiteralExpression,
+  reviewItems: ReviewItem[],
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const prop of obj.getProperties()) {
+    if (!prop.isKind(SyntaxKind.PropertyAssignment)) continue;
+    const name = stripQuotes(prop.getName());
+    const init = prop.getInitializer();
+    if (!init) continue;
+    if (
+      init.isKind(SyntaxKind.StringLiteral) ||
+      init.isKind(SyntaxKind.NoSubstitutionTemplateLiteral)
+    ) {
+      result[name] = init.getLiteralText();
+    } else {
+      reviewItems.push({
+        file: CONFIG_REL_PATH,
+        reason: `theme.extend.animation.${name} is not a static string literal (${init.getKindName()}) — port manually to @theme { --animate-${name}: ...; } in src/styles/app.css`,
+        severity: "warning",
+      });
+    }
+  }
+  return result;
+}
+
+function extractKeyframes(
+  obj: ObjectLiteralExpression,
+  reviewItems: ReviewItem[],
+): Record<string, Record<string, string>> {
+  const result: Record<string, Record<string, string>> = {};
+  for (const frameProp of obj.getProperties()) {
+    if (!frameProp.isKind(SyntaxKind.PropertyAssignment)) continue;
+    const frameName = stripQuotes(frameProp.getName());
+    const frameInit = frameProp.getInitializer();
+    if (!frameInit?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      reviewItems.push({
+        file: CONFIG_REL_PATH,
+        reason: `theme.extend.keyframes.${frameName} is not an object literal — port manually to @keyframes ${frameName} { ... } in src/styles/app.css`,
+        severity: "warning",
+      });
+      continue;
+    }
+    const stops: Record<string, string> = {};
+    for (const stopProp of frameInit.getProperties()) {
+      if (!stopProp.isKind(SyntaxKind.PropertyAssignment)) continue;
+      const stopKey = stripQuotes(stopProp.getName()); // "0%", "100%", "from", "to"
+      const stopInit = stopProp.getInitializer();
+      if (!stopInit?.isKind(SyntaxKind.ObjectLiteralExpression)) continue;
+      const cssParts: string[] = [];
+      for (const cssProp of stopInit.getProperties()) {
+        if (!cssProp.isKind(SyntaxKind.PropertyAssignment)) continue;
+        const cssName = stripQuotes(cssProp.getName());
+        const cssVal = cssProp.getInitializer();
+        if (
+          cssVal?.isKind(SyntaxKind.StringLiteral) ||
+          cssVal?.isKind(SyntaxKind.NoSubstitutionTemplateLiteral)
+        ) {
+          // camelCase -> kebab-case (e.g. "transformOrigin" -> "transform-origin")
+          const kebab = cssName.replace(/([A-Z])/g, "-$1").toLowerCase();
+          cssParts.push(`${kebab}: ${cssVal.getLiteralText()}`);
+        }
+      }
+      if (cssParts.length > 0) {
+        stops[stopKey] = cssParts.join("; ");
+      } else {
+        reviewItems.push({
+          file: CONFIG_REL_PATH,
+          reason: `theme.extend.keyframes.${frameName}["${stopKey}"] has no static string literal properties — port this keyframe stop manually to @keyframes ${frameName} { ... } in src/styles/app.css`,
+          severity: "warning",
+        });
+      }
+    }
+    if (Object.keys(stops).length > 0) result[frameName] = stops;
+  }
+  return result;
+}
+
 function extractSafelist(
   arr: import("ts-morph").ArrayLiteralExpression,
   reviewItems: ReviewItem[],
@@ -258,6 +342,16 @@ export function extractTailwindConfig(sourceDir: string): TailwindConfigExtract
     (themeObj && getObjectChild(themeObj, "screens"));
   const screens = screensObj ? extractScreens(screensObj) : {};
 
+  const animationObj =
+    (extendObj && getObjectChild(extendObj, "animation")) ||
+    (themeObj && getObjectChild(themeObj, "animation"));
+  const animations = animationObj ? extractAnimations(animationObj, reviewItems) : {};
+
+  const keyframesObj =
+    (extendObj && getObjectChild(extendObj, "keyframes")) ||
+    (themeObj && getObjectChild(themeObj, "keyframes"));
+  const keyframes = keyframesObj ? extractKeyframes(keyframesObj, reviewItems) : {};
+
   let safelist: string[] = [];
   let safelistPatterns: string[] = [];
   const safelistProp = root.getProperty("safelist");
@@ -279,5 +373,5 @@ export function extractTailwindConfig(sourceDir: string): TailwindConfigExtract
     }
   }
 
-  return { colors, fontFamily, screens, safelist, safelistPatterns, plugins, reviewItems };
+  return { colors, fontFamily, screens, animations, keyframes, safelist, safelistPatterns, plugins, reviewItems };
 }

package/scripts/migrate/phase-transform.ts

@@ -146,6 +146,37 @@ export function transform(ctx: MigrationContext): void {
       });
     }
 
+    // Flag usePartialSection (Fresh load-more / "Ver mais" pattern) with an
+    // actionable useLoadMore recipe instead of a generic HTMX warning.
+    if (/usePartialSection/.test(result.content)) {
+      const hasAppend = /mode\s*:\s*["']append["']/.test(result.content);
+      ctx.manualReviewItems.push({
+        file: targetPath,
+        reason:
+          `usePartialSection${hasAppend ? " (mode:append)" : ""} detected — ` +
+          "this is the Fresh load-more / \"Ver mais\" pagination pattern. " +
+          "In TanStack it is a no-op stub; the button navigates replacing all products instead of appending. " +
+          "Convert to useLoadMore from @decocms/blocks/hooks:\n\n" +
+          '  import { useLoadMore } from "@decocms/blocks/hooks"\n\n' +
+          '  // At the top of your component (must be "use client"):\n' +
+          "  const { pages, loadMore, loading, hasMore } = useLoadMore(\n" +
+          "    props.page ?? { products: [], pageInfo: {} },\n" +
+          '    "LOADER_KEY" // replace with your loader path, e.g.\n' +
+          '    // "apps/vtex.ts/loaders/intelligentSearch/productListingPage.ts"\n' +
+          "  )\n" +
+          "  const allProducts = pages.flatMap(p => p.products ?? [])\n\n" +
+          "  // Replace the usePartialSection anchor/button with:\n" +
+          "  {hasMore && (\n" +
+          '    <button onClick={loadMore} disabled={loading}>\n' +
+          '      {loading ? "Carregando..." : "Ver mais"}\n' +
+          "    </button>\n" +
+          "  )}\n\n" +
+          "Add \"use client\" to the top of the file. " +
+          "See deco-to-tanstack-migration skill, 'Ver mais / Load More' section.",
+        severity: "warning",
+      });
+    }
+
     // Flag files with hx-on:click that use useScript (simpler pattern)
     if (/hx-on:click=\{useScript/.test(result.content)) {
       ctx.manualReviewItems.push({

package/scripts/migrate/templates/app-css.test.ts

@@ -12,6 +12,8 @@ describe("generateAppCss — tailwind.config.ts porting", () => {
       colors: { perola: "#F5F0E8", "brand-500": "#B10200" },
       fontFamily: { "bebas-neue": "Bebas Neue, sans-serif" },
       screens: { "3xl": "1920px" },
+      animations: {},
+      keyframes: {},
       safelist: ["bg-red-500", "text-brand-500"],
       safelistPatterns: [],
       plugins: [],
@@ -27,6 +29,28 @@ describe("generateAppCss — tailwind.config.ts porting", () => {
     expect(css).toContain('@source inline("bg-red-500 text-brand-500");');
   });
 
+  it("emits --animate-* in @theme and @keyframes blocks from tailwind.config.ts", () => {
+    const ctx = createContext("/tmp/does-not-exist");
+    ctx.tailwindConfig = {
+      colors: {},
+      fontFamily: {},
+      screens: {},
+      animations: { "fade-in": "fadeIn 0.5s ease-in" },
+      keyframes: { fadeIn: { "0%": "opacity: 0", "100%": "opacity: 1" } },
+      safelist: [],
+      safelistPatterns: [],
+      plugins: [],
+      reviewItems: [],
+    };
+
+    const css = generateAppCss(ctx);
+
+    expect(css).toContain("--animate-fade-in: fadeIn 0.5s ease-in;");
+    expect(css).toContain("@keyframes fadeIn {");
+    expect(css).toContain("0% { opacity: 0; }");
+    expect(css).toContain("100% { opacity: 1; }");
+  });
+
   it("does not duplicate a custom color that collides with a daisyUI semantic key", () => {
     const ctx = createContext("/tmp/does-not-exist");
     ctx.tailwindConfig.colors = { primary: "#000000" };

package/scripts/migrate/templates/app-css.ts

@@ -240,6 +240,15 @@ ${colorLines}
     }
   }
 
+  const twAnimations = ctx.tailwindConfig.animations;
+  const twAnimationKeys = Object.keys(twAnimations);
+  if (twAnimationKeys.length > 0) {
+    themeBlock += `\n\n  /* Custom animations ported from tailwind.config.ts */`;
+    for (const key of twAnimationKeys) {
+      themeBlock += `\n  --animate-${key}: ${twAnimations[key]};`;
+    }
+  }
+
   // Gray scale compat (Tailwind v3 had gray-50..gray-950 by default) — uses
   // the site's own tailwind.config.ts gray-* override when present, falling
   // back to the v3 default otherwise.
@@ -254,6 +263,16 @@ ${colorLines}
   themeBlock += `\n}`;
   sections.push(themeBlock);
 
+  // Emit @keyframes for each extracted keyframe from tailwind.config.ts.
+  // TW4 has no keyframes config — they must live in CSS directly.
+  const twKeyframes = ctx.tailwindConfig.keyframes;
+  for (const [name, stops] of Object.entries(twKeyframes)) {
+    const stopLines = Object.entries(stops)
+      .map(([pct, props]) => `  ${pct} { ${props}; }`)
+      .join("\n");
+    sections.push(`@keyframes ${name} {\n${stopLines}\n}`);
+  }
+
   // ── DaisyUI v5 compat ─────────────────────────────────────────────
   sections.push(`/* DaisyUI v5: flatten depth/noise to match v4 look */
 :root {
@@ -353,6 +372,14 @@ section[data-deferred="true"] {
     overflow: hidden;
   }
 
+  /* Tailwind v3 -> v4 compat: restore the default border-color.
+     TW4 Preflight changed border-color from gray-200 (#e5e7eb) to currentColor --
+     any element with "border" but no explicit "border-{color}" now renders black.
+     --color-gray-200 is always defined in the ported @theme (gray scale compat block). */
+  *, *::before, *::after {
+    border-color: var(--color-gray-200, #e5e7eb);
+  }
+
   /* Tailwind v3 → v4 compat: restore the default cursor:pointer on interactive
      elements. Tailwind v4 dropped this from Preflight, leaving Fresh-era sites
      with hundreds of buttons looking unclickable. See:

package/scripts/migrate/transforms/tailwind-renames.test.ts

@@ -35,3 +35,32 @@ describe("renameToken", () => {
     expect(renameToken("md:bg-red-500")).toBe("md:bg-red-500");
   });
 });
+
+import { detectDaisyUiV5StructuralIssues } from "./tailwind-renames";
+
+describe("detectDaisyUiV5StructuralIssues", () => {
+  it("detects menu-compact removal", () => {
+    const findings = detectDaisyUiV5StructuralIssues(`<ul className="menu menu-compact">`);
+    expect(findings.some((f) => f.message.includes("menu-compact"))).toBe(true);
+  });
+
+  it("detects tab-bordered removal", () => {
+    const findings = detectDaisyUiV5StructuralIssues(`<a className="tab tab-bordered">`);
+    expect(findings.some((f) => f.message.includes("tab-bordered"))).toBe(true);
+  });
+
+  it("detects bare alert in className without a color modifier", () => {
+    const findings = detectDaisyUiV5StructuralIssues(`<div className="alert">`);
+    expect(findings.some((f) => f.message.includes("alert"))).toBe(true);
+  });
+
+  it("does not flag alert when a color modifier is present", () => {
+    const findings = detectDaisyUiV5StructuralIssues(`<div className="alert alert-info">`);
+    expect(findings.some((f) => f.message.includes("alert default styling"))).toBe(false);
+  });
+
+  it("does not flag alert() JS function calls as a DaisyUI alert", () => {
+    const findings = detectDaisyUiV5StructuralIssues(`window.alert("something went wrong");`);
+    expect(findings.some((f) => f.message.includes("alert default styling"))).toBe(false);
+  });
+});

package/scripts/migrate/transforms/tailwind-renames.ts

@@ -79,6 +79,8 @@ export const CLASS_RENAMES: Record<string, string> = {
 export const DAISYUI_RENAMES: Record<string, string> = {
   "badge-ghost": "badge-soft",
   "card-compact": "card-sm",
+  "card-normal": "card-md",
+  "tabs-boxed": "tabs-box",
 };
 
 /**
@@ -183,6 +185,38 @@ export function detectDaisyUiV5StructuralIssues(content: string): GotchaFinding[
     });
   }
 
+  if (/\bmenu-compact\b/.test(content)) {
+    findings.push({
+      gotcha: 37,
+      message:
+        "DaisyUI v4 `menu-compact` was removed in v5 with no drop-in class — use `menu-sm` for a smaller menu or remove the modifier.",
+    });
+  }
+
+  if (/\btab-bordered\b/.test(content)) {
+    findings.push({
+      gotcha: 37,
+      message:
+        "DaisyUI v4 `tab-bordered` was removed in v5 — use `tabs-bordered` on the `tabs` wrapper instead of a modifier on each `tab` element.",
+    });
+  }
+
+  // Detect bare `alert` without a color modifier — DaisyUI v5 changed the
+  // default alert background; alerts without alert-info/success/warning/error
+  // may appear with no background color.
+  // Scoped to className= / class= attribute values to avoid matching the JS
+  // global `alert()` function, variable names, or comments in the same file.
+  if (
+    /className=["'][^"']*\balert\b[^"']*["']/.test(content) &&
+    !/\balert-(?:info|success|warning|error)\b/.test(content)
+  ) {
+    findings.push({
+      gotcha: 37,
+      message:
+        "DaisyUI v5 changed `alert` default styling — a bare `alert` without a color modifier (alert-info/success/warning/error) may render with no background. Add an explicit color modifier or use `alert-soft` for a neutral variant.",
+    });
+  }
+
   return findings;
 }
 

package/scripts/migrate/types.ts

@@ -233,6 +233,8 @@ export function createContext(
       colors: {},
       fontFamily: {},
       screens: {},
+      animations: {},
+      keyframes: {},
       safelist: [],
       safelistPatterns: [],
       plugins: [],