@pyreon/styler 0.11.4 → 0.11.6

package/src/__tests__/keyframes.test.ts

@@ -1,13 +1,13 @@
-import { afterEach, describe, expect, it } from "vitest"
-import { keyframes } from "../keyframes"
-import { sheet } from "../sheet"
+import { afterEach, describe, expect, it } from 'vitest'
+import { keyframes } from '../keyframes'
+import { sheet } from '../sheet'
 
-describe("keyframes", () => {
+describe('keyframes', () => {
   afterEach(() => {
     sheet.reset()
   })
 
-  it("returns a KeyframesResult with a name property", () => {
+  it('returns a KeyframesResult with a name property', () => {
     const fadeIn = keyframes`
       from { opacity: 0; }
       to { opacity: 1; }
@@ -15,7 +15,7 @@ describe("keyframes", () => {
     expect(fadeIn.name).toMatch(/^pyr-kf-/)
   })
 
-  it("returns pyr-kf- prefix", () => {
+  it('returns pyr-kf- prefix', () => {
     const fadeIn = keyframes`
       from { opacity: 0; }
       to { opacity: 1; }
@@ -23,19 +23,19 @@ describe("keyframes", () => {
     expect(fadeIn.name).toMatch(/^pyr-kf-[0-9a-z]+$/)
   })
 
-  it("is deterministic — same input produces same name", () => {
+  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", () => {
+  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", () => {
+  it('supports interpolation values', () => {
     const from = 0
     const to = 1
     const anim = keyframes`
@@ -45,19 +45,19 @@ describe("keyframes", () => {
     expect(anim.name).toMatch(/^pyr-kf-/)
   })
 
-  it("toString returns the animation name", () => {
+  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", () => {
+  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")
+    expect(animationValue).toContain('0.3s ease-in')
   })
 
-  it("handles complex keyframe definitions", () => {
+  it('handles complex keyframe definitions', () => {
     const pulse = keyframes`
       0% { transform: scale(1); }
       50% { transform: scale(1.1); }

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

@@ -1,9 +1,9 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest"
-import { createSheet } from "../sheet"
+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", () => {
+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 })
 
@@ -14,7 +14,7 @@ describe("memory growth", () => {
       expect(s.cacheSize).toBeLessThanOrEqual(maxSize * 1.5)
     })
 
-    it("cache eviction preserves recent entries", () => {
+    it('cache eviction preserves recent entries', () => {
       const maxSize = 20
       const s = createSheet({ maxCacheSize: maxSize })
 
@@ -33,7 +33,7 @@ describe("memory growth", () => {
       }
     })
 
-    it("handles rapid insertions without memory issues", () => {
+    it('handles rapid insertions without memory issues', () => {
       const s = createSheet({ maxCacheSize: 100 })
       const iterations = 1000
 
@@ -46,14 +46,14 @@ describe("memory growth", () => {
     })
   })
 
-  describe("default cache (large limit, DOM mode)", () => {
+  describe('default cache (large limit, DOM mode)', () => {
     beforeEach(() => {
-      document.querySelectorAll("style[data-pyreon-styler]").forEach((el) => {
+      document.querySelectorAll('style[data-pyreon-styler]').forEach((el) => {
         el.remove()
       })
     })
 
-    it("default cache handles many unique rules", () => {
+    it('default cache handles many unique rules', () => {
       const s = createSheet()
 
       for (let i = 0; i < 500; i++) {
@@ -63,7 +63,7 @@ describe("memory growth", () => {
       expect(s.cacheSize).toBe(500)
     })
 
-    it("deduplication prevents growth from repeated rules", () => {
+    it('deduplication prevents growth from repeated rules', () => {
       const s = createSheet()
 
       for (let cycle = 0; cycle < 100; cycle++) {
@@ -76,7 +76,7 @@ describe("memory growth", () => {
     })
   })
 
-  describe("SSR mode memory", () => {
+  describe('SSR mode memory', () => {
     let originalDocument: typeof document
 
     beforeEach(() => {
@@ -89,7 +89,7 @@ describe("memory growth", () => {
       globalThis.document = originalDocument
     })
 
-    it("reset prevents SSR buffer accumulation across requests", () => {
+    it('reset prevents SSR buffer accumulation across requests', () => {
       const s = createSheet()
 
       for (let i = 0; i < 100; i++) {
@@ -98,13 +98,13 @@ describe("memory growth", () => {
       expect(s.getStyles().length).toBeGreaterThan(0)
 
       s.reset()
-      expect(s.getStyles()).toBe("")
+      expect(s.getStyles()).toBe('')
 
-      s.insert("req2-single: value;")
-      expect(s.getStyles()).not.toContain("req1-prop")
+      s.insert('req2-single: value;')
+      expect(s.getStyles()).not.toContain('req1-prop')
     })
 
-    it("keyframes cache does not grow unboundedly", () => {
+    it('keyframes cache does not grow unboundedly', () => {
       const s = createSheet({ maxCacheSize: 20 })
 
       for (let i = 0; i < 50; i++) {
@@ -114,7 +114,7 @@ describe("memory growth", () => {
       expect(s.cacheSize).toBeLessThanOrEqual(50)
     })
 
-    it("global rules cache does not grow unboundedly", () => {
+    it('global rules cache does not grow unboundedly', () => {
       const s = createSheet({ maxCacheSize: 20 })
 
       for (let i = 0; i < 50; i++) {
@@ -124,7 +124,7 @@ describe("memory growth", () => {
       expect(s.cacheSize).toBeLessThanOrEqual(50)
     })
 
-    it("SSR buffer grows with unique rules (expected behavior)", () => {
+    it('SSR buffer grows with unique rules (expected behavior)', () => {
       const s = createSheet()
       const ruleCount = 100
 
@@ -138,11 +138,11 @@ describe("memory growth", () => {
       }
     })
 
-    it("SSR buffer does not duplicate identical rules", () => {
+    it('SSR buffer does not duplicate identical rules', () => {
       const s = createSheet()
 
       for (let cycle = 0; cycle < 10; cycle++) {
-        s.insert("color: red;")
+        s.insert('color: red;')
       }
 
       const matches = s.getStyles().match(/color: red;/g)

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

@@ -1,136 +1,158 @@
-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
+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")
+      expect(vnode.props.title).toBe('hello')
     })
 
-    it("custom filter receives all non-system props", () => {
+    it('custom filter receives all non-system props', () => {
       const forwarded: string[] = []
-      const Comp = styled("div", {
+      const Comp = styled('div', {
         shouldForwardProp: (prop) => {
           forwarded.push(prop)
           return true
         },
-      })`display: flex;`
+      })`
+        display: flex;
+      `
 
-      Comp({ "data-x": "1", title: "hi" })
-      expect(forwarded).toContain("data-x")
-      expect(forwarded).toContain("title")
+      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};`
+    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")
+      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)", () => {
+    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 })
+        h('div', { class: props.class, 'data-my': props.myProp })
 
       // shouldForwardProp is only for HTML elements
       const Comp = styled(Inner, {
         shouldForwardProp: () => false,
-      })`color: red;`
+      })`
+        color: red;
+      `
 
-      const vnode = Comp({ myProp: "hello" }) as VNode
+      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")
+      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;`
+  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-")
+      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;`
+    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")
+      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;`
+    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-")
+      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")
+      expect(typeof vnode.type).toBe('function')
     })
   })
 
-  describe("HMR cleanup API", () => {
+  describe('HMR cleanup API', () => {
     beforeEach(() => {
-      document.querySelectorAll("style[data-pyreon-styler]").forEach((el) => {
+      document.querySelectorAll('style[data-pyreon-styler]').forEach((el) => {
         el.remove()
       })
     })
 
-    it("clearCache removes all cached entries", () => {
+    it('clearCache removes all cached entries', () => {
       const s = createSheet()
-      s.insert("color: red;")
-      s.insert("color: blue;")
+      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", () => {
+    it('clearAll removes cache, SSR buffer, and DOM rules', () => {
       const s = new StyleSheet()
-      s.insert("color: red;")
-      s.insert("color: blue;")
+      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", () => {
+    it('after clearCache, same CSS gets re-inserted', () => {
       const s = createSheet()
-      s.insert("color: red;")
+      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;")
+      s.insert('color: red;')
       expect(s.cacheSize).toBe(1)
     })
   })
 
-  describe("HMR cleanup API (SSR mode)", () => {
+  describe('HMR cleanup API (SSR mode)', () => {
     let originalDocument: typeof document
 
     beforeEach(() => {
@@ -143,98 +165,132 @@ describe("P3 features", () => {
       globalThis.document = originalDocument
     })
 
-    it("clearAll in SSR mode clears buffer and cache", () => {
+    it('clearAll in SSR mode clears buffer and cache', () => {
       const s = createSheet()
-      s.insert("color: red;")
-      expect(s.getStyles()).toContain("color: red;")
+      s.insert('color: red;')
+      expect(s.getStyles()).toContain('color: red;')
       expect(s.cacheSize).toBe(1)
 
       s.clearAll()
-      expect(s.getStyles()).toBe("")
+      expect(s.getStyles()).toBe('')
       expect(s.cacheSize).toBe(0)
     })
   })
 
-  describe("CSS nesting (& selectors)", () => {
-    it("& selectors pass through to the CSS rule", () => {
+  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")`
+      const Comp = styled('div')`
         color: red;
-        &:hover { color: blue; }
+        &:hover {
+          color: blue;
+        }
       `
       const vnode = Comp({}) as VNode
       expect(vnode.props.class).toMatch(/^pyr-/)
     })
 
-    it("nested & with pseudo-elements", () => {
-      const Comp = styled("div")`
+    it('nested & with pseudo-elements', () => {
+      const Comp = styled('div')`
         position: relative;
-        &::before { content: ""; display: block; }
-        &::after { content: ""; display: block; }
+        &::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;`}`
+  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;`}`
+    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;`
+    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;")
+      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", () => {
+    it('anonymous component gets fallback displayName', () => {
       const Anon = (() => {
         const fn = () => null
-        Object.defineProperty(fn, "name", { value: "" })
+        Object.defineProperty(fn, 'name', { value: '' })
         return fn
       })()
 
-      const Comp = styled(Anon)`color: red;`
-      expect((Comp as any).displayName).toBe("styled(Component)")
+      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}`
+    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")`
+    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 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 vnode2 = Comp({ $color: 'blue', $size: '16px' }) as VNode
       const cls2 = vnode2.props.class as string
 
       expect(cls1).not.toBe(cls2)
@@ -242,14 +298,16 @@ describe("P3 features", () => {
       expect(cls2).toMatch(/^pyr-/)
     })
 
-    it("same dynamic values produce same className (dedup cache)", () => {
-      const Comp = styled("div")`color: ${(p: any) => p.$color};`
+    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 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 vnode2 = Comp({ $color: 'red' }) as VNode
       const cls2 = vnode2.props.class as string
 
       expect(cls1).toBe(cls2)