@pyreon/styler 0.11.0 → 0.11.2

package/src/__tests__/forward.test.ts

@@ -0,0 +1,282 @@
+import { describe, expect, it } from "vitest"
+import { buildProps, filterProps } from "../forward"
+
+describe("filterProps", () => {
+  describe("keeps standard HTML props", () => {
+    it("keeps id", () => {
+      const result = filterProps({ id: "test" })
+      expect(result.id).toBe("test")
+    })
+
+    it("keeps className", () => {
+      const result = filterProps({ className: "foo" })
+      expect(result.className).toBe("foo")
+    })
+
+    it("keeps style", () => {
+      const style = { color: "red" }
+      const result = filterProps({ style })
+      expect(result.style).toBe(style)
+    })
+
+    it("keeps href", () => {
+      const result = filterProps({ href: "/path" })
+      expect(result.href).toBe("/path")
+    })
+
+    it("keeps disabled", () => {
+      const result = filterProps({ disabled: true })
+      expect(result.disabled).toBe(true)
+    })
+
+    it("keeps multiple standard props at once", () => {
+      const result = filterProps({
+        id: "main",
+        tabIndex: 0,
+        role: "button",
+        title: "Click me",
+      })
+      expect(result).toEqual({
+        id: "main",
+        tabIndex: 0,
+        role: "button",
+        title: "Click me",
+      })
+    })
+  })
+
+  describe("keeps data-* attributes", () => {
+    it("keeps data-testid", () => {
+      const result = filterProps({ "data-testid": "hello" })
+      expect(result["data-testid"]).toBe("hello")
+    })
+
+    it("keeps data-custom", () => {
+      const result = filterProps({ "data-custom": "value" })
+      expect(result["data-custom"]).toBe("value")
+    })
+  })
+
+  describe("keeps aria-* attributes", () => {
+    it("keeps aria-label", () => {
+      const result = filterProps({ "aria-label": "Close" })
+      expect(result["aria-label"]).toBe("Close")
+    })
+
+    it("keeps aria-hidden", () => {
+      const result = filterProps({ "aria-hidden": true })
+      expect(result["aria-hidden"]).toBe(true)
+    })
+
+    it("keeps aria-describedby", () => {
+      const result = filterProps({ "aria-describedby": "desc" })
+      expect(result["aria-describedby"]).toBe("desc")
+    })
+  })
+
+  describe("keeps event handlers", () => {
+    it("keeps onClick", () => {
+      const fn = () => undefined
+      const result = filterProps({ onClick: fn })
+      expect(result.onClick).toBe(fn)
+    })
+
+    it("keeps onMouseEnter", () => {
+      const fn = () => undefined
+      const result = filterProps({ onMouseEnter: fn })
+      expect(result.onMouseEnter).toBe(fn)
+    })
+
+    it("keeps onKeyDown", () => {
+      const fn = () => undefined
+      const result = filterProps({ onKeyDown: fn })
+      expect(result.onKeyDown).toBe(fn)
+    })
+  })
+
+  describe("strips $-prefixed transient props", () => {
+    it("strips $rocketstyle", () => {
+      const result = filterProps({ $rocketstyle: { color: "red" } })
+      expect(result).toEqual({})
+    })
+
+    it("strips $element", () => {
+      const result = filterProps({ $element: "button" })
+      expect(result).toEqual({})
+    })
+
+    it("strips $active", () => {
+      const result = filterProps({ $active: true })
+      expect(result).toEqual({})
+    })
+
+    it("strips multiple $-prefixed props while keeping valid ones", () => {
+      const result = filterProps({
+        $rocketstyle: {},
+        $element: "div",
+        id: "test",
+        "data-x": "y",
+      })
+      expect(result).toEqual({ id: "test", "data-x": "y" })
+    })
+  })
+
+  describe("strips as prop", () => {
+    it("strips the as prop", () => {
+      const result = filterProps({ as: "button" })
+      expect(result).toEqual({})
+    })
+
+    it("strips as while keeping other props", () => {
+      const result = filterProps({ as: "section", id: "main" })
+      expect(result).toEqual({ id: "main" })
+    })
+  })
+
+  describe("strips unknown props", () => {
+    it("strips customProp", () => {
+      const result = filterProps({ customProp: "value" })
+      expect(result).toEqual({})
+    })
+
+    it("strips myThing", () => {
+      const result = filterProps({ myThing: 42 })
+      expect(result).toEqual({})
+    })
+
+    it("strips camelCase unknown props", () => {
+      const result = filterProps({ isActive: true, backgroundColor: "red" })
+      expect(result).toEqual({})
+    })
+
+    it("returns empty object for all-unknown props", () => {
+      const result = filterProps({
+        foo: 1,
+        bar: 2,
+        baz: 3,
+        customThing: "x",
+      })
+      expect(result).toEqual({})
+    })
+  })
+})
+
+describe("buildProps", () => {
+  describe("className merging", () => {
+    it("merges generatedCls with user className", () => {
+      const result = buildProps({ className: "custom" }, "pyr-abc", true)
+      expect(result.class).toBe("pyr-abc custom")
+    })
+
+    it("merges generatedCls with user class", () => {
+      const result = buildProps({ class: "custom" }, "pyr-abc", true)
+      expect(result.class).toBe("pyr-abc custom")
+    })
+
+    it("uses only generatedCls when no user className", () => {
+      const result = buildProps({}, "pyr-abc", true)
+      expect(result.class).toBe("pyr-abc")
+    })
+
+    it("uses only user className when generatedCls is empty", () => {
+      const result = buildProps({ className: "custom" }, "", true)
+      expect(result.class).toBe("custom")
+    })
+
+    it("sets no class when both are empty/missing", () => {
+      const result = buildProps({}, "", true)
+      expect(result.class).toBeUndefined()
+    })
+  })
+
+  describe("isDOM=false (component target)", () => {
+    it("forwards all props except as, className, class, and $-prefixed", () => {
+      const result = buildProps(
+        {
+          as: "button",
+          className: "user",
+          customProp: "hello",
+          $rocketstyle: {},
+          $rocketstate: { hover: true },
+          "data-x": "y",
+          onClick: () => undefined,
+        },
+        "pyr-abc",
+        false,
+      )
+
+      expect(result.customProp).toBe("hello")
+      expect(result.$rocketstyle).toBeUndefined()
+      expect(result.$rocketstate).toBeUndefined()
+      expect(result["data-x"]).toBe("y")
+      expect(result.onClick).toBeDefined()
+      // as and className are not forwarded from rawProps (class is merged separately)
+      expect(result.as).toBeUndefined()
+      expect(result.class).toBe("pyr-abc user")
+    })
+  })
+
+  describe("isDOM=true (default filtering)", () => {
+    it("filters unknown DOM props", () => {
+      const result = buildProps({ customProp: "hello", unknownThing: 42 }, "pyr-abc", true)
+      expect(result.customProp).toBeUndefined()
+      expect(result.unknownThing).toBeUndefined()
+      expect(result.class).toBe("pyr-abc")
+    })
+
+    it("strips $-prefixed props", () => {
+      const result = buildProps({ $rocketstyle: {}, $active: true, id: "test" }, "pyr-abc", true)
+      expect(result.$rocketstyle).toBeUndefined()
+      expect(result.$active).toBeUndefined()
+      expect(result.id).toBe("test")
+    })
+
+    it("keeps data-* and aria-* attributes", () => {
+      const result = buildProps({ "data-testid": "btn", "aria-label": "Close" }, "pyr-abc", true)
+      expect(result["data-testid"]).toBe("btn")
+      expect(result["aria-label"]).toBe("Close")
+    })
+
+    it("keeps standard HTML attributes", () => {
+      const result = buildProps({ id: "main", disabled: true, tabIndex: 0 }, "pyr-abc", true)
+      expect(result.id).toBe("main")
+      expect(result.disabled).toBe(true)
+      expect(result.tabIndex).toBe(0)
+    })
+
+    it("strips as prop", () => {
+      const result = buildProps({ as: "section" }, "pyr-abc", true)
+      expect(result.as).toBeUndefined()
+    })
+  })
+
+  describe("isDOM=true with customFilter", () => {
+    it("uses customFilter to decide which props to forward", () => {
+      const customFilter = (prop: string) => prop.startsWith("my")
+      const result = buildProps(
+        { myProp: "yes", otherProp: "no", id: "skip" },
+        "pyr-abc",
+        true,
+        customFilter,
+      )
+      expect(result.myProp).toBe("yes")
+      expect(result.otherProp).toBeUndefined()
+      expect(result.id).toBeUndefined()
+    })
+
+    it("customFilter still skips as and className from rawProps", () => {
+      const customFilter = () => true
+      const result = buildProps(
+        { as: "button", className: "user", id: "test" },
+        "pyr-abc",
+        true,
+        customFilter,
+      )
+      // as is always skipped
+      expect(result.as).toBeUndefined()
+      // class is merged, not forwarded from rawProps
+      expect(result.class).toBe("pyr-abc user")
+      expect(result.id).toBe("test")
+    })
+  })
+})

