fix(tasty): optimizations * 2

Author: tenphi

src/tasty/injector/injector.ts

@@ -87,21 +87,8 @@ export class StyleInjector {
     const className =
       generatedClass || generateClassName(registry.classCounter++);
 
-    // Increase specificity for class-based selectors by duplicating the class
-    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;
-    });
+    // Use rules as-is - specificity is handled during selector generation
+    const rulesToInsert = rules;
 
     // Before inserting, auto-register @property for any color custom properties being defined.
     // Fast parse: split declarations by ';' and match "--*-color:"

src/tasty/utils/renderStyles.ts

@@ -440,7 +440,13 @@ function materializeRules(
   zones: ResponsiveZone[],
 ): StyleResult[] {
   return logicalRules.map((rule) => {
-    const selector = `.${className}${rule.selectorSuffix}`;
+    // Generate base selector
+    let selector = `.${className}${rule.selectorSuffix}`;
+
+    // Increase specificity for tasty class selectors by duplicating the class
+    if (/^t\d+$/.test(className)) {
+      selector = `.${className}${selector}`;
+    }
 
     const declarations = Object.entries(rule.declarations)
       .map(([prop, value]) => `${prop}: ${value};`)
@@ -976,10 +982,19 @@ export function renderStyles(
     // Direct selector mode: convert logical rules directly to StyleResult format
     return allLogicalRules.map((rule) => {
       // Replace & with the actual selector or append suffix to selector
-      const finalSelector = rule.selectorSuffix
+      let finalSelector = rule.selectorSuffix
         ? `${classNameOrSelector}${rule.selectorSuffix}`
         : classNameOrSelector;
 
+      // Increase specificity for tasty class selectors by duplicating the class
+      if (finalSelector.startsWith('.') && /^\.t\d+/.test(finalSelector)) {
+        const classMatch = finalSelector.match(/^\.t\d+/);
+        if (classMatch) {
+          const baseClass = classMatch[0];
+          finalSelector = baseClass + finalSelector;
+        }
+      }
+
       const declarations = Object.entries(rule.declarations)
         .map(([prop, value]) => `${prop}: ${value};`)
         .join(' ');