@mandujs/core 0.54.31 → 0.55.0-beta.1

package/src/design/__tests__/tailwind-theme.test.ts

@@ -1,229 +1,229 @@
-/**
- * Issue #245 M3 — Tailwind v4 `@theme` compiler tests.
- *
- * Pin the contract every other tool (CLI sync, MCP discovery,
- * dev-mode watcher) depends on:
- *
- *   - DESIGN.md tokens → CSS variable naming (Tailwind v4 convention).
- *   - Slug normalisation handles the human-friendly names DESIGN.md
- *     authors actually write.
- *   - Markered region merge preserves user-edited regions.
- *   - Conflicts surface explicitly so the user can reconcile.
- */
-
-import { describe, it, expect } from "bun:test";
-import { parseDesignMd } from "../parser";
-import {
-  compileTailwindTheme,
-  mergeThemeIntoCss,
-  slugifyTokenName,
-  stripMarkeredBlock,
-  THEME_MARKER_END,
-  THEME_MARKER_START,
-} from "../tailwind-theme";
-
-describe("slugifyTokenName", () => {
-  it("kebab-cases multi-word names", () => {
-    expect(slugifyTokenName("Hot Peach")).toBe("hot-peach");
-    expect(slugifyTokenName("Body Small")).toBe("body-small");
-    expect(slugifyTokenName("h1 hero")).toBe("h1-hero");
-  });
-
-  it("collapses runs of whitespace and underscores", () => {
-    expect(slugifyTokenName("primary  color")).toBe("primary-color");
-    expect(slugifyTokenName("warm_cream")).toBe("warm-cream");
-  });
-
-  it("strips characters that aren't word/space/dash", () => {
-    expect(slugifyTokenName("primary!")).toBe("primary");
-    expect(slugifyTokenName("orange (500)")).toBe("orange-500");
-  });
-
-  it("lowercases ASCII", () => {
-    expect(slugifyTokenName("Primary")).toBe("primary");
-  });
-});
-
-describe("compileTailwindTheme — color palette", () => {
-  it("emits --color-<slug> per token", () => {
-    const spec = parseDesignMd(`# Test
-## Color Palette
-- Primary — #FF8C42 — brand accent
-- Surface — #FFF8F0 — neutral background
-`);
-    const compiled = compileTailwindTheme(spec);
-    const vars = compiled.entries.map((e) => [e.variable, e.value]);
-    expect(vars).toContainEqual(["--color-primary", "#FF8C42"]);
-    expect(vars).toContainEqual(["--color-surface", "#FFF8F0"]);
-  });
-
-  it("warns and skips tokens with no parseable value", () => {
-    const spec = parseDesignMd(`# Test
-## Color Palette
-- Primary — see Stripe brand docs
-- Surface — #FFF8F0
-`);
-    const compiled = compileTailwindTheme(spec);
-    expect(compiled.entries.find((e) => e.variable === "--color-primary")).toBeUndefined();
-    expect(compiled.warnings.some((w) => w.kind === "missing-value" && w.tokenName === "Primary")).toBe(true);
-  });
-
-  it("flags slug collisions", () => {
-    const spec = parseDesignMd(`# Test
-## Color Palette
-- Primary — #ff0000
-- primary — #00ff00
-`);
-    const compiled = compileTailwindTheme(spec);
-    expect(compiled.warnings.some((w) => w.kind === "slug-collision")).toBe(true);
-    // First wins.
-    expect(compiled.entries.find((e) => e.variable === "--color-primary")?.value).toBe("#ff0000");
-  });
-});
-
-describe("compileTailwindTheme — emit order + section comments", () => {
-  it("groups entries by section with comment dividers", () => {
-    const spec = parseDesignMd(`# Test
-## Color Palette
-- Primary — #FF8C42
-
-## Layout
-- sm: 0.5rem
-- md: 1rem
-`);
-    const compiled = compileTailwindTheme(spec);
-    expect(compiled.cssBody).toContain("/* Colors */");
-    expect(compiled.cssBody).toContain("--color-primary: #FF8C42;");
-    expect(compiled.cssBody).toContain("/* Spacing */");
-    expect(compiled.cssBody).toContain("--spacing-sm: 0.5rem;");
-  });
-});
-
-describe("mergeThemeIntoCss", () => {
-  it("inserts a fresh markered block when none exists", () => {
-    const spec = parseDesignMd(`# Test
-## Color Palette
-- Primary — #FF8C42
-`);
-    const compiled = compileTailwindTheme(spec);
-    const result = mergeThemeIntoCss("@import 'tailwindcss';\n", compiled);
-    expect(result.inserted).toBe(true);
-    expect(result.css).toContain(THEME_MARKER_START);
-    expect(result.css).toContain(THEME_MARKER_END);
-    expect(result.css).toContain("--color-primary: #FF8C42;");
-    expect(result.css).toContain("@import 'tailwindcss';");
-  });
-
-  it("replaces the markered region only — leaves surrounding content untouched", () => {
-    const initial = `@import 'tailwindcss';
-
-/* user comment */
-${THEME_MARKER_START}
-@theme {
-  --color-primary: oldvalue;
-}
-${THEME_MARKER_END}
-
-.user-class { color: red; }
-`;
-    const spec = parseDesignMd(`# Test
-## Color Palette
-- Primary — #FF8C42
-`);
-    const compiled = compileTailwindTheme(spec);
-    const result = mergeThemeIntoCss(initial, compiled);
-    expect(result.inserted).toBe(false);
-    expect(result.css).toContain("/* user comment */");
-    expect(result.css).toContain(".user-class { color: red; }");
-    expect(result.css).toContain("--color-primary: #FF8C42;");
-    expect(result.css).not.toContain("oldvalue");
-  });
-
-  it("flags conflicts when a hand-written @theme variable contradicts DESIGN.md", () => {
-    const initial = `@import 'tailwindcss';
-@theme {
-  --color-primary: #000000;
-}
-`;
-    const spec = parseDesignMd(`# Test
-## Color Palette
-- Primary — #FF8C42
-`);
-    const compiled = compileTailwindTheme(spec);
-    const result = mergeThemeIntoCss(initial, compiled);
-    expect(result.conflicts).toHaveLength(1);
-    expect(result.conflicts[0]!.variable).toBe("--color-primary");
-    expect(result.conflicts[0]!.fromDesign).toBe("#FF8C42");
-    expect(result.conflicts[0]!.fromCss).toBe("#000000");
-  });
-
-  it("emits an empty markered region (no orphans) when DESIGN.md has no tokens", () => {
-    const spec = parseDesignMd("# Empty\n");
-    const compiled = compileTailwindTheme(spec);
-    const result = mergeThemeIntoCss("body { margin: 0; }\n", compiled);
-    expect(result.css).toContain(THEME_MARKER_START);
-    expect(result.css).toContain(THEME_MARKER_END);
-    expect(result.css).toContain("body { margin: 0; }");
-  });
-});
-
-describe("stripMarkeredBlock", () => {
-  it("removes only the markered region", () => {
-    const css = `@import 'tailwindcss';
-${THEME_MARKER_START}
-@theme {
-  --color-primary: #FF8C42;
-}
-${THEME_MARKER_END}
-.user { color: red; }
-`;
-    const result = stripMarkeredBlock(css);
-    expect(result).not.toContain("--color-primary");
-    expect(result).toContain("@import 'tailwindcss';");
-    expect(result).toContain(".user { color: red; }");
-  });
-
-  it("is a no-op when no markers are present", () => {
-    const css = `@import 'tailwindcss';\n`;
-    expect(stripMarkeredBlock(css)).toBe(css);
-  });
-});
-
-describe("end-to-end — stripe-like DESIGN.md → Tailwind theme", () => {
-  it("compiles a full multi-section DESIGN.md into one cohesive @theme", () => {
-    const designMd = `# Stripe-like
-
-## Color Palette
-- Primary — #635BFF — brand
-- Surface — #FFFFFF — page background
-- Text — #1A1F36 — body text
-
-## Typography
-- body: font-family: "Inter", sans-serif; size: 16px; line-height: 1.5
-- h1 hero: font-family: "Inter", sans-serif; size: 48px; line-height: 1.1
-
-## Layout
-- xs: 0.25rem
-- sm: 0.5rem
-- md: 1rem
-
-## Depth & Elevation
-- card — 0 1px 3px rgba(0,0,0,0.1)
-- modal — 0 25px 50px rgba(0,0,0,0.25)
-`;
-    const spec = parseDesignMd(designMd);
-    const compiled = compileTailwindTheme(spec);
-
-    // Colors
-    expect(compiled.cssBody).toContain("--color-primary: #635BFF;");
-    expect(compiled.cssBody).toContain("--color-surface: #FFFFFF;");
-    // Typography (font + text)
-    expect(compiled.cssBody).toContain("--font-body:");
-    expect(compiled.cssBody).toContain("--text-h1-hero: 48px / 1.1;");
-    // Spacing
-    expect(compiled.cssBody).toContain("--spacing-md: 1rem;");
-    // Shadows
-    expect(compiled.cssBody).toContain("--shadow-card:");
-    expect(compiled.cssBody).toContain("--shadow-modal:");
-  });
-});
+/**
+ * Issue #245 M3 — Tailwind v4 `@theme` compiler tests.
+ *
+ * Pin the contract every other tool (CLI sync, MCP discovery,
+ * dev-mode watcher) depends on:
+ *
+ *   - DESIGN.md tokens → CSS variable naming (Tailwind v4 convention).
+ *   - Slug normalisation handles the human-friendly names DESIGN.md
+ *     authors actually write.
+ *   - Markered region merge preserves user-edited regions.
+ *   - Conflicts surface explicitly so the user can reconcile.
+ */
+
+import { describe, it, expect } from "bun:test";
+import { parseDesignMd } from "../parser";
+import {
+  compileTailwindTheme,
+  mergeThemeIntoCss,
+  slugifyTokenName,
+  stripMarkeredBlock,
+  THEME_MARKER_END,
+  THEME_MARKER_START,
+} from "../tailwind-theme";
+
+describe("slugifyTokenName", () => {
+  it("kebab-cases multi-word names", () => {
+    expect(slugifyTokenName("Hot Peach")).toBe("hot-peach");
+    expect(slugifyTokenName("Body Small")).toBe("body-small");
+    expect(slugifyTokenName("h1 hero")).toBe("h1-hero");
+  });
+
+  it("collapses runs of whitespace and underscores", () => {
+    expect(slugifyTokenName("primary  color")).toBe("primary-color");
+    expect(slugifyTokenName("warm_cream")).toBe("warm-cream");
+  });
+
+  it("strips characters that aren't word/space/dash", () => {
+    expect(slugifyTokenName("primary!")).toBe("primary");
+    expect(slugifyTokenName("orange (500)")).toBe("orange-500");
+  });
+
+  it("lowercases ASCII", () => {
+    expect(slugifyTokenName("Primary")).toBe("primary");
+  });
+});
+
+describe("compileTailwindTheme — color palette", () => {
+  it("emits --color-<slug> per token", () => {
+    const spec = parseDesignMd(`# Test
+## Color Palette
+- Primary — #FF8C42 — brand accent
+- Surface — #FFF8F0 — neutral background
+`);
+    const compiled = compileTailwindTheme(spec);
+    const vars = compiled.entries.map((e) => [e.variable, e.value]);
+    expect(vars).toContainEqual(["--color-primary", "#FF8C42"]);
+    expect(vars).toContainEqual(["--color-surface", "#FFF8F0"]);
+  });
+
+  it("warns and skips tokens with no parseable value", () => {
+    const spec = parseDesignMd(`# Test
+## Color Palette
+- Primary — see Stripe brand docs
+- Surface — #FFF8F0
+`);
+    const compiled = compileTailwindTheme(spec);
+    expect(compiled.entries.find((e) => e.variable === "--color-primary")).toBeUndefined();
+    expect(compiled.warnings.some((w) => w.kind === "missing-value" && w.tokenName === "Primary")).toBe(true);
+  });
+
+  it("flags slug collisions", () => {
+    const spec = parseDesignMd(`# Test
+## Color Palette
+- Primary — #ff0000
+- primary — #00ff00
+`);
+    const compiled = compileTailwindTheme(spec);
+    expect(compiled.warnings.some((w) => w.kind === "slug-collision")).toBe(true);
+    // First wins.
+    expect(compiled.entries.find((e) => e.variable === "--color-primary")?.value).toBe("#ff0000");
+  });
+});
+
+describe("compileTailwindTheme — emit order + section comments", () => {
+  it("groups entries by section with comment dividers", () => {
+    const spec = parseDesignMd(`# Test
+## Color Palette
+- Primary — #FF8C42
+
+## Layout
+- sm: 0.5rem
+- md: 1rem
+`);
+    const compiled = compileTailwindTheme(spec);
+    expect(compiled.cssBody).toContain("/* Colors */");
+    expect(compiled.cssBody).toContain("--color-primary: #FF8C42;");
+    expect(compiled.cssBody).toContain("/* Spacing */");
+    expect(compiled.cssBody).toContain("--spacing-sm: 0.5rem;");
+  });
+});
+
+describe("mergeThemeIntoCss", () => {
+  it("inserts a fresh markered block when none exists", () => {
+    const spec = parseDesignMd(`# Test
+## Color Palette
+- Primary — #FF8C42
+`);
+    const compiled = compileTailwindTheme(spec);
+    const result = mergeThemeIntoCss("@import 'tailwindcss';\n", compiled);
+    expect(result.inserted).toBe(true);
+    expect(result.css).toContain(THEME_MARKER_START);
+    expect(result.css).toContain(THEME_MARKER_END);
+    expect(result.css).toContain("--color-primary: #FF8C42;");
+    expect(result.css).toContain("@import 'tailwindcss';");
+  });
+
+  it("replaces the markered region only — leaves surrounding content untouched", () => {
+    const initial = `@import 'tailwindcss';
+
+/* user comment */
+${THEME_MARKER_START}
+@theme {
+  --color-primary: oldvalue;
+}
+${THEME_MARKER_END}
+
+.user-class { color: red; }
+`;
+    const spec = parseDesignMd(`# Test
+## Color Palette
+- Primary — #FF8C42
+`);
+    const compiled = compileTailwindTheme(spec);
+    const result = mergeThemeIntoCss(initial, compiled);
+    expect(result.inserted).toBe(false);
+    expect(result.css).toContain("/* user comment */");
+    expect(result.css).toContain(".user-class { color: red; }");
+    expect(result.css).toContain("--color-primary: #FF8C42;");
+    expect(result.css).not.toContain("oldvalue");
+  });
+
+  it("flags conflicts when a hand-written @theme variable contradicts DESIGN.md", () => {
+    const initial = `@import 'tailwindcss';
+@theme {
+  --color-primary: #000000;
+}
+`;
+    const spec = parseDesignMd(`# Test
+## Color Palette
+- Primary — #FF8C42
+`);
+    const compiled = compileTailwindTheme(spec);
+    const result = mergeThemeIntoCss(initial, compiled);
+    expect(result.conflicts).toHaveLength(1);
+    expect(result.conflicts[0]!.variable).toBe("--color-primary");
+    expect(result.conflicts[0]!.fromDesign).toBe("#FF8C42");
+    expect(result.conflicts[0]!.fromCss).toBe("#000000");
+  });
+
+  it("emits an empty markered region (no orphans) when DESIGN.md has no tokens", () => {
+    const spec = parseDesignMd("# Empty\n");
+    const compiled = compileTailwindTheme(spec);
+    const result = mergeThemeIntoCss("body { margin: 0; }\n", compiled);
+    expect(result.css).toContain(THEME_MARKER_START);
+    expect(result.css).toContain(THEME_MARKER_END);
+    expect(result.css).toContain("body { margin: 0; }");
+  });
+});
+
+describe("stripMarkeredBlock", () => {
+  it("removes only the markered region", () => {
+    const css = `@import 'tailwindcss';
+${THEME_MARKER_START}
+@theme {
+  --color-primary: #FF8C42;
+}
+${THEME_MARKER_END}
+.user { color: red; }
+`;
+    const result = stripMarkeredBlock(css);
+    expect(result).not.toContain("--color-primary");
+    expect(result).toContain("@import 'tailwindcss';");
+    expect(result).toContain(".user { color: red; }");
+  });
+
+  it("is a no-op when no markers are present", () => {
+    const css = `@import 'tailwindcss';\n`;
+    expect(stripMarkeredBlock(css)).toBe(css);
+  });
+});
+
+describe("end-to-end — stripe-like DESIGN.md → Tailwind theme", () => {
+  it("compiles a full multi-section DESIGN.md into one cohesive @theme", () => {
+    const designMd = `# Stripe-like
+
+## Color Palette
+- Primary — #635BFF — brand
+- Surface — #FFFFFF — page background
+- Text — #1A1F36 — body text
+
+## Typography
+- body: font-family: "Inter", sans-serif; size: 16px; line-height: 1.5
+- h1 hero: font-family: "Inter", sans-serif; size: 48px; line-height: 1.1
+
+## Layout
+- xs: 0.25rem
+- sm: 0.5rem
+- md: 1rem
+
+## Depth & Elevation
+- card — 0 1px 3px rgba(0,0,0,0.1)
+- modal — 0 25px 50px rgba(0,0,0,0.25)
+`;
+    const spec = parseDesignMd(designMd);
+    const compiled = compileTailwindTheme(spec);
+
+    // Colors
+    expect(compiled.cssBody).toContain("--color-primary: #635BFF;");
+    expect(compiled.cssBody).toContain("--color-surface: #FFFFFF;");
+    // Typography (font + text)
+    expect(compiled.cssBody).toContain("--font-body:");
+    expect(compiled.cssBody).toContain("--text-h1-hero: 48px / 1.1;");
+    // Spacing
+    expect(compiled.cssBody).toContain("--spacing-md: 1rem;");
+    // Shadows
+    expect(compiled.cssBody).toContain("--shadow-card:");
+    expect(compiled.cssBody).toContain("--shadow-modal:");
+  });
+});