@pyreon/styler 0.11.5 → 0.11.6

package/README.md

@@ -71,7 +71,9 @@ const Text = styled('p')`
 Render as a different element at runtime:
 
 ```ts
-const Box = styled('div')`padding: 16px;`
+const Box = styled('div')`
+  padding: 16px;
+`
 
 // Renders as a <section>
 Box({ as: 'section', children: 'Content' })
@@ -83,7 +85,7 @@ Props prefixed with `$` are not forwarded to the DOM:
 
 ```ts
 const Box = styled('div')`
-  color: ${(p) => p.$active ? 'blue' : 'gray'};
+  color: ${(p) => (p.$active ? 'blue' : 'gray')};
 `
 
 // $active is used for styling but won't appear on the <div>
@@ -122,10 +124,12 @@ Supports conditional patterns:
 ```ts
 const Box = styled('div')`
   display: flex;
-  ${(props) => props.$bordered && css`
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-  `};
+  ${(props) =>
+    props.$bordered &&
+    css`
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+    `};
 `
 ```
 
@@ -253,29 +257,29 @@ const Card = styled('div')`
 
 ### Bundle Size
 
-| Library | Minified | Gzipped |
-|---------|--------:|--------:|
-| goober | 2.32 KB | 1.31 KB |
-| **@pyreon/styler** | **10.13 KB** | **3.81 KB** |
-| styled-components | 44.93 KB | 17.89 KB |
-| @emotion/react + styled | 48.26 KB | 16.59 KB |
+| Library                 |     Minified |     Gzipped |
+| ----------------------- | -----------: | ----------: |
+| goober                  |      2.32 KB |     1.31 KB |
+| **@pyreon/styler**      | **10.13 KB** | **3.81 KB** |
+| styled-components       |     44.93 KB |    17.89 KB |
+| @emotion/react + styled |     48.26 KB |    16.59 KB |
 
 ### Performance (ops/sec, higher is better)
 
-| Benchmark | styler | styled-components | @emotion | goober |
-|-----------|-------:|-------------------:|---------:|-------:|
-| css() creation | **25.2M** | 9.0M | 2.2M | 26K |
-| css() with interpolations | **24.9M** | 5.6M | 2.3M | 28K |
-| Template resolution | **21.4M** | 3.9M | — | — |
-| Nested composition | **8.3M** | 2.2M | 1.4M | 8K |
-| SSR renderToString | **307K** | 69K | 192K | 18K |
-| styled() factory | **17.3M** | 109K | 933K | 18.2M |
+| Benchmark                 |    styler | styled-components | @emotion | goober |
+| ------------------------- | --------: | ----------------: | -------: | -----: |
+| css() creation            | **25.2M** |              9.0M |     2.2M |    26K |
+| css() with interpolations | **24.9M** |              5.6M |     2.3M |    28K |
+| Template resolution       | **21.4M** |              3.9M |        — |      — |
+| Nested composition        |  **8.3M** |              2.2M |     1.4M |     8K |
+| SSR renderToString        |  **307K** |               69K |     192K |    18K |
+| styled() factory          | **17.3M** |              109K |     933K |  18.2M |
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | >= 0.0.1 |
+| Package            | Version  |
+| ------------------ | -------- |
+| @pyreon/core       | >= 0.0.1 |
 | @pyreon/reactivity | >= 0.0.1 |
 
 ## License

package/lib/index.d.ts

@@ -7,7 +7,14 @@ type Theme = DefaultTheme & Record<string, unknown>;
 declare const ThemeContext: _pyreon_core0.Context<Theme>;
 /** Hook to read the current theme from the nearest ThemeProvider. */
 declare const useTheme: <T extends object = Theme>() => T;
