tailwind-to-style 3.2.0 → 3.2.1

package/dist/cx.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.0
+ * tailwind-to-style v3.2.1
  * 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.1
  * 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.1
  * 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);
@@ -10785,30 +10828,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/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.0
+ * tailwind-to-style v3.2.1
  * 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);
@@ -10783,30 +10826,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) {