tailwind-to-style 2.5.2 → 2.6.1

package/{index.js → dist/index.cjs.js}

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.5.2
+ * tailwind-to-style v2.6.1
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1351,8 +1351,15 @@ const theme = {
   }
 };
 
+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) {
@@ -1391,6 +1398,7 @@ function getConfigOptions(options = {}) {
   });
   return {
     prefix: "",
+    ...configOptions,
     ...options,
     theme: newTheme
   };
@@ -1865,7 +1873,8 @@ function generator$2c(configOptions = {}) {
 function generator$2b(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}blur`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -1879,10 +1888,12 @@ function generator$2b(configOptions = {}) {
       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}
           }
         `;
     });
@@ -2279,7 +2290,8 @@ function generator$21(configOptions = {}) {
 function generator$20(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}brightness`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -2293,10 +2305,12 @@ function generator$20(configOptions = {}) {
       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}
           }
         `;
     });
@@ -2405,7 +2419,8 @@ function generator$1Y(configOptions = {}) {
 function generator$1X(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}contrast`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -2419,10 +2434,12 @@ function generator$1X(configOptions = {}) {
       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}
           }
         `;
     });
@@ -2637,34 +2654,11 @@ function generator$1P(configOptions = {}) {
 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;
   }
 `;
 }
@@ -3004,7 +2998,8 @@ function generator$1A(configOptions = {}) {
 function generator$1z(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}grayscale`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -3018,10 +3013,12 @@ function generator$1z(configOptions = {}) {
       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}
           }
         `;
     });
@@ -3299,7 +3296,8 @@ function generator$1n(configOptions = {}) {
 function generator$1m(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const {
     hueRotate = {}
@@ -3317,10 +3315,12 @@ function generator$1m(configOptions = {}) {
       }
       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}
           }
         `;
     });
@@ -3407,7 +3407,8 @@ function generator$1k(configOptions = {}) {
 function generator$1j(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}invert`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -3421,10 +3422,12 @@ function generator$1j(configOptions = {}) {
       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}
           }
         `;
     });
@@ -3840,7 +3843,8 @@ function generator$12(configOptions = {}) {
 function generator$11(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}opacity`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -3853,9 +3857,11 @@ function generator$11(configOptions = {}) {
     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;
@@ -4394,7 +4400,8 @@ function generator$J(configOptions = {}) {
 function generator$I(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}saturate`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -4408,10 +4415,12 @@ function generator$I(configOptions = {}) {
       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}
           }
         `;
     });
@@ -4423,7 +4432,8 @@ function generator$I(configOptions = {}) {
 function generator$H(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const {
     rotate = {}
@@ -4444,6 +4454,7 @@ function generator$H(configOptions = {}) {
       return `
           ${prefix}-${key} {
             --transform-rotate: ${value};
+            ${vars.transform}
           }
         `;
     });
@@ -4455,7 +4466,8 @@ function generator$H(configOptions = {}) {
 function generator$G(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}scale`;
   const {
@@ -4468,12 +4480,15 @@ function generator$G(configOptions = {}) {
           ${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;
@@ -4691,7 +4706,8 @@ function generator$A(configOptions = {}) {
 function generator$z(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const prefix = `${globalPrefix}sepia`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -4705,10 +4721,12 @@ function generator$z(configOptions = {}) {
       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}
           }
         `;
     });
@@ -4743,7 +4761,8 @@ function generator$y(configOptions = {}) {
 function generator$x(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const {
     skew = {}
@@ -4764,9 +4783,11 @@ function generator$x(configOptions = {}) {
       return `
           ${prefix}-x-${key} {
             --transform-skew-x: ${value};
+            ${vars.transform}
           }
           ${prefix}-y-${key} {
             --transform-skew-y: ${value};
+            ${vars.transform}
           }
         `;
     });
@@ -5338,19 +5359,9 @@ function generator$b(configOptions = {}) {
 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;
   }
 `;
 }
@@ -5366,7 +5377,7 @@ function generator$9(configOptions = {}) {
   }) => {
     const cssString = getCssByOptions(propertyOptions, (key, value) => `
           ${prefix}-${key} {
-            transform-origin: ${value.replace("-", " ")} !important;
+            transform-origin: ${value.replace("-", " ")};
           }
         `);
     return cssString;
@@ -5377,7 +5388,8 @@ function generator$9(configOptions = {}) {
 function generator$8(configOptions = {}) {
   const {
     prefix: globalPrefix,
-    theme = {}
+    theme = {},
+    vars = {}
   } = configOptions;
   const {
     translate = {}
@@ -5398,9 +5410,11 @@ function generator$8(configOptions = {}) {
       return `
           ${prefix}-x-${key} {
             --transform-translate-x: ${value};
+            ${vars.transform}
           }
           ${prefix}-y-${key} {
             --transform-translate-y: ${value};
+            ${vars.transform}
           }
         `;
     });
@@ -5819,10 +5833,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 = {};
@@ -5982,7 +5996,7 @@ function inlineStyleToJson(styleString) {
 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);
   }
@@ -6052,11 +6066,11 @@ function debounce(func, wait = 100) {
   };
 }
 
-/**
- * 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)) {
@@ -6098,17 +6112,21 @@ function tws(classNames, convertToJson) {
   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
+ * @param {Object} [options] - Opsi tambahan, misal { inject: true/false }
+ * @returns {string} String CSS yang dihasilkan
  */
-function twsx(obj) {
+function twsx(obj, options = {}) {
   if (!obj || typeof obj !== "object") {
     console.warn("twsx: Expected an object but received:", obj);
     return "";
   }
+  const {
+    inject = true
+  } = options;
   const styles = {};
   function expandGroupedClass(input) {
     function expandDirectiveGroups(str) {
@@ -6363,24 +6381,59 @@ function twsx(obj) {
     }
     cssString += `}`;
   }
-  return cssString.trim();
+  cssString = cssString.trim();
+  if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
+    autoInjectCss(cssString);
+  }
+  return cssString;
+}
+
+// Fungsi hashCode sederhana untuk deduplikasi CSS
+function getCssHash(str) {
+  let hash = 0,
+    i,
+    chr;
+  if (str.length === 0) return hash;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+}
+
+// Cache untuk deduplikasi auto-inject CSS pakai hash
+const injectedCssHashSet = new Set();
+function autoInjectCss(cssString) {
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    const cssHash = getCssHash(cssString);
+    if (injectedCssHashSet.has(cssHash)) return;
+    injectedCssHashSet.add(cssHash);
+    let styleTag = document.getElementById("twsx-auto-style");
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = "twsx-auto-style";
+      document.head.appendChild(styleTag);
+    }
+    styleTag.textContent += `\n${cssString}`;
+  }
 }
 
 // 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);