tailwind-to-style 3.2.1 → 3.2.2

package/dist/cx.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/cx.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/index.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
@@ -10720,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;
 }
 
@@ -10796,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
@@ -10813,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);
@@ -10878,6 +10933,7 @@ const performanceUtils = {
       },
       injectionStats: {
         uniqueStylesheets: injectedCssHashSet.size,
+        cssBlocks: _cssBlockRegistry.size,
         keyframes: _injectedKeyframes.size
       }
     };
@@ -10892,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.1
+ * tailwind-to-style v3.2.2
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
@@ -10718,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;
 }
 
@@ -10794,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
@@ -10811,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);
@@ -10876,6 +10931,7 @@ const performanceUtils = {
       },
       injectionStats: {
         uniqueStylesheets: injectedCssHashSet.size,
+        cssBlocks: _cssBlockRegistry.size,
         keyframes: _injectedKeyframes.size
       }
     };
@@ -10890,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);
   },