package/src/__tests__/globalStyle.test.ts

@@ -0,0 +1,72 @@
+import { afterEach, describe, expect, it } from "vitest"
+import { createGlobalStyle } from "../globalStyle"
+import { sheet } from "../sheet"
+
+describe("createGlobalStyle -- empty CSS paths", () => {
+  afterEach(() => {
+    sheet.clearAll()
+  })
+
+  it("static: returns null for empty template", () => {
+    const GlobalStyle = createGlobalStyle``
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+
+  it("static: returns null for whitespace-only template", () => {
+    const GlobalStyle = createGlobalStyle`   `
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+
+  it("dynamic: returns null when interpolation resolves to empty CSS", () => {
+    const GlobalStyle = createGlobalStyle`${({ theme }: any) => (theme.empty ? "" : "")}`
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+
+  it("dynamic: returns null when interpolation resolves to whitespace", () => {
+    const GlobalStyle = createGlobalStyle`${() => "   "}`
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+})
+
+describe("createGlobalStyle", () => {
+  afterEach(() => {
+    sheet.clearAll()
+  })
+
+  it("returns a component function", () => {
+    const GlobalStyle = createGlobalStyle`
+      body { margin: 0; }
+    `
+    expect(typeof GlobalStyle).toBe("function")
+  })
+
+  it("renders nothing (returns null)", () => {
+    const GlobalStyle = createGlobalStyle`
+      body { margin: 0; padding: 0; }
+    `
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+
+  it("handles dynamic interpolations with theme", () => {
+    // Dynamic path: function interpolation causes per-render resolution
+    const GlobalStyle = createGlobalStyle`
+      body { font-family: ${({ theme }: any) => theme?.font ?? "sans-serif"}; }
+    `
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+
+  it("handles static interpolations", () => {
+    const color = "red"
+    const GlobalStyle = createGlobalStyle`
+      body { color: ${color}; }
+    `
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+})

package/src/__tests__/hash.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest"
+import { hash } from "../hash"
+
+describe("hash", () => {
+  it("returns a string", () => {
+    expect(typeof hash("test")).toBe("string")
+  })
+
+  it("is deterministic — same input always produces same output", () => {
+    const input = "display: flex; color: red;"
+    expect(hash(input)).toBe(hash(input))
+  })
+
+  it("produces different hashes for different inputs", () => {
+    expect(hash("color: red")).not.toBe(hash("color: blue"))
+  })
+
+  it("returns base-36 string (compact)", () => {
+    const result = hash("some css")
+    expect(result).toMatch(/^[0-9a-z]+$/)
+  })
+
+  it("handles empty string", () => {
+    const result = hash("")
+    expect(typeof result).toBe("string")
+    expect(result.length).toBeGreaterThan(0)
+  })
+
+  it("handles long CSS strings", () => {
+    const longCSS = "display: flex; ".repeat(100)
+    const result = hash(longCSS)
+    expect(typeof result).toBe("string")
+    // base-36 uint32 is at most 7 chars
+    expect(result.length).toBeLessThan(10)
+  })
+
+  it("handles special characters in CSS", () => {
+    const css = `@media (min-width: 48em) { .foo { content: "hello"; } }`
+    const result = hash(css)
+    expect(typeof result).toBe("string")
+  })
+
+  it("produces consistent hash for FNV-1a offset basis on empty string", () => {
+    // Empty string: h stays at FNV_OFFSET = 2166136261, base36 = "zzzzzz" range
+    const result = hash("")
+    // Just verify it is stable
+    expect(result).toBe(hash(""))
+  })
+
+  it("handles unicode characters", () => {
+    const result = hash('content: "🎉";')
+    expect(typeof result).toBe("string")
+    expect(result.length).toBeGreaterThan(0)
+  })
+
+  it("single character inputs produce distinct hashes", () => {
+    const hashes = new Set<string>()
+    for (let i = 0; i < 26; i++) {
+      hashes.add(hash(String.fromCharCode(97 + i)))
+    }
+    // All 26 lowercase letters should hash to unique values
+    expect(hashes.size).toBe(26)
+  })
+
+  it("hash is unsigned 32-bit (no negative values)", () => {
+    // base-36 of a uint32 is always positive
+    const result = hash("test negative")
+    expect(Number.parseInt(result, 36)).toBeGreaterThanOrEqual(0)
+  })
+})

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

@@ -0,0 +1,205 @@
+/**
+ * Tests for the hybrid injection approach:
+ * - Client (jsdom): shared <style data-pyreon-styler> sheet
+ * - CSS rules present in the CSSOM sheet after insertion
+ * - `boost` option threaded from styled() through to the sheet
+ *
+ * Ported to VNode-level testing: we call the component function directly
+ * 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"
+
+/** 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
+  if (!el?.sheet) return []
+  return Array.from(el.sheet.cssRules).map((r) => r.cssText)
+}
+
+/** Helper: find rules matching a className in the CSSOM. */
+const findRulesFor = (className: string): string[] =>
+  getSheetRules().filter((r) => r.includes(`.${className}`))
+
+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;`
+      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)
+    })
+
+    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]")
+      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)
+    })
+  })
+
+  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)
+    })
+
+    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 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)
+    })
+  })
+
+  describe("createGlobalStyle", () => {
+    it("static global styles are injected into the shared sheet", () => {
+      const GlobalStyle = createGlobalStyle`
+        body { margin: 0; }
+      `
+      // Static global styles are injected at creation time
+      GlobalStyle({})
+
+      const rules = getSheetRules()
+      expect(rules.some((r) => r.includes("margin") && r.includes("0"))).toBe(true)
+    })
+  })
+})
+
+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;`
+      const vnode = Comp({}) as VNode
+
+      // Should return a VNode for <div>, not a <style>
+      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
+
+      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;`
+
+      const vnodeA = A({}) as VNode
+      const vnodeB = B({}) as VNode
+
+      expect(vnodeA.type).toBe("div")
+      expect(vnodeB.type).toBe("span")
+    })
+  })
+
+  describe("createGlobalStyle", () => {
+    it("static global style returns null", () => {
+      const GlobalStyle = createGlobalStyle`body { margin: 0; }`
+      const result = GlobalStyle({})
+
+      expect(result).toBeNull()
+    })
+  })
+})
+
+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;`
+    const vnode = Comp({}) as VNode
+    const className = vnode.props.class as string
+
+    const rules = findRulesFor(className)
+    expect(rules.length).toBeGreaterThanOrEqual(1)
+    // Boost doubles the selector: .pyr-abc.pyr-abc
+    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 })`
+      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(`.${className}.${className}`))).toBe(true)
+  })
+
+  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
+
+    const rules = findRulesFor(className)
+    expect(rules.length).toBeGreaterThanOrEqual(1)
+    // Single selector: .pyr-abc { ... } — NOT .pyr-abc.pyr-abc
+    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 occurrences = selectorPart.split(`.${className}`).length - 1
+    expect(occurrences).toBe(1)
+  })
+
+  it("boosted component with @media splits correctly", () => {
+    const Comp = styled("div", { boost: true })`
+      color: red;
+      @media (min-width: 768px) { font-size: 20px; }
+    `
+    const vnode = Comp({}) as VNode
+    const className = vnode.props.class as string
+
+    const rules = findRulesFor(className)
+    // Should have at least 2 rules: base + @media
+    expect(rules.length).toBeGreaterThanOrEqual(2)
+    // Both base and media rule should use doubled selector
+    for (const rule of rules) {
+      expect(rule).toContain(`.${className}.${className}`)
+    }
+  })
+})

package/src/__tests__/index.ts

@@ -0,0 +1,14 @@
+/**
+ * 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"