@praxisjs/css 0.1.0

package/src/__tests__/preflight.test.ts

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// The preflight CSS is a fixed string, so globalStyle's module-level injected Set
+// remembers it across tests. Reset modules in beforeEach to get a fresh Set each time.
+
+function cleanup() {
+  document.head.querySelectorAll("style[data-praxis-global]").forEach((el) => el.remove());
+}
+
+beforeEach(() => {
+  vi.resetModules();
+  cleanup();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.resetModules();
+});
+
+describe("preflight()", () => {
+  it("injects a style element into document.head", async () => {
+    const { preflight } = await import("../preflight.js");
+    preflight();
+    expect(document.head.querySelector("style[data-praxis-global]")).not.toBeNull();
+  });
+
+  it("contains core reset rules", async () => {
+    const { preflight } = await import("../preflight.js");
+    preflight();
+    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+    expect(css).toContain("box-sizing: border-box");
+    expect(css).toContain("margin: 0");
+    expect(css).toContain("padding: 0");
+  });
+
+  it("uses standard font stacks without --theme() references", async () => {
+    const { preflight } = await import("../preflight.js");
+    preflight();
+    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+    expect(css).toContain("ui-sans-serif");
+    expect(css).toContain("ui-monospace");
+    expect(css).not.toContain("--theme(");
+  });
+
+  it("is idempotent — calling twice injects only once", async () => {
+    const { preflight } = await import("../preflight.js");
+    preflight();
+    preflight();
+    expect(document.head.querySelectorAll("style[data-praxis-global]").length).toBe(1);
+  });
+
+  it("routes through the collector when one is active", async () => {
+    const { setCollector, createCollector } = await import("../internal/collector.js");
+    const { preflight } = await import("../preflight.js");
+    const col = createCollector();
+    setCollector(col);
+    preflight();
+    setCollector(null);
+    expect(document.head.querySelector("style[data-praxis-global]")).toBeNull();
+    expect(col.getCSS()).toContain("box-sizing: border-box");
+  });
+});

package/src/__tests__/registry.test.ts

