@pyreon/styler 0.11.1 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -24,7 +24,8 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "src"
   ],
   "engines": {
     "node": ">= 22"
@@ -43,11 +44,11 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.1",
-    "@pyreon/reactivity": "^0.11.1"
+    "@pyreon/core": "^0.11.2",
+    "@pyreon/reactivity": "^0.11.2"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.1"
+    "@pyreon/typescript": "^0.11.2"
   }
 }

package/src/ThemeProvider.ts

@@ -0,0 +1,37 @@
+/**
+ * Theme context for styled components.
+ *
+ * Extensible theme interface. Consumers can augment this via module
+ * declaration merging for full strict types:
+ *
+ *   declare module '@pyreon/styler' {
+ *     interface DefaultTheme {
+ *       colors: { primary: string; secondary: string }
+ *       spacing: (n: number) => string
+ *     }
+ *   }
+ */
+import type { VNode, VNodeChild } from "@pyreon/core"
+import { createContext, provide, useContext } from "@pyreon/core"
+
+// biome-ignore lint/suspicious/noEmptyInterface: augmentable via module declaration merging
+export interface DefaultTheme {}
+
+type Theme = DefaultTheme & Record<string, unknown>
+
+export const ThemeContext = createContext<Theme>({} as Theme)
+
+/** Hook to read the current theme from the nearest ThemeProvider. */
+export const useTheme = <T extends object = Theme>(): T => useContext(ThemeContext) as T
+
+/** Provides a theme object to all nested styled components via Pyreon context. */
+export function ThemeProvider({
+  theme,
+  children,
+}: {
+  theme: Theme
+  children?: VNodeChild
+}): VNode | null {
+  provide(ThemeContext, theme)
+  return (children ?? null) as VNode | null
+}

package/src/__tests__/ThemeProvider.test.ts

@@ -0,0 +1,67 @@
+import { popContext } from "@pyreon/core"
+import { afterEach, describe, expect, it } from "vitest"
+import { ThemeContext, ThemeProvider, useTheme } from "../ThemeProvider"
+
+describe("ThemeContext", () => {
+  it("is a Context object with an id", () => {
+    expect(ThemeContext).toBeDefined()
+    expect(ThemeContext.id).toBeDefined()
+  })
+
+  it("has a symbol id for context identification", () => {
+    expect(typeof ThemeContext.id).toBe("symbol")
+  })
+})
+
+describe("ThemeProvider", () => {
+  afterEach(() => {
+    try {
+      popContext()
+    } catch {
+      // Ignore if no context was pushed
+    }
+  })
+
+  it("returns children when provided", () => {
+    const children = "Hello world"
+    const result = ThemeProvider({ theme: {}, children })
+    expect(result).toBe("Hello world")
+  })
+
+  it("returns null when no children are provided", () => {
+    const result = ThemeProvider({ theme: {} })
+    expect(result).toBeNull()
+  })
+
+  it("returns null when children is undefined", () => {
+    const result = ThemeProvider({ theme: {}, children: undefined })
+    expect(result).toBeNull()
+  })
+
+  it("provides theme via context (useTheme returns it)", () => {
+    const theme = { colors: { primary: "red" }, spacing: 8 }
+    ThemeProvider({ theme, children: "child" })
+    const result = useTheme()
+    expect(result).toEqual(theme)
+  })
+})
+
+describe("useTheme", () => {
+  it("is a function", () => {
+    expect(typeof useTheme).toBe("function")
+  })
+
+  it("returns the default theme (empty object) when called outside a provider", () => {
+    const theme = useTheme()
+    expect(theme).toEqual({})
+  })
+
+  it("can be called with a type parameter", () => {
+    interface MyTheme {
+      primary: string
+      spacing: number
+    }
+    const theme = useTheme<MyTheme>()
+    expect(theme).toBeDefined()
+  })
+})

package/src/__tests__/benchmark.bench.ts

