@pyreon/styler 0.11.4 → 0.11.6

package/src/globalStyle.ts

@@ -10,11 +10,11 @@
  *     *, *::before, *::after { box-sizing: border-box; }
  *   `
  */
-import type { ComponentFn } from "@pyreon/core"
-import { type Interpolation, normalizeCSS, resolve } from "./resolve"
-import { isDynamic } from "./shared"
-import { sheet } from "./sheet"
-import { useTheme } from "./ThemeProvider"
+import type { ComponentFn } from '@pyreon/core'
+import { type Interpolation, normalizeCSS, resolve } from './resolve'
+import { isDynamic } from './shared'
+import { sheet } from './sheet'
+import { useTheme } from './ThemeProvider'
 
 export const createGlobalStyle = (
   strings: TemplateStringsArray,

package/src/index.ts

@@ -1,15 +1,15 @@
-export { css } from "./css"
-export { buildProps, filterProps } from "./forward"
-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 { isDynamic } from "./shared"
-export type { StyleSheetOptions } from "./sheet"
-export { createSheet, StyleSheet, sheet } from "./sheet"
-export type { StyledFunction, StyledOptions } from "./styled"
-export { styled } from "./styled"
-export type { DefaultTheme } from "./ThemeProvider"
-export { ThemeContext, ThemeProvider, useTheme } from "./ThemeProvider"
-export { useCSS } from "./useCSS"
+export { css } from './css'
+export { buildProps, filterProps } from './forward'
+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 { isDynamic } from './shared'
+export type { StyleSheetOptions } from './sheet'
+export { createSheet, StyleSheet, sheet } from './sheet'
+export type { StyledFunction, StyledOptions } from './styled'
+export { styled } from './styled'
+export type { DefaultTheme } from './ThemeProvider'
+export { ThemeContext, ThemeProvider, useTheme } from './ThemeProvider'
+export { useCSS } from './useCSS'

package/src/keyframes.ts

@@ -9,9 +9,9 @@
  *   `
  *   // fadeIn === "pyr-kf-abc123" (deterministic, hash-based)
  */
