@pyreon/styler 0.11.6 → 0.11.7

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
 /**
@@ -827,17 +827,19 @@ 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;
-			}
+			runUntracked(() => {
+				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] : []);
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.11.6",
+  "version": "0.11.7",
   "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.7",
     "@vitus-labs/tools-rolldown": "^1.15.3"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.6",
-    "@pyreon/reactivity": "^0.11.6"
+    "@pyreon/core": "^0.11.7",
+    "@pyreon/reactivity": "^0.11.7"
   },
   "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'
@@ -163,19 +163,31 @@ 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 signal only
+
+        runUntracked(() => {
+          // UNTRACKED: resolve + DOM mutation — no additional subscriptions
+          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
+          }
+        })
       })
     }