@decocms/blocks-cli 7.21.0 → 7.21.1

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

@@ -1,7 +1,26 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import type { MigrationContext } from "../types";
+import { log } from "../types";
 import type { ExtractedTheme } from "../analyzers/theme-extractor";
+import { fixOklchHexMismatches, isOklchCoordinates } from "../transforms/color-oklch";
+import { transformCss } from "../transforms/css";
+import { renameToken } from "../transforms/tailwind-renames";
+
+const GRAY_SHADES = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+const GRAY_SCALE_DEFAULTS: Record<string, string> = {
+  "50": "#f9fafb",
+  "100": "#f3f4f6",
+  "200": "#e5e7eb",
+  "300": "#d1d5db",
+  "400": "#9ca3af",
+  "500": "#6b7280",
+  "600": "#4b5563",
+  "700": "#374151",
+  "800": "#1f2937",
+  "900": "#111827",
+  "950": "#030712",
+};
 
 /**
  * Find the original site's custom CSS file.
@@ -48,41 +67,20 @@ function extractCustomCss(rawCss: string): string {
 /**
  * Transform @apply directives for TW3→TW4 compatibility.
  * The tailwind.ts transform handles className= attributes in JSX,
- * but @apply inside CSS also needs class renames.
- *
- * Also converts @apply with custom brand/theme colors to native CSS
- * properties when the utility class might not be registered in TW4.
+ * but @apply inside CSS also needs the same class renames — reuses the
+ * single shared table (transforms/tailwind-renames.ts) so this never
+ * drifts from the className= rewriter again.
  */
 function transformApplyDirectives(css: string): string {
-  return css
-    .replace(/@apply\s+([^;]+);/g, (_match, classes: string) => {
-      let fixed = classes;
-      // flex-grow-0 → grow-0
-      fixed = fixed.replace(/\bflex-grow-0\b/g, "grow-0");
-      fixed = fixed.replace(/\bflex-grow\b/g, "grow");
-      fixed = fixed.replace(/\bflex-shrink-0\b/g, "shrink-0");
-      fixed = fixed.replace(/\bflex-shrink\b/g, "shrink");
-      // transform → removed (auto in v4)
-      fixed = fixed.replace(/\btransform\b(?!-none)/g, "");
-      fixed = fixed.replace(/\bfilter\b/g, "");
-      // ring → ring-3
-      fixed = fixed.replace(/\bring\b(?!-)/g, "ring-3");
-      // Clean up multiple spaces
-      fixed = fixed.replace(/\s{2,}/g, " ").trim();
-      return `@apply ${fixed};`;
-    });
-}
-
-/**
- * Test if a value looks like oklch coordinates (space-separated numbers,
- * possibly with `/` for alpha). Examples: "0.5 0.2 30", "0.8 0.15 120 / 0.5"
- * This distinguishes oklch coordinate values from hex colors.
- */
-function isOklchCoordinates(val: string): boolean {
-  const trimmed = val.trim();
-  // oklch coordinates: 2-3 space-separated numbers, possibly with / alpha
-  // e.g. "0.5 0.2 30" or "0.85 0.15 120 / 0.5"
-  return /^[\d.]+\s+[\d.]+\s+[\d.]+(\s*\/\s*[\d.]+)?$/.test(trimmed);
+  return css.replace(/@apply\s+([^;]+);/g, (_match, classes: string) => {
+    const fixed = classes
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(renameToken)
+      .filter(Boolean)
+      .join(" ");
+    return `@apply ${fixed};`;
+  });
 }
 
 /**
@@ -203,22 +201,57 @@ ${colorLines}
     }
   }
 
-  // Gray scale compat (Tailwind v3 had gray-50..gray-950 by default)
+  // Port theme.extend.colors / theme.extend.fontFamily / theme.extend.screens
+  // from the source site's tailwind.config.ts (extracted in phase-analyze
+  // before that file is deleted — see analyzers/tailwind-config.ts). Without
+  // this, custom brand palettes and named font stacks are silently dropped
+  // and any class referencing them (`bg-perola`, `font-bebas-neue`) makes
+  // Tailwind v4 throw "Cannot apply unknown utility class" (decocms/blocks#369).
+  // gray-50..950 are handled below, in the gray-scale block, so a custom
+  // gray ramp from tailwind.config.ts overrides the default instead of
+  // being declared twice in the same @theme rule (last declaration wins in
+  // CSS — the default would otherwise silently clobber the custom one).
+  const twColors = ctx.tailwindConfig.colors;
+  const twColorKeys = Object.keys(twColors).filter(
+    (k) => !(`--color-${k}` in semanticColors) && !GRAY_SHADES.some((shade) => k === `gray-${shade}`),
+  );
+  if (twColorKeys.length > 0) {
+    themeBlock += `\n\n  /* Custom colors ported from tailwind.config.ts */`;
+    for (const key of twColorKeys) {
+      themeBlock += `\n  --color-${key}: ${twColors[key]};`;
+    }
+  }
+
+  const twFontFamily = ctx.tailwindConfig.fontFamily;
+  const twFontKeys = Object.keys(twFontFamily);
+  if (twFontKeys.length > 0) {
+    themeBlock += `\n\n  /* Font stacks ported from tailwind.config.ts */`;
+    for (const key of twFontKeys) {
+      themeBlock += `\n  --font-${key}: ${twFontFamily[key]};`;
+    }
+  }
+
+  const twScreens = ctx.tailwindConfig.screens;
+  const twScreenKeys = Object.keys(twScreens);
+  if (twScreenKeys.length > 0) {
+    themeBlock += `\n\n  /* Custom breakpoints ported from tailwind.config.ts */`;
+    for (const key of twScreenKeys) {
+      themeBlock += `\n  --breakpoint-${key}: ${twScreens[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.
   themeBlock += `
 
-  /* Gray scale (Tailwind v3 default, required for bg-gray-*, text-gray-*, etc.) */
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-  --color-gray-950: #030712;
-}`;
+  /* Gray scale (Tailwind v3 default, required for bg-gray-*, text-gray-*, etc.) */`;
+  for (const shade of GRAY_SHADES) {
+    const key = `gray-${shade}`;
+    const value = twColors[key] ?? GRAY_SCALE_DEFAULTS[shade];
+    themeBlock += `\n  --color-${key}: ${value};`;
+  }
+  themeBlock += `\n}`;
   sections.push(themeBlock);
 
   // ── DaisyUI v5 compat ─────────────────────────────────────────────
@@ -345,22 +378,79 @@ section[data-deferred="true"] {
   display: none;
 }`);
 
