fix(tasty): injector optimizations * 2

Author: tenphi

src/tasty/injector/sheet-manager.test.ts

@@ -341,7 +341,7 @@ describe('SheetManager', () => {
       expect(registry.rules.has(className)).toBe(true);
     });
 
-    it('should schedule bulk cleanup when threshold is exceeded', () => {
+    it('should schedule bulk cleanup when threshold is exceeded', (done) => {
       const manager = new SheetManager({ unusedStylesThreshold: 2 });
       const registry = manager.getRegistry(document);
 
@@ -363,8 +363,16 @@ describe('SheetManager', () => {
       // Check if cleanup should be scheduled
       manager.checkCleanupNeeded(registry);
 
-      // Should have scheduled bulk cleanup
-      expect(registry.bulkCleanupTimeout).toBeTruthy();
+      // Should have scheduled cleanup check timeout immediately
+      expect(registry.cleanupCheckTimeout).toBeTruthy();
+
+      // Wait for async cleanup check to complete
+      setTimeout(() => {
+        // Should have scheduled bulk cleanup after the check
+        expect(registry.bulkCleanupTimeout).toBeTruthy();
+        expect(registry.cleanupCheckTimeout).toBe(null);
+        done();
+      }, 10);
     });
   });
 
@@ -441,7 +449,7 @@ describe('SheetManager', () => {
   });
 
   describe('bulk cleanup scheduling', () => {
-    it('should use requestIdleCallback when idleCleanup is enabled', () => {
+    it('should use requestIdleCallback when idleCleanup is enabled', (done) => {
       // Mock requestIdleCallback
       const mockRequestIdleCallback = jest.fn((callback) => {
         return 123; // mock handle - don't execute callback immediately
@@ -471,15 +479,23 @@ describe('SheetManager', () => {
       registry.refCounts.set('test-class', 0);
       manager.checkCleanupNeeded(registry);
 
-      expect(mockRequestIdleCallback).toHaveBeenCalled();
-      expect(registry.bulkCleanupTimeout).toBe(123);
+      // Should have scheduled cleanup check timeout immediately
+      expect(registry.cleanupCheckTimeout).toBeTruthy();
 
-      // Cleanup mocks
-      delete (global as any).requestIdleCallback;
-      delete (global as any).cancelIdleCallback;
+      // Wait for async cleanup check to complete
+      setTimeout(() => {
+        expect(mockRequestIdleCallback).toHaveBeenCalled();
+        expect(registry.bulkCleanupTimeout).toBe(123);
+        expect(registry.cleanupCheckTimeout).toBe(null);
+
+        // Cleanup mocks
+        delete (global as any).requestIdleCallback;
+        delete (global as any).cancelIdleCallback;
+        done();
+      }, 10);
     });
 
-    it('should fallback to setTimeout when requestIdleCallback is not available', () => {
+    it('should fallback to setTimeout when requestIdleCallback is not available', (done) => {
       // Ensure requestIdleCallback is not available
       delete (global as any).requestIdleCallback;
 
@@ -506,9 +522,20 @@ describe('SheetManager', () => {
       registry.refCounts.set('test-class', 0);
       manager.checkCleanupNeeded(registry);
 
-      expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 100);
+      // Should have called setTimeout for cleanup check (0ms) immediately
+      expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 0);
+      expect(registry.cleanupCheckTimeout).toBeTruthy();
+
+      // Wait for async cleanup check to complete
+      setTimeout(() => {
+        // Should have called setTimeout again for bulk cleanup (100ms)
+        expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 100);
+        expect(registry.bulkCleanupTimeout).toBeTruthy();
+        expect(registry.cleanupCheckTimeout).toBe(null);
 
-      mockSetTimeout.mockRestore();
+        mockSetTimeout.mockRestore();
+        done();
+      }, 10);
     });
   });
 });

src/tasty/injector/sheet-manager.ts

@@ -49,6 +49,7 @@ export class SheetManager {
         rules: new Map(),
         ruleTextSet: new Set<string>(),
         bulkCleanupTimeout: null,
+        cleanupCheckTimeout: null,
         metrics,
         classCounter: 0,
         keyframesCache: new Map(),
@@ -596,48 +597,52 @@ export class SheetManager {
       rulesBySheet.get(sheetIndex)!.push({ className, ruleInfo });
     }
 
-    // Resolve root node for DOM checks (Document or ShadowRoot)
-    const resolveRoot = (): Document | ShadowRoot | null => {
-      const firstSheet = registry.sheets[0]?.sheet;
-      if (!firstSheet) return null;
-      const rootNode = (firstSheet as any).getRootNode
-        ? (firstSheet as any).getRootNode()
-        : (firstSheet.ownerDocument as Document | null);
-      // Prefer ShadowRoot if available, else Document
-      return (rootNode as ShadowRoot | Document) || null;
-    };
-
-    const rootNode = resolveRoot();
-
     // Delete rules from each sheet (in reverse order to preserve indices)
     for (const [sheetIndex, rulesInSheet] of rulesBySheet) {
       // Sort by rule index in descending order for safe deletion
       rulesInSheet.sort((a, b) => b.ruleInfo.ruleIndex - a.ruleInfo.ruleIndex);
 
       for (const { className, ruleInfo } of rulesInSheet) {
-        // SAFETY: Re-check that the rule is still unused at deletion time.
-        // Between scheduling and execution a class may have been restored
-        // (refCount set to > 0). Skip such entries.
+        // SAFETY 1: Double-check refCount is still 0
         const currentRefCount = registry.refCounts.get(className) || 0;
         if (currentRefCount > 0) {
           // Class became active again; do not delete
           continue;
         }
 
-        // Ensure we delete the same RuleInfo we marked earlier to avoid
-        // accidentally deleting updated rules for the same class.
+        // SAFETY 2: Ensure rule wasn't replaced
+        // Between scheduling and execution a class may have been replaced with a new RuleInfo
         const currentInfo = registry.rules.get(className);
-        if (currentInfo && currentInfo !== ruleInfo) {
+        if (currentInfo !== ruleInfo) {
           // Rule was replaced; skip deletion of the old reference
           continue;
         }
 
-        // Optional last-resort safety: ensure the sheet element still exists
+        // SAFETY 3: Verify the sheet element is still valid and accessible
         const sheetInfo = registry.sheets[ruleInfo.sheetIndex];
         if (!sheetInfo || !sheetInfo.sheet) {
+          // Sheet was removed or corrupted; skip this rule
+          continue;
+        }
+
+        // SAFETY 4: Verify the stylesheet itself is accessible
+        const styleSheet = sheetInfo.sheet.sheet;
+        if (!styleSheet) {
+          // Stylesheet not available; skip this rule
+          continue;
+        }
+
+        // SAFETY 5: Verify rule index is still within valid range
+        const maxRuleIndex = styleSheet.cssRules.length - 1;
+        const startIdx = ruleInfo.ruleIndex;
+        const endIdx = ruleInfo.endRuleIndex ?? ruleInfo.ruleIndex;
+
+        if (startIdx < 0 || endIdx > maxRuleIndex || startIdx > endIdx) {
+          // Rule indices are out of bounds; skip this rule
           continue;
         }
 
+        // All safety checks passed - proceed with deletion
         this.deleteRule(registry, ruleInfo);
         registry.rules.delete(className);
         registry.refCounts.delete(className);
@@ -890,9 +895,26 @@ export class SheetManager {
   }
 
   /**
-   * Check if cleanup should be scheduled (async, non-stacking)
+   * Schedule async cleanup check (non-stacking)
    */
   public checkCleanupNeeded(registry: RootRegistry): void {
+    // Clear any existing check timeout to prevent stacking
+    if (registry.cleanupCheckTimeout) {
+      clearTimeout(registry.cleanupCheckTimeout);
+      registry.cleanupCheckTimeout = null;
+    }
+
+    // Schedule the actual check with setTimeout(..., 0)
+    registry.cleanupCheckTimeout = setTimeout(() => {
+      this.performCleanupCheck(registry);
+      registry.cleanupCheckTimeout = null;
+    }, 0);
+  }
+
+  /**
+   * Perform the actual cleanup check (called asynchronously)
+   */
+  private performCleanupCheck(registry: RootRegistry): void {
     // Count unused rules (refCount = 0) - keyframes are disposed immediately
     const unusedRulesCount = Array.from(registry.refCounts.values()).filter(
       (count) => count === 0,
@@ -927,6 +949,12 @@ export class SheetManager {
       registry.bulkCleanupTimeout = null;
     }
 
+    // Cancel any scheduled cleanup check
+    if (registry.cleanupCheckTimeout) {
+      clearTimeout(registry.cleanupCheckTimeout);
+      registry.cleanupCheckTimeout = null;
+    }
+
     // Remove all sheets
     for (const sheet of registry.sheets) {
       try {

src/tasty/injector/types.ts

@@ -79,6 +79,8 @@ export interface RootRegistry {
     | ReturnType<typeof requestIdleCallback>
     | ReturnType<typeof setTimeout>
     | null;
+  /** Scheduled cleanup check timeout */
+  cleanupCheckTimeout: ReturnType<typeof setTimeout> | null;
   /** Performance metrics (optional) */
   metrics?: CacheMetrics;
   /** Counter for generating sequential class names like t0, t1, t2... */

src/tasty/tasty.tsx

@@ -382,28 +382,30 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
 
       const disposeRef = useRef<(() => void) | null>(null);
 
-      // Compute the className synchronously
-      const injectedClassName = useMemo(() => {
-        if (!directResult.rules.length) return '';
-        // This will either reuse existing or allocate new class
-        const { className } = inject(directResult.rules, { cacheKey });
-        return className;
+      // Single injection pattern - inject once and get both className and dispose
+      const injectionResult = useMemo(() => {
+        if (!directResult.rules.length) return null;
+        return inject(directResult.rules, { cacheKey });
       }, [directResult.rules, cacheKey]);
 
+      const injectedClassName = injectionResult?.className || '';
+
       // Handle disposal in useInsertionEffect
       useInsertionEffect(() => {
+        // Cleanup previous disposal reference
         disposeRef.current?.();
-        if (directResult.rules.length) {
-          const { dispose } = inject(directResult.rules, { cacheKey });
-          disposeRef.current = dispose;
+
+        if (injectionResult) {
+          disposeRef.current = injectionResult.dispose;
         } else {
           disposeRef.current = null;
         }
+
         return () => {
           disposeRef.current?.();
           disposeRef.current = null;
         };
-      }, [directResult.rules, cacheKey]);
+      }, [injectionResult]);
 
       let modProps: Record<string, unknown> | undefined;
       if (mods) {