@pyreon/styler 0.11.4 → 0.11.6

package/src/__tests__/hybrid-injection.test.ts

@@ -8,15 +8,15 @@
  * and inspect the returned VNode + the sheet's CSSOM.
  */
 
-import type { VNode } from "@pyreon/core"
-import { afterEach, describe, expect, it } from "vitest"
-import { createGlobalStyle } from "../globalStyle"
-import { sheet } from "../sheet"
-import { styled } from "../styled"
+import type { VNode } from '@pyreon/core'
+import { afterEach, describe, expect, it } from 'vitest'
+import { createGlobalStyle } from '../globalStyle'
+import { sheet } from '../sheet'
+import { styled } from '../styled'
 
 /** Helper: collect all CSS rule texts from the shared <style data-pyreon-styler> sheet. */
 const getSheetRules = (): string[] => {
-  const el = document.querySelector("style[data-pyreon-styler]") as HTMLStyleElement | null
+  const el = document.querySelector('style[data-pyreon-styler]') as HTMLStyleElement | null
   if (!el?.sheet) return []
   return Array.from(el.sheet.cssRules).map((r) => r.cssText)
 }
@@ -25,68 +25,78 @@ const getSheetRules = (): string[] => {
 const findRulesFor = (className: string): string[] =>
   getSheetRules().filter((r) => r.includes(`.${className}`))
 
-describe("hybrid injection — CSS in shared sheet", () => {
+describe('hybrid injection — CSS in shared sheet', () => {
   afterEach(() => {
     sheet.clearAll()
   })
 
-  describe("static styled components", () => {
-    it("injects CSS rules into the shared <style data-pyreon-styler> element", () => {
-      const Comp = styled("div")`color: red;`
+  describe('static styled components', () => {
+    it('injects CSS rules into the shared <style data-pyreon-styler> element', () => {
+      const Comp = styled('div')`
+        color: red;
+      `
       const vnode = Comp({}) as VNode
       const className = vnode.props.class as string
 
       const rules = findRulesFor(className)
       expect(rules.length).toBeGreaterThanOrEqual(1)
-      expect(rules.some((r) => r.includes("color: red"))).toBe(true)
+      expect(rules.some((r) => r.includes('color: red'))).toBe(true)
     })
 
-    it("multiple static components share the same <style> element", () => {
-      const A = styled("div")`color: red;`
-      const B = styled("span")`font-size: 20px;`
+    it('multiple static components share the same <style> element', () => {
+      const A = styled('div')`
+        color: red;
+      `
+      const B = styled('span')`
+        font-size: 20px;
+      `
 
       A({})
       B({})
 
       // Both should be in the same sheet
-      const styleEls = document.querySelectorAll("style[data-pyreon-styler]")
+      const styleEls = document.querySelectorAll('style[data-pyreon-styler]')
       expect(styleEls.length).toBe(1)
 
       const rules = getSheetRules()
-      expect(rules.some((r) => r.includes("color: red"))).toBe(true)
-      expect(rules.some((r) => r.includes("font-size: 20px"))).toBe(true)
+      expect(rules.some((r) => r.includes('color: red'))).toBe(true)
+      expect(rules.some((r) => r.includes('font-size: 20px'))).toBe(true)
     })
   })
 
-  describe("dynamic styled components", () => {
-    it("injects CSS into the shared sheet", () => {
-      const Comp = styled("div")`color: ${(p: any) => p.$color};`
-      const vnode = Comp({ $color: "blue" }) as VNode
+  describe('dynamic styled components', () => {
+    it('injects CSS into the shared sheet', () => {
+      const Comp = styled('div')`
+        color: ${(p: any) => p.$color};
+      `
+      const vnode = Comp({ $color: 'blue' }) as VNode
       const className = vnode.props.class as string
 
       const rules = findRulesFor(className)
       expect(rules.length).toBeGreaterThanOrEqual(1)
-      expect(rules.some((r) => r.includes("color: blue"))).toBe(true)
+      expect(rules.some((r) => r.includes('color: blue'))).toBe(true)
     })
 
-    it("different prop values inject different CSS rules into the sheet", () => {
-      const Comp = styled("div")`color: ${(p: any) => p.$color};`
-      const vnode1 = Comp({ $color: "red" }) as VNode
+    it('different prop values inject different CSS rules into the sheet', () => {
+      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: "green" }) as VNode
+      const vnode2 = Comp({ $color: 'green' }) as VNode
       const cls2 = vnode2.props.class as string
 
       expect(cls1).not.toBe(cls2)
 
       // Both rules should be in the sheet
-      expect(findRulesFor(cls1).some((r) => r.includes("color: red"))).toBe(true)
-      expect(findRulesFor(cls2).some((r) => r.includes("color: green"))).toBe(true)
+      expect(findRulesFor(cls1).some((r) => r.includes('color: red'))).toBe(true)
+      expect(findRulesFor(cls2).some((r) => r.includes('color: green'))).toBe(true)
     })
   })
 
-  describe("createGlobalStyle", () => {
-    it("static global styles are injected into the shared sheet", () => {
+  describe('createGlobalStyle', () => {
+    it('static global styles are injected into the shared sheet', () => {
       const GlobalStyle = createGlobalStyle`
         body { margin: 0; }
       `
@@ -94,46 +104,54 @@ describe("hybrid injection — CSS in shared sheet", () => {
       GlobalStyle({})
 
       const rules = getSheetRules()
-      expect(rules.some((r) => r.includes("margin") && r.includes("0"))).toBe(true)
+      expect(rules.some((r) => r.includes('margin') && r.includes('0'))).toBe(true)
     })
   })
 })
 
-describe("hybrid injection — VNode output (no <style> in tree)", () => {
+describe('hybrid injection — VNode output (no <style> in tree)', () => {
   afterEach(() => {
     sheet.clearAll()
   })
 
-  describe("styled components", () => {
-    it("static component returns a VNode of the correct tag", () => {
-      const Comp = styled("div")`color: red;`
+  describe('styled components', () => {
+    it('static component returns a VNode of the correct tag', () => {
+      const Comp = styled('div')`
+        color: red;
+      `
       const vnode = Comp({}) as VNode
 
       // Should return a VNode for <div>, not a <style>
-      expect(vnode.type).toBe("div")
+      expect(vnode.type).toBe('div')
     })
 
-    it("dynamic component returns a VNode of the correct tag", () => {
-      const Comp = styled("div")`color: ${(p: any) => p.$color};`
-      const vnode = Comp({ $color: "red" }) as VNode
+    it('dynamic component returns a VNode of the correct tag', () => {
+      const Comp = styled('div')`
+        color: ${(p: any) => p.$color};
+      `
+      const vnode = Comp({ $color: 'red' }) as VNode
 
-      expect(vnode.type).toBe("div")
+      expect(vnode.type).toBe('div')
     })
 
-    it("multiple styled components produce correct VNode types", () => {
-      const A = styled("div")`color: red;`
-      const B = styled("span")`color: blue;`
+    it('multiple styled components produce correct VNode types', () => {
+      const A = styled('div')`
+        color: red;
+      `
+      const B = styled('span')`
+        color: blue;
+      `
 
       const vnodeA = A({}) as VNode
       const vnodeB = B({}) as VNode
 
-      expect(vnodeA.type).toBe("div")
-      expect(vnodeB.type).toBe("span")
+      expect(vnodeA.type).toBe('div')
+      expect(vnodeB.type).toBe('span')
     })
   })
 
-  describe("createGlobalStyle", () => {
-    it("static global style returns null", () => {
+  describe('createGlobalStyle', () => {
+    it('static global style returns null', () => {
       const GlobalStyle = createGlobalStyle`body { margin: 0; }`
       const result = GlobalStyle({})
 
@@ -142,13 +160,15 @@ describe("hybrid injection — VNode output (no <style> in tree)", () => {
   })
 })
 
-describe("hybrid injection — boost option at component level", () => {
+describe('hybrid injection — boost option at component level', () => {
   afterEach(() => {
     sheet.clearAll()
   })
 
-  it("static boosted component produces doubled selector in CSSOM", () => {
-    const Comp = styled("div", { boost: true })`color: red;`
+  it('static boosted component produces doubled selector in CSSOM', () => {
+    const Comp = styled('div', { boost: true })`
+      color: red;
+    `
     const vnode = Comp({}) as VNode
     const className = vnode.props.class as string
 
@@ -158,11 +178,11 @@ describe("hybrid injection — boost option at component level", () => {
     expect(rules.some((r) => r.includes(`.${className}.${className}`))).toBe(true)
   })
 
-  it("dynamic boosted component produces doubled selector in CSSOM", () => {
-    const Comp = styled("div", { boost: true })`
+  it('dynamic boosted component produces doubled selector in CSSOM', () => {
+    const Comp = styled('div', { boost: true })`
       color: ${(p: any) => p.$color};
     `
-    const vnode = Comp({ $color: "blue" }) as VNode
+    const vnode = Comp({ $color: 'blue' }) as VNode
     const className = vnode.props.class as string
 
     const rules = findRulesFor(className)
@@ -170,8 +190,10 @@ describe("hybrid injection — boost option at component level", () => {
     expect(rules.some((r) => r.includes(`.${className}.${className}`))).toBe(true)
   })
 
-  it("non-boosted component produces single selector", () => {
-    const Comp = styled("div")`color: green;`
+  it('non-boosted component produces single selector', () => {
+    const Comp = styled('div')`
+      color: green;
+    `
     const vnode = Comp({}) as VNode
     const className = vnode.props.class as string
 
@@ -181,15 +203,17 @@ describe("hybrid injection — boost option at component level", () => {
     const baseRule = rules[0] as string
     expect(baseRule).toContain(`.${className}`)
     // Count occurrences of the className in the selector portion
-    const selectorPart = baseRule.split("{")[0] as string
+    const selectorPart = baseRule.split('{')[0] as string
     const occurrences = selectorPart.split(`.${className}`).length - 1
     expect(occurrences).toBe(1)
   })
 
-  it("boosted component with @media splits correctly", () => {
-    const Comp = styled("div", { boost: true })`
+  it('boosted component with @media splits correctly', () => {
+    const Comp = styled('div', { boost: true })`
       color: red;
-      @media (min-width: 768px) { font-size: 20px; }
+      @media (min-width: 768px) {
+        font-size: 20px;
+      }
     `
     const vnode = Comp({}) as VNode
     const className = vnode.props.class as string

package/src/__tests__/index.ts

@@ -2,13 +2,13 @@
  * Test barrel / helper file.
  * Re-exports commonly used test utilities from the styler source.
  */
-export { css } from "../css"
-export { createGlobalStyle } from "../globalStyle"
-export { HASH_INIT, hash, hashFinalize, hashUpdate } from "../hash"
-export { keyframes } from "../keyframes"
-export type { CSSResult, Interpolation } from "../resolve"
-export { clearNormCache, normalizeCSS, resolve, resolveValue } from "../resolve"
-export type { StyleSheetOptions } from "../sheet"
-export { createSheet, StyleSheet, sheet } from "../sheet"
-export { styled } from "../styled"
-export { ThemeContext, ThemeProvider, useTheme } from "../ThemeProvider"
+export { css } from '../css'
+export { createGlobalStyle } from '../globalStyle'
+export { HASH_INIT, hash, hashFinalize, hashUpdate } from '../hash'
+export { keyframes } from '../keyframes'
+export type { CSSResult, Interpolation } from '../resolve'
+export { clearNormCache, normalizeCSS, resolve, resolveValue } from '../resolve'
+export type { StyleSheetOptions } from '../sheet'
+export { createSheet, StyleSheet, sheet } from '../sheet'
+export { styled } from '../styled'
+export { ThemeContext, ThemeProvider, useTheme } from '../ThemeProvider'

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

@@ -1,36 +1,42 @@
-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")`
+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
+      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};`
+    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
+      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};`
+    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 colors = ['blue', 'green', 'yellow', 'purple', 'orange']
       const classNames = new Set<string>()
 
       for (const color of colors) {
@@ -43,15 +49,17 @@ describe("style injection (className generation)", () => {
       expect(classNames.size).toBe(colors.length)
     })
 
-    it("same dynamic CSS produces same className", () => {
-      const Comp = styled("div")`color: ${(p: any) => p.$color};`
+    it('same dynamic CSS produces same className', () => {
+      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
 
-      const _vnode2 = Comp({ $color: "blue" }) as VNode
+      const _vnode2 = Comp({ $color: 'blue' }) as VNode
 
-      const vnode3 = Comp({ $color: "red" }) as VNode // back to red
+      const vnode3 = Comp({ $color: 'red' }) as VNode // back to red
       const cls3 = vnode3.props.class as string
 
       // Same resolved CSS -> same className
@@ -59,18 +67,23 @@ describe("style injection (className generation)", () => {
     })
   })
 
-  describe("static styled components", () => {
-    it("static components compute class at creation time", () => {
+  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 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;`
+    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
@@ -83,19 +96,19 @@ describe("style injection (className generation)", () => {
     })
   })
 
-  describe("theme-dependent components", () => {
-    it("produces different className for different resolved CSS", () => {
+  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")`
+      const Comp = styled('div')`
         background: ${(p: any) => p.$bg};
       `
 
-      const vnode1 = Comp({ $bg: "white" }) as VNode
+      const vnode1 = Comp({ $bg: 'white' }) as VNode
       const cls1 = vnode1.props.class as string
 
-      const vnode2 = Comp({ $bg: "black" }) as VNode
+      const vnode2 = Comp({ $bg: 'black' }) as VNode
       const cls2 = vnode2.props.class as string
 
       expect(cls1).not.toBe(cls2)

package/src/__tests__/integration.test.ts

@@ -1,13 +1,15 @@
-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")`
+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;
       `
@@ -15,20 +17,26 @@ describe("integration", () => {
       expect(vnode.props.class).toMatch(/^pyr-/)
     })
 
-    it("resolves conditional css (logical AND pattern)", () => {
+    it('resolves conditional css (logical AND pattern)', () => {
       const isWeb = true
-      const Comp = styled("div")`
-        ${isWeb && css`box-sizing: border-box;`};
+      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", () => {
+    it('handles false conditional css', () => {
       const isWeb = false
-      const Comp = styled("div")`
-        ${isWeb && css`box-sizing: border-box;`};
+      const Comp = styled('div')`
+        ${isWeb &&
+        css`
+          box-sizing: border-box;
+        `};
         display: flex;
       `
       const vnode = Comp({}) as VNode
@@ -36,16 +44,26 @@ describe("integration", () => {
     })
   })
 
-  describe("array interpolations (makeItResponsive pattern)", () => {
-    it("resolves array of css results (simulating breakpoints)", () => {
+  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; }`,
+        css`
+          color: red;
+        `,
+        css`
+          @media (min-width: 48em) {
+            color: blue;
+          }
+        `,
+        css`
+          @media (min-width: 62em) {
+            color: green;
+          }
+        `,
       ]
 
-      const Comp = styled("div")`
+      const Comp = styled('div')`
         display: flex;
         ${breakpointStyles};
       `
@@ -53,41 +71,53 @@ describe("integration", () => {
       expect(vnode.props.class).toMatch(/^pyr-/)
     })
 
-    it("resolves function returning array (makeItResponsive full pattern)", () => {
+    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}; }` : "",
+          css`
+            color: ${theme.color || 'black'};
+          `,
+          theme.breakpoint
+            ? css`
+                @media (min-width: 48em) {
+                  color: ${theme.breakpoint};
+                }
+              `
+            : '',
         ]
       }
 
-      const Comp = styled("div")`
+      const Comp = styled('div')`
         display: flex;
         ${responsiveFn};
       `
-      const vnode = Comp({ $element: { color: "red", breakpoint: "blue" } }) as VNode
+      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", () => {
+  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[]]))};
-          }`
+          css`
+            @media only screen and (min-width: ${emSize}em) {
+              ${css(...(args as [TemplateStringsArray, ...any[]]))};
+            }
+          `
       }
 
       const md = createMedia(768, 16)
-      const result = md`color: blue;`
+      const result = md`
+        color: blue;
+      `
 
       // Wrap in a styled component
-      const Comp = styled("div")`
+      const Comp = styled('div')`
         color: red;
         ${result};
       `
@@ -95,13 +125,13 @@ describe("integration", () => {
       expect(vnode.props.class).toMatch(/^pyr-/)
     })
 
-    it("zero-breakpoint passthrough (css(...args) without @media)", () => {
+    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")`
+      const Comp = styled('div')`
         ${result};
       `
       const vnode = Comp({}) as VNode
@@ -109,21 +139,21 @@ describe("integration", () => {
     })
   })
 
-  describe("complex styled patterns", () => {
-    it("function interpolation with prop-based conditional", () => {
-      const Comp = styled("div")`
+  describe('complex styled patterns', () => {
+    it('function interpolation with prop-based conditional', () => {
+      const Comp = styled('div')`
         display: flex;
-        ${({ $contentType }: any) => $contentType === "content" && "flex: 1;"};
+        ${({ $contentType }: any) => $contentType === 'content' && 'flex: 1;'};
       `
-      const vnode = Comp({ $contentType: "content" }) as VNode
+      const vnode = Comp({ $contentType: 'content' }) as VNode
       expect(vnode.props.class).toMatch(/^pyr-/)
     })
 
-    it("platform-specific CSS (compile-time constant)", () => {
+    it('platform-specific CSS (compile-time constant)', () => {
       const __WEB__ = true
-      const platformCSS = __WEB__ ? "box-sizing: border-box;" : ""
+      const platformCSS = __WEB__ ? 'box-sizing: border-box;' : ''
 
-      const Comp = styled("div")`
+      const Comp = styled('div')`
         ${platformCSS};
         display: flex;
       `
@@ -131,17 +161,17 @@ describe("integration", () => {
       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"};
+    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
+      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")``
+    it('empty template produces no className', () => {
+      const Comp = styled('div')``
       const vnode = Comp({}) as VNode
       expect(vnode.props.class).toBeFalsy()
     })