tailwind-to-style 3.2.0 → 3.2.2

package/dist/core/twsxVariants.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
@@ -8342,7 +8342,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) {
@@ -8564,11 +8564,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)) {
@@ -8700,6 +8715,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
@@ -8739,6 +8768,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);
@@ -9293,6 +9333,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);
@@ -9405,27 +9448,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;
 }
 
@@ -9481,12 +9537,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);
@@ -9502,30 +9600,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/twsxVariants.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
@@ -8340,7 +8340,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) {
@@ -8562,11 +8562,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)) {
@@ -8698,6 +8713,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
@@ -8737,6 +8766,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);
@@ -9291,6 +9331,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);
@@ -9403,27 +9446,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;
 }
 
@@ -9479,12 +9535,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);
@@ -9500,30 +9598,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) {