tailwind-to-style 2.7.6 → 2.7.7

package/dist/index.esm.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
@@ -1895,10 +1895,10 @@ function generator$2i() {
       }
       if (value === "custom_value") {
         return `
-            ${prefix}-${key} {
-              ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
-            }
-          `;
+              ${prefix}-${key} {
+                ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
+              }
+            `;
       }
       return `
             ${prefix}-${key} {
@@ -1920,6 +1920,7 @@ function generator$2h() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}bg`;
+  const customPrefix = `${globalPrefix}bg-image`;
   const {
     backgroundImage = {}
   } = theme;
@@ -1927,11 +1928,20 @@ function generator$2h() {
     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;
@@ -1994,6 +2004,7 @@ function generator$2e() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}bg`;
+  const customPrefix = `${globalPrefix}bg-position`;
   const {
     backgroundPosition = {}
   } = theme;
@@ -2001,11 +2012,20 @@ function generator$2e() {
     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;
@@ -2046,6 +2066,7 @@ function generator$2c() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}bg`;
+  const customPrefix = `${globalPrefix}bg-size`;
   const {
     backgroundSize = {}
   } = theme;
@@ -2053,11 +2074,20 @@ function generator$2c() {
     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;
@@ -2125,6 +2155,7 @@ function generator$29() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}border`;
+  const customPrefix = `${globalPrefix}border-color`;
   const {
     borderColor = {}
   } = theme;
@@ -2141,57 +2172,64 @@ function generator$29() {
       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);
@@ -2360,6 +2398,7 @@ function generator$24() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}border`;
+  const customPrefix = `${globalPrefix}border-width`;
   const {
     borderWidth = {}
   } = theme;
@@ -2369,41 +2408,48 @@ function generator$24() {
     } = _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);
@@ -2439,6 +2485,7 @@ function generator$22() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}shadow`;
+  const customPrefix = `${globalPrefix}box-shadow`;
   const {
     boxShadowColor,
     boxShadow = {}
@@ -2451,6 +2498,13 @@ function generator$22() {
     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};
@@ -3083,6 +3137,7 @@ function generator$1G() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}text`;
+  const customPrefix = `${globalPrefix}text-size`;
   const {
     fontSize = {}
   } = theme;
@@ -3090,11 +3145,20 @@ function generator$1G() {
     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;
@@ -4243,6 +4307,7 @@ function generator$$() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}outline`;
+  const customPrefix = `${globalPrefix}outline-color`;
   const {
     outlineColor = {}
   } = theme;
@@ -4259,6 +4324,13 @@ function generator$$() {
       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;
@@ -4364,6 +4436,7 @@ function generator$X() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}outline`;
+  const customPrefix = `${globalPrefix}outline-width`;
   const {
     outlineWidth = {}
   } = theme;
@@ -4372,11 +4445,18 @@ function generator$X() {
       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);
@@ -5357,6 +5437,7 @@ function generator$r() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}text`;
+  const customPrefix = `${globalPrefix}text-color`;
   const {
     textColor
   } = theme;
@@ -5369,13 +5450,20 @@ function generator$r() {
       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);
@@ -6309,10 +6397,10 @@ function parseCustomClassWithPatterns(className) {
   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 = {};
@@ -6590,11 +6678,11 @@ function separateAndResolveCSS(arr) {
   }
 }
 
-/**
- * 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+)$/);
@@ -6655,11 +6743,11 @@ function processOpacityModifier(className, cssDeclaration) {
   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");
@@ -7038,12 +7126,12 @@ function generateCssString(styles) {
   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] : {};
@@ -7150,19 +7238,19 @@ function autoInjectCss(cssString) {
 }
 
 // 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