tailwind-to-style 3.2.1 → 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.1
+ * 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.1
+ * 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.1
+ * tailwind-to-style v3.2.2
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
@@ -8998,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;
 }
 
@@ -9038,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);

package/dist/core/twsx.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.1
+ * tailwind-to-style v3.2.2
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
@@ -8996,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;
 }
 
@@ -9036,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);