tailwind-to-style 2.7.6 → 2.7.7

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.6
+ * tailwind-to-style v2.7.7
  * 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);
@@ -6312,10 +6400,10 @@ var tailwindToStyle = (function (exports) {
     return null;
   }
 
-  /**
-   * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
-   * @param {string} cssString
-   * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
+  /**
+   * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
+   * @param {string} cssString
+   * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
    */
   function resolveCssToClearCss(cssString) {
     const customVars = {};
@@ -6593,11 +6681,11 @@ var tailwindToStyle = (function (exports) {
     }
   }
 
-  /**
-   * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
-   * @param {string} className - Class name with potential opacity modifier
-   * @param {string} cssDeclaration - CSS declaration to modify
-   * @returns {string} Modified CSS declaration with opacity applied
+  /**
+   * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
+   * @param {string} className - Class name with potential opacity modifier
+   * @param {string} cssDeclaration - CSS declaration to modify
+   * @returns {string} Modified CSS declaration with opacity applied
    */
   function processOpacityModifier(className, cssDeclaration) {
     const opacityMatch = className.match(/\/(\d+)$/);
@@ -6658,11 +6746,11 @@ var tailwindToStyle = (function (exports) {
     return modifiedDeclaration;
   }
 
-  /**
-   * Convert Tailwind class string to inline CSS styles or JSON object
-   * @param {string} classNames - String containing Tailwind classes to convert
-   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
-   * @returns {string|Object} Inline CSS string or style JSON object
+  /**
+   * Convert Tailwind class string to inline CSS styles or JSON object
+   * @param {string} classNames - String containing Tailwind classes to convert
+   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
+   * @returns {string|Object} Inline CSS string or style JSON object
    */
   function tws(classNames, convertToJson) {
     const totalMarker = performanceMonitor.start("tws:total");
@@ -7041,12 +7129,12 @@ var tailwindToStyle = (function (exports) {
     return cssString.trim();
   }
 
-  /**
-   * Generate CSS string from style object with SCSS-like syntax
-   * Supports nested selectors, state variants, responsive variants, and @css directives
-   * @param {Object} obj - Object with SCSS-like style format
-   * @param {Object} [options] - Additional options, e.g. { inject: true/false }
-   * @returns {string} Generated CSS string
+  /**
+   * Generate CSS string from style object with SCSS-like syntax
+   * Supports nested selectors, state variants, responsive variants, and @css directives
+   * @param {Object} obj - Object with SCSS-like style format
+   * @param {Object} [options] - Additional options, e.g. { inject: true/false }
+   * @returns {string} Generated CSS string
    */
   function twsx(obj) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -7153,19 +7241,19 @@ var tailwindToStyle = (function (exports) {
   }
 
   // Enhanced debounced functions with performance monitoring configuration
-  /**
-   * Debounced version of tws function with performance monitoring
-   * @param {string} classNames - String containing Tailwind classes to convert
-   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
-   * @returns {string|Object} Inline CSS string or style JSON object
+  /**
+   * Debounced version of tws function with performance monitoring
+   * @param {string} classNames - String containing Tailwind classes to convert
+   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
+   * @returns {string|Object} Inline CSS string or style JSON object
    */
   const debouncedTws = debounce(tws, 50); // Faster debounce for tws
 
-  /**
-   * Debounced version of twsx function with performance monitoring
-   * @param {Object} obj - Object with SCSS-like style format
-   * @param {Object} [options] - Additional options
-   * @returns {string} Generated CSS string
+  /**
+   * Debounced version of twsx function with performance monitoring
+   * @param {Object} obj - Object with SCSS-like style format
+   * @param {Object} [options] - Additional options
+   * @returns {string} Generated CSS string
    */
   const debouncedTwsx = debounce(twsx, 100); // Standard debounce for twsx