+  // ── Safelist (tailwind.config.ts) ──────────────────────────────────
+  // Tailwind v4 has no config-based safelist. Literal class names port
+  // directly to `@source inline(...)`; regex patterns can't be converted
+  // automatically and are flagged for manual review instead.
+  const safelist = ctx.tailwindConfig.safelist;
+  if (safelist.length > 0) {
+    sections.push(`/* Safelist ported from tailwind.config.ts (Tailwind v4 has no config safelist) */
+@source inline("${safelist.join(" ")}");`);
+  }
+  for (const pattern of ctx.tailwindConfig.safelistPatterns) {
+    ctx.manualReviewItems.push({
+      file: "src/styles/app.css",
+      reason: `tailwind.config.ts safelist pattern ${pattern} cannot be auto-converted — add the matching classes via @source inline("...") manually (Tailwind v4 has no regex safelist)`,
+      severity: "warning",
+    });
+  }
+
+  // Fix gotcha #43: `oklch(var(--x))` is emitted wherever a CMS theme var
+  // looked like bare oklch coordinates, but if that var was actually
+  // declared as hex elsewhere, the wrapper is invalid CSS (icons/fills
+  // silently render black). Convert the hex declaration to an oklch triplet
+  // so the wrapper stays valid.
+  //
+  // Scoped to the generator's OWN output (`sections` so far) — NOT the
+  // site's original custom CSS appended below. That content should be
+  // passed through as close to verbatim as possible; scanning/rewriting it
+  // too would mean silently mutating a site-authored `--x: #hex;`
+  // declaration if the site happens to also use the same
+  // `oklch(var(--x))` idiom for an unrelated purpose.
+  const generatorCss = sections.join("\n\n") + "\n";
+  const { css: fixedGeneratorCss, fixed, flagged } = fixOklchHexMismatches(generatorCss);
+  for (const note of fixed) {
+    log(ctx, `[app.css] Fixed oklch/hex mismatch: ${note}`);
+  }
+  for (const note of flagged) {
+    ctx.manualReviewItems.push({
+      file: "src/styles/app.css",
+      reason: note,
+      severity: "warning",
+    });
+  }
+
   // ── Incorporate original site's custom CSS ────────────────────
   // Instead of throwing away the site's CSS, we extract and append
   // all custom rules (component overrides, @layer base, @font-face,
