@pyreon/styler 0.11.0 → 0.11.2

package/src/__tests__/p3-features.test.ts

@@ -0,0 +1,258 @@
+import type { VNode } from "@pyreon/core"
+import { h } from "@pyreon/core"
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+import { css } from "../css"
+import { createSheet, StyleSheet } from "../sheet"
+import { styled } from "../styled"
+
+describe("P3 features", () => {
+  describe("shouldForwardProp", () => {
+    it("allows custom prop filtering", () => {
+      const Comp = styled("div", {
+        shouldForwardProp: (prop) => prop !== "color",
+      })`display: flex;`
+
+      const vnode = Comp({ color: "red", title: "hello" }) as VNode
+      expect(vnode.props.color).toBeUndefined()
+      expect(vnode.props.title).toBe("hello")
+    })
+
+    it("custom filter receives all non-system props", () => {
+      const forwarded: string[] = []
+      const Comp = styled("div", {
+        shouldForwardProp: (prop) => {
+          forwarded.push(prop)
+          return true
+        },
+      })`display: flex;`
+
+      Comp({ "data-x": "1", title: "hi" })
+      expect(forwarded).toContain("data-x")
+      expect(forwarded).toContain("title")
+    })
+
+    it("works with dynamic interpolations", () => {
+      const Comp = styled("div", {
+        shouldForwardProp: (prop) => prop === "title",
+      })`color: ${(p: any) => p.$color};`
+
+      const vnode = Comp({ $color: "red", title: "yes", custom: "no" }) as VNode
+      expect(vnode.props.title).toBe("yes")
+      expect(vnode.props.custom).toBeUndefined()
+    })
+
+    it("does not affect component wrapping (components receive all props)", () => {
+      const Inner = (props: { class?: string; myProp?: string }) =>
+        h("div", { class: props.class, "data-my": props.myProp })
+
+      // shouldForwardProp is only for HTML elements
+      const Comp = styled(Inner, {
+        shouldForwardProp: () => false,
+      })`color: red;`
+
+      const vnode = Comp({ myProp: "hello" }) as VNode
+      // Components always receive all props (no filtering)
+      // The VNode wraps Inner and should pass myProp through
+      expect(vnode.props.myProp).toBe("hello")
+    })
+  })
+
+  describe("styled(StyledComponent) — extending", () => {
+    it("extends a styled component", () => {
+      const Base = styled("div")`color: red;`
+      const Extended = styled(Base)`font-size: 20px;`
+
+      const vnode = Extended({}) as VNode
+      // Extended wraps Base, so Base applies its own className
+      // and Extended passes its className to Base as a prop
+      expect(vnode.props.class).toContain("pyr-")
+    })
+
+    it("extended component receives className from outer", () => {
+      const Base = styled("div")`color: red;`
+      const Extended = styled(Base)`font-size: 20px;`
+
+      const vnode = Extended({ className: "user-cls" }) as VNode
+      expect(vnode.props.class).toContain("user-cls")
+    })
+
+    it("multi-level extension works", () => {
+      const L1 = styled("div")`display: flex;`
+      const L2 = styled(L1)`color: red;`
+      const L3 = styled(L2)`font-size: 14px;`
+
+      const vnode = L3({}) as VNode
+      expect(vnode.props.class).toContain("pyr-")
+      // L3 wraps L2 which wraps L1 which wraps 'div'.
+      // The outermost VNode's type is the next component in the chain.
+      expect(typeof vnode.type).toBe("function")
+    })
+  })
+
+  describe("HMR cleanup API", () => {
+    beforeEach(() => {
+      document.querySelectorAll("style[data-pyreon-styler]").forEach((el) => {
+        el.remove()
+      })
+    })
+
+    it("clearCache removes all cached entries", () => {
+      const s = createSheet()
+      s.insert("color: red;")
+      s.insert("color: blue;")
+      expect(s.cacheSize).toBe(2)
+
+      s.clearCache()
+      expect(s.cacheSize).toBe(0)
+    })
+
+    it("clearAll removes cache, SSR buffer, and DOM rules", () => {
+      const s = new StyleSheet()
+      s.insert("color: red;")
+      s.insert("color: blue;")
+      expect(s.cacheSize).toBe(2)
+
+      s.clearAll()
+      expect(s.cacheSize).toBe(0)
+    })
+
+    it("after clearCache, same CSS gets re-inserted", () => {
+      const s = createSheet()
+      s.insert("color: red;")
+      expect(s.cacheSize).toBe(1)
+
+      s.clearCache()
+      expect(s.cacheSize).toBe(0)
+
+      // Re-insert — should work since cache was cleared
+      s.insert("color: red;")
+      expect(s.cacheSize).toBe(1)
+    })
+  })
+
+  describe("HMR cleanup API (SSR mode)", () => {
+    let originalDocument: typeof document
+
+    beforeEach(() => {
+      originalDocument = globalThis.document
+      // @ts-expect-error - intentionally deleting for SSR simulation
+      delete globalThis.document
+    })
+
+    afterEach(() => {
+      globalThis.document = originalDocument
+    })
+
+    it("clearAll in SSR mode clears buffer and cache", () => {
+      const s = createSheet()
+      s.insert("color: red;")
+      expect(s.getStyles()).toContain("color: red;")
+      expect(s.cacheSize).toBe(1)
+
+      s.clearAll()
+      expect(s.getStyles()).toBe("")
+      expect(s.cacheSize).toBe(0)
+    })
+  })
+
+  describe("CSS nesting (& selectors)", () => {
+    it("& selectors pass through to the CSS rule", () => {
+      // Native CSS nesting is supported by modern browsers
+      // The resolver passes CSS through without transformation
+      const Comp = styled("div")`
+        color: red;
+        &:hover { color: blue; }
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("nested & with pseudo-elements", () => {
+      const Comp = styled("div")`
+        position: relative;
+        &::before { content: ""; display: block; }
+        &::after { content: ""; display: block; }
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("empty template with dynamic interpolation returning nothing", () => {
+      const Comp = styled("div")`${(p: any) => p.$show && css`color: red;`}`
+      const vnode = Comp({ $show: false }) as VNode
+      // When resolved CSS is empty/whitespace, no className
+      expect(vnode.props.class).toBeFalsy()
+    })
+
+    it("empty template with dynamic interpolation returning value", () => {
+      const Comp = styled("div")`${(p: any) => p.$show && css`color: red;`}`
+      const vnode = Comp({ $show: true }) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("deeply nested CSSResult chains resolve correctly", () => {
+      const l1 = css`color: red;`
+      const l2 = css`${l1} font-size: 14px;`
+      const l3 = css`${l2} display: flex;`
+      const l4 = css`${l3} padding: 8px;`
+      const l5 = css`${l4} margin: 4px;`
+
+      const resolved = l5.toString()
+      expect(resolved).toContain("color: red;")
+      expect(resolved).toContain("font-size: 14px;")
+      expect(resolved).toContain("display: flex;")
+      expect(resolved).toContain("padding: 8px;")
+      expect(resolved).toContain("margin: 4px;")
+    })
+
+    it("anonymous component gets fallback displayName", () => {
+      const Anon = (() => {
+        const fn = () => null
+        Object.defineProperty(fn, "name", { value: "" })
+        return fn
+      })()
+
+      const Comp = styled(Anon)`color: red;`
+      expect((Comp as any).displayName).toBe("styled(Component)")
+    })
+
+    it("handles very large CSS strings", () => {
+      const bigCSS = Array.from({ length: 100 }, (_, i) => `prop${i}: val${i};`).join(" ")
+      const Comp = styled("div")`${bigCSS}`
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("different dynamic values cause different classNames", () => {
+      const Comp = styled("div")`
+        color: ${(p: any) => p.$color};
+        font-size: ${(p: any) => p.$size};
+      `
+
+      const vnode1 = Comp({ $color: "red", $size: "14px" }) as VNode
+      const cls1 = vnode1.props.class as string
+
+      const vnode2 = Comp({ $color: "blue", $size: "16px" }) as VNode
+      const cls2 = vnode2.props.class as string
+
+      expect(cls1).not.toBe(cls2)
+      expect(cls1).toMatch(/^pyr-/)
+      expect(cls2).toMatch(/^pyr-/)
+    })
+
+    it("same dynamic values produce same className (dedup cache)", () => {
+      const Comp = styled("div")`color: ${(p: any) => p.$color};`
+
+      const vnode1 = Comp({ $color: "red" }) as VNode
+      const cls1 = vnode1.props.class as string
+
+      // Re-render with same value
+      const vnode2 = Comp({ $color: "red" }) as VNode
+      const cls2 = vnode2.props.class as string
+
+      expect(cls1).toBe(cls2)
+    })
+  })
+})

package/src/__tests__/resolve.test.ts

@@ -0,0 +1,249 @@
+import { describe, expect, it } from "vitest"
+import { css } from "../css"
+import { CSSResult, normalizeCSS, resolve, resolveValue } from "../resolve"
+
+// Helper to create a TemplateStringsArray
+const tsa = (strings: readonly string[]): TemplateStringsArray => {
+  const arr = [...strings] as string[] & { raw: readonly string[] }
+  arr.raw = strings
+  return arr
+}
+
+describe("resolve", () => {
+  describe("primitive interpolations", () => {
+    it("resolves strings", () => {
+      const result = resolve(tsa(["color: ", ";"]), ["red"], {})
+      expect(result).toBe("color: red;")
+    })
+
+    it("resolves numbers", () => {
+      const result = resolve(tsa(["flex: ", ";"]), [1], {})
+      expect(result).toBe("flex: 1;")
+    })
+
+    it("resolves null as empty string", () => {
+      const result = resolve(tsa(["a", "b"]), [null], {})
+      expect(result).toBe("ab")
+    })
+
+    it("resolves undefined as empty string", () => {
+      const result = resolve(tsa(["a", "b"]), [undefined], {})
+      expect(result).toBe("ab")
+    })
+
+    it("resolves false as empty string", () => {
+      const result = resolve(tsa(["a", "b"]), [false], {})
+      expect(result).toBe("ab")
+    })
+
+    it("resolves true as empty string", () => {
+      const result = resolve(tsa(["a", "b"]), [true], {})
+      expect(result).toBe("ab")
+    })
+  })
+
+  describe("function interpolations", () => {
+    it("calls functions with props and uses return value", () => {
+      const fn = (props: Record<string, unknown>) => props.color as string
+      const result = resolve(tsa(["color: ", ";"]), [fn], { color: "blue" })
+      expect(result).toBe("color: blue;")
+    })
+
+    it("resolves nested function results recursively", () => {
+      const fn = () => () => "red"
+      const result = resolve(tsa(["color: ", ";"]), [fn], {})
+      expect(result).toBe("color: red;")
+    })
+
+    it("handles functions returning null", () => {
+      const fn = () => null
+      const result = resolve(tsa(["a", "b"]), [fn], {})
+      expect(result).toBe("ab")
+    })
+
+    it("handles functions returning false (conditional)", () => {
+      const fn = (props: Record<string, unknown>) => (props.active ? "color: red;" : false)
+      const result = resolve(tsa(["", ""]), [fn], { active: false })
+      expect(result).toBe("")
+    })
+
+    it("uses empty object when no props provided", () => {
+      const fn = (props: Record<string, unknown>) =>
+        Object.keys(props).length === 0 ? "empty" : "has-props"
+      const result = resolve(tsa(["", ""]), [fn], {})
+      expect(result).toBe("empty")
+    })
+  })
+
+  describe("CSSResult interpolations", () => {
+    it("resolves nested CSSResult", () => {
+      const inner = css`color: red;`
+      const result = resolveValue(inner, {})
+      expect(result).toBe("color: red;")
+    })
+
+    it("resolves deeply nested CSSResults", () => {
+      const inner1 = css`color: red;`
+      const inner2 = css`${inner1} display: flex;`
+      const result = resolveValue(inner2, {})
+      expect(result).toBe("color: red; display: flex;")
+    })
+
+    it("resolves CSSResult with function interpolations", () => {
+      const inner = css`color: ${((p: Record<string, unknown>) => p.color) as any};`
+      const result = resolveValue(inner, { color: "green" })
+      expect(result).toBe("color: green;")
+    })
+  })
+
+  describe("array interpolations", () => {
+    it("resolves arrays of values", () => {
+      const result = resolve(tsa(["", ""]), [["a", "b", "c"]], {})
+      expect(result).toBe("abc")
+    })
+
+    it("resolves arrays with CSSResults", () => {
+      const inner = css`color: red;`
+      const result = resolveValue([inner, " display: flex;"], {})
+      expect(result).toBe("color: red; display: flex;")
+    })
+  })
+
+  describe("combined patterns", () => {
+    it("handles multiple interpolation types", () => {
+      const result = resolve(
+        tsa(["display: ", "; color: ", "; flex: ", ";"]),
+        ["flex", "red", 1],
+        {},
+      )
+      expect(result).toBe("display: flex; color: red; flex: 1;")
+    })
+
+    it("handles conditional CSS with logical AND (truthy)", () => {
+      const condition = true
+      const conditionalCss = condition && css`color: red;`
+      const result = resolveValue(conditionalCss, {})
+      expect(result).toBe("color: red;")
+    })
+
+    it("handles conditional CSS with logical AND (falsy)", () => {
+      const condition = false
+      const conditionalCss = condition && css`color: red;`
+      const result = resolveValue(conditionalCss, {})
+      expect(result).toBe("")
+    })
+  })
+})
+
+describe("CSSResult", () => {
+  it("stores strings and values as readonly properties", () => {
+    const strings = ["color: ", ";"] as unknown as TemplateStringsArray
+    const values = ["red"]
+    const result = new CSSResult(strings, values)
+    expect(result.strings).toBe(strings)
+    expect(result.values).toBe(values)
+  })
+
+  it("toString resolves with empty props", () => {
+    const result = css`color: red;`
+    expect(result.toString()).toBe("color: red;")
+  })
+})
+
+describe("normalizeCSS", () => {
+  describe("comment stripping", () => {
+    it("strips CSS block comments", () => {
+      expect(normalizeCSS("/* comment */ color: red;")).toBe("color: red;")
+    })
+
+    it("strips multiple block comments", () => {
+      expect(normalizeCSS("/* BASE */ color: red; /* HOVER */ font-size: 1rem;")).toBe(
+        "color: red; font-size: 1rem;",
+      )
+    })
+
+    it("strips multiline block comments", () => {
+      expect(normalizeCSS("/* --------\n   BASE STATE\n   -------- */\nheight: 3rem;")).toBe(
+        "height: 3rem;",
+      )
+    })
+
+    it("strips JS-style line comments", () => {
+      expect(normalizeCSS("// this is not valid CSS\ncolor: red;")).toBe("color: red;")
+    })
+
+    it("preserves :// in URLs", () => {
+      expect(normalizeCSS("background: url(https://example.com/img.png);")).toContain(
+        "https://example.com/img.png",
+      )
+    })
+
+    it("strips line comments but preserves URL protocols", () => {
+      const result = normalizeCSS("// comment\nbackground: url(https://example.com/img.png);")
+      expect(result).toContain("https://example.com/img.png")
+      expect(result).not.toContain("// comment")
+    })
+
+    it("handles unterminated block comment", () => {
+      expect(normalizeCSS("color: red; /* never closed")).toBe("color: red;")
+    })
+
+    it("handles unterminated line comment", () => {
+      expect(normalizeCSS("color: red;\n// trailing comment")).toBe("color: red;")
+    })
+  })
+
+  describe("whitespace handling", () => {
+    it("collapses whitespace", () => {
+      expect(normalizeCSS("  color:  red;   font-size:  1rem;  ")).toBe(
+        "color: red; font-size: 1rem;",
+      )
+    })
+
+    it("converts tabs and newlines to spaces", () => {
+      expect(normalizeCSS("color:\tred;\nfont-size:\t1rem;")).toBe("color: red; font-size: 1rem;")
+    })
+
+    it("collapses multiple spaces", () => {
+      expect(normalizeCSS("color:    red;")).toBe("color: red;")
+    })
+
+    it("trims leading and trailing whitespace", () => {
+      expect(normalizeCSS("   color: red;   ")).toBe("color: red;")
+    })
+
+    it("handles carriage returns", () => {
+      expect(normalizeCSS("color: red;\r\nfont-size: 1rem;")).toBe("color: red; font-size: 1rem;")
+    })
+  })
+
+  describe("semicolon handling", () => {
+    it("removes redundant semicolons after {", () => {
+      expect(normalizeCSS(".foo {; color: red; }")).toBe(".foo { color: red; }")
+    })
+
+    it("removes redundant semicolons after }", () => {
+      expect(normalizeCSS(".foo { color: red; }; .bar { }")).toBe(".foo { color: red; } .bar { }")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("returns empty string for empty input", () => {
+      expect(normalizeCSS("")).toBe("")
+    })
+
+    it("returns empty string for whitespace-only input", () => {
+      expect(normalizeCSS("   \n\t  ")).toBe("")
+    })
+
+    it("handles CSS with braces", () => {
+      expect(normalizeCSS(".foo { color: red; }")).toBe(".foo { color: red; }")
+    })
+
+    it("handles @media rules", () => {
+      const result = normalizeCSS("@media (min-width: 48em) { color: blue; }")
+      expect(result).toContain("@media")
+      expect(result).toContain("color: blue;")
+    })
+  })
+})

package/src/__tests__/shared.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest"
+import { css } from "../css"
+import { CSSResult } from "../resolve"
+import { isDynamic } from "../shared"
+
+describe("isDynamic", () => {
+  it("returns true for function values", () => {
+    expect(isDynamic(() => "red")).toBe(true)
+  })
+
+  it("returns false for string values", () => {
+    expect(isDynamic("color: red;")).toBe(false)
+  })
+
+  it("returns false for number values", () => {
+    expect(isDynamic(42)).toBe(false)
+  })
+
+  it("returns false for null and undefined", () => {
+    expect(isDynamic(null)).toBe(false)
+    expect(isDynamic(undefined)).toBe(false)
+  })
+
+  it("returns false for boolean values", () => {
+    expect(isDynamic(true)).toBe(false)
+    expect(isDynamic(false)).toBe(false)
+  })
+
+  it("returns true for arrays containing functions", () => {
+    expect(isDynamic(["a", () => "b"])).toBe(true)
+  })
+
+  it("returns false for arrays of static values", () => {
+    expect(isDynamic(["a", "b", 42])).toBe(false)
+  })
+
+  it("returns true for CSSResult with dynamic values", () => {
+    const result = css`color: ${() => "red"};`
+    expect(isDynamic(result)).toBe(true)
+  })
+
+  it("returns false for CSSResult with only static values", () => {
+    const result = css`color: ${"red"};`
+    expect(isDynamic(result)).toBe(false)
+  })
+
+  it("returns true for nested dynamic CSSResult", () => {
+    const inner = css`color: ${() => "red"};`
+    const outer = css`${inner}`
+    expect(isDynamic(outer)).toBe(true)
+  })
+
+  it("returns false for nested static CSSResult", () => {
+    const inner = css`color: red;`
+    const outer = css`${inner}`
+    expect(isDynamic(outer)).toBe(false)
+  })
+
+  it("detects deeply nested dynamic values", () => {
+    const deep = css`color: ${() => "red"};`
+    const mid = css`${deep}`
+    const outer = css`${mid}`
+    expect(isDynamic(outer)).toBe(true)
+  })
+
+  it("handles arrays inside CSSResult", () => {
+    const result = new CSSResult(
+      Object.assign(["", ""], { raw: ["", ""] }) as TemplateStringsArray,
+      [["a", () => "b"]],
+    )
+    expect(isDynamic(result)).toBe(true)
+  })
+})