@decocms/blocks-cli 8.0.0 → 8.1.0-next.0

package/scripts/lib/wrangler-config.ts

@@ -72,3 +72,34 @@ function matchTomlString(body: string, key: string): string | null {
   const m = body.match(new RegExp(`(?:^|\\n)\\s*${key}\\s*=\\s*["']([^"']+)["']`));
   return m ? m[1] : null;
 }
+
+/**
+ * Set the `id` of a `kv_namespaces` entry in a `wrangler.jsonc` SOURCE string,
+ * preserving comments and formatting.
+ *
+ * Deliberately text-level rather than parse-and-restringify: the scaffolded
+ * `wrangler.jsonc` carries the comments explaining why each binding exists, and
+ * a round-trip through `JSON.parse`/`stringify` would drop every one of them.
+ *
+ * Returns the original string unchanged when the binding is absent — callers
+ * treat that as "nothing to personalize", never as an error, because the
+ * builder re-forces the id from `CF_KV_NAMESPACE_ID` on every build anyway.
+ */
+export function setKvNamespaceIdInJsonc(
+  src: string,
+  id: string,
+  binding = DEFAULT_BINDING,
+): string {
+  // Match the object literal holding this binding, in either field order, and
+  // rewrite only its `id` value. Bounded to a single `{...}` so it cannot reach
+  // past the entry into the next one.
+  const entry = new RegExp(`\\{[^{}]*?"binding"\\s*:\\s*"${binding}"[^{}]*?\\}`, "s");
+  const m = src.match(entry);
+  if (!m) return src;
+
+  const patched = m[0].includes('"id"')
+    ? m[0].replace(/"id"\s*:\s*"[^"]*"/, `"id": ${JSON.stringify(id)}`)
+    : m[0].replace(/\}$/, `, "id": ${JSON.stringify(id)} }`);
+
+  return src.slice(0, m.index) + patched + src.slice(m.index! + m[0].length);
+}

package/scripts/migrate/analyzers/htmx-analyze.test.ts