-/** Provides a theme object to all nested styled components via Pyreon context. */
+/**
+ * @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
+ *
+ * Provides a theme object to all nested styled components via Pyreon context.
+ *
+ * @deprecated Prefer `<PyreonUI theme={theme}>` which provides theme to
+ * all three context layers (styler, core, mode) in one component.
+ */
 declare function ThemeProvider({
   theme,
   children
@@ -201,7 +208,7 @@ interface StyledOptions {
   boost?: boolean;
 }
 type TagTemplateFn = (strings: TemplateStringsArray, ...values: Interpolation[]) => ComponentFn;
-type HtmlTags = "a" | "abbr" | "address" | "article" | "aside" | "audio" | "b" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "code" | "col" | "colgroup" | "dd" | "details" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "nav" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "u" | "ul" | "video";
+type HtmlTags = 'a' | 'abbr' | 'address' | 'article' | 'aside' | 'audio' | 'b' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'code' | 'col' | 'colgroup' | 'dd' | 'details' | 'div' | 'dl' | 'dt' | 'em' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'mark' | 'menu' | 'meta' | 'nav' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'picture' | 'pre' | 'progress' | 'q' | 'section' | 'select' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'svg' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'tr' | 'u' | 'ul' | 'video';
 type StyledFunction = ((tag: Tag, options?: StyledOptions) => TagTemplateFn) & { [K in HtmlTags]: TagTemplateFn };
 declare const styled: StyledFunction;
 //#endregion

package/lib/index.js

@@ -1,4 +1,5 @@
 import { createContext, h, provide, useContext } from "@pyreon/core";
+import { effect } from "@pyreon/reactivity";
 
 //#region src/resolve.ts
 /**
@@ -689,7 +690,14 @@ const createSheet = (options) => new StyleSheet(options);
 const ThemeContext = createContext({});
 /** Hook to read the current theme from the nearest ThemeProvider. */
 const useTheme = () => useContext(ThemeContext);
-/** Provides a theme object to all nested styled components via Pyreon context. */
+/**
+* @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
+*
+* Provides a theme object to all nested styled components via Pyreon context.
+*
+* @deprecated Prefer `<PyreonUI theme={theme}>` which provides theme to
+* all three context layers (styler, core, mode) in one component.
+*/
 function ThemeProvider({ theme, children }) {
 	provide(ThemeContext, theme);
 	return children ?? null;
@@ -790,13 +798,48 @@ const createStyledComponent = (tag, strings, values, options) => {
 	}
 	const DynamicStyled = (rawProps) => {
 		const theme = useTheme();
+		const $rs = rawProps.$rocketstyle;
+		const isReactiveRS = typeof $rs === "function";
+		const resolvedRS = isReactiveRS ? $rs() : $rs;
 		const cssText = normalizeCSS(resolve(strings, values, {
-			...rawProps,
+			...isReactiveRS ? {
+				...rawProps,
+				$rocketstyle: resolvedRS
+			} : rawProps,
 			theme
 		}));
-		const className = cssText.length > 0 ? sheet.insert(cssText, boost) : "";
+		const initialClassName = cssText.length > 0 ? sheet.insert(cssText, boost) : "";
 		const finalTag = rawProps.as || tag;
-		return h(finalTag, buildProps(rawProps, className, typeof finalTag === "string", customFilter), ...Array.isArray(rawProps.children) ? rawProps.children : rawProps.children != null ? [rawProps.children] : []);
+		const isDOM = typeof finalTag === "string";
+		let el = null;
+		let currentClassName = initialClassName;
+		const originalRef = rawProps.ref;
+		const refCallback = (node) => {
+			el = node;
+			if (originalRef) {
+				if (typeof originalRef === "function") originalRef(node);
+				else if (originalRef && typeof originalRef === "object") originalRef.current = node;
+			}
+		};
+		const finalProps = buildProps({
+			...rawProps,
+			ref: isReactiveRS ? refCallback : rawProps.ref
+		}, initialClassName, isDOM, customFilter);
+		if (isReactiveRS) effect(() => {
+			const newRS = $rs();
+			const newCss = normalizeCSS(resolve(strings, values, {
+				...rawProps,
+				$rocketstyle: newRS,
+				theme
+			}));
+			const newClass = newCss.length > 0 ? sheet.insert(newCss, boost) : "";
+			if (el && newClass !== currentClassName) {
+				if (currentClassName) el.classList.remove(currentClassName);
+				if (newClass) el.classList.add(newClass);
+				currentClassName = newClass;
+			}
+		});
+		return h(finalTag, finalProps, ...Array.isArray(rawProps.children) ? rawProps.children : rawProps.children != null ? [rawProps.children] : []);
 	};
 	DynamicStyled.displayName = `styled(${getDisplayName(tag)})`;
 	return DynamicStyled;

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.11.5",
+  "version": "0.11.6",
+  "description": "Lightweight CSS-in-JS engine for Pyreon",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/styler"
   },
-  "description": "Lightweight CSS-in-JS engine for Pyreon",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,18 +34,21 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/typescript": "^0.11.6",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5"
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/ThemeProvider.ts

@@ -11,8 +11,8 @@
  *     }
  *   }
  */
