@praxisjs/css 0.3.3 → 0.3.5

package/src/__tests__/keyframes.test.ts

@@ -1,103 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { keyframes } from "../builder/keyframes";
-import { createCollector, setCollector } from "../internal/collector";
-
-beforeEach(() => {
-  document.head.querySelectorAll("style[data-praxis-keyframes]").forEach((el) => el.remove());
-  setCollector(null);
-});
-
-afterEach(() => {
-  document.head.querySelectorAll("style[data-praxis-keyframes]").forEach((el) => el.remove());
-  setCollector(null);
-});
-
-describe("keyframes()", () => {
-  it("injects a @keyframes style element into document.head", () => {
-    keyframes("pulse", { from: { opacity: 1 }, to: { opacity: 0.4 } });
-    const el = document.head.querySelector("style[data-praxis-keyframes]");
-    expect(el).not.toBeNull();
-    expect(el?.textContent).toContain("@keyframes prx-pulse-");
-    expect(el?.textContent).toContain("from");
-    expect(el?.textContent).toContain("opacity: 1;");
-    expect(el?.textContent).toContain("opacity: 0.4;");
-  });
-
-  it("returns a scoped animation name prefixed with prx-<name>-", () => {
-    const name = keyframes("spin", { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } });
-    expect(name).toMatch(/^prx-spin-/);
-  });
-
-  it("injects only once for identical keyframes (content-hashed)", () => {
-    const stops = { from: { opacity: 1 }, to: { opacity: 0 } };
-    keyframes("fade", stops);
-    keyframes("fade", stops);
-    expect(document.head.querySelectorAll("style[data-praxis-keyframes]").length).toBe(1);
-  });
-
-  it("returns the same scoped name for identical frames", () => {
-    const stops = { from: { opacity: 0 }, to: { opacity: 1 } };
-    const a = keyframes("fadeIn", stops);
-    const b = keyframes("fadeIn", stops);
-    expect(a).toBe(b);
-  });
-
-  it("returns different names for different frames even with same animation name", () => {
-    const a = keyframes("anim", { from: { opacity: 0 }, to: { opacity: 1 } });
-    const b = keyframes("anim", { from: { opacity: 1 }, to: { opacity: 0 } });
-    expect(a).not.toBe(b);
-  });
-
-  it("converts camelCase frame properties to kebab-case in the output", () => {
-    keyframes("slide", { from: { translateX: "0" }, to: { translateX: "100px" } } as Parameters<typeof keyframes>[1]);
-    const el = document.head.querySelector("style[data-praxis-keyframes]");
-    expect(el?.textContent).toContain("translate-x:");
-  });
-
-  it("supports percentage stops", () => {
-    keyframes("bounce", { "0%": { transform: "scale(1)" }, "50%": { transform: "scale(1.1)" }, "100%": { transform: "scale(1)" } });
-    const el = document.head.querySelector("style[data-praxis-keyframes]");
-    expect(el?.textContent).toContain("0%");
-    expect(el?.textContent).toContain("50%");
-    expect(el?.textContent).toContain("100%");
-  });
-});
-
-describe("keyframes — collector mode", () => {
-  it("routes to collector when one is active (no DOM injection)", () => {
-    const col = createCollector();
-    setCollector(col);
-    const name = keyframes("float", { from: { opacity: 0 }, to: { opacity: 1 } });
-    expect(document.head.querySelector("style[data-praxis-keyframes]")).toBeNull();
-    expect(col.getCSS()).toContain(`@keyframes ${name}`);
-    expect(col.getCSS()).toContain("opacity: 0;");
-  });
-
-  it("deduplicates identical keyframes in the collector", () => {
-    const col = createCollector();
-    setCollector(col);
-    const stops = { from: { opacity: 0 }, to: { opacity: 1 } };
-    keyframes("same", stops);
-    keyframes("same", stops);
-    expect(col.getCSS().split("@keyframes").length - 1).toBe(1);
-  });
-});
-
-// ─── STATIC_MODE ──────────────────────────────────────────────────────────────
-
-describe("keyframes() — static mode (__PRAXIS_CSS_STATIC__)", () => {
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    vi.resetModules();
-  });
-
-  it("returns the scoped name without DOM injection when __PRAXIS_CSS_STATIC__ is true", async () => {
-    vi.stubGlobal("__PRAXIS_CSS_STATIC__", true);
-    vi.resetModules();
-    const { keyframes: staticKF } = await import("../builder/keyframes");
-    const name = staticKF("pulse", { from: { opacity: 1 }, to: { opacity: 0 } });
-    expect(name).toMatch(/^prx-pulse-/);
-    expect(document.head.querySelector("style[data-praxis-keyframes]")).toBeNull();
-  });
-});

package/src/__tests__/preflight.test.ts

@@ -1,85 +0,0 @@
-// @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");
-  });
-
-  it("wraps the reset in `@layer reset` by default", async () => {
-    const { preflight } = await import("../preflight.js");
-    preflight();
-    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
-    expect(css).toContain("@layer reset {");
-    expect(css).toContain("box-sizing: border-box");
-  });
-
-  it("wraps the reset in a custom named layer", async () => {
-    const { preflight } = await import("../preflight.js");
-    preflight({ layer: "tailwind-base" });
-    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
-    expect(css).toContain("@layer tailwind-base {");
-  });
-
-  it("injects un-layered CSS when layer: false", async () => {
-    const { preflight } = await import("../preflight.js");
-    preflight({ layer: false });
-    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
-    expect(css).not.toContain("@layer");
-  });
-});

package/src/__tests__/registry.test.ts

@@ -1,151 +0,0 @@
-// @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

@@ -1,170 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { StatefulComponent } from "@praxisjs/core";
-import { setComponentAnchor } from "@praxisjs/core/internal";
-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 };
-
-abstract class AnchoredComponent extends StatefulComponent {
-  constructor(anchor?: Comment) {
-    super();
-    setComponentAnchor(this, anchor);
-  }
-}
-
-describe("@Style field decorator", () => {
-  it("sets a CSS custom property on the container element after onMount", () => {
-    const anchor = makeAnchor(container);
-
-    class Comp extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--accent")
-      accent = "#3b82f6";
-      render() { return null; }
-    }
-
-    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 extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--color")
-      color = "red";
-      render() { return null; }
-    }
-
-    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 extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--accent")
-      accent = "red";
-      render() { return null; }
-    }
-
-    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 extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--color")
-      color = "red";
-      render() { return null; }
-    }
-
-    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 extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--val")
-      val = "a";
-      render() { return null; }
-    }
-
-    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 extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--size")
-      size = 16;
-      render() { return null; }
-    }
-
-    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 extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--size")
-      size = "16px";
-      render() { return null; }
-    }
-
-    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 extends AnchoredComponent {
-      constructor() { super(anchor); }
-      @Style("--card-border-radius")
-      radius = "12px";
-      render() { return null; }
-    }
-
-    const inst = new Comp() as WithLifecycle;
-    inst.onMount?.();
-    expect(container.style.getPropertyValue("--card-border-radius")).toBe("12px");
-  });
-});