tailwind-to-style 2.7.6 → 2.7.8

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.6
+ * tailwind-to-style v2.7.8
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1898,10 +1898,10 @@ var tailwindToStyle = (function (exports) {
         }
         if (value === "custom_value") {
           return `
-            ${prefix}-${key} {
-              ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
-            }
-          `;
+              ${prefix}-${key} {
+                ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
+              }
+            `;
         }
         return `
             ${prefix}-${key} {
@@ -1923,6 +1923,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}bg`;
+    const customPrefix = `${globalPrefix}bg-image`;
     const {
       backgroundImage = {}
     } = theme;
@@ -1930,11 +1931,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(backgroundImage, (key, value) => `
+      const cssString = getCssByOptions(backgroundImage, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}-${key} {
+              background-image: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             background-image: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -1997,6 +2007,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}bg`;
+    const customPrefix = `${globalPrefix}bg-position`;
     const {
       backgroundPosition = {}
     } = theme;
@@ -2004,11 +2015,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(backgroundPosition, (key, value) => `
+      const cssString = getCssByOptions(backgroundPosition, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}-${key} {
+              background-position: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             background-position: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -2049,6 +2069,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}bg`;
+    const customPrefix = `${globalPrefix}bg-size`;
     const {
       backgroundSize = {}
     } = theme;
@@ -2056,11 +2077,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(backgroundSize, (key, value) => `
+      const cssString = getCssByOptions(backgroundSize, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}-${key} {
+              background-size: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             background-size: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -2128,6 +2158,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}border`;
+    const customPrefix = `${globalPrefix}border-color`;
     const {
       borderColor = {}
     } = theme;
@@ -2144,57 +2175,64 @@ var tailwindToStyle = (function (exports) {
         if (rgbValue) {
           rgbPropertyValue = `border-color: rgba(${rgbValue}, var(--border-opacity));`;
         }
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}${key} {
+            border-color: ${value};
+          }
+        `;
+        }
         return `
-            ${prefix}${key} {
-              --border-opacity: 1;
-              border-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-x${key} {
-              --border-opacity: 1;
-              border-left-color: ${value};
-              ${rgbPropertyValue}
-              border-right-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-y${key} {
-              --border-opacity: 1;
-              border-top-color: ${value};
-              ${rgbPropertyValue}
-              border-bottom-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-s${key} {
-              --border-opacity: 1;
-              border-inline-start-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-e${key} {
-              --border-opacity: 1;
-              border-inline-end-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-t${key} {
-              --border-opacity: 1;
-              border-top-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-r${key} {
-              --border-opacity: 1;
-              border-right-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-b${key} {
-              --border-opacity: 1;
-              border-bottom-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-l${key} {
-              --border-opacity: 1;
-              border-left-color: ${value};
-              ${rgbPropertyValue}
-            }
-          `;
+        ${prefix}${key} {
+          --border-opacity: 1;
+          border-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-x${key} {
+          --border-opacity: 1;
+          border-left-color: ${value};
+          ${rgbPropertyValue}
+          border-right-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-y${key} {
+          --border-opacity: 1;
+          border-top-color: ${value};
+          ${rgbPropertyValue}
+          border-bottom-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-s${key} {
+          --border-opacity: 1;
+          border-inline-start-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-e${key} {
+          --border-opacity: 1;
+          border-inline-end-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-t${key} {
+          --border-opacity: 1;
+          border-top-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-r${key} {
+          --border-opacity: 1;
+          border-right-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-b${key} {
+          --border-opacity: 1;
+          border-bottom-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-l${key} {
+          --border-opacity: 1;
+          border-left-color: ${value};
+          ${rgbPropertyValue}
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -2363,6 +2401,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}border`;
+    const customPrefix = `${globalPrefix}border-width`;
     const {
       borderWidth = {}
     } = theme;
@@ -2372,41 +2411,48 @@ var tailwindToStyle = (function (exports) {
       } = _ref;
       const cssString = getCssByOptions(borderWidth, (keyTmp, value) => {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
-        return `
-          ${prefix}${key} {
-            border-style: solid;
-            border-top-width: ${value};
-            border-bottom-width: ${value};
-            border-left-width: ${value};
-            border-right-width: ${value};
-          }
-          ${prefix}-x${key} {
-            border-left-width: ${value};
-            border-right-width: ${value};
-          }
-          ${prefix}-y${key} {
-            border-top-width: ${value};
-            border-bottom-width: ${value};
-          }
-          ${prefix}-s${key} {
-            border-inline-start-width: ${value};
-          }
-          ${prefix}-e${key} {
-            border-inline-end-width: ${value};
-          }
-          ${prefix}-t${key} {
-            border-top-width: ${value};
-          }
-          ${prefix}-r${key} {
-            border-right-width: ${value};
-          }
-          ${prefix}-b${key} {
-            border-bottom-width: ${value};
-          }
-          ${prefix}-l${key} {
-            border-left-width: ${value};
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}-${key} {
+            border-width: ${value};
           }
         `;
+        }
+        return `
+        ${prefix}${key} {
+          border-style: solid;
+          border-top-width: ${value};
+          border-bottom-width: ${value};
+          border-left-width: ${value};
+          border-right-width: ${value};
+        }
+        ${prefix}-x${key} {
+          border-left-width: ${value};
+          border-right-width: ${value};
+        }
+        ${prefix}-y${key} {
+          border-top-width: ${value};
+          border-bottom-width: ${value};
+        }
+        ${prefix}-s${key} {
+          border-inline-start-width: ${value};
+        }
+        ${prefix}-e${key} {
+          border-inline-end-width: ${value};
+        }
+        ${prefix}-t${key} {
+          border-top-width: ${value};
+        }
+        ${prefix}-r${key} {
+          border-right-width: ${value};
+        }
+        ${prefix}-b${key} {
+          border-bottom-width: ${value};
+        }
+        ${prefix}-l${key} {
+          border-left-width: ${value};
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -2442,6 +2488,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}shadow`;
+    const customPrefix = `${globalPrefix}box-shadow`;
     const {
       boxShadowColor,
       boxShadow = {}
@@ -2454,6 +2501,13 @@ var tailwindToStyle = (function (exports) {
       let cssString = getCssByOptions(boxShadow, (keyTmp, value) => {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         const valueSplit = value.split(" ");
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}${key} {
+              box-shadow: ${value};
+            }
+          `;
+        }
         return `
           ${prefix}${key} {
             --shadow: ${value};
@@ -3086,6 +3140,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}text`;
+    const customPrefix = `${globalPrefix}text-size`;
     const {
       fontSize = {}
     } = theme;
@@ -3093,11 +3148,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(fontSize, (key, value) => `
+      const cssString = getCssByOptions(fontSize, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}${key} {
+              font-size: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             font-size: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -4246,6 +4310,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}outline`;
+    const customPrefix = `${globalPrefix}outline-color`;
     const {
       outlineColor = {}
     } = theme;
@@ -4262,6 +4327,13 @@ var tailwindToStyle = (function (exports) {
         if (rgbValue) {
           rgbPropertyValue = `outline-color: rgba(${rgbValue}, var(--outline-opacity));`;
         }
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}${key} {
+              outline-color: ${value};
+            }
+          `;
+        }
         return `
             ${prefix}${key} {
               --outline-opacity: 1;
@@ -4367,6 +4439,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}outline`;
+    const customPrefix = `${globalPrefix}outline-width`;
     const {
       outlineWidth = {}
     } = theme;
@@ -4375,11 +4448,18 @@ var tailwindToStyle = (function (exports) {
         getCssByOptions
       } = _ref;
       const cssString = getCssByOptions(outlineWidth, (key, value) => {
-        return `
-          ${prefix}-${key} {
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}-${key} {
             outline-width: ${value};
           }
         `;
+        }
+        return `
+        ${prefix}-${key} {
+          outline-width: ${value};
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -5360,6 +5440,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}text`;
+    const customPrefix = `${globalPrefix}text-color`;
     const {
       textColor
     } = theme;
@@ -5372,13 +5453,20 @@ var tailwindToStyle = (function (exports) {
         if (rgbValue) {
           rgbPropertyValue = `color: rgba(${rgbValue}, var(--text-opacity));`;
         }
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}-${key} {
+            color: ${value};
+          }
+        `;
+        }
         return `
-            ${prefix}-${key} {
-              --text-opacity: 1;
-              color: ${value};
-              ${rgbPropertyValue}
-            }
-          `;
+        ${prefix}-${key} {
+          --text-opacity: 1;
+          color: ${value};
+          ${rgbPropertyValue}
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -6693,11 +6781,29 @@ var tailwindToStyle = (function (exports) {
       const processMarker = performanceMonitor.start("tws:process");
       let cssResult = classes.map(className => {
         // Extract base class name without opacity modifier
-        const baseClassName = className.replace(/\/\d+$/, "");
-        let result = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
+        // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
+        // Opacity modifiers are typically /0-100, fractions are /2, /3, /4, /5, /6, /12
+        const opacityMatch = className.match(/\/(\d+)$/);
+        let baseClassName = className;
+        let hasOpacityModifier = false;
+        if (opacityMatch) {
+          const opacityValue = parseInt(opacityMatch[1], 10);
+          // If it's a valid opacity value (0-100), treat it as opacity modifier
+          if (opacityValue >= 0 && opacityValue <= 100) {
+            // Check if this could be a fraction (e.g., w-2/3, h-1/2)
+            // Fractions typically have denominators of 2, 3, 4, 5, 6, 12
+            const fractionDenominators = [2, 3, 4, 5, 6, 12];
+            const couldBeFraction = fractionDenominators.includes(opacityValue) && (className.startsWith('w-') || className.startsWith('h-') || className.startsWith('max-w-') || className.startsWith('max-h-') || className.startsWith('min-w-') || className.startsWith('min-h-'));
+            if (!couldBeFraction) {
+              baseClassName = className.replace(/\/\d+$/, "");
+              hasOpacityModifier = true;
+            }
+          }
+        }
+        let result = cssObject[baseClassName] || cssObject[baseClassName.replace(/\//g, "\\/")] || cssObject[baseClassName.replace(/\./g, "\\.")];
         if (result) {
           // Apply opacity modifier if present
-          if (className.includes("/") && /\/\d+$/.test(className)) {
+          if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
             result = processOpacityModifier(className, result);
           }
           return resolveCssToClearCss(result);
@@ -6709,7 +6815,7 @@ var tailwindToStyle = (function (exports) {
             if (cssObject[`${baseKey}custom`]) {
               let customResult = cssObject[`${baseKey}custom`].replace(/custom_value/g, customValue);
               // Apply opacity modifier to custom values too
-              if (className.includes("/") && /\/\d+$/.test(className)) {
+              if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
                 customResult = processOpacityModifier(className, customResult);
               }
               return customResult;
@@ -6845,7 +6951,23 @@ var tailwindToStyle = (function (exports) {
     } = resolveVariants(selector, rawVariants);
 
     // Extract base class name without opacity modifier for CSS lookup
-    const baseClassName = pureClassName.replace(/\/\d+$/, "");
+    // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
+    const opacityMatch = pureClassName.match(/\/(\d+)$/);
+    let baseClassName = pureClassName;
+    let hasOpacityModifier = false;
+    if (opacityMatch) {
+      const opacityValue = parseInt(opacityMatch[1], 10);
+      // If it's a valid opacity value (0-100), treat it as opacity modifier
+      if (opacityValue >= 0 && opacityValue <= 100) {
+        // Check if this could be a fraction (e.g., w-2/3, h-1/2)
+        const fractionDenominators = [2, 3, 4, 5, 6, 12];
+        const couldBeFraction = fractionDenominators.includes(opacityValue) && (pureClassName.startsWith('w-') || pureClassName.startsWith('h-') || pureClassName.startsWith('max-w-') || pureClassName.startsWith('max-h-') || pureClassName.startsWith('min-w-') || pureClassName.startsWith('min-h-'));
+        if (!couldBeFraction) {
+          baseClassName = pureClassName.replace(/\/\d+$/, "");
+          hasOpacityModifier = true;
+        }
+      }
+    }
     let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
     if (!declarations && baseClassName.includes("[")) {
       const match = baseClassName.match(/^(.+?)\[(.+)\]$/);
@@ -6866,7 +6988,7 @@ var tailwindToStyle = (function (exports) {
     }
 
     // Apply opacity modifier if present
-    if (pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
+    if (hasOpacityModifier && pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
       declarations = processOpacityModifier(pureClassName, declarations);
     }
     if (isImportant) {