@@ -0,0 +1,151 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { injectStyle, releaseStyle } from "../internal/registry";
+import { createCollector, setCollector } from "../internal/collector";
+
+beforeEach(() => {
+  document
+    .head
+    .querySelectorAll("style[data-praxis-hash]")
+    .forEach((el) => el.remove());
+  setCollector(null);
+});
+
+afterEach(() => {
+  document
+    .head
+    .querySelectorAll("style[data-praxis-hash]")
+    .forEach((el) => el.remove());
+  setCollector(null);
+});
+
+describe("injectStyle / releaseStyle", () => {
+  it("injects a style element with the given key and css", () => {
+    injectStyle("abc", ".a { color: red; }");
+    const el = document.head.querySelector("style[data-praxis-hash='abc']");
+    expect(el).not.toBeNull();
+    expect(el?.textContent).toBe(".a { color: red; }");
+  });
+
+  it("reference-counts — increments count on duplicate key", () => {
+    injectStyle("k1", ".x { display: flex; }");
+    injectStyle("k1", ".x { display: flex; }");
+    expect(document.head.querySelectorAll("style[data-praxis-hash='k1']").length).toBe(1);
+  });
+
+  it("removes the element when count reaches zero", () => {
+    injectStyle("k2", ".y { opacity: 1; }");
+    injectStyle("k2", ".y { opacity: 1; }");
+    releaseStyle("k2");
+    expect(document.head.querySelector("style[data-praxis-hash='k2']")).not.toBeNull();
+    releaseStyle("k2");
+    expect(document.head.querySelector("style[data-praxis-hash='k2']")).toBeNull();
+  });
+
+  it("releaseStyle on non-existent key is a no-op", () => {
+    expect(() => releaseStyle("does-not-exist")).not.toThrow();
+  });
+
+  it("re-injects when element was removed externally (DOM divergence guard)", () => {
+    injectStyle("k3", ".z { color: blue; }");
+    document.head.querySelector("style[data-praxis-hash='k3']")?.remove();
+    injectStyle("k3", ".z { color: blue; }");
+    expect(document.head.querySelector("style[data-praxis-hash='k3']")).not.toBeNull();
+    releaseStyle("k3");
+  });
+});
+
+describe("collector mode", () => {
+  it("routes injectStyle to the collector when one is active", () => {
+    const col = createCollector();
+    setCollector(col);
+    injectStyle("hash1", ".cls { color: red; }");
+    expect(document.head.querySelector("style[data-praxis-hash]")).toBeNull();
+    expect(col.getCSS()).toBe(".cls { color: red; }");
+  });
+
+  it("deduplicates identical keys in the collector", () => {
+    const col = createCollector();
+    setCollector(col);
+    injectStyle("dup", ".a { }");
+    injectStyle("dup", ".a { }");
+    expect(col.getCSS().split("\n").filter(Boolean).length).toBe(1);
+  });
+
+  it("collector accumulates multiple distinct injections", () => {
+    const col = createCollector();
+    setCollector(col);
+    injectStyle("a", ".a { color: red; }");
+    injectStyle("b", ".b { color: blue; }");
+    const css = col.getCSS();
+    expect(css).toContain(".a { color: red; }");
+    expect(css).toContain(".b { color: blue; }");
+  });
+
+  it("releaseStyle is a no-op when a collector is active", () => {
+    const col = createCollector();
+    setCollector(col);
+    injectStyle("x", ".x { }");
+    expect(() => releaseStyle("x")).not.toThrow();
+    expect(col.getCSS()).toContain(".x { }");
+  });
+
+  it("clear() resets the collector", () => {
+    const col = createCollector();
+    setCollector(col);
+    injectStyle("c", ".c { }");
+    col.clear();
+    expect(col.getCSS()).toBe("");
+  });
+
+  it("DOM injection resumes after setCollector(null)", () => {
+    const col = createCollector();
+    setCollector(col);
+    injectStyle("pre", ".pre { }");
+    setCollector(null);
+    injectStyle("post", ".post { }");
+    expect(document.head.querySelector("style[data-praxis-hash='pre']")).toBeNull();
+    expect(document.head.querySelector("style[data-praxis-hash='post']")).not.toBeNull();
+    releaseStyle("post");
+  });
+});
+
+// ─── STATIC_MODE ──────────────────────────────────────────────────────────────
+
+describe("injectStyle / releaseStyle — static mode (__PRAXIS_CSS_STATIC__)", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.resetModules();
+  });
+
+  it("injectStyle is a no-op when __PRAXIS_CSS_STATIC__ is true", async () => {
+    vi.stubGlobal("__PRAXIS_CSS_STATIC__", true);
+    vi.resetModules();
+    const { injectStyle: staticInject } = await import("../internal/registry");
+    staticInject("sm1", ".a { color: red; }");
+    expect(document.head.querySelector("style[data-praxis-hash='sm1']")).toBeNull();
+  });
+
+  it("releaseStyle is a no-op when __PRAXIS_CSS_STATIC__ is true", async () => {
+    vi.stubGlobal("__PRAXIS_CSS_STATIC__", true);
+    vi.resetModules();
+    const { releaseStyle: staticRelease } = await import("../internal/registry");
+    expect(() => staticRelease("sm2")).not.toThrow();
+  });
+});
+
+// ─── SSR (document === undefined) ────────────────────────────────────────────
+
+describe("injectStyle — SSR (document undefined)", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.resetModules();
+  });
+
+  it("does not throw when document is undefined", async () => {
+    vi.stubGlobal("document", undefined);
+    vi.resetModules();
+    const { injectStyle: ssrInject } = await import("../internal/registry");
+    expect(() => ssrInject("ssr1", ".a { }")).not.toThrow();
+  });
+});

