tailwind-to-style 3.2.0 → 3.2.2

package/README.md

@@ -1,6 +1,8 @@
 # tailwind-to-style
 
 [📦 View on npm](https://www.npmjs.com/package/tailwind-to-style)
+| [🌐 Landing Page](https://bigetion.github.io/tailwind-to-style/landing.html)
+| [🛝 Playground](https://bigetion.github.io/tailwind-to-style/sandbox.html)
 
 [![npm version](https://img.shields.io/npm/v/tailwind-to-style.svg)](https://www.npmjs.com/package/tailwind-to-style)
 [![Build Status](https://github.com/Bigetion/tailwind-to-style/workflows/CI%2FCD/badge.svg)](https://github.com/Bigetion/tailwind-to-style/actions)
@@ -179,6 +181,8 @@ tws('p-0.5 m-1.5 gap-2.5')
 
 Generates real CSS from Tailwind classes with full selector support, SCSS-like nesting, and auto-injects a `<style>` tag into the DOM.
 
+> **HMR-safe** — each `twsx()` call owns a stable slot in the injected style tag keyed by its top-level selectors. When you edit styles during development, the old slot is **replaced** (not appended), so changes are reflected immediately without a hard refresh.
+
 ```javascript
 import { twsx } from 'tailwind-to-style'
 
@@ -621,10 +625,41 @@ function App() {
 
 ### Vue
 
+```vue
+<script setup>
+import 'tailwind-to-style/preflight.css'
+import { tws, twsx } from 'tailwind-to-style'
+
+// twsx() at the top level of <script setup> is HMR-safe.
+// When you edit the classes, Vite's HMR re-runs this block and
+// the old CSS slot is replaced automatically — no hard refresh needed.
+twsx({
+  'html': 'bg-gray-100 min-h-screen flex items-center justify-center',
+  '.card': [
+    'bg-white p-5 border border-gray-300 rounded-xl shadow-md',
+    {
+      '&:hover': 'shadow-xl',
+      '> .title': 'text-xl font-bold text-gray-900 mb-3',
+      '> .body': 'text-sm text-gray-700',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div class="card">
+    <div class="title">Card Title</div>
+    <p class="body">Styled with twsx — hot reload works out of the box.</p>
+  </div>
+</template>
+```
+
+For simple inline styles, use `tws()` with the reactive system:
+
 ```vue
 <script setup>
 import { tws } from 'tailwind-to-style'
-const btnStyle = tws('bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600', true)
+const btnStyle = tws('bg-blue-500 text-white px-4 py-2 rounded-lg', true)
 </script>
 
 <template>
@@ -670,7 +705,7 @@ v3.2.0 includes major performance optimizations:
 - **Pre-compiled regex** — compiled once at module load, reused for every call
 - **Multi-level LRU caching** — class resolution, CSS generation, config lookups
 - **Bounded caches** — Maps capped at 5,000 entries, Sets at 10,000 to prevent memory leaks
-- **`sheet.insertRule()` injection** — avoids full stylesheet reparsing on each call
+- **Slot-based CSS injection** — each `twsx()` call owns a named slot; updates rebuild the tag instead of appending, preventing HMR accumulation
 - **FNV-1a hashing** — 100x faster than `JSON.stringify` for cache keys
 
 ```

package/dist/core/tws.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/core/tws.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/core/twsx.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
@@ -8371,7 +8371,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) {
@@ -8593,11 +8593,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)) {
@@ -8729,6 +8744,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
@@ -8768,6 +8797,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);
@@ -8958,27 +8998,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;
 }
 
@@ -8998,12 +9051,54 @@ 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
     if (_ssrCollecting) ;
     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);
@@ -9019,30 +9114,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) {

package/dist/core/twsx.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
@@ -8369,7 +8369,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) {
@@ -8591,11 +8591,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)) {
@@ -8727,6 +8742,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
@@ -8766,6 +8795,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);
@@ -8956,27 +8996,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;
 }
 
@@ -8996,12 +9049,54 @@ 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
     if (_ssrCollecting) ;
     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);
@@ -9017,30 +9112,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) {