-  // typography utilities, feature-specific CSS, etc.)
+  // typography utilities, feature-specific CSS, etc.). Appended AFTER the
+  // oklch fix above runs, so this content is never scanned/rewritten by it.
   const originalCss = findOriginalCss(ctx);
+  let originalCssBlock = "";
   if (originalCss) {
     const customCss = extractCustomCss(originalCss);
     if (customCss) {
-      const transformed = transformApplyDirectives(customCss);
-      sections.push(`/* ═══════════════════════════════════════════════════════════════
+      let transformed = transformApplyDirectives(customCss);
+      const cssFix = transformCss(transformed);
+      transformed = cssFix.css;
+      for (const note of cssFix.notes) {
+        if (note.startsWith("MANUAL:")) {
+          ctx.manualReviewItems.push({
+            file: "src/styles/app.css",
+            reason: note.replace(/^MANUAL:\s*/, ""),
+            severity: "warning",
+          });
+        } else {
+          log(ctx, `[app.css] ${note}`);
+        }
+      }
+      originalCssBlock = `/* ═══════════════════════════════════════════════════════════════
    Original site CSS (migrated from tailwind.css)
    ═══════════════════════════════════════════════════════════════ */
 
-${transformed}`);
+${transformed}`;
     }
   }
 
-  return sections.join("\n\n") + "\n";
+  return originalCssBlock ? `${fixedGeneratorCss}\n${originalCssBlock}\n` : fixedGeneratorCss;
 }

package/scripts/migrate/templates/hooks.test.ts