package/src/__tests__/style.test.ts

@@ -0,0 +1,153 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { Style } from "../decorators/style";
+
+let container: HTMLDivElement;
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  container.remove();
+});
+
+/** Attaches an anchor comment to the element, simulating what the runtime does. */
+function makeAnchor(parent: HTMLElement): Comment {
+  const anchor = document.createComment("[/Comp]");
+  parent.appendChild(anchor);
+  return anchor;
+}
+
+type WithLifecycle = { onMount?(): void; onUnmount?(): void };
+
+describe("@Style field decorator", () => {
+  it("sets a CSS custom property on the container element after onMount", () => {
+    const anchor = makeAnchor(container);
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--accent")
+      accent = "#3b82f6";
+    }
+
+    const inst = new Comp() as WithLifecycle;
+    inst.onMount?.();
+
+    expect(container.style.getPropertyValue("--accent")).toBe("#3b82f6");
+  });
+
+  it("updates CSS custom property reactively when field value changes", () => {
+    const anchor = makeAnchor(container);
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--color")
+      color = "red";
+    }
+
+    const inst = new Comp() as WithLifecycle & { color: string };
+    inst.onMount?.();
+    expect(container.style.getPropertyValue("--color")).toBe("red");
+
+    inst.color = "blue";
+    expect(container.style.getPropertyValue("--color")).toBe("blue");
+  });
+
+  it("removes the CSS custom property on unmount", () => {
+    const anchor = makeAnchor(container);
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--accent")
+      accent = "red";
+    }
+
+    const inst = new Comp() as WithLifecycle;
+    inst.onMount?.();
+    expect(container.style.getPropertyValue("--accent")).toBe("red");
+
+    inst.onUnmount?.();
+    expect(container.style.getPropertyValue("--accent")).toBe("");
+  });
+
+  it("does not throw when _anchor has no parentElement", () => {
+    const anchor = document.createComment("[/Comp]");
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--color")
+      color = "red";
+    }
+
+    const inst = new Comp() as WithLifecycle;
+    expect(() => inst.onMount?.()).not.toThrow();
+    expect(() => inst.onUnmount?.()).not.toThrow();
+  });
+
+  it("stops the reactive effect after onUnmount — further changes are silent", () => {
+    const anchor = makeAnchor(container);
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--val")
+      val = "a";
+    }
+
+    const inst = new Comp() as WithLifecycle & { val: string };
+    inst.onMount?.();
+    expect(container.style.getPropertyValue("--val")).toBe("a");
+
+    inst.onUnmount?.();
+    inst.val = "b";
+    expect(container.style.getPropertyValue("--val")).toBe("");
+  });
+
+  it("supports numeric values (converted to string)", () => {
+    const anchor = makeAnchor(container);
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--size")
+      size = 16;
+    }
+
+    const inst = new Comp() as WithLifecycle;
+    inst.onMount?.();
+    expect(container.style.getPropertyValue("--size")).toBe("16");
+  });
+
+  it("getter returns the current signal value", () => {
+    const anchor = makeAnchor(container);
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--size")
+      size = "16px";
+    }
+
+    const inst = new Comp() as WithLifecycle & { size: string | number };
+    // getter before mount
+    expect(inst.size).toBe("16px");
+
+    inst.onMount?.();
+    inst.size = "24px";
+    // getter after reactive update
+    expect(inst.size).toBe("24px");
+  });
+
+  it("supports multi-word custom property names", () => {
+    const anchor = makeAnchor(container);
+
+    class Comp {
+      _anchor = anchor;
+      @Style("--card-border-radius")
+      radius = "12px";
+    }
+
+    const inst = new Comp() as WithLifecycle;
+    inst.onMount?.();
+    expect(container.style.getPropertyValue("--card-border-radius")).toBe("12px");
+  });
+});