@pyreon/styler 0.11.0 → 0.11.2

package/src/__tests__/insertion-effect.test.ts

@@ -0,0 +1,106 @@
+import type { VNode } from "@pyreon/core"
+import { describe, expect, it } from "vitest"
+import { styled } from "../styled"
+
+describe("style injection (className generation)", () => {
+  describe("dynamic styled components", () => {
+    it("generates a proper className for dynamic CSS", () => {
+      const Comp = styled("div")`
+        color: ${(props: any) => props.$color};
+      `
+
+      const vnode = Comp({ $color: "red" }) as VNode
+
+      // Class should be present and properly generated
+      expect(vnode.props.class).toMatch(/^pyr-[0-9a-z]+$/)
+    })
+
+    it("works with multiple dynamic components", () => {
+      const Comp1 = styled("div")`color: ${(p: any) => p.$c};`
+      const Comp2 = styled("span")`font-size: ${(p: any) => p.$s};`
+
+      const vnode1 = Comp1({ $c: "red" }) as VNode
+      const vnode2 = Comp2({ $s: "16px" }) as VNode
+
+      expect(vnode1.props.class).toMatch(/^pyr-/)
+      expect(vnode2.props.class).toMatch(/^pyr-/)
+      expect(vnode1.props.class).not.toBe(vnode2.props.class)
+    })
+
+    it("handles different prop values producing different classNames", () => {
+      const Comp = styled("div")`color: ${(p: any) => p.$color};`
+
+      const colors = ["blue", "green", "yellow", "purple", "orange"]
+      const classNames = new Set<string>()
+
+      for (const color of colors) {
+        const vnode = Comp({ $color: color }) as VNode
+        expect(vnode.props.class).toMatch(/^pyr-/)
+        classNames.add(vnode.props.class as string)
+      }
+
+      // Different colors should produce different classNames
+      expect(classNames.size).toBe(colors.length)
+    })
+
+    it("same dynamic CSS produces same className", () => {
+      const Comp = styled("div")`color: ${(p: any) => p.$color};`
+
+      const vnode1 = Comp({ $color: "red" }) as VNode
+      const cls1 = vnode1.props.class as string
+
+      const _vnode2 = Comp({ $color: "blue" }) as VNode
+
+      const vnode3 = Comp({ $color: "red" }) as VNode // back to red
+      const cls3 = vnode3.props.class as string
+
+      // Same resolved CSS -> same className
+      expect(cls1).toBe(cls3)
+    })
+  })
+
+  describe("static styled components", () => {
+    it("static components compute class at creation time", () => {
+      // Static components compute class at creation time
+      const Comp = styled("div")`display: flex; color: red;`
+
+      const vnode = Comp({}) as VNode
+
+      expect(vnode.props.class).toMatch(/^pyr-[0-9a-z]+$/)
+    })
+
+    it("static className is stable across calls", () => {
+      const Comp = styled("div")`display: flex;`
+
+      const vnode1 = Comp({}) as VNode
+      const cls1 = vnode1.props.class as string
+
+      const _vnode2 = Comp({}) as VNode
+      const vnode3 = Comp({}) as VNode
+      const cls3 = vnode3.props.class as string
+
+      expect(cls1).toBe(cls3)
+    })
+  })
+
+  describe("theme-dependent components", () => {
+    it("produces different className for different resolved CSS", () => {
+      // In Pyreon, theme is accessed via useTheme() inside the component.
+      // Without ThemeProvider context, theme is {} (default).
+      // We test via direct prop-based dynamic interpolation instead.
+      const Comp = styled("div")`
+        background: ${(p: any) => p.$bg};
+      `
+
+      const vnode1 = Comp({ $bg: "white" }) as VNode
+      const cls1 = vnode1.props.class as string
+
+      const vnode2 = Comp({ $bg: "black" }) as VNode
+      const cls2 = vnode2.props.class as string
+
+      expect(cls1).not.toBe(cls2)
+      expect(cls1).toMatch(/^pyr-/)
+      expect(cls2).toMatch(/^pyr-/)
+    })
+  })
+})

