tailwind-to-style 2.5.1 → 2.5.3

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

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.5.0
+ * tailwind-to-style v2.5.3
  * 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}
           }
         `;
     });
@@ -5591,7 +5605,7 @@ function generator(configOptions = {}) {
   return responsiveCssString;
 }
 
-const patterns$1 = {
+const transition = {
   transitionNone: {
     regex: /^transition-none$/,
     cssProp: "transition-property",
@@ -5642,7 +5656,7 @@ const patterns$1 = {
 };
 
 const patterns = {
-  ...patterns$1
+  ...transition
 };
 
 const plugins = {
@@ -5819,6 +5833,33 @@ 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;'
+ */
+function resolveCssToClearCss(cssString) {
+  const customVars = {};
+  const props = {};
+  cssString.split(";").forEach(decl => {
+    const [key, value] = decl.split(":").map(s => s && s.trim());
+    if (!key || !value) return;
+    if (key.startsWith("--")) {
+      customVars[key] = value;
+    } else {
+      props[key] = value;
+    }
+  });
+  // Replace var(--foo) in all values
+  Object.keys(props).forEach(key => {
+    let val = props[key];
+    val = val.replace(/var\((--[a-zA-Z0-9-_]+)\)/g, (m, v) => customVars[v] !== undefined ? customVars[v] : m);
+    props[key] = val;
+  });
+  // Build CSS string
+  return Object.entries(props).map(([k, v]) => `${k}: ${v};`).join(" ");
+}
+
 // Cache untuk getConfigOptions
 const configOptionsCache = new Map();
 const cacheKey = options => JSON.stringify(options);
@@ -5954,7 +5995,8 @@ function inlineStyleToJson(styleString) {
 // Cache untuk CSS resolusi
 const cssResolutionCache = new Map();
 function separateAndResolveCSS(arr) {
-  // Membuat kunci cache  const cacheKey = arr.join('|');
+  // Perbaiki: cacheKey harus unik untuk setiap input array
+  const cacheKey = Array.isArray(arr) ? arr.join("|") : String(arr);
   if (cssResolutionCache.has(cacheKey)) {
     return cssResolutionCache.get(cacheKey);
   }
@@ -5966,13 +6008,13 @@ function separateAndResolveCSS(arr) {
     if (!item) return;
     const declarations = item.split(";").map(decl => decl.trim()).filter(decl => decl);
     declarations.forEach(declaration => {
-      const colonIndex = declaration.indexOf(':');
+      const colonIndex = declaration.indexOf(":");
       if (colonIndex === -1) return;
       const key = declaration.substring(0, colonIndex).trim();
       const value = declaration.substring(colonIndex + 1).trim();
       if (key && value) {
         // Prioritaskan nilai yang lebih spesifik (misalnya !important)
-        if (value.includes('!important') || !cssProperties[key]) {
+        if (value.includes("!important") || !cssProperties[key]) {
           cssProperties[key] = value;
         }
       }
@@ -5982,7 +6024,7 @@ function separateAndResolveCSS(arr) {
     ...cssProperties
   };
   const resolveValue = (value, variables) => {
-    if (!value || !value.includes('var(')) return value;
+    if (!value || !value.includes("var(")) return value;
     return value.replace(/var\((--[a-zA-Z0-9-]+)(?:,\s*([^)]+))?\)/g, (match, variable, fallback) => {
       return variables[variable] || fallback || match;
     });
@@ -6024,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)) {
@@ -6036,7 +6078,7 @@ function tws(classNames, convertToJson) {
   }
   let classes;
   try {
-    classes = classNames.match(/[\w-]+\[[^\]]+\]|[\w-]+\.\d+|[\w-]+/g);
+    classes = classNames.match(/[\w-\/]+(?:\[[^\]]+\])?/g);
 
     // Jika tidak ada class yang valid ditemukan
     if (!classes || classes.length === 0) {
@@ -6048,8 +6090,9 @@ function tws(classNames, convertToJson) {
     return convertToJson ? {} : "";
   }
   let cssResult = classes.map(className => {
-    if (cssObject[className]) {
-      return cssObject[className];
+    let result = cssObject[className] || cssObject[className.replace(/(\/)/g, "\\$1")] || cssObject[className.replace(/\./g, "\\.")];
+    if (result) {
+      return resolveCssToClearCss(result);
     } else if (className.includes("[")) {
       const match = className.match(/\[([^\]]+)\]/);
       if (match) {
@@ -6069,16 +6112,16 @@ 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
+ * @returns {string} String CSS yang dihasilkan
  */
 function twsx(obj) {
-  if (!obj || typeof obj !== 'object') {
-    console.warn('twsx: Expected an object but received:', obj);
-    return '';
+  if (!obj || typeof obj !== "object") {
+    console.warn("twsx: Expected an object but received:", obj);
+    return "";
   }
   const styles = {};
   function expandGroupedClass(input) {
@@ -6117,8 +6160,8 @@ function twsx(obj) {
     return result;
   }
   function walk(selector, val) {
-    if (!selector || typeof selector !== 'string') {
-      console.warn('Invalid selector in walk function:', selector);
+    if (!selector || typeof selector !== "string") {
+      console.warn("Invalid selector in walk function:", selector);
       return;
     }
     const {
@@ -6230,8 +6273,8 @@ function twsx(obj) {
       return parseSelectorCache.get(selector);
     }
     let result;
-    if (selector.includes('@css')) {
-      const parts = selector.split('@css');
+    if (selector.includes("@css")) {
+      const parts = selector.split("@css");
       const baseSelector = parts[0].trim();
       const cssProperty = parts[1]?.trim();
       result = {
@@ -6338,20 +6381,20 @@ function twsx(obj) {
 }
 
 // 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);