tailwind-to-style 2.5.2 → 2.5.3

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.5.2
+ * tailwind-to-style v2.5.3
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1350,8 +1350,15 @@ var tailwindToStyle = (function (exports) {
     }
   };
 
+  const vars = {
+    transform: `transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));`,
+    filter: `filter: blur(var(--blur, 0)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) grayscale(var(--grayscale, 0)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0)) saturate(var(--saturate, 1)) sepia(var(--sepia, 0)) drop-shadow(var(--drop-shadow, 0 0 #0000));`,
+    backdropFilter: `-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));`
+  };
+
   const configOptions = {
-    theme
+    theme,
+    vars
   };
 
   function isFunction(functionToCheck) {
@@ -1390,6 +1397,7 @@ var tailwindToStyle = (function (exports) {
     });
     return {
       prefix: "",
+      ...configOptions,
       ...options,
       theme: newTheme
     };
@@ -1864,7 +1872,8 @@ var tailwindToStyle = (function (exports) {
   function generator$2b(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}blur`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -1878,10 +1887,12 @@ var tailwindToStyle = (function (exports) {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         return `
           ${prefix}${key} {
-            --blur: blur(${value}) !important;
+            --blur: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
-            --backdrop-blur: blur(${value}) !important;
+            --backdrop-blur: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -2278,7 +2289,8 @@ var tailwindToStyle = (function (exports) {
   function generator$20(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}brightness`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -2292,10 +2304,12 @@ var tailwindToStyle = (function (exports) {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         return `
           ${prefix}${key} {
-            --brightness: brightness(${value}) !important;
+            --brightness: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
-            --backdrop-brightness: brightness(${value}) !important;
+            --backdrop-brightness: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -2404,7 +2418,8 @@ var tailwindToStyle = (function (exports) {
   function generator$1X(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}contrast`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -2418,10 +2433,12 @@ var tailwindToStyle = (function (exports) {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         return `
           ${prefix}${key} {
-            --contrast: contrast(${value}) !important;
+            --contrast: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
-            --backdrop-contrast: contrast(${value}) !important;
+            --backdrop-contrast: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -2636,34 +2653,11 @@ var tailwindToStyle = (function (exports) {
   function generator$1O({
     prefix
   }) {
-    return `    
-  ${prefix}filter {
-    --blur: ;
-    --brightness: ;
-    --contrast: ;
-    --grayscale: ;
-    --hue-rotate: ;
-    --invert: ;
-    --saturate: ;
-    --sepia: ;
-    --drop-shadow: ;
-    filter: var(--blur) var(--brightness) var(--contrast) var(--grayscale) var(--hue-rotate) var(--invert) var(--saturate) var(--sepia) var(--drop-shadow);
-
-    --backdrop-blur: ;
-    --backdrop-brightness: ;
-    --backdrop-contrast: ;
-    --backdrop-grayscale: ;
-    --backdrop-hue-rotate: ;
-    --backdrop-invert: ;
-    --backdrop-opacity: ;
-    --backdrop-saturate: ;
-    --backdrop-sepia: ;
-    -webkit-backdrop-filter: var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast) var(--backdrop-grayscale) var(--backdrop-hue-rotate) var(--backdrop-invert) var(--backdrop-opacity) var(--backdrop-saturate) var(--backdrop-sepia);
-    backdrop-filter: var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast) var(--backdrop-grayscale) var(--backdrop-hue-rotate) var(--backdrop-invert) var(--backdrop-opacity) var(--backdrop-saturate) var(--backdrop-sepia);
-  }
+    return `
   ${prefix}filter-none {
-    filter: none;
-    backdrop-filter: none;
+    filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
   }
 `;
   }
@@ -3003,7 +2997,8 @@ var tailwindToStyle = (function (exports) {
   function generator$1z(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}grayscale`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -3017,10 +3012,12 @@ var tailwindToStyle = (function (exports) {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         return `
           ${prefix}${key} {
-            --grayscale: grayscale(${value}) !important;
+            --grayscale: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
-            --backdrop-grayscale: grayscale(${value}) !important;
+            --backdrop-grayscale: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -3298,7 +3295,8 @@ var tailwindToStyle = (function (exports) {
   function generator$1m(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const {
       hueRotate = {}
@@ -3316,10 +3314,12 @@ var tailwindToStyle = (function (exports) {
         }
         return `
           ${prefix}-${key} {
-            --hue-rotate: hue-rotate(${value}) !important;
+            --hue-rotate: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}-${key} {
-            --backdrop-hue-rotate: hue-rotate(${value}) !important;
+            --backdrop-hue-rotate: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -3406,7 +3406,8 @@ var tailwindToStyle = (function (exports) {
   function generator$1j(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}invert`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -3420,10 +3421,12 @@ var tailwindToStyle = (function (exports) {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         return `
           ${prefix}${key} {
-            --invert: invert(${value}) !important;
+            --invert: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
-            --backdrop-invert: invert(${value}) !important;
+            --backdrop-invert: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -3839,7 +3842,8 @@ var tailwindToStyle = (function (exports) {
   function generator$11(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}opacity`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -3852,9 +3856,11 @@ var tailwindToStyle = (function (exports) {
       const cssString = getCssByOptions(opacity, (key, value) => `
           ${prefix}-${key} {
             opacity: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}-${key} {
-            --backdrop-opacity: opacity(${value});
+            --backdrop-opacity: ${value};
+            ${vars.backdropFilter}
           }
         `);
       return cssString;
@@ -4393,7 +4399,8 @@ var tailwindToStyle = (function (exports) {
   function generator$I(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}saturate`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -4407,10 +4414,12 @@ var tailwindToStyle = (function (exports) {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         return `
           ${prefix}${key} {
-            --saturate: saturate(${value}) !important;
+            --saturate: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
-            --backdrop-saturate: saturate(${value}) !important;
+            --backdrop-saturate: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -4422,7 +4431,8 @@ var tailwindToStyle = (function (exports) {
   function generator$H(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const {
       rotate = {}
@@ -4443,6 +4453,7 @@ var tailwindToStyle = (function (exports) {
         return `
           ${prefix}-${key} {
             --transform-rotate: ${value};
+            ${vars.transform}
           }
         `;
       });
@@ -4454,7 +4465,8 @@ var tailwindToStyle = (function (exports) {
   function generator$G(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}scale`;
     const {
@@ -4467,12 +4479,15 @@ var tailwindToStyle = (function (exports) {
           ${prefix}-${key} {
             --transform-scale-x: ${value};
             --transform-scale-y: ${value};
+            ${vars.transform}
           }
           ${prefix}-x-${key} {
             --transform-scale-x: ${value};
+            ${vars.transform}
           }
           ${prefix}-y-${key} {
             --transform-scale-y: ${value};
+            ${vars.transform}
           }
         `);
       return cssString;
@@ -4690,7 +4705,8 @@ var tailwindToStyle = (function (exports) {
   function generator$z(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const prefix = `${globalPrefix}sepia`;
     const basePrefix = prefix.replace(globalPrefix, "");
@@ -4704,10 +4720,12 @@ var tailwindToStyle = (function (exports) {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         return `
           ${prefix}${key} {
-            --sepia: sepia(${value}) !important;
+            --sepia: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
-            --backdrop-sepia: sepia(${value}) !important;
+            --backdrop-sepia: ${value};
+            ${vars.backdropFilter}
           }
         `;
       });
@@ -4742,7 +4760,8 @@ var tailwindToStyle = (function (exports) {
   function generator$x(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const {
       skew = {}
@@ -4763,9 +4782,11 @@ var tailwindToStyle = (function (exports) {
         return `
           ${prefix}-x-${key} {
             --transform-skew-x: ${value};
+            ${vars.transform}
           }
           ${prefix}-y-${key} {
             --transform-skew-y: ${value};
+            ${vars.transform}
           }
         `;
       });
@@ -5337,19 +5358,9 @@ var tailwindToStyle = (function (exports) {
   function generator$a({
     prefix
   }) {
-    return `    
-  ${prefix}transform {
-    --transform-translate-x: 0;
-    --transform-translate-y: 0;
-    --transform-rotate: 0;
-    --transform-skew-x: 0;
-    --transform-skew-y: 0;
-    --transform-scale-x: 1;
-    --transform-scale-y: 1;
-    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
-  }
+    return `
   ${prefix}transform-none {
-    transform: none;
+    transform: none !important;
   }
 `;
   }
@@ -5365,7 +5376,7 @@ var tailwindToStyle = (function (exports) {
     }) => {
       const cssString = getCssByOptions(propertyOptions, (key, value) => `
           ${prefix}-${key} {
-            transform-origin: ${value.replace("-", " ")} !important;
+            transform-origin: ${value.replace("-", " ")};
           }
         `);
       return cssString;
@@ -5376,7 +5387,8 @@ var tailwindToStyle = (function (exports) {
   function generator$8(configOptions = {}) {
     const {
       prefix: globalPrefix,
-      theme = {}
+      theme = {},
+      vars = {}
     } = configOptions;
     const {
       translate = {}
@@ -5397,9 +5409,11 @@ var tailwindToStyle = (function (exports) {
         return `
           ${prefix}-x-${key} {
             --transform-translate-x: ${value};
+            ${vars.transform}
           }
           ${prefix}-y-${key} {
             --transform-translate-y: ${value};
+            ${vars.transform}
           }
         `;
       });
@@ -5818,10 +5832,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 = {};
@@ -5981,7 +5995,7 @@ var tailwindToStyle = (function (exports) {
   const cssResolutionCache = new Map();
   function separateAndResolveCSS(arr) {
     // Perbaiki: cacheKey harus unik untuk setiap input array
-    const cacheKey = Array.isArray(arr) ? arr.join('|') : String(arr);
+    const cacheKey = Array.isArray(arr) ? arr.join("|") : String(arr);
     if (cssResolutionCache.has(cacheKey)) {
       return cssResolutionCache.get(cacheKey);
     }
@@ -6051,11 +6065,11 @@ var tailwindToStyle = (function (exports) {
     };
   }
 
-  /**
-   * Mengkonversi string kelas Tailwind menjadi inline styles CSS atau objek JSON
-   * @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
-   * @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
-   * @returns {string|Object} String CSS inline atau objek style JSON
+  /**
+   * Mengkonversi string kelas Tailwind menjadi inline styles CSS atau objek JSON
+   * @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
+   * @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
+   * @returns {string|Object} String CSS inline atau objek style JSON
    */
   function tws(classNames, convertToJson) {
     if ([!classNames, typeof classNames !== "string", classNames.trim() === ""].includes(true)) {
@@ -6097,11 +6111,11 @@ var tailwindToStyle = (function (exports) {
     return cssResult;
   }
 
-  /**
-   * Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
-   * Mendukung nested selectors, state variants, responsive variants, dan @css directives
-   * @param {Object} obj - Objek dengan format style mirip SCSS
-   * @returns {string} String CSS yang dihasilkan
+  /**
+   * Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
+   * Mendukung nested selectors, state variants, responsive variants, dan @css directives
+   * @param {Object} obj - Objek dengan format style mirip SCSS
+   * @returns {string} String CSS yang dihasilkan
    */
   function twsx(obj) {
     if (!obj || typeof obj !== "object") {
@@ -6366,20 +6380,20 @@ var tailwindToStyle = (function (exports) {
   }
 
   // Daftarkan versi debounced dari fungsi-fungsi export
-  /**
-   * Versi debounced dari fungsi tws
-   * Membantu mengoptimalkan performa ketika memanggil tws berulang kali
-   * @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
-   * @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
-   * @returns {string|Object} String CSS inline atau objek style JSON
+  /**
+   * Versi debounced dari fungsi tws
+   * Membantu mengoptimalkan performa ketika memanggil tws berulang kali
+   * @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
+   * @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
+   * @returns {string|Object} String CSS inline atau objek style JSON
    */
   const debouncedTws = debounce(tws);
 
-  /**
-   * Versi debounced dari fungsi twsx
-   * Membantu mengoptimalkan performa ketika memanggil twsx berulang kali
-   * @param {Object} obj - Objek dengan format style mirip SCSS
-   * @returns {string} String CSS yang dihasilkan
+  /**
+   * Versi debounced dari fungsi twsx
+   * Membantu mengoptimalkan performa ketika memanggil twsx berulang kali
+   * @param {Object} obj - Objek dengan format style mirip SCSS
+   * @returns {string} String CSS yang dihasilkan
    */
   const debouncedTwsx = debounce(twsx);