fix(tasty): cleanup method

.changeset/breezy-planes-talk.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix cleanup of style in the new style injector.

src/tasty/injector/index.ts

@@ -60,6 +60,8 @@ export function configure(config: Partial<StyleInjectorConfig> = {}): void {
     collectMetrics: false, // default to no performance tracking
     forceTextInjection: false, // auto-enable for test environments
     debugMode: false, // reduce memory usage by avoiding full cssText storage
+    bulkCleanupBatchRatio: 0.5,
+    unusedStylesMinAgeMs: 10000,
     ...config,
   };
 
@@ -189,6 +191,8 @@ export function createInjector(
     collectMetrics: false, // default to no performance tracking
     forceTextInjection: isTest, // auto-enable for test environments
     debugMode: false, // reduce memory usage by avoiding full cssText storage
+    bulkCleanupBatchRatio: 0.5,
+    unusedStylesMinAgeMs: 10000,
     ...config,
   };
 

src/tasty/injector/sheet-manager.ts

@@ -534,7 +534,29 @@ export class SheetManager {
     if (registry.unusedRules.size === 0) return;
 
     const cleanupStartTime = Date.now();
-    const classNamesToCleanup = Array.from(registry.unusedRules.keys());
+    // Build candidates list with age and sort by oldest first
+    const now = Date.now();
+    const minAge = Math.max(0, this.config.unusedStylesMinAgeMs || 0);
+    const candidates = Array.from(registry.unusedRules.entries())
+      .map(([className, info]) => ({
+        className,
+        info,
+        age: now - (info.markedUnusedAt || 0),
+      }))
+      // Filter out too-fresh entries to avoid racing unmount/mount cycles
+      .filter((entry) => entry.age >= minAge)
+      // Sort from oldest to newest
+      .sort((a, b) => b.age - a.age);
+
+    if (candidates.length === 0) return;
+
+    // Limit deletion scope per run (batch ratio)
+    const ratio = this.config.bulkCleanupBatchRatio ?? 0.5;
+    const limit = Math.max(
+      1,
+      Math.floor(candidates.length * Math.min(1, Math.max(0, ratio))),
+    );
+    const selected = candidates.slice(0, limit);
     let cleanedUpCount = 0;
     let totalCssSize = 0;
     let totalRulesDeleted = 0;
@@ -546,10 +568,7 @@ export class SheetManager {
     >();
 
     // Calculate CSS size before deletion and group rules
-    for (const className of classNamesToCleanup) {
-      const unusedInfo = registry.unusedRules.get(className);
-      if (!unusedInfo) continue;
-
+    for (const { className, info: unusedInfo } of selected) {
       const ruleInfo = unusedInfo.ruleInfo;
       const sheetIndex = ruleInfo.sheetIndex;
 
@@ -594,6 +613,12 @@ export class SheetManager {
           continue;
         }
 
+        // Optional last-resort safety: ensure the sheet element still exists
+        const sheetInfo = registry.sheets[ruleInfo.sheetIndex];
+        if (!sheetInfo || !sheetInfo.sheet) {
+          continue;
+        }
+
         this.deleteRule(registry, ruleInfo);
         registry.rules.delete(className);
         registry.unusedRules.delete(className);

src/tasty/injector/types.ts

@@ -15,6 +15,17 @@ export interface StyleInjectorConfig {
   forceTextInjection?: boolean; // default: auto-detected (true in test environments, false otherwise)
   /** When false, avoid storing full cssText for each rule block to reduce memory. */
   debugMode?: boolean; // default: false (store less data)
+  /**
+   * Ratio of unused styles to delete per bulk cleanup run (0..1).
+   * Defaults to 0.5 (oldest half) to reduce risk of removing styles
+   * that may be restored shortly after being marked unused.
+   */
+  bulkCleanupBatchRatio?: number;
+  /**
+   * Minimum age (in ms) a style must remain unused before eligible for deletion.
+   * Helps avoid races during rapid mount/unmount cycles. Default: 2000ms.
+   */
+  unusedStylesMinAgeMs?: number;
 }
 
 export interface RuleInfo {