import { readFileSync } from "node:fs";

import { describe, expect, it } from "vitest";

// DESIGN.md A3: on a coarse pointer every control primitive is a 44 target. An audit measured
// that it was not: `.touch-target` sat in @layer components, so a caller's own `min-h-6` (the mouse's
// 24 floor, a utility) beat it and the control stayed 24 on a tablet. jsdom does no cascade, so what is
// pinned is the rule's shape: a utility whose two minimums win over a sibling utility's.
const css = readFileSync(new URL("../index.css", import.meta.url), "utf8");

describe("the coarse-pointer target", () => {
  it("is a utility whose minimums win on a coarse pointer", () => {
    const block = /@utility touch-target\s*\{([\s\S]*?)\n\}/.exec(css)?.[1] ?? "";
    expect(block).toContain("@media (pointer: coarse)");
    expect(block).toMatch(/min-width:\s*var\(--touch-target\)\s*!important/);
    expect(block).toMatch(/min-height:\s*var\(--touch-target\)\s*!important/);
  });

  it("is not also a component class that a utility would override", () => {
    expect(css).not.toMatch(/\.touch-target\s*\{/);
  });
});