fix(tasty): style check

Author: tenphi

src/tasty/injector/injector.ts

@@ -39,6 +39,40 @@ export class StyleInjector {
     this.sheetManager = new SheetManager(config);
   }
 
+  /**
+   * Check if a class has live rules in the CSSOM
+   */
+  private hasLiveRules(registry: any, className: string): boolean {
+    const info = registry.rules.get(className);
+    if (!info) return false;
+
+    try {
+      const sheetInfo = registry.sheets[info.sheetIndex];
+      const styleSheet = sheetInfo?.sheet?.sheet as CSSStyleSheet | undefined;
+      if (!styleSheet) return false;
+
+      const start = Math.max(0, info.ruleIndex);
+      const end = Math.min(
+        styleSheet.cssRules.length - 1,
+        (info.endRuleIndex as number) ?? info.ruleIndex,
+      );
+
+      if (start > end || start >= styleSheet.cssRules.length) return false;
+
+      // Check if any rule in the range contains the expected class name
+      for (let i = start; i <= end; i++) {
+        const rule = styleSheet.cssRules[i] as CSSRule | undefined;
+        if (rule && (rule.cssText || '').includes('.' + className)) {
+          return true;
+        }
+      }
+    } catch {
+      // Ignore CSSOM access errors and treat as missing
+    }
+
+    return false;
+  }
+
   /**
    * Inject styles from StyleResult objects
    */
@@ -52,7 +86,7 @@ export class StyleInjector {
     if (rules.length === 0) {
       return {
         className: '',
-        dispose: () => {},
+        dispose: () => { },
       };
     }
 
@@ -67,6 +101,39 @@ export class StyleInjector {
         : null;
 
     if (generatedClass && registry.rules.has(generatedClass)) {
+      // Verify that the rules still exist in the live CSSOM
+      const hasLiveCSS = this.hasLiveRules(registry, generatedClass);
+      if (!hasLiveCSS) {
+        // Rules were deleted from CSSOM but registry still has the entry
+        // Reinsert the rules using the same class name
+        const className = generatedClass;
+        const rulesToInsert = rules.map((r) => {
+          // Increase specificity for class-based selectors by duplicating the class
+          if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
+            const classMatch = r.selector.match(/^\.t\d+/);
+            if (classMatch) {
+              const baseClass = classMatch[0];
+              return {
+                ...r,
+                selector: baseClass + r.selector,
+              } as StyleRule;
+            }
+          }
+          return r;
+        });
+
+        const ruleInfo = this.sheetManager.insertRule(
+          registry,
+          rulesToInsert,
+          className,
+          root,
+        );
+
+        if (ruleInfo) {
+          registry.rules.set(className, ruleInfo);
+        }
+      }
+
       const currentRefCount = registry.refCounts.get(generatedClass) || 0;
       registry.refCounts.set(generatedClass, currentRefCount + 1);
       // If this class was previously marked as unused, clear that state now
@@ -100,6 +167,38 @@ export class StyleInjector {
         generatedClass,
       );
       if (restored) {
+        // Verify that the rules still exist in the live CSSOM after restoration
+        const hasLiveCSS = this.hasLiveRules(registry, generatedClass);
+        if (!hasLiveCSS) {
+          // Rules were deleted from CSSOM, reinsert them
+          const className = generatedClass;
+          const rulesToInsert = rules.map((r) => {
+            // Increase specificity for class-based selectors by duplicating the class
+            if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
+              const classMatch = r.selector.match(/^\.t\d+/);
+              if (classMatch) {
+                const baseClass = classMatch[0];
+                return {
+                  ...r,
+                  selector: baseClass + r.selector,
+                } as StyleRule;
+              }
+            }
+            return r;
+          });
+
+          const ruleInfo = this.sheetManager.insertRule(
+            registry,
+            rulesToInsert,
+            className,
+            root,
+          );
+
+          if (ruleInfo) {
+            registry.rules.set(className, ruleInfo);
+          }
+        }
+
         // Update metrics
         if (registry.metrics) {
           registry.metrics.hits++;
@@ -124,36 +223,36 @@ export class StyleInjector {
     const rulesToInsert =
       generatedClass && generatedClass !== className
         ? rules.map((r) => {
-            if (r.selector.startsWith('.' + generatedClass)) {
-              const newSelector =
-                '.' + className + r.selector.slice(generatedClass.length + 1);
-              // Increase specificity by duplicating the class for class-based selectors
-              const specificSelector =
-                newSelector.startsWith('.' + className) &&
+          if (r.selector.startsWith('.' + generatedClass)) {
+            const newSelector =
+              '.' + className + r.selector.slice(generatedClass.length + 1);
+            // Increase specificity by duplicating the class for class-based selectors
+            const specificSelector =
+              newSelector.startsWith('.' + className) &&
                 /^\.t\d+/.test(newSelector)
-                  ? '.' + className + newSelector
-                  : newSelector;
+                ? '.' + className + newSelector
+                : newSelector;
+            return {
+              ...r,
+              selector: specificSelector,
+            } as StyleRule;
+          }
+          return r;
+        })
+        : rules.map((r) => {
+          // Increase specificity for class-based selectors by duplicating the class
+          if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
+            const classMatch = r.selector.match(/^\.t\d+/);
+            if (classMatch) {
+              const baseClass = classMatch[0];
               return {
                 ...r,
-                selector: specificSelector,
+                selector: baseClass + r.selector,
               } as StyleRule;
             }
-            return r;
-          })
-        : rules.map((r) => {
-            // Increase specificity for class-based selectors by duplicating the class
-            if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
-              const classMatch = r.selector.match(/^\.t\d+/);
-              if (classMatch) {
-                const baseClass = classMatch[0];
-                return {
-                  ...r,
-                  selector: baseClass + r.selector,
-                } as StyleRule;
-              }
-            }
-            return r;
-          });
+          }
+          return r;
+        });
 
     // Before inserting, auto-register @property for any color custom properties being defined.
     // Fast parse: split declarations by ';' and match "--*-color:"
@@ -196,7 +295,7 @@ export class StyleInjector {
 
       return {
         className,
-        dispose: () => {},
+        dispose: () => { },
       };
     }
 
@@ -229,7 +328,7 @@ export class StyleInjector {
     const registry = this.sheetManager.getRegistry(root);
 
     if (!rules || rules.length === 0) {
-      return { dispose: () => {} };
+      return { dispose: () => { } };
     }
 
     // Use a non-tasty identifier to avoid any collisions with .t{number} classes
@@ -447,7 +546,7 @@ export class StyleInjector {
     if (Object.keys(steps).length === 0) {
       return {
         toString: () => '',
-        dispose: () => {},
+        dispose: () => { },
       };
     }
 
@@ -474,7 +573,7 @@ export class StyleInjector {
     if (!info) {
       return {
         toString: () => '',
-        dispose: () => {},
+        dispose: () => { },
       };
     }