@pyreon/styler 0.11.6 → 0.11.8

package/lib/index.js

@@ -1,5 +1,5 @@
 import { createContext, h, provide, useContext } from "@pyreon/core";
-import { effect } from "@pyreon/reactivity";
+import { effect, runUntracked } from "@pyreon/reactivity";
 
 //#region src/resolve.ts
 /**
@@ -799,13 +799,15 @@ const createStyledComponent = (tag, strings, values, options) => {
 	const DynamicStyled = (rawProps) => {
 		const theme = useTheme();
 		const $rs = rawProps.$rocketstyle;
+		const $rsState = rawProps.$rocketstate;
 		const isReactiveRS = typeof $rs === "function";
+		const isReactiveState = typeof $rsState === "function";
 		const resolvedRS = isReactiveRS ? $rs() : $rs;
+		const resolvedState = isReactiveState ? $rsState() : $rsState;
 		const cssText = normalizeCSS(resolve(strings, values, {
-			...isReactiveRS ? {
-				...rawProps,
-				$rocketstyle: resolvedRS
-			} : rawProps,
+			...rawProps,
+			...isReactiveRS ? { $rocketstyle: resolvedRS } : {},
+			...isReactiveState ? { $rocketstate: resolvedState } : {},
 			theme
 		}));
 		const initialClassName = cssText.length > 0 ? sheet.insert(cssText, boost) : "";
@@ -827,17 +829,21 @@ const createStyledComponent = (tag, strings, values, options) => {
 		}, 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;
-			}
+			const newState = isReactiveState ? $rsState() : $rsState;
+			runUntracked(() => {
+				const newCss = normalizeCSS(resolve(strings, values, {
+					...rawProps,
+					$rocketstyle: newRS,
+					$rocketstate: newState,
+					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] : []);
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.11.6",
+  "version": "0.11.8",
   "description": "Lightweight CSS-in-JS engine for Pyreon",
   "license": "MIT",
   "repository": {
@@ -41,12 +41,12 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/typescript": "^0.11.6",
+    "@pyreon/typescript": "^0.11.8",
     "@vitus-labs/tools-rolldown": "^1.15.3"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.6",
-    "@pyreon/reactivity": "^0.11.6"
+    "@pyreon/core": "^0.11.8",
+    "@pyreon/reactivity": "^0.11.8"
   },
   "engines": {
     "node": ">= 22"

package/src/styled.tsx

@@ -17,7 +17,7 @@
  */
 import type { ComponentFn, VNode } from '@pyreon/core'
 import { h } from '@pyreon/core'
-import { effect } from '@pyreon/reactivity'
+import { effect, runUntracked } from '@pyreon/reactivity'
 import { buildProps } from './forward'
 import { type Interpolation, normalizeCSS, resolve } from './resolve'
 import { isDynamic } from './shared'
@@ -132,11 +132,22 @@ const createStyledComponent = (
   const DynamicStyled: ComponentFn = (rawProps: Record<string, any>): VNode | null => {
     const theme = useTheme()
     const $rs = rawProps.$rocketstyle
+    const $rsState = rawProps.$rocketstate
     const isReactiveRS = typeof $rs === 'function'
+    const isReactiveState = typeof $rsState === 'function'
 
-    // Resolve initial $rocketstyle value
+    // Resolve initial accessor values — both $rocketstyle and $rocketstate
+    // must be plain objects when passed to resolve(), because .styles()
+    // interpolation functions destructure them directly:
+    //   const { hover, pressed } = $rocketstate.pseudo
+    //   const { hover: hoverStyles } = $rocketstyle
     const resolvedRS = isReactiveRS ? $rs() : $rs
-    const initialProps = isReactiveRS ? { ...rawProps, $rocketstyle: resolvedRS } : rawProps
+    const resolvedState = isReactiveState ? $rsState() : $rsState
+    const initialProps = {
+      ...rawProps,
+      ...(isReactiveRS ? { $rocketstyle: resolvedRS } : {}),
+      ...(isReactiveState ? { $rocketstate: resolvedState } : {}),
+    }
     const cssText = normalizeCSS(resolve(strings, values, { ...initialProps, theme }))
     const initialClassName = cssText.length > 0 ? sheet.insert(cssText, boost) : ''
 
@@ -163,19 +174,36 @@ const createStyledComponent = (
       customFilter,
     )
 
-    // Set up reactive class swap when $rocketstyle is a function accessor
+    // Set up reactive class swap when $rocketstyle is a function accessor.
+    // CRITICAL: only $rs() is tracked. resolve() and DOM mutations run
+    // inside runUntracked() to prevent subscribing to signals read by
+    // interpolation functions (theme properties, context getters, etc.).
+    // Without this, every styled component's effect subscribes to every
+    // signal touched during CSS resolution — causing an exponential
+    // cascade across 50+ components on any signal change.
     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
-        }
+        const newRS = $rs() // TRACKED: subscribes to mode + dimension signals
+        const newState = isReactiveState ? $rsState() : $rsState // TRACKED
+
+        runUntracked(() => {
+          // UNTRACKED: resolve + DOM mutation — no additional subscriptions
+          const newResolvedProps = {
+            ...rawProps,
+            $rocketstyle: newRS,
+            $rocketstate: newState,
+          }
+          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
+          }
+        })
       })
     }