fix(tasty): improve debug tool

Author: tenphi

src/tasty/debug.ts

@@ -58,21 +58,6 @@ interface CacheStatus {
   metrics: CacheMetrics | null;
 }
 
-interface GlobalBreakdown {
-  css: string; // prettified tasty global CSS
-  totalRules: number;
-  totalCSSSize: number;
-  selectors: {
-    elements: string[];
-    classes: string[];
-    ids: string[];
-    pseudoClasses: string[];
-    mediaQueries: string[];
-    keyframes: string[];
-    other: string[];
-  };
-}
-
 interface Definitions {
   properties: string[]; // defined via @property
   keyframes: Array<{ name: string; refCount: number }>;
@@ -96,17 +81,26 @@ interface Summary {
   // Tasty CSS sizes
   activeCSSSize: number;
   unusedCSSSize: number;
-  totalCSSSize: number; // tasty-only: active + unused + tasty global
+  globalCSSSize: number; // injectGlobal() CSS
+  rawCSSSize: number; // createGlobalStyle() CSS
+  keyframesCSSSize: number; // @keyframes CSS
+  propertyCSSSize: number; // @property CSS
+  totalCSSSize: number; // all tasty CSS (active + unused + global + raw + keyframes + property)
 
   // Tasty CSS payloads
   activeCSS: string;
   unusedCSS: string;
-  allCSS: string; // tasty-only CSS (active + unused + tasty global)
+  globalCSS: string; // injectGlobal() CSS
+  rawCSS: string; // createGlobalStyle() CSS
+  keyframesCSS: string; // @keyframes CSS
+  propertyCSS: string; // @property CSS
+  allCSS: string; // all tasty CSS combined
 
-  // Tasty global (createGlobalStyle)
-  globalCSS: string;
-  globalCSSSize: number;
+  // Rule counts
   globalRuleCount: number;
+  rawRuleCount: number;
+  keyframesRuleCount: number;
+  propertyRuleCount: number;
 
   // Page-level CSS (across all stylesheets, not only tasty) — shown when includePageCSS != false
   page?: {
@@ -584,86 +578,88 @@ export const tastyDebug = {
     injector.instance.resetMetrics({ root });
   },
 
-  // 5) Tasty global CSS and selector analysis
-  global(opts?: {
-    root?: Document | ShadowRoot;
-    log?: boolean;
-  }): GlobalBreakdown {
-    const { root = document, log = false } = opts || {};
-    const allCSS = injector.instance.getCssText({ root });
-    const rules = extractCSSRules(allCSS);
-
-    const globalRules = rules.filter((rule) => {
-      const selectors = rule.selector.split(',').map((s) => s.trim());
-      return !selectors.every((selector) => {
-        const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
-        const parts = cleanSelector.split(/\s+/).filter(Boolean);
-        return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
-      });
-    });
+  // 5) Get CSS for specific global types
+  getGlobalTypeCSS(
+    type: 'global' | 'raw' | 'keyframes' | 'property',
+    opts?: { root?: Document | ShadowRoot },
+  ): { css: string; ruleCount: number; size: number } {
+    const { root = document } = opts || {};
+    const registry = (injector.instance as any)['sheetManager']?.getRegistry(
+      root,
+    );
 
-    // Calculate raw CSS size for consistent size calculations
-    const rawGlobalCSS = globalRules
-      .map((rule) => `${rule.selector} { ${rule.declarations} }`)
-      .join('\n');
-
-    // Use prettified CSS for display
-    const css = prettifyCSS(rawGlobalCSS);
-
-    // Analyze selectors
-    const selectors = {
-      elements: [] as string[],
-      classes: [] as string[],
-      ids: [] as string[],
-      pseudoClasses: [] as string[],
-      mediaQueries: [] as string[],
-      keyframes: [] as string[],
-      other: [] as string[],
-    };
+    if (!registry) {
+      return { css: '', ruleCount: 0, size: 0 };
+    }
 
-    globalRules.forEach((rule) => {
-      const selector = rule.selector;
-      if (selector.startsWith('@media')) {
-        selectors.mediaQueries.push(selector);
-      } else if (selector.startsWith('@keyframes')) {
-        selectors.keyframes.push(selector);
-      } else if (
-        selector.includes('.') &&
-        !selector.includes('#') &&
-        !selector.includes(':')
-      ) {
-        selectors.classes.push(selector);
-      } else if (
-        selector.includes('#') &&
-        !selector.includes('.') &&
-        !selector.includes(':')
-      ) {
-        selectors.ids.push(selector);
-      } else if (selector.includes(':')) {
-        selectors.pseudoClasses.push(selector);
-      } else if (/^[a-zA-Z][a-zA-Z0-9]*$/.test(selector.trim())) {
-        selectors.elements.push(selector);
-      } else {
-        selectors.other.push(selector);
+    const cssChunks: string[] = [];
+    let ruleCount = 0;
+
+    if (type === 'keyframes') {
+      // Handle keyframes separately - they're stored in keyframesCache
+      for (const [, entry] of registry.keyframesCache) {
+        const info = entry.info;
+        const sheet = registry.sheets[info.sheetIndex];
+        const styleSheet = sheet?.sheet?.sheet;
+
+        if (styleSheet && info.ruleIndex < styleSheet.cssRules.length) {
+          const rule = styleSheet.cssRules[info.ruleIndex] as
+            | CSSRule
+            | undefined;
+          if (rule) {
+            cssChunks.push(rule.cssText);
+            ruleCount++;
+          }
+        } else if (info.cssText) {
+          cssChunks.push(info.cssText);
+          ruleCount++;
+        }
       }
-    });
-
-    const result = {
-      css,
-      totalRules: globalRules.length,
-      totalCSSSize: rawGlobalCSS.length, // Use raw CSS length for consistent size calculations
-      selectors,
-    };
+    } else {
+      // Handle other global types stored in globalRules
+      const prefix =
+        type === 'global' ? 'global:' : type === 'raw' ? 'raw:' : 'property:';
+
+      for (const [key, ruleInfo] of registry.globalRules) {
+        if (key.startsWith(prefix)) {
+          const sheet = registry.sheets[ruleInfo.sheetIndex];
+          const styleSheet = sheet?.sheet?.sheet;
+          if (styleSheet) {
+            const start = Math.max(0, ruleInfo.ruleIndex);
+            const end = Math.min(
+              styleSheet.cssRules.length - 1,
+              (ruleInfo.endRuleIndex as number) ?? ruleInfo.ruleIndex,
+            );
 
-    if (log) {
-      console.group(`🌍 Global CSS (${result.totalRules} rules)`);
-      console.log(`📊 Size: ${result.totalCSSSize} characters`);
-      console.log('🎯 Selector breakdown:', result.selectors);
-      console.log('🎨 CSS:\n' + result.css);
-      console.groupEnd();
+            if (
+              start >= 0 &&
+              end >= start &&
+              start < styleSheet.cssRules.length
+            ) {
+              for (let i = start; i <= end; i++) {
+                const rule = styleSheet.cssRules[i] as CSSRule | undefined;
+                if (rule) {
+                  cssChunks.push(rule.cssText);
+                  ruleCount++;
+                }
+              }
+            }
+          } else if (ruleInfo.cssText && ruleInfo.cssText.length) {
+            // Fallback in environments without CSSOM access
+            cssChunks.push(...ruleInfo.cssText);
+            ruleCount += ruleInfo.cssText.length;
+          }
+        }
+      }
     }
 
-    return result;
+    const rawCSS = cssChunks.join('\n');
+
+    return {
+      css: prettifyCSS(rawCSS),
+      ruleCount,
+      size: rawCSS.length,
+    };
   },
 
   // 6) Defined @property and keyframes
@@ -729,14 +725,19 @@ export const tastyDebug = {
   summary(opts?: SummaryOptions): Summary {
     const { root = document, log = false, includePageCSS = false } = opts || {};
     const cacheStatus = this.cache({ root });
-    const globalBreakdown = this.global({ root });
     const definitions = this.defs({ root });
     const metrics = this.metrics({ root });
 
     const activeCSS = this.css('active', { root, prettify: false });
     const unusedCSS = this.css('unused', { root, prettify: false });
     const allCSS = this.css('all', { root, prettify: false });
 
+    // Get CSS for each global type separately
+    const globalData = this.getGlobalTypeCSS('global', { root });
+    const rawData = this.getGlobalTypeCSS('raw', { root });
+    const keyframesData = this.getGlobalTypeCSS('keyframes', { root });
+    const propertyData = this.getGlobalTypeCSS('property', { root });
+
     // Build cleanup summary from metrics
     const cleanupSummary = {
       enabled: !!metrics,
@@ -793,13 +794,22 @@ export const tastyDebug = {
       totalStyledClasses: cacheStatus.classes.all,
       activeCSSSize: activeCSS.length,
       unusedCSSSize: unusedCSS.length,
-      totalCSSSize: allCSS.length, // This includes active + unused + global CSS
+      globalCSSSize: globalData.size,
+      rawCSSSize: rawData.size,
+      keyframesCSSSize: keyframesData.size,
+      propertyCSSSize: propertyData.size,
+      totalCSSSize: allCSS.length,
       activeCSS: prettifyCSS(activeCSS),
       unusedCSS: prettifyCSS(unusedCSS),
+      globalCSS: globalData.css,
+      rawCSS: rawData.css,
+      keyframesCSS: keyframesData.css,
+      propertyCSS: propertyData.css,
       allCSS: prettifyCSS(allCSS),
-      globalCSS: globalBreakdown.css,
-      globalCSSSize: globalBreakdown.totalCSSSize,
-      globalRuleCount: globalBreakdown.totalRules,
+      globalRuleCount: globalData.ruleCount,
+      rawRuleCount: rawData.ruleCount,
+      keyframesRuleCount: keyframesData.ruleCount,
+      propertyRuleCount: propertyData.ruleCount,
       page,
       metrics,
       definedProperties: definitions.properties,
@@ -825,9 +835,34 @@ export const tastyDebug = {
       console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
       console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
       console.log(
-        `  • Global CSS: ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`,
+        `  • Global CSS (injectGlobal): ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`,
+      );
+      console.log(
+        `  • Raw CSS (createGlobalStyle): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`,
+      );
+      console.log(
+        `  • Keyframes CSS: ${summary.keyframesCSSSize} characters (${summary.keyframesRuleCount} rules)`,
       );
-      console.log(`  • Total CSS: ${summary.totalCSSSize} characters`);
+      console.log(
+        `  • Property CSS: ${summary.propertyCSSSize} characters (${summary.propertyRuleCount} rules)`,
+      );
+
+      // Show breakdown calculation
+      const calculatedTotal =
+        summary.activeCSSSize +
+        summary.unusedCSSSize +
+        summary.globalCSSSize +
+        summary.rawCSSSize +
+        summary.keyframesCSSSize +
+        summary.propertyCSSSize;
+      console.log(`  • Calculated Total: ${calculatedTotal} characters`);
+      console.log(`  • Actual Total: ${summary.totalCSSSize} characters`);
+
+      if (Math.abs(calculatedTotal - summary.totalCSSSize) > 100) {
+        console.warn(
+          `  ⚠️  Size mismatch: ${Math.abs(calculatedTotal - summary.totalCSSSize)} characters difference`,
+        );
+      }
 
       if (page) {
         console.log(`📄 Page CSS:`);

src/tasty/injector/index.ts

@@ -130,6 +130,16 @@ export function injectGlobal(
   return getGlobalInjector().injectGlobal(rules, options);
 }
 
+/**
+ * Internal method for createGlobalStyle - not exported publicly
+ */
+function injectCreateGlobalStyle(
+  rules: StyleResult[],
+  options?: { root?: Document | ShadowRoot },
+): GlobalInjectResult {
+  return getGlobalInjector().injectCreateGlobalStyle(rules, options);
+}
+
 /**
  * Inject keyframes and return object with toString() and dispose()
  */

src/tasty/injector/injector.ts

@@ -258,6 +258,41 @@ export class StyleInjector {
     };
   }
 
+  /**
+   * Inject styles from createGlobalStyle (separate from injectGlobal for tracking)
+   */
+  injectCreateGlobalStyle(
+    rules: StyleResult[],
+    options?: { root?: Document | ShadowRoot },
+  ): GlobalInjectResult {
+    const root = options?.root || document;
+    const registry = this.sheetManager.getRegistry(root);
+
+    if (!rules || rules.length === 0) {
+      return { dispose: () => {} };
+    }
+
+    // Use a different prefix to distinguish from injectGlobal
+    const key = `raw:${this.globalRuleCounter++}`;
+
+    const info = this.sheetManager.insertGlobalRule(
+      registry,
+      rules as unknown as StyleRule[],
+      key,
+      root,
+    );
+
+    if (registry.metrics) {
+      registry.metrics.totalInsertions++;
+    }
+
+    return {
+      dispose: () => {
+        if (info) this.sheetManager.deleteGlobalRule(registry, key);
+      },
+    };
+  }
+
   /**
    * Dispose of a className
    */
@@ -567,8 +602,8 @@ export class StyleInjector {
         const css = this.interpolateTemplate();
         if (css.trim()) {
           const styleResults = this.parseCSSToStyleResults(css);
-          // Bind the global inject method to the outer injector instance
-          const result = injector.injectGlobal(styleResults as any, {
+          // Use a special method for createGlobalStyle to distinguish from injectGlobal
+          const result = injector.injectCreateGlobalStyle(styleResults as any, {
             root: this.props.root,
           });
           this.disposeFunction = result.dispose;