@@ -116,7 +116,7 @@ describe("classify (pure)", () => {
 	});
 
 	it("treats hx-on with a fetch attr as click-swap (the fetch wins)", () => {
-		// Real example from als (EmailAndPassword button): hx-get +
+		// Real example from a production htmx storefront (EmailAndPassword button): hx-get +
 		// hx-target + hx-trigger=click — engineer often piles
 		// hx-on alongside, but the dominant migration path is the
 		// click-swap recipe.
@@ -127,11 +127,11 @@ describe("classify (pure)", () => {
 });
 
 /* ------------------------------------------------------------------ */
-/* analyzeFile() — JSX walker tests using real als-shaped fixtures     */
+/* analyzeFile() — JSX walker tests using real htmx-shaped fixtures     */
 /* ------------------------------------------------------------------ */
 
 describe("analyzeFile (real shapes)", () => {
-	it("detects hx-on:click={useScript(...)} click handler (als AddToBagButton shape)", () => {
+	it("detects hx-on:click={useScript(...)} click handler (AddToBagButton shape)", () => {
 		const file = `
 import { useScript } from "@deco/deco/hooks";
 export default function AddToBagButton() {
@@ -157,7 +157,7 @@ export default function AddToBagButton() {
 		expect(out[0].attrs).toEqual(["hx-on:click"]);
 	});
 
-	it("detects hx-post + hx-target + hx-trigger=keyup on an input as auto-fetch (als SearchInput shape)", () => {
+	it("detects hx-post + hx-target + hx-trigger=keyup on an input as auto-fetch (SearchInput shape)", () => {
 		const file = `
 <input
   id={searchInputId}
@@ -181,7 +181,7 @@ export default function AddToBagButton() {
 		expect(out[0].attrs).toContain("hx-target");
 	});
 
-	it("detects hx-post + hx-target + hx-swap on a form as form-swap (als EmailAndPassword shape)", () => {
+	it("detects hx-post + hx-target + hx-swap on a form as form-swap (EmailAndPassword shape)", () => {
 		const file = `
 <form
   class="flex flex-col w-full"
@@ -202,7 +202,7 @@ export default function AddToBagButton() {
 		expect(out[0].attrs).toContain("hx-target");
 	});
 
-	it("detects hx-get on a button as click-swap (als ForgotPassword shape)", () => {
+	it("detects hx-get on a button as click-swap (ForgotPassword shape)", () => {
 		const file = `
 <button
   type="button"

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/config.ts

@@ -3,7 +3,7 @@
  *
  * Looks for `.deco-migrate.config.json` next to the source root. The file
  * is optional — without it the script falls back to a baked-in default set
- * of section-convention names that work for `casaevideo` and most other
+ * of section-convention names that work for `acme` and most other
  * Deco/VTEX sites that derived from the same template.
  *
  * The defaults are kept here (not in `transforms/section-conventions.ts`)
@@ -61,7 +61,7 @@ export interface SectionConventionSets {
 }
 
 /**
- * Built-in defaults. Originally extracted from `casaevideo` migration —
+ * Built-in defaults. Originally extracted from a production migration —
  * these names are common across Deco/VTEX storefronts that share the
  * lineage. Sites that don't have these sections are unaffected (the
  * matcher just never fires).

package/scripts/migrate/delete-sets.ts

@@ -0,0 +1,75 @@
+/**
+ * The paths the migration deletes outright. Single source of truth: `decideAction`
+ * (phase-analyze) decides with them, and `deco-reconcile` filters with them — an
+ * upstream change to a file the migration deleted has no target equivalent, so
+ * reporting it just makes the agent consider migrating a file that must not exist.
+ *
+ * Only the unambiguous sets live here. Rules that are conditional on context
+ * (routes/ and apps/ are rescaffolded, root-level docs) stay in `decideAction`:
+ * reconcile must stay conservative, since dropping a real upstream change is a
+ * worse failure than showing one file too many.
+ */
+
+/** Files that are generated and should be deleted */
+export const GENERATED_FILES = new Set([
+  "fresh.gen.ts",
+  "manifest.gen.ts",
+  "fresh.config.ts",
+]);
+
+/** SDK files that have framework equivalents or are scaffolded fresh */
+export const SDK_DELETE = new Set([
+  "sdk/clx.ts",
+  "sdk/useId.ts",
+  // sdk/useOffer.ts — kept: sites often customize offer logic
+  // sdk/useVariantPossiblities.ts — kept: sites often customize variant logic
+  "sdk/usePlatform.tsx",
+  "sdk/signal.ts",
+  "sdk/format.ts",
+]);
+
+/** Component files that are scaffolded fresh (old versions must not overwrite) */
+export const COMPONENT_DELETE = new Set([
+  "components/ui/Image.tsx",
+  "components/ui/Picture.tsx",
+  "components/ui/Video.tsx",
+]);
+
+/** Loaders that depend on deleted admin tooling */
+export const LOADER_DELETE = new Set([
+  "loaders/availableIcons.ts",
+  "loaders/icons.ts",
+]);
+
+/** Root config/infra files to delete */
+export const ROOT_DELETE = new Set([
+  "main.ts",
+  "dev.ts",
+  "deno.json",
+  "deno.lock",
+  "tailwind.css",
+  "tailwind.config.ts",
+  "runtime.ts",
+  "constants.ts",
+  "fresh.gen.ts",
+  "manifest.gen.ts",
+  "fresh.config.ts",
+  "browserslist",
+  "bw_stats.json",
+  "islands.ts",
+]);
+
+/** Static files that are code/tooling, not assets — should be deleted */
+export const STATIC_DELETE = new Set([
+  "static/adminIcons.ts",
+  "static/generate-icons.ts",
+  "static/tailwind.css",
+]);
+
+/** True when the migration deletes this source path outright. */
+export function isDeletedByMigration(relPath: string): boolean {
+  return GENERATED_FILES.has(relPath) || ROOT_DELETE.has(relPath) ||
+    SDK_DELETE.has(relPath) || COMPONENT_DELETE.has(relPath) ||
+    LOADER_DELETE.has(relPath) || STATIC_DELETE.has(relPath) ||
+    relPath.startsWith("sdk/cart/") || relPath.startsWith("apps/deco/");
+}

package/scripts/migrate/fast-deploy-scaffold.test.ts

@@ -0,0 +1,130 @@
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { describe, expect, it } from "vitest";
+import { parseJsonc } from "../lib/jsonc";
+import { generateWranglerConfig } from "./phase-scaffold";
+import { checks } from "./phase-verify";
+import { generateSetup } from "./templates/setup";
+import type { MigrationContext } from "./types";
+
+/**
+ * Fast Deploy is inert unless THREE things line up: the `DECO_KV` binding,
+ * `DECO_FAST_DEPLOY=1`, and `setup.ts` handing the KV resolver to
+ * `@decocms/blocks-admin` (which cannot import `@decocms/tanstack` itself).
+ *
+ * Two of three is the worst state: it looks configured, a Studio publish
+ * reports success, and nothing ever reaches KV. These tests pin the scaffold to
+ * emit all three and pin the verify check to actually catch a partial config.
+ */
+
+const FIXTURE: MigrationContext = {
+  sourceDir: "",
+  siteName: "test-site",
+  platform: "custom",
+  vtexAccount: null,
+  gtmId: null,
+  importMap: {},
+  discoveredNpmDeps: {},
+  themeColors: {},
+  tailwindConfig: {
+    colors: {},
+    fontFamily: {},
+    screens: {},
+    safelist: [],
+    safelistPatterns: [],
+    plugins: [],
+    reviewItems: [],
+    animations: {},
+    keyframes: {},
+  },
+  fontFamily: null,
+  googleFonts: [],
+  layout: null,
+  files: [],
+  sectionMetas: [],
+  islandClassifications: [],
+  loaderInventory: [],
+  patterns: {},
+  scaffoldedFiles: [],
+  transformedFiles: [],
+  deletedFiles: [],
+  movedFiles: [],
+  manualReview: [],
+  dryRun: false,
+  verbose: false,
+} as unknown as MigrationContext;
+
+const fastDeployCheck = checks.find((c) => c.name === "Fast Deploy wired end to end");
+
+/** Write a site tree with the given wrangler + setup contents. */
+function makeSite(wrangler: string, setup: string): MigrationContext {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "fd-scaffold-"));
+  fs.writeFileSync(path.join(dir, "wrangler.jsonc"), wrangler);
+  fs.mkdirSync(path.join(dir, "src"), { recursive: true });
+  fs.writeFileSync(path.join(dir, "src", "setup.ts"), setup);
+  return { ...FIXTURE, sourceDir: dir };
+}
+
+describe("scaffolded wrangler.jsonc", () => {
+  // Parse it rather than grep it: the template is hand-written JSONC, and a
+  // stray comma or comment that breaks parsing silently disables fast-deploy
+  // everywhere at once (the builder, the control-plane and the verify check
+  // below all read this file through a JSONC parser).
+  const cfg = parseJsonc(generateWranglerConfig(FIXTURE)) as {
+    kv_namespaces: Array<{ binding: string }>;
+    vars: Record<string, string>;
+    tail_consumers?: unknown[];
+  };
+
+  it("declares the DECO_KV binding and DECO_FAST_DEPLOY together", () => {
+    expect(cfg.kv_namespaces.map((n) => n.binding)).toContain("DECO_KV");
+    expect(cfg.vars.DECO_FAST_DEPLOY).toBe("1");
+    expect(cfg.vars.DECO_SITE_NAME).toBe("test-site");
+  });
+
+  it("declares a tail consumer, without which exceededMemory is unobservable", () => {
+    // Cloudflare kills the isolate over the 128MB cap before any in-worker code
+    // could report it — the tail worker is the only channel that sees it.
+    expect(cfg.tail_consumers).toBeTruthy();
+  });
+});
+
+describe("scaffolded setup.ts", () => {
+  it("calls setupTanstackFastDeploy, or the Studio publish write-through no-ops", () => {
+    const setup = generateSetup(FIXTURE);
+    expect(setup).toContain("setupTanstackFastDeploy()");
+    expect(setup).toMatch(/import \{[^}]*setupTanstackFastDeploy[^}]*\} from "@decocms\/tanstack"/);
+  });
+});
+
+describe('verify check "Fast Deploy wired end to end"', () => {
+  const FULL_WRANGLER = `{
+  // comment + trailing comma: real wrangler.jsonc, not JSON
+  "kv_namespaces": [{ "binding": "DECO_KV", "id": "" }],
+  "vars": { "DECO_FAST_DEPLOY": "1" },
+}`;
+  const FULL_SETUP = "setupTanstackFastDeploy();\n";
+
+  it("passes on a fully wired site", () => {
+    expect(fastDeployCheck?.fn(makeSite(FULL_WRANGLER, FULL_SETUP))).toBe(true);
+  });
+
+  it("fails when the DECO_KV binding is missing", () => {
+    const w = '{ "kv_namespaces": [], "vars": { "DECO_FAST_DEPLOY": "1" } }';
+    expect(fastDeployCheck?.fn(makeSite(w, FULL_SETUP))).toBe(false);
+  });
+
+  it("fails when DECO_FAST_DEPLOY is not set", () => {
+    const w = '{ "kv_namespaces": [{ "binding": "DECO_KV", "id": "" }] }';
+    expect(fastDeployCheck?.fn(makeSite(w, FULL_SETUP))).toBe(false);
+  });
+
+  it("fails when setup.ts never hands over the KV resolver", () => {
+    expect(fastDeployCheck?.fn(makeSite(FULL_WRANGLER, "// nothing\n"))).toBe(false);
+  });
+
+  it("is an error, not a warning — a silent half-config is the failure mode", () => {
+    expect(fastDeployCheck?.severity).toBe("error");
+  });
+});

package/scripts/migrate/icon-casing.test.ts

@@ -0,0 +1,63 @@
+import { mkdtempSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { reconcileIconCasing } from "./phase-transform";
+import { createContext, type MigrationContext } from "./types";
+
+let dir: string;
+let ctx: MigrationContext;
+
+beforeEach(() => {
+  dir = mkdtempSync(join(tmpdir(), "icon-casing-"));
+  mkdirSync(join(dir, "src", "components", "ui"), { recursive: true });
+  mkdirSync(join(dir, "src", "sections"), { recursive: true });
+  writeFileSync(
+    join(dir, "src", "components", "ui", "Icon.tsx"),
+    `export type AvailableIcons =\n  | "Close"\n  | "Menu"\n  | "ChevronDown";\n`,
+  );
+  ctx = createContext(dir);
+});
+afterEach(() => rmSync(dir, { recursive: true, force: true }));
+
+describe("reconcileIconCasing", () => {
+  it("case-corrects <Icon id> to match the declared AvailableIcons", () => {
+    const f = join(dir, "src", "sections", "Drawer.tsx");
+    writeFileSync(f, `<Icon id="close" /> <Icon id="menu" /> <Icon id="Close" />`);
+    reconcileIconCasing(ctx);
+    const out = readFileSync(f, "utf8");
+    expect(out).toContain(`id="Close"`);
+    expect(out).toContain(`id="Menu"`);
+    expect(out).not.toContain(`id="close"`);
+    expect(out).not.toContain(`id="menu"`);
+  });
+
+  it("flags a used icon that is NOT in AvailableIcons (no blind rename)", () => {
+    const f = join(dir, "src", "sections", "Search.tsx");
+    writeFileSync(f, `<Icon id="search" />`);
+    reconcileIconCasing(ctx);
+    // left as-is
+    expect(readFileSync(f, "utf8")).toContain(`id="search"`);
+    // flagged for manual review, once
+    const flags = ctx.manualReviewItems.filter((m) => m.reason.includes(`id="search"`));
+    expect(flags).toHaveLength(1);
+    expect(flags[0]!.file).toBe("src/sections/Search.tsx");
+  });
+
+  it("only touches <Icon id>, not other id= attributes", () => {
+    const f = join(dir, "src", "sections", "Nav.tsx");
+    writeFileSync(f, `<div id="close-button"><Icon id="close" /></div>`);
+    reconcileIconCasing(ctx);
+    const out = readFileSync(f, "utf8");
+    expect(out).toContain(`<div id="close-button">`); // untouched
+    expect(out).toContain(`<Icon id="Close" />`); // corrected
+  });
+
+  it("no-op when the site declares no AvailableIcons", () => {
+    rmSync(join(dir, "src", "components", "ui", "Icon.tsx"));
+    const f = join(dir, "src", "sections", "X.tsx");
+    writeFileSync(f, `<Icon id="close" />`);
+    reconcileIconCasing(ctx);
+    expect(readFileSync(f, "utf8")).toContain(`id="close"`); // unchanged
+  });
+});

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}/
@@ -10,12 +10,74 @@ import { extractPlatform } from "./phase-analyze";
 //   3. apps/site.ts loose string match against platform name + "platform"
 //   4. .deco/blocks filenames hinting at platform
 // Strategy 3 is the false-positive trap that ate Magento sites before #211:
-// helsinki/granadobr's apps/site.ts imports `apps/vtex/mod.ts` for the color
+// a production site's apps/site.ts imports `apps/vtex/mod.ts` for the color
 // palette, so the content matches `"vtex"` even though the real platform is
 // declared via `apps/magento.ts`. The fix adds "magento" to the platforms
 // 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;
 
@@ -28,7 +90,7 @@ describe("extractPlatform", () => {
     fs.rmSync(tmp, { recursive: true, force: true });
   });
 
-  it("detects magento from apps/magento.ts (granadobr/helsinki shape)", () => {
+  it("detects magento from apps/magento.ts (a production site shape)", () => {
     fs.writeFileSync(path.join(tmp, "apps", "magento.ts"), "export default {};\n");
     // Also write a site.ts that imports vtex for color palettes — this is
     // what tripped Strategy 3 before #211.
@@ -51,7 +113,7 @@ describe("extractPlatform", () => {
   });
 
   it("prefers magento over vtex when both an apps/magento.ts AND a vtex string match exist", () => {
-    // Reproduce the exact granadobr trap: apps/magento.ts is the real signal,
+    // Reproduce the exact production trap: apps/magento.ts is the real signal,
     // but apps/site.ts loosely contains "vtex" + "platform".
     fs.writeFileSync(path.join(tmp, "apps", "magento.ts"), "export default {};\n");
     fs.writeFileSync(