@@ -12,6 +12,7 @@ function makeCtx(platform: MigrationContext["platform"]): MigrationContext {
 		importMap: {},
 		discoveredNpmDeps: {},
 		themeColors: {},
+	tailwindConfig: { colors: {}, fontFamily: {}, screens: {}, safelist: [], safelistPatterns: [], plugins: [], reviewItems: [] },
 		fontFamily: null,
 		files: [],
 		sectionMetas: [],

package/scripts/migrate/templates/package-json.ts

@@ -174,6 +174,11 @@ export function generatePackageJson(ctx: MigrationContext): string {
     devDependencies: {
       "@cloudflare/vite-plugin": "^1.27.0",
       "@decocms/blocks-cli": `^${frameworkVersion}`,
+      // CLI build of src/styles/app.css — used by the migration's own
+      // css-compile-check.ts (phase-compile) and by `tailwind:lint`, so a
+      // dropped custom theme token fails migration/CI instead of shipping
+      // an unstyled page (decocms/blocks#369).
+      "@tailwindcss/cli": "^4.2.1",
       "@tailwindcss/vite": "^4.2.1",
       "@tanstack/router-cli": "1.166.7",
       "@types/react": "^19.2.14",

package/scripts/migrate/transforms/color-oklch.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { fixOklchHexMismatches, hexToOklchTriplet, isOklchCoordinates } from "./color-oklch";
+
+describe("isOklchCoordinates", () => {
+  it("matches bare oklch triplets", () => {
+    expect(isOklchCoordinates("0.55 0.2 30")).toBe(true);
+    expect(isOklchCoordinates("0.85 0.15 120 / 0.5")).toBe(true);
+  });
+
+  it("rejects hex and other color syntaxes", () => {
+    expect(isOklchCoordinates("#B10200")).toBe(false);
+    expect(isOklchCoordinates("rgb(1, 2, 3)")).toBe(false);
+  });
+});
+
+describe("hexToOklchTriplet", () => {
+  it("converts white to L=1 C=0", () => {
+    const triplet = hexToOklchTriplet("#ffffff");
+    expect(triplet).not.toBeNull();
+    const [l, c] = triplet!.split(" ").map(Number);
+    expect(l).toBeCloseTo(1, 2);
+    expect(c).toBeCloseTo(0, 2);
+  });
+
+  it("converts black to L=0 C=0", () => {
+    const triplet = hexToOklchTriplet("#000000");
+    expect(triplet).not.toBeNull();
+    const [l, c] = triplet!.split(" ").map(Number);
+    expect(l).toBeCloseTo(0, 2);
+    expect(c).toBeCloseTo(0, 2);
+  });
+
+  it("expands 3-digit hex", () => {
+    expect(hexToOklchTriplet("#fff")).toBe(hexToOklchTriplet("#ffffff"));
+  });
+
+  it("returns null for unparseable input", () => {
+    expect(hexToOklchTriplet("not-a-color")).toBeNull();
+  });
+});
+
+describe("fixOklchHexMismatches", () => {
+  it("converts a hex-declared var used as oklch(var(--x)) into an oklch triplet", () => {
+    const css = `:root {
+  --icon-color: #B10200;
+}
+.icon {
+  fill: oklch(var(--icon-color));
+}`;
+
+    const result = fixOklchHexMismatches(css);
+    expect(result.fixed.length).toBe(1);
+    expect(result.css).toMatch(/--icon-color:\s*[\d.]+\s+[\d.]+\s+[\d.]+;/);
+    expect(result.css).not.toContain("#B10200");
+  });
+
+  it("leaves already-valid oklch coordinate declarations untouched", () => {
+    const css = `:root {
+  --icon-color: 0.55 0.2 30;
+}
+.icon {
+  fill: oklch(var(--icon-color));
+}`;
+
+    const result = fixOklchHexMismatches(css);
+    expect(result.fixed).toEqual([]);
+    expect(result.flagged).toEqual([]);
+    expect(result.css).toBe(css);
+  });
+
+  it("flags rgb()-declared vars used as oklch(var(--x)) instead of guessing", () => {
+    const css = `:root {
+  --icon-color: rgb(10, 20, 30);
+}
+.icon {
+  fill: oklch(var(--icon-color));
+}`;
+
+    const result = fixOklchHexMismatches(css);
+    expect(result.fixed).toEqual([]);
+    expect(result.flagged.length).toBe(1);
+  });
+});

package/scripts/migrate/transforms/color-oklch.ts

@@ -0,0 +1,122 @@
+/**
+ * hex -> oklch triplet conversion + a post-process pass that fixes gotcha #43:
+ * generated CSS emits `oklch(var(--x))` (daisyUI v5's opacity-modifier
+ * pattern) but `--x` was assigned a hex color, not oklch coordinates.
+ * `oklch(#B10200)` is invalid CSS — the color silently falls back to its
+ * initial value, which is why SVG icons using `fill: oklch(var(--icon-color))`
+ * render solid black on migrated sites.
+ */
+
+/**
+ * True if `value` looks like bare oklch coordinates: 2-3 space-separated
+ * numbers, optionally with a `/ alpha` suffix. E.g. "0.55 0.2 30" or
+ * "0.85 0.15 120 / 0.5". Distinguishes oklch coordinate values from hex
+ * colors or other CSS color syntaxes.
+ */
+export function isOklchCoordinates(value: string): boolean {
+  const trimmed = value.trim();
+  return /^[\d.]+\s+[\d.]+\s+[\d.]+(\s*\/\s*[\d.]+)?$/.test(trimmed);
+}
+
+function srgbChannelToLinear(c: number): number {
+  const v = c / 255;
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+}
+
+/**
+ * Convert a hex color (#rgb, #rrggbb, #rrggbbaa) to an oklch coordinate
+ * triplet string "L C H" (L in [0,1], C in [0, ~0.4], H in degrees
+ * [0, 360)), matching the format expected by `oklch(var(--x))`.
+ * Returns null if the input isn't a parseable hex color.
+ */
+export function hexToOklchTriplet(hex: string): string | null {
+  const normalized = hex.trim().replace(/^#/, "");
+  let r: number, g: number, b: number;
+
+  if (normalized.length === 3) {
+    r = parseInt(normalized[0] + normalized[0], 16);
+    g = parseInt(normalized[1] + normalized[1], 16);
+    b = parseInt(normalized[2] + normalized[2], 16);
+  } else if (normalized.length === 6 || normalized.length === 8) {
+    r = parseInt(normalized.slice(0, 2), 16);
+    g = parseInt(normalized.slice(2, 4), 16);
+    b = parseInt(normalized.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  if ([r, g, b].some((c) => Number.isNaN(c))) return null;
+
+  const lr = srgbChannelToLinear(r);
+  const lg = srgbChannelToLinear(g);
+  const lb = srgbChannelToLinear(b);
+
+  // linear sRGB -> LMS (Björn Ottosson's OKLab matrices)
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const b_ = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+
+  const C = Math.sqrt(a * a + b_ * b_);
+  let H = (Math.atan2(b_, a) * 180) / Math.PI;
+  if (H < 0) H += 360;
+
+  return `${L.toFixed(4)} ${C.toFixed(4)} ${H.toFixed(2)}`;
+}
+
+/**
+ * Scan generated CSS for `oklch(var(--x))` usages, look up how `--x` was
+ * declared elsewhere in the same stylesheet, and rewrite hex-valued
+ * declarations to oklch triplets so the wrapper stays valid CSS.
+ * rgb()/hsl()/named-color declarations are left as-is and reported so a
+ * human can convert them (no lossless closed-form conversion is attempted
+ * for those here).
+ */
+export function fixOklchHexMismatches(css: string): { css: string; fixed: string[]; flagged: string[] } {
+  const declRe = /(--[\w-]+)\s*:\s*([^;]+);/g;
+  const declaredValues = new Map<string, string>();
+  let m: RegExpExecArray | null;
+  while ((m = declRe.exec(css)) !== null) {
+    declaredValues.set(m[1], m[2].trim());
+  }
+
+  const usageRe = /oklch\(var\((--[\w-]+)\)\)/g;
+  const fixed: string[] = [];
+  const flagged: string[] = [];
+  let result = css;
+
+  const seen = new Set<string>();
+  let usageMatch: RegExpExecArray | null;
+  while ((usageMatch = usageRe.exec(css)) !== null) {
+    const varName = usageMatch[1];
+    if (seen.has(varName)) continue;
+    seen.add(varName);
+
+    const value = declaredValues.get(varName);
+    if (!value || isOklchCoordinates(value)) continue;
+
+    const hexMatch = value.match(/^#[0-9a-fA-F]{3,8}$/);
+    if (hexMatch) {
+      const triplet = hexToOklchTriplet(value);
+      if (triplet) {
+        const declPattern = new RegExp(
+          `(${varName.replace(/[-]/g, "\\-")}\\s*:\\s*)${value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(\\s*;)`,
+          "g",
+        );
+        result = result.replace(declPattern, `$1${triplet}$2`);
+        fixed.push(`${varName}: ${value} -> oklch triplet ${triplet}`);
+      }
+      continue;
+    }
+
+    flagged.push(`${varName} is used as oklch(var(${varName})) but declared as "${value}" — not a hex or oklch-coordinate value; convert manually`);
+  }
+
+  return { css: result, fixed, flagged };
+}

package/scripts/migrate/transforms/css.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { promoteApplyClassesToUtility, rewriteThemeHelper, transformCss } from "./css";
+
+describe("rewriteThemeHelper", () => {
+  it("rewrites theme(colors.x.y) to var(--color-x-y)", () => {
+    const r = rewriteThemeHelper(".foo { color: theme(colors.gray.100); }");
+    expect(r.css).toBe(".foo { color: var(--color-gray-100); }");
+    expect(r.notes.length).toBe(1);
+  });
+
+  it("rewrites theme(spacing.4) to var(--spacing-4)", () => {
+    const r = rewriteThemeHelper(".foo { margin: theme(spacing.4); }");
+    expect(r.css).toBe(".foo { margin: var(--spacing-4); }");
+  });
+
+  it("preserves a fallback second argument", () => {
+    const r = rewriteThemeHelper(".foo { color: theme(colors.gray.100, #fff); }");
+    expect(r.css).toBe(".foo { color: var(--color-gray-100, #fff); }");
+  });
+
+  it("leaves a bare theme() call without a dotted path untouched", () => {
+    const r = rewriteThemeHelper(".foo { color: theme(primary); }");
+    expect(r.css).toBe(".foo { color: theme(primary); }");
+  });
+});
+
+describe("promoteApplyClassesToUtility", () => {
+  it("promotes a single-class @apply rule from @layer components to @utility", () => {
+    const css = `@layer components {
+  .btn-primary {
+    @apply px-4 py-2 bg-red-500;
+  }
+}`;
+    const r = promoteApplyClassesToUtility(css);
+    expect(r.css).toContain("@utility btn-primary {");
+    expect(r.css).not.toContain("@layer components");
+    expect(r.notes.some((n) => n.includes("Promoted"))).toBe(true);
+  });
+
+  it("keeps compound selectors inside @layer components and flags them", () => {
+    const css = `@layer components {
+  .card .card-title {
+    @apply text-lg font-bold;
+  }
+}`;
+    const r = promoteApplyClassesToUtility(css);
+    expect(r.css).toContain("@layer components");
+    expect(r.css).toContain(".card .card-title");
+    expect(r.notes.some((n) => n.startsWith("MANUAL:"))).toBe(true);
+  });
+
+  it("promotes some rules and keeps others in the same @layer block", () => {
+    const css = `@layer components {
+  .btn-primary {
+    @apply px-4 bg-red-500;
+  }
+  .card .title {
+    @apply text-lg;
+  }
+}`;
+    const r = promoteApplyClassesToUtility(css);
+    expect(r.css).toContain("@utility btn-primary {");
+    expect(r.css).toContain("@layer components");
+    expect(r.css).toContain(".card .title");
+  });
+
+  it("passes through a comment-only @layer components block instead of dropping it", () => {
+    const css = `@layer components {
+  /* keep tab styles centralized here for now */
+}
+
+.after { color: red; }`;
+    const r = promoteApplyClassesToUtility(css);
+    expect(r.css).toContain("@layer components");
+    expect(r.css).toContain("/* keep tab styles centralized here for now */");
+    expect(r.css).toContain(".after { color: red; }");
+  });
+
+  it("passes through an empty @layer components block instead of dropping it", () => {
+    const css = `@layer components {
+}
+
+.after { color: red; }`;
+    const r = promoteApplyClassesToUtility(css);
+    expect(r.css).toContain("@layer components");
+    expect(r.css).toContain(".after { color: red; }");
+  });
+
+  it("is a no-op when there is no @layer components block", () => {
+    const css = ".foo { color: red; }";
+    const r = promoteApplyClassesToUtility(css);
+    expect(r.css).toBe(css);
+    expect(r.notes).toEqual([]);
+  });
+});
+
+describe("transformCss", () => {
+  it("applies both fixes in sequence", () => {
+    const css = `@layer components {
+  .btn-brand {
+    @apply px-4;
+    color: theme(colors.brand.500);
+  }
+}`;
+    const r = transformCss(css);
+    expect(r.css).toContain("@utility btn-brand {");
+    expect(r.css).toContain("var(--color-brand-500)");
+  });
+});