tailwind-to-style 3.2.0 → 3.2.2

package/dist/cx.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.0
+ * tailwind-to-style v3.2.2
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion

package/dist/cx.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.0
+ * tailwind-to-style v3.2.2
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.0
+ * tailwind-to-style v3.2.2
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
@@ -9614,7 +9614,7 @@ function processClass(cls, selector, styles) {
 
   // Get cssObject from singleton cache
   const cssObject = tailwindCache.getOrGenerate(generateTailwindCssString, convertCssToObject);
-  let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(ESCAPE_SLASH_REGEX, "\\$1")] || cssObject[baseClassName.replace(ESCAPE_DOT_REGEX, "\\.")];
+  let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(ESCAPE_SLASH_REGEX, "\\/")] || cssObject[baseClassName.replace(ESCAPE_DOT_REGEX, "\\.")];
   if (!declarations && baseClassName.includes("[")) {
     const match = CUSTOM_VALUE_FULL_REGEX.exec(baseClassName);
     if (match) {
@@ -9836,11 +9836,26 @@ function flattenStyleObject(obj) {
           flatArray.push(item);
         } else if (isSelectorObject(item)) {
           const nested = flattenStyleObject(item, currentSelector);
-          Object.assign(result, nested);
+          // Merge nested results, handling & that resolves to same selector
+          for (const ns in nested) {
+            if (ns === currentSelector) {
+              // & resolved to same selector — include in this array
+              if (Array.isArray(nested[ns])) {
+                flatArray.push(...nested[ns]);
+              } else {
+                flatArray.push(nested[ns]);
+              }
+            } else {
+              result[ns] = nested[ns];
+            }
+          }
         }
       }
       if (flatArray.length > 0) {
         result[currentSelector] = result[currentSelector] || [];
+        if (!Array.isArray(result[currentSelector])) {
+          result[currentSelector] = [result[currentSelector]];
+        }
         result[currentSelector].push(...flatArray);
       }
     } else if (isSelectorObject(val)) {
@@ -9972,6 +9987,20 @@ function twsxNoCache(obj) {
           // Process each selector within the media query
           for (const innerSelector in val) {
             const innerVal = val[innerSelector];
+
+            // Handle @css string directive inside media queries
+            if (typeof innerVal === "string") {
+              const trimmedInner = innerVal.trim();
+              if (trimmedInner.startsWith('@css')) {
+                const cssMatch = trimmedInner.match(/^@css\s*\{([\s\S]*)\}\s*$/);
+                if (cssMatch) {
+                  const rawCss = cssMatch[1].trim();
+                  styles[selector][innerSelector] = styles[selector][innerSelector] || '';
+                  styles[selector][innerSelector] += rawCss.split(';').filter(d => d.trim()).map(d => d.trim() + ';').join(' ') + '\n';
+                  continue;
+                }
+              }
+            }
             const baseClass = typeof innerVal === "string" ? expandGroupedClass(innerVal) : "";
 
             // Process Tailwind classes for this selector
@@ -10011,6 +10040,17 @@ function twsxNoCache(obj) {
       } else if (Array.isArray(val)) {
         for (const item of val) {
           if (typeof item === "string") {
+            // Handle @css strings inside arrays
+            const trimmedItem = item.trim();
+            if (trimmedItem.startsWith('@css')) {
+              const cssMatch = trimmedItem.match(/^@css\s*\{([\s\S]*)\}\s*$/);
+              if (cssMatch) {
+                const rawCss = cssMatch[1].trim();
+                styles[selector] = styles[selector] || '';
+                styles[selector] += rawCss.split(';').filter(d => d.trim()).map(d => d.trim() + ';').join(' ') + '\n';
+                continue;
+              }
+            }
             baseClass += (baseClass ? " " : "") + expandGroupedClass(item);
           } else if (typeof item === "object" && item !== null) {
             Object.assign(nested, item);
@@ -10565,6 +10605,9 @@ function twsxVariantsNoCache(className) {
       // Skip if it's the default value
       if (value === defaultVariants[key]) continue;
 
+      // Skip if the variant value doesn't exist in the variant options
+      if (!variants[key].hasOwnProperty(value) && value !== true && value !== "true" && value !== false && value !== "false") continue;
+
       // Handle boolean variants
       if (value === true || value === "true") {
         variantParts.push(key);
@@ -10677,27 +10720,40 @@ function fastObjectHash(obj) {
  */
 function twsx(obj) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // Create fast hash key from input (100x faster than JSON.stringify)
+  // Create fast hash key from input content (100x faster than JSON.stringify)
   const cacheKey = fastObjectHash(obj, options);
+  const {
+    inject = true
+  } = options;
+
+  // Derive a STABLE registry key from the object's top-level selector KEYS only.
+  // This key is independent of the CSS class values, so when styles are edited
+  // during HMR (same selectors, different Tailwind classes) the old slot is
+  // replaced rather than a new slot being created — preventing CSS accumulation.
+  const registryKey = obj && typeof obj === "object" && !Array.isArray(obj) ? Object.keys(obj).sort().join("|") : cacheKey; // fallback for edge cases
 
   // Check cache first
   if (_twsxInputCache.has(cacheKey)) {
     const cached = _twsxInputCache.get(cacheKey);
 
-    // Handle injection for cached result
-    const {
-      inject = true
-    } = options;
+    // Re-inject with registryKey so the slot stays registered (no-op when unchanged).
     if (inject && (IS_BROWSER || _ssrCollecting)) {
-      autoInjectCss(cached);
+      autoInjectCss(cached, registryKey);
     }
     return cached;
   }
 
-  // Cache miss: call original twsxNoCache and cache result
-  const result = twsxNoCache(obj, options);
+  // Cache miss: generate CSS without internal auto-injection so that twsx owns
+  // the injection and can pass the selector-based registryKey for slot replacement.
+  const result = twsxNoCache(obj, {
+    ...options,
+    inject: false
+  });
   _twsxInputCache.set(cacheKey, result);
   evictMap(_twsxInputCache);
+  if (inject && (IS_BROWSER || _ssrCollecting)) {
+    autoInjectCss(result, registryKey);
+  }
   return result;
 }
 
@@ -10753,7 +10809,27 @@ function getCssHash(str) {
 
 // Enhanced auto-inject CSS with performance monitoring & SSR support
 const injectedCssHashSet = new Set();
+
+// Registry of sourceKey → cssBlock for smart slot-based replacement.
+// Prevents stale CSS chunks from accumulating across HMR cycles.
+const _cssBlockRegistry = new Map();
+
+/**
+ * Rebuild the single twsx style tag from the full CSS block registry.
+ * Called whenever a block is added or updated.
+ */
+function rebuildStyleTag() {
+  let styleTag = document.getElementById("twsx-auto-style");
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = "twsx-auto-style";
+    styleTag.setAttribute("data-twsx", "");
+    document.head.appendChild(styleTag);
+  }
+  styleTag.textContent = [..._cssBlockRegistry.values()].join("\n");
+}
 function autoInjectCss(cssString) {
+  let sourceKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const marker = performanceMonitor.start("css:inject");
   try {
     // SSR mode: collect CSS strings instead of DOM injection
@@ -10770,6 +10846,28 @@ function autoInjectCss(cssString) {
       return;
     }
     if (IS_BROWSER) {
+      if (sourceKey) {
+        // Slot-based update: each unique twsx(obj) call owns its own CSS block.
+        // When styles change (new content, same logical call site via cacheKey)
+        // the old slot is replaced and the style tag is fully rebuilt, so no
+        // stale rules from previous HMR cycles can pile up.
+        const existing = _cssBlockRegistry.get(sourceKey);
+        if (existing === cssString) {
+          // Identical content – nothing to do.
+          performanceMonitor.end(marker);
+          return;
+        }
+        _cssBlockRegistry.set(sourceKey, cssString);
+        rebuildStyleTag();
+        if (_cssBlockRegistry.size % 10 === 0) {
+          logger.debug(`CSS registry stats: ${_cssBlockRegistry.size} blocks registered`);
+        }
+        performanceMonitor.end(marker);
+        return;
+      }
+
+      // Fallback path (e.g. direct autoInjectCss calls without a sourceKey):
+      // keep the original hash-based dedup + append behaviour.
       const cssHash = getCssHash(cssString);
       if (injectedCssHashSet.has(cssHash)) {
         performanceMonitor.end(marker);
@@ -10785,30 +10883,11 @@ function autoInjectCss(cssString) {
         document.head.appendChild(styleTag);
       }
 
-      // Use insertRule for better performance (avoids full stylesheet reparse)
-      try {
-        const sheet = styleTag.sheet;
-        if (sheet) {
-          // Split CSS by closing brace to insert individual rules
-          const rules = cssString.split('}').filter(r => r.trim());
-          for (const rule of rules) {
-            const trimmed = rule.trim();
-            if (trimmed) {
-              try {
-                sheet.insertRule(trimmed + '}', sheet.cssRules.length);
-              } catch (e) {
-                // Fallback for complex rules (e.g., @keyframes, @media)
-                styleTag.textContent += `\n${trimmed}}`;
-              }
-            }
-          }
-        } else {
-          styleTag.textContent += `\n${cssString}`;
-        }
-      } catch (e) {
-        // Ultimate fallback
-        styleTag.textContent += `\n${cssString}`;
-      }
+      // Append CSS to style tag using textContent for reliability
+      // Note: insertRule + textContent mixing destroys CSSOM rules,
+      // so we use textContent exclusively for consistent behavior
+      // with @keyframes, @media, and other nested CSS blocks.
+      styleTag.textContent += `\n${cssString}`;
 
       // Log injection stats periodically
       if (injectedCssHashSet.size % 10 === 0) {
@@ -10854,6 +10933,7 @@ const performanceUtils = {
       },
       injectionStats: {
         uniqueStylesheets: injectedCssHashSet.size,
+        cssBlocks: _cssBlockRegistry.size,
         keyframes: _injectedKeyframes.size
       }
     };
@@ -10868,6 +10948,14 @@ const performanceUtils = {
     // Clear new input-level caches
     _twsxInputCache.clear();
     _twsxVariantsResultCache.clear();
+
+    // Clear CSS block registry and rebuild (empty) the style tag
+    _cssBlockRegistry.clear();
+    injectedCssHashSet.clear();
+    if (IS_BROWSER) {
+      const styleTag = document.getElementById("twsx-auto-style");
+      if (styleTag) styleTag.textContent = "";
+    }
     logger.info("All caches cleared");
     performanceMonitor.end(marker);
   },

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.0
+ * tailwind-to-style v3.2.2
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
@@ -9612,7 +9612,7 @@ function processClass(cls, selector, styles) {
 
   // Get cssObject from singleton cache
   const cssObject = tailwindCache.getOrGenerate(generateTailwindCssString, convertCssToObject);
-  let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(ESCAPE_SLASH_REGEX, "\\$1")] || cssObject[baseClassName.replace(ESCAPE_DOT_REGEX, "\\.")];
+  let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(ESCAPE_SLASH_REGEX, "\\/")] || cssObject[baseClassName.replace(ESCAPE_DOT_REGEX, "\\.")];
   if (!declarations && baseClassName.includes("[")) {
     const match = CUSTOM_VALUE_FULL_REGEX.exec(baseClassName);
     if (match) {
@@ -9834,11 +9834,26 @@ function flattenStyleObject(obj) {
           flatArray.push(item);
         } else if (isSelectorObject(item)) {
           const nested = flattenStyleObject(item, currentSelector);
-          Object.assign(result, nested);
+          // Merge nested results, handling & that resolves to same selector
+          for (const ns in nested) {
+            if (ns === currentSelector) {
+              // & resolved to same selector — include in this array
+              if (Array.isArray(nested[ns])) {
+                flatArray.push(...nested[ns]);
+              } else {
+                flatArray.push(nested[ns]);
+              }
+            } else {
+              result[ns] = nested[ns];
+            }
+          }
         }
       }
       if (flatArray.length > 0) {
         result[currentSelector] = result[currentSelector] || [];
+        if (!Array.isArray(result[currentSelector])) {
+          result[currentSelector] = [result[currentSelector]];
+        }
         result[currentSelector].push(...flatArray);
       }
     } else if (isSelectorObject(val)) {
@@ -9970,6 +9985,20 @@ function twsxNoCache(obj) {
           // Process each selector within the media query
           for (const innerSelector in val) {
             const innerVal = val[innerSelector];
+
+            // Handle @css string directive inside media queries
+            if (typeof innerVal === "string") {
+              const trimmedInner = innerVal.trim();
+              if (trimmedInner.startsWith('@css')) {
+                const cssMatch = trimmedInner.match(/^@css\s*\{([\s\S]*)\}\s*$/);
+                if (cssMatch) {
+                  const rawCss = cssMatch[1].trim();
+                  styles[selector][innerSelector] = styles[selector][innerSelector] || '';
+                  styles[selector][innerSelector] += rawCss.split(';').filter(d => d.trim()).map(d => d.trim() + ';').join(' ') + '\n';
+                  continue;
+                }
+              }
+            }
             const baseClass = typeof innerVal === "string" ? expandGroupedClass(innerVal) : "";
 
             // Process Tailwind classes for this selector
@@ -10009,6 +10038,17 @@ function twsxNoCache(obj) {
       } else if (Array.isArray(val)) {
         for (const item of val) {
           if (typeof item === "string") {
+            // Handle @css strings inside arrays
+            const trimmedItem = item.trim();
+            if (trimmedItem.startsWith('@css')) {
+              const cssMatch = trimmedItem.match(/^@css\s*\{([\s\S]*)\}\s*$/);
+              if (cssMatch) {
+                const rawCss = cssMatch[1].trim();
+                styles[selector] = styles[selector] || '';
+                styles[selector] += rawCss.split(';').filter(d => d.trim()).map(d => d.trim() + ';').join(' ') + '\n';
+                continue;
+              }
+            }
             baseClass += (baseClass ? " " : "") + expandGroupedClass(item);
           } else if (typeof item === "object" && item !== null) {
             Object.assign(nested, item);
@@ -10563,6 +10603,9 @@ function twsxVariantsNoCache(className) {
       // Skip if it's the default value
       if (value === defaultVariants[key]) continue;
 
+      // Skip if the variant value doesn't exist in the variant options
+      if (!variants[key].hasOwnProperty(value) && value !== true && value !== "true" && value !== false && value !== "false") continue;
+
       // Handle boolean variants
       if (value === true || value === "true") {
         variantParts.push(key);
@@ -10675,27 +10718,40 @@ function fastObjectHash(obj) {
  */
 function twsx(obj) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // Create fast hash key from input (100x faster than JSON.stringify)
+  // Create fast hash key from input content (100x faster than JSON.stringify)
   const cacheKey = fastObjectHash(obj, options);
+  const {
+    inject = true
+  } = options;
+
+  // Derive a STABLE registry key from the object's top-level selector KEYS only.
+  // This key is independent of the CSS class values, so when styles are edited
+  // during HMR (same selectors, different Tailwind classes) the old slot is
+  // replaced rather than a new slot being created — preventing CSS accumulation.
+  const registryKey = obj && typeof obj === "object" && !Array.isArray(obj) ? Object.keys(obj).sort().join("|") : cacheKey; // fallback for edge cases
 
   // Check cache first
   if (_twsxInputCache.has(cacheKey)) {
     const cached = _twsxInputCache.get(cacheKey);
 
-    // Handle injection for cached result
-    const {
-      inject = true
-    } = options;
+    // Re-inject with registryKey so the slot stays registered (no-op when unchanged).
     if (inject && (IS_BROWSER || _ssrCollecting)) {
-      autoInjectCss(cached);
+      autoInjectCss(cached, registryKey);
     }
     return cached;
   }
 
-  // Cache miss: call original twsxNoCache and cache result
-  const result = twsxNoCache(obj, options);
+  // Cache miss: generate CSS without internal auto-injection so that twsx owns
+  // the injection and can pass the selector-based registryKey for slot replacement.
+  const result = twsxNoCache(obj, {
+    ...options,
+    inject: false
+  });
   _twsxInputCache.set(cacheKey, result);
   evictMap(_twsxInputCache);
+  if (inject && (IS_BROWSER || _ssrCollecting)) {
+    autoInjectCss(result, registryKey);
+  }
   return result;
 }
 
@@ -10751,7 +10807,27 @@ function getCssHash(str) {
 
 // Enhanced auto-inject CSS with performance monitoring & SSR support
 const injectedCssHashSet = new Set();
+
+// Registry of sourceKey → cssBlock for smart slot-based replacement.
+// Prevents stale CSS chunks from accumulating across HMR cycles.
+const _cssBlockRegistry = new Map();
+
+/**
+ * Rebuild the single twsx style tag from the full CSS block registry.
+ * Called whenever a block is added or updated.
+ */
+function rebuildStyleTag() {
+  let styleTag = document.getElementById("twsx-auto-style");
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = "twsx-auto-style";
+    styleTag.setAttribute("data-twsx", "");
+    document.head.appendChild(styleTag);
+  }
+  styleTag.textContent = [..._cssBlockRegistry.values()].join("\n");
+}
 function autoInjectCss(cssString) {
+  let sourceKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const marker = performanceMonitor.start("css:inject");
   try {
     // SSR mode: collect CSS strings instead of DOM injection
@@ -10768,6 +10844,28 @@ function autoInjectCss(cssString) {
       return;
     }
     if (IS_BROWSER) {
+      if (sourceKey) {
+        // Slot-based update: each unique twsx(obj) call owns its own CSS block.
+        // When styles change (new content, same logical call site via cacheKey)
+        // the old slot is replaced and the style tag is fully rebuilt, so no
+        // stale rules from previous HMR cycles can pile up.
+        const existing = _cssBlockRegistry.get(sourceKey);
+        if (existing === cssString) {
+          // Identical content – nothing to do.
+          performanceMonitor.end(marker);
+          return;
+        }
+        _cssBlockRegistry.set(sourceKey, cssString);
+        rebuildStyleTag();
+        if (_cssBlockRegistry.size % 10 === 0) {
+          logger.debug(`CSS registry stats: ${_cssBlockRegistry.size} blocks registered`);
+        }
+        performanceMonitor.end(marker);
+        return;
+      }
+
+      // Fallback path (e.g. direct autoInjectCss calls without a sourceKey):
+      // keep the original hash-based dedup + append behaviour.
       const cssHash = getCssHash(cssString);
       if (injectedCssHashSet.has(cssHash)) {
         performanceMonitor.end(marker);
@@ -10783,30 +10881,11 @@ function autoInjectCss(cssString) {
         document.head.appendChild(styleTag);
       }
 
-      // Use insertRule for better performance (avoids full stylesheet reparse)
-      try {
-        const sheet = styleTag.sheet;
-        if (sheet) {
-          // Split CSS by closing brace to insert individual rules
-          const rules = cssString.split('}').filter(r => r.trim());
-          for (const rule of rules) {
-            const trimmed = rule.trim();
-            if (trimmed) {
-              try {
-                sheet.insertRule(trimmed + '}', sheet.cssRules.length);
-              } catch (e) {
-                // Fallback for complex rules (e.g., @keyframes, @media)
-                styleTag.textContent += `\n${trimmed}}`;
-              }
-            }
-          }
-        } else {
-          styleTag.textContent += `\n${cssString}`;
-        }
-      } catch (e) {
-        // Ultimate fallback
-        styleTag.textContent += `\n${cssString}`;
-      }
+      // Append CSS to style tag using textContent for reliability
+      // Note: insertRule + textContent mixing destroys CSSOM rules,
+      // so we use textContent exclusively for consistent behavior
+      // with @keyframes, @media, and other nested CSS blocks.
+      styleTag.textContent += `\n${cssString}`;
 
       // Log injection stats periodically
       if (injectedCssHashSet.size % 10 === 0) {
@@ -10852,6 +10931,7 @@ const performanceUtils = {
       },
       injectionStats: {
         uniqueStylesheets: injectedCssHashSet.size,
+        cssBlocks: _cssBlockRegistry.size,
         keyframes: _injectedKeyframes.size
       }
     };
@@ -10866,6 +10946,14 @@ const performanceUtils = {
     // Clear new input-level caches
     _twsxInputCache.clear();
     _twsxVariantsResultCache.clear();
+
+    // Clear CSS block registry and rebuild (empty) the style tag
+    _cssBlockRegistry.clear();
+    injectedCssHashSet.clear();
+    if (IS_BROWSER) {
+      const styleTag = document.getElementById("twsx-auto-style");
+      if (styleTag) styleTag.textContent = "";
+    }
     logger.info("All caches cleared");
     performanceMonitor.end(marker);
   },