@pyreon/styler 0.11.7 → 0.11.9

package/lib/index.js

@@ -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,10 +829,12 @@ const createStyledComponent = (tag, strings, values, options) => {
 		}, initialClassName, isDOM, customFilter);
 		if (isReactiveRS) effect(() => {
 			const newRS = $rs();
+			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) : "";

package/package.json

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

package/src/styled.tsx

@@ -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) : ''
 
@@ -172,11 +183,16 @@ const createStyledComponent = (
     // cascade across 50+ components on any signal change.
     if (isReactiveRS) {
       effect(() => {
-        const newRS = $rs() // TRACKED: subscribes to mode signal only
+        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 }
+          const newResolvedProps = {
+            ...rawProps,
+            $rocketstyle: newRS,
+            $rocketstate: newState,
+          }
           const newCss = normalizeCSS(
             resolve(strings, values, { ...newResolvedProps, theme }),
           )