@csszyx/dynamic 0.10.10 → 0.10.11

package/dist/index.mjs

@@ -1,2 +1,2 @@
 import '@csszyx/compiler/browser';
-export { a as cleanup, d as dynamic, b as preloadManifest, e as purifySz } from './shared/dynamic.2EVb-qef.mjs';
+export { a as cleanup, d as dynamic, b as preloadManifest, e as purifySz } from './shared/dynamic.BWQj5dWI.mjs';

package/dist/react.d.mts

@@ -46,6 +46,12 @@ interface UseSzReturn {
      */
     sz: (props: SzObject) => string;
 }
+/**
+ * Reset the shared consumer counter and pending timer — test-only. Module
+ * state persists across tests in one suite, so suites that simulate
+ * mount/unmount cycles must start from a known-empty lifecycle.
+ */
+declare function _resetUseSzLifecycle(): void;
 /**
  * React hook for runtime dynamic styling.
  *
@@ -82,5 +88,5 @@ interface CsszyxProviderProps {
  */
 declare function CsszyxProvider({ manifest, children }: CsszyxProviderProps): ReactElement;
 
-export { CsszyxProvider, sz, useSz };
+export { CsszyxProvider, _resetUseSzLifecycle, sz, useSz };
 export type { UseSzReturn };

package/dist/react.mjs

@@ -1,5 +1,5 @@
 import { createContext, useEffect, createElement, useContext, useCallback } from 'react';
-import { d as dynamic, p as preloadManifest, c as cleanup, r as resetManifest, s as setManifestUrl } from './shared/dynamic.2EVb-qef.mjs';
+import { d as dynamic, p as preloadManifest, c as cleanup, r as resetManifest, s as setManifestUrl } from './shared/dynamic.BWQj5dWI.mjs';
 import '@csszyx/compiler/browser';
 
 const CsszyxContext = createContext({
@@ -7,16 +7,30 @@ const CsszyxContext = createContext({
 });
 const sz = dynamic;
 let _cleanupTimer = null;
+let _mountedConsumers = 0;
+function cancelPendingCleanup() {
+  if (_cleanupTimer !== null) {
+    clearTimeout(_cleanupTimer);
+    _cleanupTimer = null;
+  }
+}
+function _resetUseSzLifecycle() {
+  cancelPendingCleanup();
+  _mountedConsumers = 0;
+}
 function useSz() {
   const { manifestUrl } = useContext(CsszyxContext);
   const stableSz = useCallback((props) => dynamic(props), []);
   useEffect(() => {
-    if (_cleanupTimer !== null) {
-      clearTimeout(_cleanupTimer);
-      _cleanupTimer = null;
-    }
+    _mountedConsumers++;
+    cancelPendingCleanup();
     preloadManifest(manifestUrl);
     return () => {
+      _mountedConsumers--;
+      if (_mountedConsumers > 0) {
+        return;
+      }
+      cancelPendingCleanup();
       _cleanupTimer = setTimeout(() => {
         cleanup();
         resetManifest();
@@ -34,4 +48,4 @@ function CsszyxProvider({ manifest, children }) {
   return createElement(CsszyxContext.Provider, { value: { manifestUrl: manifest } }, children);
 }
 
-export { CsszyxProvider, sz, useSz };
+export { CsszyxProvider, _resetUseSzLifecycle, sz, useSz };

package/dist/shared/{dynamic.2EVb-qef.mjs → dynamic.BWQj5dWI.mjs}

@@ -1044,6 +1044,8 @@ function supportsConstructableSheets() {
 let sheets = null;
 let fallbackStyle = null;
 const injected = /* @__PURE__ */ new Set();
+const INJECTED_GROWTH_WARN_THRESHOLD = 5e3;
+let warnedInjectedGrowth = false;
 function wrapForTier(cssRule, tier) {
   if (tier === "base") {
     return cssRule;
@@ -1097,6 +1099,12 @@ function injectRule(className, cssRule, tier = "base") {
     return;
   }
   injected.add(className);
+  if (process.env.NODE_ENV !== "production" && !warnedInjectedGrowth && injected.size >= INJECTED_GROWTH_WARN_THRESHOLD) {
+    warnedInjectedGrowth = true;
+    console.warn(
+      `[csszyx] dynamic() has injected ${INJECTED_GROWTH_WARN_THRESHOLD}+ unique classes this session. Injected CSS rules are never removed, so continuously varying values (e.g. w-[\`\${x}px\`] per animation frame) grow the CSSOM and slow style recalc. Drive continuously changing values through a CSS variable instead.`
+    );
+  }
   if (!cssRule) {
     return;
   }
@@ -1133,6 +1141,7 @@ function cleanup$1() {
     fallbackStyle = null;
   }
   injected.clear();
+  warnedInjectedGrowth = false;
 }
 
 let manifestClasses = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/dynamic",
-  "version": "0.10.10",
+  "version": "0.10.11",
   "description": "Runtime CSS injection engine for @csszyx — injects only CSS not already in the pre-built stylesheet",
   "type": "module",
   "repository": {
@@ -38,7 +38,7 @@
     "node": ">=22.12.0"
   },
   "dependencies": {
-    "@csszyx/compiler": "0.10.10"
+    "@csszyx/compiler": "0.10.11"
   },
   "peerDependencies": {
     "react": ">=17.0.0"