package/src/__tests__/integration.test.ts

@@ -0,0 +1,149 @@
+import type { VNode } from "@pyreon/core"
+import { describe, expect, it } from "vitest"
+import { css } from "../css"
+import { styled } from "../styled"
+
+describe("integration", () => {
+  describe("nested css results", () => {
+    it("resolves nested css tagged templates", () => {
+      const flexCSS = css`display: flex;`
+      const Comp = styled("div")`
+        ${flexCSS}
+        color: red;
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("resolves conditional css (logical AND pattern)", () => {
+      const isWeb = true
+      const Comp = styled("div")`
+        ${isWeb && css`box-sizing: border-box;`};
+        display: flex;
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("handles false conditional css", () => {
+      const isWeb = false
+      const Comp = styled("div")`
+        ${isWeb && css`box-sizing: border-box;`};
+        display: flex;
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+  })
+
+  describe("array interpolations (makeItResponsive pattern)", () => {
+    it("resolves array of css results (simulating breakpoints)", () => {
+      // Simulates what makeItResponsive returns: array of css results per breakpoint
+      const breakpointStyles = [
+        css`color: red;`,
+        css`@media (min-width: 48em) { color: blue; }`,
+        css`@media (min-width: 62em) { color: green; }`,
+      ]
+
+      const Comp = styled("div")`
+        display: flex;
+        ${breakpointStyles};
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("resolves function returning array (makeItResponsive full pattern)", () => {
+      // makeItResponsive returns a function (props) => CSSResult[]
+      const responsiveFn = (props: any) => {
+        const theme = props.$element || {}
+        return [
+          css`color: ${theme.color || "black"};`,
+          theme.breakpoint ? css`@media (min-width: 48em) { color: ${theme.breakpoint}; }` : "",
+        ]
+      }
+
+      const Comp = styled("div")`
+        display: flex;
+        ${responsiveFn};
+      `
+      const vnode = Comp({ $element: { color: "red", breakpoint: "blue" } }) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+  })
+
+  describe("createMediaQueries pattern", () => {
+    it("css called as function (css(...args)) wrapping in @media", () => {
+      // Simulates createMediaQueries: builds functions that call css(...args)
+      const createMedia = (breakpoint: number, rootSize: number) => {
+        const emSize = breakpoint / rootSize
+        return (...args: any[]) =>
+          css`@media only screen and (min-width: ${emSize}em) {
+            ${css(...(args as [TemplateStringsArray, ...any[]]))};
+          }`
+      }
+
+      const md = createMedia(768, 16)
+      const result = md`color: blue;`
+
+      // Wrap in a styled component
+      const Comp = styled("div")`
+        color: red;
+        ${result};
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("zero-breakpoint passthrough (css(...args) without @media)", () => {
+      // Breakpoint 0 means no @media wrapper
+      const passthrough = (...args: any[]) => css(...(args as [TemplateStringsArray, ...any[]]))
+
+      const result = passthrough`color: red;`
+
+      const Comp = styled("div")`
+        ${result};
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+  })
+
+  describe("complex styled patterns", () => {
+    it("function interpolation with prop-based conditional", () => {
+      const Comp = styled("div")`
+        display: flex;
+        ${({ $contentType }: any) => $contentType === "content" && "flex: 1;"};
+      `
+      const vnode = Comp({ $contentType: "content" }) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("platform-specific CSS (compile-time constant)", () => {
+      const __WEB__ = true
+      const platformCSS = __WEB__ ? "box-sizing: border-box;" : ""
+
+      const Comp = styled("div")`
+        ${platformCSS};
+        display: flex;
+      `
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("multiple function interpolations", () => {
+      const Comp = styled("div")`
+        color: ${(p: any) => p.$color || "black"};
+        font-size: ${(p: any) => p.$size || "16px"};
+      `
+      const vnode = Comp({ $color: "red", $size: "20px" }) as VNode
+      expect(vnode.props.class).toMatch(/^pyr-/)
+    })
+
+    it("empty template produces no className", () => {
+      const Comp = styled("div")``
+      const vnode = Comp({}) as VNode
+      expect(vnode.props.class).toBeFalsy()
+    })
+  })
+})

package/src/__tests__/keyframes.test.ts

@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it } from "vitest"
+import { keyframes } from "../keyframes"
+import { sheet } from "../sheet"
+
+describe("keyframes", () => {
+  afterEach(() => {
+    sheet.reset()
+  })
+
+  it("returns a KeyframesResult with a name property", () => {
+    const fadeIn = keyframes`
+      from { opacity: 0; }
+      to { opacity: 1; }
+    `
+    expect(fadeIn.name).toMatch(/^pyr-kf-/)
+  })
+
+  it("returns pyr-kf- prefix", () => {
+    const fadeIn = keyframes`
+      from { opacity: 0; }
+      to { opacity: 1; }
+    `
+    expect(fadeIn.name).toMatch(/^pyr-kf-[0-9a-z]+$/)
+  })
+
+  it("is deterministic — same input produces same name", () => {
+    const a = keyframes`from { opacity: 0; } to { opacity: 1; }`
+    const b = keyframes`from { opacity: 0; } to { opacity: 1; }`
+    expect(a.name).toBe(b.name)
+  })
+
+  it("different input produces different names", () => {
+    const fadeIn = keyframes`from { opacity: 0; } to { opacity: 1; }`
+    const slideIn = keyframes`from { transform: translateX(-100%); } to { transform: translateX(0); }`
+    expect(fadeIn.name).not.toBe(slideIn.name)
+  })
+
+  it("supports interpolation values", () => {
+    const from = 0
+    const to = 1
+    const anim = keyframes`
+      from { opacity: ${from}; }
+      to { opacity: ${to}; }
+    `
+    expect(anim.name).toMatch(/^pyr-kf-/)
+  })
+
+  it("toString returns the animation name", () => {
+    const fadeIn = keyframes`from { opacity: 0; } to { opacity: 1; }`
+    expect(fadeIn.toString()).toBe(fadeIn.name)
+  })
+
+  it("can be used in template literals for animation property", () => {
+    const fadeIn = keyframes`from { opacity: 0; } to { opacity: 1; }`
+    const animationValue = `${fadeIn} 0.3s ease-in`
+    expect(animationValue).toContain(fadeIn.name)
+    expect(animationValue).toContain("0.3s ease-in")
+  })
+
+  it("handles complex keyframe definitions", () => {
+    const pulse = keyframes`
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    `
+    expect(pulse.name).toMatch(/^pyr-kf-/)
+  })
+})

package/src/__tests__/memory-growth.test.ts

@@ -0,0 +1,152 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+import { createSheet } from "../sheet"
+
+describe("memory growth", () => {
+  describe("bounded cache prevents unbounded growth (DOM mode)", () => {
+    it("cache stays bounded with maxCacheSize", () => {
+      const maxSize = 50
+      const s = createSheet({ maxCacheSize: maxSize })
+
+      for (let i = 0; i < maxSize * 3; i++) {
+        s.insert(`property-${i}: value-${i};`)
+      }
+
+      expect(s.cacheSize).toBeLessThanOrEqual(maxSize * 1.5)
+    })
+
+    it("cache eviction preserves recent entries", () => {
+      const maxSize = 20
+      const s = createSheet({ maxCacheSize: maxSize })
+
+      for (let i = 0; i < maxSize; i++) {
+        s.insert(`old-prop-${i}: old-val-${i};`)
+      }
+
+      const recentClasses: string[] = []
+      for (let i = 0; i < 5; i++) {
+        recentClasses.push(s.insert(`new-prop-${i}: new-val-${i};`))
+      }
+
+      for (let i = 0; i < 5; i++) {
+        const cls = s.insert(`new-prop-${i}: new-val-${i};`)
+        expect(cls).toBe(recentClasses[i])
+      }
+    })
+
+    it("handles rapid insertions without memory issues", () => {
+      const s = createSheet({ maxCacheSize: 100 })
+      const iterations = 1000
+
+      for (let i = 0; i < iterations; i++) {
+        s.insert(`rapid-${i}: value;`)
+      }
+
+      expect(s.cacheSize).toBeLessThan(iterations)
+      expect(s.cacheSize).toBeGreaterThan(0)
+    })
+  })
+
+  describe("default cache (large limit, DOM mode)", () => {
+    beforeEach(() => {
+      document.querySelectorAll("style[data-pyreon-styler]").forEach((el) => {
+        el.remove()
+      })
+    })
+
+    it("default cache handles many unique rules", () => {
+      const s = createSheet()
+
+      for (let i = 0; i < 500; i++) {
+        s.insert(`default-prop-${i}: value-${i};`)
+      }
+
+      expect(s.cacheSize).toBe(500)
+    })
+
+    it("deduplication prevents growth from repeated rules", () => {
+      const s = createSheet()
+
+      for (let cycle = 0; cycle < 100; cycle++) {
+        for (let i = 0; i < 10; i++) {
+          s.insert(`repeated-${i}: value;`)
+        }
+      }
+
+      expect(s.cacheSize).toBe(10)
+    })
+  })
+
+  describe("SSR mode memory", () => {
+    let originalDocument: typeof document
+
+    beforeEach(() => {
+      originalDocument = globalThis.document
+      // @ts-expect-error - intentionally deleting for SSR simulation
+      delete globalThis.document
+    })
+
+    afterEach(() => {
+      globalThis.document = originalDocument
+    })
+
+    it("reset prevents SSR buffer accumulation across requests", () => {
+      const s = createSheet()
+
+      for (let i = 0; i < 100; i++) {
+        s.insert(`req1-prop-${i}: value;`)
+      }
+      expect(s.getStyles().length).toBeGreaterThan(0)
+
+      s.reset()
+      expect(s.getStyles()).toBe("")
+
+      s.insert("req2-single: value;")
+      expect(s.getStyles()).not.toContain("req1-prop")
+    })
+
+    it("keyframes cache does not grow unboundedly", () => {
+      const s = createSheet({ maxCacheSize: 20 })
+
+      for (let i = 0; i < 50; i++) {
+        s.insertKeyframes(`anim-${i}`, `from { opacity: ${i}; } to { opacity: 1; }`)
+      }
+
+      expect(s.cacheSize).toBeLessThanOrEqual(50)
+    })
+
+    it("global rules cache does not grow unboundedly", () => {
+      const s = createSheet({ maxCacheSize: 20 })
+
+      for (let i = 0; i < 50; i++) {
+        s.insertGlobal(`body { prop${i}: val${i}; }`)
+      }
+
+      expect(s.cacheSize).toBeLessThanOrEqual(50)
+    })
+
+    it("SSR buffer grows with unique rules (expected behavior)", () => {
+      const s = createSheet()
+      const ruleCount = 100
+
+      for (let i = 0; i < ruleCount; i++) {
+        s.insert(`ssr-prop-${i}: value;`)
+      }
+
+      const styles = s.getStyles()
+      for (let i = 0; i < ruleCount; i++) {
+        expect(styles).toContain(`ssr-prop-${i}`)
+      }
+    })
+
+    it("SSR buffer does not duplicate identical rules", () => {
+      const s = createSheet()
+
+      for (let cycle = 0; cycle < 10; cycle++) {
+        s.insert("color: red;")
+      }
+
+      const matches = s.getStyles().match(/color: red;/g)
+      expect(matches).toHaveLength(1)
+    })
+  })
+})