backend/tests/css-resolution.test.ts

/**
 * CSS Resolution Tests (Section 1.2.2 of TESTS.md)
 *
 * Tests that @custom-media rules are properly resolved for published HTML.
 */
import { describe, it, expect } from "vitest";
import { resolveCustomMedia } from "../src/publisher/index.js";

describe("1.2.2 CSS @custom-media resolution", () => {
  it("resolves custom media declarations", () => {
    const input = `
@custom-media --mobile (max-width: 640px);
@custom-media --desktop (min-width: 1024px);

@media (--mobile) { .foo { display: none; } }
@media (--desktop) { .bar { display: block; } }
    `.trim();

    const output = resolveCustomMedia(input);

    expect(output).not.toContain("@custom-media");
    expect(output).not.toContain("--mobile");
    expect(output).not.toContain("--desktop");
    expect(output).toContain("@media (max-width: 640px)");
    expect(output).toContain("@media (min-width: 1024px)");
  });

  it("leaves standard @media rules untouched", () => {
    const input = "@media (max-width: 768px) { .x { color: red; } }";
    const output = resolveCustomMedia(input);
    expect(output.trim()).toBe(input);
  });

  it("handles CSS with no custom media", () => {
    const input = ":root { --color: red; } body { color: var(--color); }";
    const output = resolveCustomMedia(input);
    expect(output.trim()).toBe(input);
  });
});