-import { hash } from "./hash"
-import { type Interpolation, normalizeCSS, resolve } from "./resolve"
-import { sheet } from "./sheet"
+import { hash } from './hash'
+import { type Interpolation, normalizeCSS, resolve } from './resolve'
+import { sheet } from './sheet'
 
 class KeyframesResult {
   readonly name: string

package/src/resolve.ts

@@ -4,7 +4,7 @@
  * primitive values.
  */
 
-import type { DefaultTheme } from "./ThemeProvider"
+import type { DefaultTheme } from './ThemeProvider'
 
 export type Interpolation =
   | string
@@ -47,19 +47,19 @@ export const resolve = (
     const v = values[i]
     const s = strings[i + 1] as string
     // Inline the most common value types to avoid function call overhead.
-    if (typeof v === "function") {
+    if (typeof v === 'function') {
       const r = v(props)
       result +=
-        (typeof r === "string"
+        (typeof r === 'string'
           ? r
           : r == null || r === false || r === true
-            ? ""
+            ? ''
             : resolveValue(r as Interpolation, props)) + s
     } else if (v == null || v === false || v === true) {
       result += s
-    } else if (typeof v === "string") {
+    } else if (typeof v === 'string') {
       result += v + s
-    } else if (typeof v === "number") {
+    } else if (typeof v === 'number') {
       result += v + s
     } else {
       result += resolveValue(v, props) + s
@@ -87,7 +87,7 @@ export const normalizeCSS = (css: string): string => {
   if (cached !== undefined) return cached
 
   const len = css.length
-  let out = ""
+  let out = ''
   let space = false // pending space to emit before next non-whitespace char
   let last = 0 // charCode of last char written to output (0 = nothing yet)
 
@@ -96,7 +96,7 @@ export const normalizeCSS = (css: string): string => {
 
     // /* block comment */
     if (c === 47 /* / */ && css.charCodeAt(i + 1) === 42 /* * */) {
-      const end = css.indexOf("*/", i + 2)
+      const end = css.indexOf('*/', i + 2)
       i = end === -1 ? len : end + 1
       space = true
       continue
@@ -104,7 +104,7 @@ export const normalizeCSS = (css: string): string => {
 
     // // line comment (but not :// in URLs)
     if (c === 47 /* / */ && css.charCodeAt(i + 1) === 47 /* / */ && last !== 58 /* : */) {
-      const nl = css.indexOf("\n", i + 2)
+      const nl = css.indexOf('\n', i + 2)
       i = nl === -1 ? len : nl
       space = true
       continue
@@ -122,13 +122,13 @@ export const normalizeCSS = (css: string): string => {
         continue
       }
       space = false
-      out += ";"
+      out += ';'
       last = 59
       continue
     }
 
     // Regular char — emit pending space (but not at start of output)
-    if (space && last !== 0) out += " "
+    if (space && last !== 0) out += ' '
     space = false
 
     out += css[i]
@@ -151,17 +151,17 @@ export const normalizeCSS = (css: string): string => {
 
 export const resolveValue = (value: Interpolation, props: Record<string, any>): string => {
   // null, undefined, false, true → empty (enables conditional: ${cond && css`...`})
-  if (value == null || value === false || value === true) return ""
+  if (value == null || value === false || value === true) return ''
 
   // function interpolation → call with props/theme context, resolve result
-  if (typeof value === "function") return resolveValue(value(props) as Interpolation, props)
+  if (typeof value === 'function') return resolveValue(value(props) as Interpolation, props)
 
   // nested CSSResult → recursively resolve
   if (value instanceof CSSResult) return resolve(value.strings, value.values, props)
 
   // array of results (e.g. from makeItResponsive's breakpoints.map())
   if (Array.isArray(value)) {
-    let arrayResult = ""
+    let arrayResult = ''
     for (let i = 0; i < value.length; i++) {
       arrayResult += resolveValue(value[i], props)
     }

package/src/shared.ts

@@ -1,11 +1,11 @@
 /**
  * Shared utilities used across multiple modules.
  */
-import { CSSResult, type Interpolation } from "./resolve"
+import { CSSResult, type Interpolation } from './resolve'
 
 /** Check if an interpolation value is dynamic (contains functions or nested dynamic CSSResults). */
 export const isDynamic = (v: Interpolation): boolean => {
-  if (typeof v === "function") return true
+  if (typeof v === 'function') return true
   if (Array.isArray(v)) return v.some(isDynamic)
   if (v instanceof CSSResult) return v.values.some(isDynamic)
   return false

package/src/sheet.ts

@@ -5,11 +5,11 @@
  * Media queries (@media), @supports, and @container blocks nested inside
  * component CSS are automatically extracted into separate top-level rules.
  */
-import { hash } from "./hash"
-import { clearNormCache } from "./resolve"
+import { hash } from './hash'
+import { clearNormCache } from './resolve'
 
-const PREFIX = "pyr"
-const ATTR = "data-pyreon-styler"
+const PREFIX = 'pyr'
+const ATTR = 'data-pyreon-styler'
 const DEFAULT_MAX_CACHE_SIZE = 10000
 
 export interface StyleSheetOptions {
@@ -31,7 +31,7 @@ export class StyleSheet {
   constructor(options: StyleSheetOptions = {}) {
     this.maxCacheSize = options.maxCacheSize ?? DEFAULT_MAX_CACHE_SIZE
     this.layer = options.layer
-    this.isSSR = typeof document === "undefined"
+    this.isSSR = typeof document === 'undefined'
     if (!this.isSSR) this.mount()
   }
 
@@ -43,8 +43,8 @@ export class StyleSheet {
       this.sheet = existing.sheet ?? null
       this.hydrateFromTag(existing)
     } else {
-      const el = document.createElement("style")
-      el.setAttribute(ATTR, "")
+      const el = document.createElement('style')
+      el.setAttribute(ATTR, '')
       document.head.appendChild(el)
       this.sheet = el.sheet ?? null
     }
@@ -61,8 +61,8 @@ export class StyleSheet {
 
   /** Extract className from a selector like ".pyr-abc" or ".pyr-abc.pyr-abc" → "pyr-abc" */
   private extractClassName(selectorText: string): string | null {
-    if (selectorText[0] !== ".") return null
-    const dotIdx = selectorText.indexOf(".", 1)
+    if (selectorText[0] !== '.') return null
+    const dotIdx = selectorText.indexOf('.', 1)
     return dotIdx > 0 ? selectorText.slice(1, dotIdx) : selectorText.slice(1)
   }
 
@@ -81,7 +81,7 @@ export class StyleSheet {
       }
 
       // Handle split @media rules that wrap our selectors
-      if (typeof CSSMediaRule !== "undefined" && rule instanceof CSSMediaRule) {
+      if (typeof CSSMediaRule !== 'undefined' && rule instanceof CSSMediaRule) {
         for (let j = 0; j < rule.cssRules.length; j++) {
           const inner = rule.cssRules[j]
           if (inner instanceof CSSStyleRule) {
@@ -114,7 +114,7 @@ export class StyleSheet {
   // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex logic is inherent to this function
   private splitAtRules(cssText: string, selector: string): { base: string; atRules: string[] } {
     // Fast path: no at-rules to split
-    if (cssText.indexOf("@") === -1) return { base: cssText, atRules: [] }
+    if (cssText.indexOf('@') === -1) return { base: cssText, atRules: [] }
 
     const atRules: string[] = []
     const baseParts: string[] = []
@@ -125,13 +125,13 @@ export class StyleSheet {
     for (let i = 0; i < cssText.length; i++) {
       const ch = cssText[i]
 
-      if (ch === "{") {
+      if (ch === '{') {
         depth++
-      } else if (ch === "}") {
+      } else if (ch === '}') {
         depth--
         if (depth === 0 && atStart >= 0) {
           // End of a tracked at-rule block — extract and wrap with selector
-          const openBrace = cssText.indexOf("{", atStart)
+          const openBrace = cssText.indexOf('{', atStart)
           const atPrefix = cssText.slice(atStart, openBrace).trim()
           const innerCSS = cssText.slice(openBrace + 1, i).trim()
           if (innerCSS) {
@@ -140,7 +140,7 @@ export class StyleSheet {
           atStart = -1
           lastBase = i + 1
         }
-      } else if (depth === 0 && ch === "@" && atStart < 0) {
+      } else if (depth === 0 && ch === '@' && atStart < 0) {
         // Check if this starts a splittable at-rule (not @keyframes, @font-face, etc.)
         const remaining = cssText.slice(i, i + 20)
         if (/^@(?:media|supports|container)\b/.test(remaining)) {
@@ -161,7 +161,7 @@ export class StyleSheet {
     // If no at-rules were found, return original unchanged
     if (atRules.length === 0) return { base: cssText, atRules: [] }
 
-    return { base: baseParts.join(" "), atRules }
+    return { base: baseParts.join(' '), atRules }
   }
 
   /**
@@ -221,9 +221,9 @@ export class StyleSheet {
         try {
           this.sheet.insertRule(rule, this.sheet.cssRules.length)
         } catch (_e) {
-          if (process.env.NODE_ENV !== "production") {
+          if (process.env.NODE_ENV !== 'production') {
             // biome-ignore lint/suspicious/noConsole: dev-only CSS rule insertion warning
-            console.warn("[styler] Failed to insert CSS rule:", rule, _e)
+            console.warn('[styler] Failed to insert CSS rule:', rule, _e)
           }
         }
       }
@@ -248,7 +248,7 @@ export class StyleSheet {
       try {
         this.sheet.insertRule(rule, this.sheet.cssRules.length)
       } catch (_e) {
-        if (process.env.NODE_ENV !== "production") {
+        if (process.env.NODE_ENV !== 'production') {
           // silently ignore invalid CSS rules in production
         }
       }
@@ -266,8 +266,8 @@ export class StyleSheet {
 
     for (let i = 0; i < cssText.length; i++) {
       const ch = cssText[i]
-      if (ch === "{") depth++
-      else if (ch === "}") {
+      if (ch === '{') depth++
+      else if (ch === '}') {
         depth--
         if (depth === 0) {
           const rule = cssText.slice(start, i + 1).trim()
@@ -298,9 +298,9 @@ export class StyleSheet {
         try {
           this.sheet.insertRule(rule, this.sheet.cssRules.length)
         } catch (_e) {
-          if (process.env.NODE_ENV !== "production") {
+          if (process.env.NODE_ENV !== 'production') {
             // biome-ignore lint/suspicious/noConsole: dev-only CSS rule insertion warning
-            console.warn("[styler] Failed to insert global CSS rule:", rule, _e)
+            console.warn('[styler] Failed to insert global CSS rule:', rule, _e)
           }
         }
       }
@@ -309,13 +309,13 @@ export class StyleSheet {
 
   /** Returns collected CSS for SSR as a complete `<style>` tag string. */
   getStyleTag(): string {
-    const css = this.ssrBuffer.join("").replace(/<\/style/gi, "<\\/style")
+    const css = this.ssrBuffer.join('').replace(/<\/style/gi, '<\\/style')
     return `<style ${ATTR}="">${css}</style>`
   }
 
   /** Returns collected CSS rules as a raw string (useful for streaming SSR). */
   getStyles(): string {
-    return this.ssrBuffer.join("")
+    return this.ssrBuffer.join('')
   }
 
   /** Reset SSR buffer and cache (call between server requests). */
@@ -363,7 +363,7 @@ export class StyleSheet {
 
     const finalRules = this.layer ? allRules.map((r) => `@layer ${this.layer}{${r}}`) : allRules
 
-    return { className, rules: finalRules.join("") }
+    return { className, rules: finalRules.join('') }
   }
 
   /** Check if a className is already in the cache. O(1) Map lookup. */

package/src/styled.tsx

@@ -15,13 +15,14 @@
  * through without transformation, so `&:hover`, `&::before`, etc. work
  * as-is in browsers supporting CSS Nesting (all modern browsers).
  */
-import type { ComponentFn, VNode } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import { buildProps } from "./forward"
-import { type Interpolation, normalizeCSS, resolve } from "./resolve"
-import { isDynamic } from "./shared"
-import { sheet } from "./sheet"
-import { useTheme } from "./ThemeProvider"
+import type { ComponentFn, VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { effect } from '@pyreon/reactivity'
+import { buildProps } from './forward'
+import { type Interpolation, normalizeCSS, resolve } from './resolve'
+import { isDynamic } from './shared'
+import { sheet } from './sheet'
+import { useTheme } from './ThemeProvider'
 
 type Tag = string | ComponentFn<any>
 
@@ -37,9 +38,9 @@ export interface StyledOptions {
 }
 
 const getDisplayName = (tag: Tag): string =>
-  typeof tag === "string"
+  typeof tag === 'string'
     ? tag
-    : (tag as ComponentFn<any> & { displayName?: string }).displayName || tag.name || "Component"
+    : (tag as ComponentFn<any> & { displayName?: string }).displayName || tag.name || 'Component'
 
 // Component cache: same template literal + tag + no options → same component.
 // WeakMap on `strings` (TemplateStringsArray is object-identity per source location).
@@ -86,11 +87,11 @@ const createStyledComponent = (
     const cssText = normalizeCSS(raw)
     const hasCss = cssText.length > 0
 
-    const staticClassName = hasCss ? sheet.insert(cssText, boost) : ""
+    const staticClassName = hasCss ? sheet.insert(cssText, boost) : ''
 
     const StaticStyled: ComponentFn = (rawProps: Record<string, any>): VNode | null => {
       const finalTag = rawProps.as || tag
-      const isDOM = typeof finalTag === "string"
+      const isDOM = typeof finalTag === 'string'
       const finalProps = buildProps(rawProps, staticClassName, isDOM, customFilter)
 
       return h(
@@ -124,17 +125,61 @@ const createStyledComponent = (
   }
 
   // DYNAMIC PATH: resolve CSS on every render with theme/props.
+  // When $rocketstyle is a function accessor (from rocketstyle's
+  // EnhancedComponent), we resolve it initially for the first class,
+  // then set up an effect to reactively swap classes when mode changes.
+  // This avoids VNode remounting — only classList updates on the DOM element.
   const DynamicStyled: ComponentFn = (rawProps: Record<string, any>): VNode | null => {
     const theme = useTheme()
-    const allProps = { ...rawProps, theme }
-    const cssText = normalizeCSS(resolve(strings, values, allProps))
+    const $rs = rawProps.$rocketstyle
+    const isReactiveRS = typeof $rs === 'function'
 
-    const className = cssText.length > 0 ? sheet.insert(cssText, boost) : ""
+    // Resolve initial $rocketstyle value
+    const resolvedRS = isReactiveRS ? $rs() : $rs
+    const initialProps = isReactiveRS ? { ...rawProps, $rocketstyle: resolvedRS } : rawProps
+    const cssText = normalizeCSS(resolve(strings, values, { ...initialProps, theme }))
+    const initialClassName = cssText.length > 0 ? sheet.insert(cssText, boost) : ''
 
     const finalTag = rawProps.as || tag
-    const isDOM = typeof finalTag === "string"
-    const finalProps = buildProps(rawProps, className, isDOM, customFilter)
+    const isDOM = typeof finalTag === 'string'
 
+    // Track mounted element for reactive class updates
+    let el: Element | null = null
+    let currentClassName = initialClassName
+
+    const originalRef = rawProps.ref
+    const refCallback = (node: Element | null) => {
+      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,
+    )
+
+    // Set up reactive class swap when $rocketstyle is a function accessor
+    if (isReactiveRS) {
+      effect(() => {
+        const newRS = $rs() // reactive read — tracks mode dependency
+        const newResolvedProps = { ...rawProps, $rocketstyle: newRS }
+        const newCss = normalizeCSS(resolve(strings, values, { ...newResolvedProps, 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
+        }
+      })
+    }
+
+    // STATIC VNode — created once, never remounted on mode change
     return h(
       finalTag as string,
       finalProps,
@@ -171,89 +216,89 @@ const proxyCache = new Map<string, (...args: any[]) => any>()
 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"
+  | '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'
 
 export type StyledFunction = ((tag: Tag, options?: StyledOptions) => TagTemplateFn) & {
   [K in HtmlTags]: TagTemplateFn
@@ -264,7 +309,7 @@ export type StyledFunction = ((tag: Tag, options?: StyledOptions) => TagTemplate
 // Proxy target uses `as any` because TS can't resolve Proxy<StyledFunction> with mapped types
 export const styled: StyledFunction = new Proxy(styledFactory as any, {
   get(_target: unknown, prop: string) {
-    if (prop === "prototype" || prop === "$$typeof") return undefined
+    if (prop === 'prototype' || prop === '$$typeof') return undefined
     // styled.div`...`, styled.span`...`, etc.
     let fn = proxyCache.get(prop)
     if (!fn) {

package/src/useCSS.ts

@@ -5,16 +5,16 @@
  * Use this when you need computed CSS class names on plain elements
  * without the overhead of a styled component layer.
  */
-import { type CSSResult, normalizeCSS, resolve } from "./resolve"
-import { sheet } from "./sheet"
-import { useTheme } from "./ThemeProvider"
+import { type CSSResult, normalizeCSS, resolve } from './resolve'
+import { sheet } from './sheet'
+import { useTheme } from './ThemeProvider'
 
 export function useCSS(template: CSSResult, props?: Record<string, any>, boost?: boolean): string {
   const theme = useTheme()
   const allProps = theme ? { ...props, theme } : (props ?? {})
   const cssText = normalizeCSS(resolve(template.strings, template.values, allProps))
 
-  if (!cssText.trim()) return ""
+  if (!cssText.trim()) return ''
 
   return sheet.insert(cssText, boost)
 }