@decocms/blocks-cli 7.31.6 → 7.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks-cli",
-  "version": "7.31.6",
+  "version": "7.32.0",
   "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.31.6",
+    "@decocms/blocks": "7.32.0",
     "ts-morph": "^27.0.0",
     "tsx": "^4.22.5"
   },

package/scripts/migrate/phase-analyze.test.ts

@@ -2,7 +2,7 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { extractPlatform } from "./phase-analyze";
+import { extractGoogleFonts, extractPlatform } from "./phase-analyze";
 
 // `extractPlatform` runs four strategies in order:
 //   1. deno.json imports referencing apps/{platform}/
@@ -16,6 +16,68 @@ import { extractPlatform } from "./phase-analyze";
 // list so Strategy 2 fires first and short-circuits before Strategy 3 can
 // over-match.
 
+describe("extractGoogleFonts", () => {
+  let tmp: string;
+
+  beforeEach(() => {
+    tmp = fs.mkdtempSync(path.join(os.tmpdir(), "extract-gfonts-"));
+    fs.mkdirSync(path.join(tmp, "routes"), { recursive: true });
+  });
+
+  afterEach(() => {
+    fs.rmSync(tmp, { recursive: true, force: true });
+  });
+
+  it("extracts preconnects and stylesheet from _app.tsx", () => {
+    fs.writeFileSync(
+      path.join(tmp, "routes", "_app.tsx"),
+      `<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" />`,
+    );
+    const result = extractGoogleFonts(tmp);
+    expect(result.preconnects).toEqual([
+      "https://fonts.googleapis.com",
+      "https://fonts.gstatic.com",
+    ]);
+    expect(result.stylesheets).toEqual([
+      "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
+    ]);
+  });
+
+  it("deduplicates URLs present in both _app.tsx and _layout.tsx", () => {
+    const sharedUrl = "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
+    fs.writeFileSync(
+      path.join(tmp, "routes", "_app.tsx"),
+      `<link rel="stylesheet" href="${sharedUrl}" />`,
+    );
+    fs.writeFileSync(
+      path.join(tmp, "routes", "_layout.tsx"),
+      `<link rel="stylesheet" href="${sharedUrl}" />`,
+    );
+    const result = extractGoogleFonts(tmp);
+    expect(result.stylesheets).toHaveLength(1);
+  });
+
+  it("extracts Google Fonts @import from tailwind.css", () => {
+    fs.writeFileSync(
+      path.join(tmp, "tailwind.css"),
+      `@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');`,
+    );
+    const result = extractGoogleFonts(tmp);
+    expect(result.stylesheets).toEqual([
+      "https://fonts.googleapis.com/css2?family=Poppins&display=swap",
+    ]);
+  });
+
+  it("returns empty arrays when no Google Fonts are declared", () => {
+    fs.writeFileSync(path.join(tmp, "routes", "_app.tsx"), `<link rel="icon" href="/favicon.ico" />`);
+    const result = extractGoogleFonts(tmp);
+    expect(result.preconnects).toHaveLength(0);
+    expect(result.stylesheets).toHaveLength(0);
+  });
+});
+
 describe("extractPlatform", () => {
   let tmp: string;
 

package/scripts/migrate/phase-analyze.ts

@@ -418,6 +418,50 @@ function scanDir(
   }
 }
 
+export function extractGoogleFonts(
+  sourceDir: string,
+): { preconnects: string[]; stylesheets: string[] } {
+  const preconnects: string[] = [];
+  const stylesheets: string[] = [];
+  const seen = new Set<string>();
+
+  const hrefRe = /href=["'](https:\/\/fonts\.(?:googleapis|gstatic)\.com[^"']*)["']/g;
+
+  // Read _app.tsx and _layout.tsx for <link> declarations
+  for (const candidate of ["routes/_app.tsx", "routes/_layout.tsx"]) {
+    const fp = path.join(sourceDir, candidate);
+    if (!fs.existsSync(fp)) continue;
+    const content = fs.readFileSync(fp, "utf-8");
+    for (const m of content.matchAll(hrefRe)) {
+      const href = m[1];
+      if (seen.has(href)) continue;
+      seen.add(href);
+      if (href.includes("/css")) {
+        stylesheets.push(href);
+      } else {
+        preconnects.push(href);
+      }
+    }
+  }
+
+  // Also check tailwind.css for @import url(https://fonts.googleapis.com/...)
+  for (const cssCandidate of ["tailwind.css", "styles/app.css", "styles/global.css"]) {
+    const fp = path.join(sourceDir, cssCandidate);
+    if (!fs.existsSync(fp)) continue;
+    const content = fs.readFileSync(fp, "utf-8");
+    const importRe = /@import\s+url\(['"]?(https:\/\/fonts\.googleapis\.com[^'")\s]+)/g;
+    for (const m of content.matchAll(importRe)) {
+      const href = m[1];
+      if (!seen.has(href)) {
+        seen.add(href);
+        stylesheets.push(href);
+      }
+    }
+  }
+
+  return { preconnects, stylesheets };
+}
+
 function extractGtmId(sourceDir: string): string | null {
   const appPath = path.join(sourceDir, "routes", "_app.tsx");
   if (!fs.existsSync(appPath)) return null;
@@ -627,6 +671,20 @@ export function analyze(ctx: MigrationContext): void {
   ctx.platform = extractPlatform(ctx.sourceDir);
   ctx.vtexAccount = ctx.platform === "vtex" ? extractVtexAccount(ctx.sourceDir) : null;
   ctx.gtmId = extractGtmId(ctx.sourceDir);
+  ctx.googleFonts = extractGoogleFonts(ctx.sourceDir);
+  // If no font URLs were extracted but the file mentions googleapis (likely a
+  // JSX expression like href={URL_CONST}), flag it for manual review.
+  if (ctx.googleFonts.preconnects.length === 0 && ctx.googleFonts.stylesheets.length === 0) {
+    const appPath = path.join(ctx.sourceDir, "routes", "_app.tsx");
+    if (fs.existsSync(appPath) && fs.readFileSync(appPath, "utf-8").includes("fonts.googleapis")) {
+      ctx.manualReviewItems.push({
+        file: "routes/_app.tsx",
+        reason:
+          "Google Fonts reference found but could not be extracted automatically (may use a JSX expression or variable). Add the font preconnect and stylesheet links manually to src/routes/__root.tsx.",
+        severity: "warning",
+      });
+    }
+  }
 
   // Extract theme colors and font from CMS
   const theme = extractThemeFromCms(ctx.sourceDir);

package/scripts/migrate/templates/routes.ts

@@ -51,17 +51,26 @@ function generateRoot(ctx: MigrationContext, siteTitle: string, vtexAccount: str
     preconnects.push(`      { rel: "preconnect", href: "https://${vtexAccount}.vtexassets.com", crossOrigin: "anonymous" as const },`);
   }
 
-  // Font preloads
+  const googleFontLinks = [
+    ...ctx.googleFonts.preconnects.map((href) =>
+      `      { rel: "preconnect", href: "${href}"${href.includes("gstatic") ? ', crossOrigin: "anonymous" as const' : ""} },`
+    ),
+    ...ctx.googleFonts.stylesheets.map((href) =>
+      `      { rel: "stylesheet", href: "${href}" },`
+    ),
+  ];
+
   const fontPreloads = fonts.map((f) =>
     `      { rel: "preload", href: "${f}", as: "font", type: "font/woff2", crossOrigin: "anonymous" as const },`
   );
 
-  // DNS prefetch for common third-party services
   const dnsPrefetch: string[] = [];
   if (isVtex) {
     dnsPrefetch.push(`      { rel: "dns-prefetch", href: "https://sp.vtex.com" },`);
   }
 
+  const linkLines = [...preconnects, ...googleFontLinks, ...fontPreloads].filter(Boolean);
+
   return `import { createRootRoute } from "@tanstack/react-router";
 import { DecoRootLayout } from "@decocms/tanstack";
 // @ts-ignore Vite ?url import
@@ -83,8 +92,7 @@ export const Route = createRootRoute({
       { property: "og:locale", content: "pt_BR" },
     ],
     links: [
-${preconnects.join("\n")}
-${fontPreloads.join("\n")}
+${linkLines.join("\n")}
       { rel: "stylesheet", href: appCss },
       { rel: "icon", href: "/favicon.ico" },
 ${dnsPrefetch.join("\n")}

package/scripts/migrate/types.ts

@@ -156,6 +156,8 @@ export interface MigrationContext {
   themeColors: Record<string, string>;
   /** Font family from CMS config */
   fontFamily: string | null;
+  /** Google Fonts URLs extracted from routes/_app.tsx or CSS @import */
+  googleFonts: { preconnects: string[]; stylesheets: string[] };
 
   /**
    * Statically-extracted content of the source site's `tailwind.config.ts`
@@ -226,6 +228,7 @@ export function createContext(
     discoveredNpmDeps: {},
     themeColors: {},
     fontFamily: null,
+    googleFonts: { preconnects: [], stylesheets: [] },
     tailwindConfig: {
       colors: {},
       fontFamily: {},