-import type { VNode, VNodeChild } from "@pyreon/core"
-import { createContext, provide, useContext } from "@pyreon/core"
+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 {}
@@ -24,7 +24,14 @@ 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. */
+/**
+ * @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
+ *
+ * Provides a theme object to all nested styled components via Pyreon context.
+ *
+ * @deprecated Prefer `<PyreonUI theme={theme}>` which provides theme to
+ * all three context layers (styler, core, mode) in one component.
+ */
 export function ThemeProvider({
   theme,
   children,

package/src/__tests__/ThemeProvider.test.ts

@@ -1,19 +1,19 @@
-import { popContext } from "@pyreon/core"
-import { afterEach, describe, expect, it } from "vitest"
-import { ThemeContext, ThemeProvider, useTheme } from "../ThemeProvider"
+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", () => {
+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")
+  it('has a symbol id for context identification', () => {
+    expect(typeof ThemeContext.id).toBe('symbol')
   })
 })
 
-describe("ThemeProvider", () => {
+describe('ThemeProvider', () => {
   afterEach(() => {
     try {
       popContext()
@@ -22,41 +22,41 @@ describe("ThemeProvider", () => {
     }
   })
 
-  it("returns children when provided", () => {
-    const children = "Hello world"
+  it('returns children when provided', () => {
+    const children = 'Hello world'
     const result = ThemeProvider({ theme: {}, children })
-    expect(result).toBe("Hello world")
+    expect(result).toBe('Hello world')
   })
 
-  it("returns null when no children are provided", () => {
+  it('returns null when no children are provided', () => {
     const result = ThemeProvider({ theme: {} })
     expect(result).toBeNull()
   })
 
-  it("returns null when children is undefined", () => {
+  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" })
+  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")
+describe('useTheme', () => {
+  it('is a function', () => {
+    expect(typeof useTheme).toBe('function')
   })
 
-  it("returns the default theme (empty object) when called outside a provider", () => {
+  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", () => {
+  it('can be called with a type parameter', () => {
     interface MyTheme {
       primary: string
       spacing: number

package/src/__tests__/benchmark.bench.ts

@@ -13,17 +13,17 @@
  * 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"
+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", () => {
+describe('css() tagged template creation', () => {
+  bench('@pyreon/styler', () => {
     css`
       display: flex;
       align-items: center;
@@ -32,7 +32,7 @@ describe("css() tagged template creation", () => {
       margin: 8px;
       background-color: #f0f0f0;
       border-radius: 4px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     `
   })
 })
@@ -40,11 +40,11 @@ describe("css() tagged template creation", () => {
 // ============================================================================
 // 2. CSS Tagged Template with Interpolations
 // ============================================================================
-describe("css() with interpolations", () => {
-  const color = "#ff0000"
-  const size = "16px"
+describe('css() with interpolations', () => {
+  const color = '#ff0000'
+  const size = '16px'
 
-  bench("@pyreon/styler", () => {
+  bench('@pyreon/styler', () => {
     css`
       color: ${color};
       font-size: ${size};
@@ -57,15 +57,15 @@ describe("css() with interpolations", () => {
 // ============================================================================
 // 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;"],
+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" } }
+  const values = ['red', '16px']
+  const props = { theme: { primary: 'blue' } }
 
-  bench("@pyreon/styler resolve()", () => {
+  bench('@pyreon/styler resolve()', () => {
     resolve(strings, values, props)
   })
 })
@@ -73,20 +73,20 @@ describe("template resolution to CSS string", () => {
 // ============================================================================
 // 4. Dynamic Interpolation (function interpolations)
 // ============================================================================
-describe("dynamic function interpolation", () => {
-  const props = { theme: { primary: "blue", size: "14px" }, active: true }
+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: ", ";"],
+  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"),
+    (p: any) => (p.active ? '1' : '0.5'),
   ]
 
-  bench("@pyreon/styler resolve()", () => {
+  bench('@pyreon/styler resolve()', () => {
     resolve(strings, stylerValues, props)
   })
 })
@@ -94,21 +94,21 @@ describe("dynamic function interpolation", () => {
 // ============================================================================
 // 5. Hash Function Throughput
 // ============================================================================
-describe("hash function throughput", () => {
-  const shortCSS = "display: flex; color: red;"
+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);"
+    '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)", () => {
+  bench('@pyreon/styler FNV-1a (short)', () => {
     hash(shortCSS)
   })
 
-  bench("@pyreon/styler FNV-1a (medium)", () => {
+  bench('@pyreon/styler FNV-1a (medium)', () => {
     hash(mediumCSS)
   })
 
-  bench("@pyreon/styler FNV-1a (long)", () => {
+  bench('@pyreon/styler FNV-1a (long)', () => {
     hash(longCSS)
   })
 })
@@ -116,13 +116,20 @@ describe("hash function throughput", () => {
 // ============================================================================
 // 6. Nested css() Composition
 // ============================================================================
-describe("nested css() composition", () => {
-  bench("@pyreon/styler", () => {
-    const base = css`display: flex; padding: 8px;`
-    const hover = css`background: #eee;`
+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}; }
+      &:hover {
+        ${hover};
+      }
       color: red;
     `
     result.toString()
@@ -132,18 +139,22 @@ describe("nested css() composition", () => {
 // ============================================================================
 // 7. Styled Component Creation (factory call)
 // ============================================================================
-describe("styled() component factory", () => {
-  bench("@pyreon/styler", () => {
-    styled("div")`display: flex; color: red; padding: 8px;`
+describe('styled() component factory', () => {
+  bench('@pyreon/styler', () => {
+    styled('div')`
+      display: flex;
+      color: red;
+      padding: 8px;
+    `
   })
 })
 
 // ============================================================================
 // 8. normalizeCSS — Comment Stripping & Cleanup
 // ============================================================================
-describe("normalizeCSS", () => {
+describe('normalizeCSS', () => {
   const plain =
-    "  display: flex;  align-items: center;  justify-content: center;  padding: 16px;  margin: 8px;  background-color: #f0f0f0;  border-radius: 4px;  "
+    '  display: flex;  align-items: center;  justify-content: center;  padding: 16px;  margin: 8px;  background-color: #f0f0f0;  border-radius: 4px;  '
 
   const withBlockComments = `
     /* -------------------------------------------------------- */
@@ -169,21 +180,21 @@ describe("normalizeCSS", () => {
     background: url(https://example.com/img.png);
   `
 
-  const withSemicolonJunk = "  ; display: flex;; ; color: red; ; font-size: 1rem;; ;  "
+  const withSemicolonJunk = '  ; display: flex;; ; color: red; ; font-size: 1rem;; ;  '
 
-  bench("plain CSS (no comments)", () => {
+  bench('plain CSS (no comments)', () => {
     normalizeCSS(plain)
   })
 
-  bench("CSS with /* */ block comments", () => {
+  bench('CSS with /* */ block comments', () => {
     normalizeCSS(withBlockComments)
   })
 
-  bench("CSS with // line comments", () => {
+  bench('CSS with // line comments', () => {
     normalizeCSS(withLineComments)
   })
 
-  bench("CSS with semicolon junk", () => {
+  bench('CSS with semicolon junk', () => {
     normalizeCSS(withSemicolonJunk)
   })
 })