@@ -0,0 +1,189 @@
+/**
+ * Benchmark: @pyreon/styler CSS-in-JS operations
+ *
+ * Run: bun vitest bench
+ *
+ * Measures core CSS-in-JS operations:
+ * 1. css() tagged template creation
+ * 2. css() with interpolations
+ * 3. Template resolution to CSS string
+ * 4. Dynamic function interpolation
+ * 5. Hash function throughput
+ * 6. Nested css() composition
+ * 7. styled() component factory
+ * 8. normalizeCSS — Comment Stripping & Cleanup
+ */
+import { bench, describe } from "vitest"
+import { css } from "../css"
+import { hash } from "../hash"
+import { normalizeCSS, resolve } from "../resolve"
+import { styled } from "../styled"
+
+// ============================================================================
+// 1. CSS Tagged Template — Creation Speed
+// ============================================================================
+describe("css() tagged template creation", () => {
+  bench("@pyreon/styler", () => {
+    css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      margin: 8px;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    `
+  })
+})
+
+// ============================================================================
+// 2. CSS Tagged Template with Interpolations
+// ============================================================================
+describe("css() with interpolations", () => {
+  const color = "#ff0000"
+  const size = "16px"
+
+  bench("@pyreon/styler", () => {
+    css`
+      color: ${color};
+      font-size: ${size};
+      display: flex;
+      padding: 8px;
+    `
+  })
+})
+
+// ============================================================================
+// 3. Template Resolution (strings + values -> CSS string)
+// ============================================================================
+describe("template resolution to CSS string", () => {
+  const strings = Object.assign(["display: flex; color: ", "; font-size: ", "; padding: 8px;"], {
+    raw: ["display: flex; color: ", "; font-size: ", "; padding: 8px;"],
+  }) as unknown as TemplateStringsArray
+
+  const values = ["red", "16px"]
+  const props = { theme: { primary: "blue" } }
+
+  bench("@pyreon/styler resolve()", () => {
+    resolve(strings, values, props)
+  })
+})
+
+// ============================================================================
+// 4. Dynamic Interpolation (function interpolations)
+// ============================================================================
+describe("dynamic function interpolation", () => {
+  const props = { theme: { primary: "blue", size: "14px" }, active: true }
+
+  const strings = Object.assign(["color: ", "; font-size: ", "; opacity: ", ";"], {
+    raw: ["color: ", "; font-size: ", "; opacity: ", ";"],
+  }) as unknown as TemplateStringsArray
+
+  const stylerValues = [
+    (p: any) => p.theme.primary,
+    (p: any) => p.theme.size,
+    (p: any) => (p.active ? "1" : "0.5"),
+  ]
+
+  bench("@pyreon/styler resolve()", () => {
+    resolve(strings, stylerValues, props)
+  })
+})
+
+// ============================================================================
+// 5. Hash Function Throughput
+// ============================================================================
+describe("hash function throughput", () => {
+  const shortCSS = "display: flex; color: red;"
+  const mediumCSS =
+    "display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; margin: 0 auto; max-width: 1200px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);"
+  const longCSS = mediumCSS.repeat(5)
+
+  bench("@pyreon/styler FNV-1a (short)", () => {
+    hash(shortCSS)
+  })
+
+  bench("@pyreon/styler FNV-1a (medium)", () => {
+    hash(mediumCSS)
+  })
+
+  bench("@pyreon/styler FNV-1a (long)", () => {
+    hash(longCSS)
+  })
+})
+
+// ============================================================================
+// 6. Nested css() Composition
+// ============================================================================
+describe("nested css() composition", () => {
+  bench("@pyreon/styler", () => {
+    const base = css`display: flex; padding: 8px;`
+    const hover = css`background: #eee;`
+    const result = css`
+      ${base};
+      &:hover { ${hover}; }
+      color: red;
+    `
+    result.toString()
+  })
+})
+
+// ============================================================================
+// 7. Styled Component Creation (factory call)
+// ============================================================================
+describe("styled() component factory", () => {
+  bench("@pyreon/styler", () => {
+    styled("div")`display: flex; color: red; padding: 8px;`
+  })
+})
+
+// ============================================================================
+// 8. normalizeCSS — Comment Stripping & Cleanup
+// ============================================================================
+describe("normalizeCSS", () => {
+  const plain =
+    "  display: flex;  align-items: center;  justify-content: center;  padding: 16px;  margin: 8px;  background-color: #f0f0f0;  border-radius: 4px;  "
+
+  const withBlockComments = `
+    /* -------------------------------------------------------- */
+    /* BASE STATE */
+    /* -------------------------------------------------------- */
+    display: flex; align-items: center; justify-content: center;
+    padding: 16px; margin: 8px; background-color: #f0f0f0;
+    /* -------------------------------------------------------- */
+    /* HOVER STATE */
+    /* -------------------------------------------------------- */
+    &:hover { color: red; background: blue; }
+    /* -------------------------------------------------------- */
+    /* ACTIVE STATE */
+    /* -------------------------------------------------------- */
+    &:active { color: green; }
+  `
+
+  const withLineComments = `
+    // base styles
+    display: flex; align-items: center;
+    // hover override
+    &:hover { color: red; }
+    background: url(https://example.com/img.png);
+  `
+
+  const withSemicolonJunk = "  ; display: flex;; ; color: red; ; font-size: 1rem;; ;  "
+
+  bench("plain CSS (no comments)", () => {
+    normalizeCSS(plain)
+  })
+
+  bench("CSS with /* */ block comments", () => {
+    normalizeCSS(withBlockComments)
+  })
+
+  bench("CSS with // line comments", () => {
+    normalizeCSS(withLineComments)
+  })
+
+  bench("CSS with semicolon junk", () => {
+    normalizeCSS(withSemicolonJunk)
+  })
+})