tailwind-to-style 2.5.1 → 2.5.2

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.5.0
+ * tailwind-to-style v2.5.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1349,9 +1349,11 @@ function generateCssString(getCssString = () => {}) {
 
     const hexColor = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
     const rgbColor = /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/;
-    const rgbaColor = /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(0|1|0?\.\d+)\s*\)$/;
+    const rgbaColor =
+      /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(0|1|0?\.\d+)\s*\)$/;
     const hslColor = /^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/;
-    const hslaColor = /^hsla\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*,\s*(0|1|0?\.\d+)\s*\)$/;
+    const hslaColor =
+      /^hsla\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*,\s*(0|1|0?\.\d+)\s*\)$/;
 
     return [
       hexColor.test(value),
@@ -4480,62 +4482,62 @@ function generator$I(configOptions = {}) {
   return responsiveCssString;
 }
 
-function generator$H(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
-
-  const { rotate = {} } = theme;
-
-  Object.entries(rotate).forEach(([key, value]) => {
-    rotate[`-${key}`] = `-${value}`.replace("--", "-");
-  });
-
-  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
-    const cssString = getCssByOptions(rotate, (keyTmp, value) => {
-      let prefix = `${globalPrefix}rotate`;
-      let key = keyTmp;
-      if (`${key}`.indexOf("-") >= 0) {
-        key = key.split("-").join("");
-        prefix = `${globalPrefix}-rotate`;
-      }
-      return `
-          ${prefix}-${key} {
-            --transform-rotate: ${value};
-          }
-        `;
-    });
-    return cssString;
-  });
-
-  return responsiveCssString;
+function generator$H(configOptions = {}) {
+  const { prefix: globalPrefix, theme = {} } = configOptions;
+
+  const { rotate = {} } = theme;
+
+  Object.entries(rotate).forEach(([key, value]) => {
+    rotate[`-${key}`] = `-${value}`.replace("--", "-");
+  });
+
+  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
+    const cssString = getCssByOptions(rotate, (keyTmp, value) => {
+      let prefix = `${globalPrefix}rotate`;
+      let key = keyTmp;
+      if (`${key}`.indexOf("-") >= 0) {
+        key = key.split("-").join("");
+        prefix = `${globalPrefix}-rotate`;
+      }
+      return `
+          ${prefix}-${key} {
+            --transform-rotate: ${value};
+          }
+        `;
+    });
+    return cssString;
+  });
+
+  return responsiveCssString;
 }
 
-function generator$G(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
-
-  const prefix = `${globalPrefix}scale`;
-
-  const { scale = {} } = theme;
-
-  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
-    const cssString = getCssByOptions(
-      scale,
-      (key, value) => `
-          ${prefix}-${key} {
-            --transform-scale-x: ${value};
-            --transform-scale-y: ${value};
-          }
-          ${prefix}-x-${key} {
-            --transform-scale-x: ${value};
-          }
-          ${prefix}-y-${key} {
-            --transform-scale-y: ${value};
-          }
-        `
-    );
-    return cssString;
-  });
-
-  return responsiveCssString;
+function generator$G(configOptions = {}) {
+  const { prefix: globalPrefix, theme = {} } = configOptions;
+
+  const prefix = `${globalPrefix}scale`;
+
+  const { scale = {} } = theme;
+
+  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
+    const cssString = getCssByOptions(
+      scale,
+      (key, value) => `
+          ${prefix}-${key} {
+            --transform-scale-x: ${value};
+            --transform-scale-y: ${value};
+          }
+          ${prefix}-x-${key} {
+            --transform-scale-x: ${value};
+          }
+          ${prefix}-y-${key} {
+            --transform-scale-y: ${value};
+          }
+        `
+    );
+    return cssString;
+  });
+
+  return responsiveCssString;
 }
 
 function generator$F(configOptions = {}) {
@@ -4802,36 +4804,36 @@ function generator$y(configOptions = {}) {
   return responsiveCssString;
 }
 
-function generator$x(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
-
-  const { skew = {} } = theme;
-
-  Object.entries(skew).forEach(([key, value]) => {
-    skew[`-${key}`] = `-${value}`.replace("--", "-");
-  });
-
-  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
-    const cssString = getCssByOptions(skew, (keyTmp, value) => {
-      let prefix = `${globalPrefix}skew`;
-      let key = keyTmp;
-      if (`${key}`.indexOf("-") >= 0) {
-        key = key.split("-").join("");
-        prefix = `${globalPrefix}-skew`;
-      }
-      return `
-          ${prefix}-x-${key} {
-            --transform-skew-x: ${value};
-          }
-          ${prefix}-y-${key} {
-            --transform-skew-y: ${value};
-          }
-        `;
-    });
-    return cssString;
-  });
-
-  return responsiveCssString;
+function generator$x(configOptions = {}) {
+  const { prefix: globalPrefix, theme = {} } = configOptions;
+
+  const { skew = {} } = theme;
+
+  Object.entries(skew).forEach(([key, value]) => {
+    skew[`-${key}`] = `-${value}`.replace("--", "-");
+  });
+
+  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
+    const cssString = getCssByOptions(skew, (keyTmp, value) => {
+      let prefix = `${globalPrefix}skew`;
+      let key = keyTmp;
+      if (`${key}`.indexOf("-") >= 0) {
+        key = key.split("-").join("");
+        prefix = `${globalPrefix}-skew`;
+      }
+      return `
+          ${prefix}-x-${key} {
+            --transform-skew-x: ${value};
+          }
+          ${prefix}-y-${key} {
+            --transform-skew-y: ${value};
+          }
+        `;
+    });
+    return cssString;
+  });
+
+  return responsiveCssString;
 }
 
 function generator$w(configOptions = {}) {
@@ -5406,86 +5408,86 @@ function generator$b(configOptions = {}) {
   return responsiveCssString;
 }
 
-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));
-  }
-  ${prefix}transform-none {
-    transform: none;
-  }
-`;
+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));
+  }
+  ${prefix}transform-none {
+    transform: none;
+  }
+`;
 }
 
-function generator$9(configOptions = {}) {
-  const { prefix: globalPrefix } = configOptions;
-
-  const prefix = `${globalPrefix}origin`;
-
-  const propertyOptions = [
-    "center",
-    "top",
-    "top-right",
-    "right",
-    "bottom-right",
-    "bottom",
-    "bottom-left",
-    "left",
-    "top-left",
-  ];
-
-  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
-    const cssString = getCssByOptions(
-      propertyOptions,
-      (key, value) => `
-          ${prefix}-${key} {
-            transform-origin: ${value.replace("-", " ")} !important;
-          }
-        `
-    );
-    return cssString;
-  });
-
-  return responsiveCssString;
+function generator$9(configOptions = {}) {
+  const { prefix: globalPrefix } = configOptions;
+
+  const prefix = `${globalPrefix}origin`;
+
+  const propertyOptions = [
+    "center",
+    "top",
+    "top-right",
+    "right",
+    "bottom-right",
+    "bottom",
+    "bottom-left",
+    "left",
+    "top-left",
+  ];
+
+  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
+    const cssString = getCssByOptions(
+      propertyOptions,
+      (key, value) => `
+          ${prefix}-${key} {
+            transform-origin: ${value.replace("-", " ")} !important;
+          }
+        `
+    );
+    return cssString;
+  });
+
+  return responsiveCssString;
 }
 
-function generator$8(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
-
-  const { translate = {} } = theme;
-
-  Object.entries(translate).forEach(([key, value]) => {
-    translate[`-${key}`] = `-${value}`.replace("--", "-");
-  });
-
-  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
-    const cssString = getCssByOptions(translate, (keyTmp, value) => {
-      let prefix = `${globalPrefix}translate`;
-      let key = keyTmp;
-      if (`${key}`.indexOf("-") >= 0) {
-        key = key.split("-").join("");
-        prefix = `${globalPrefix}-translate`;
-      }
-      return `
-          ${prefix}-x-${key} {
-            --transform-translate-x: ${value};
-          }
-          ${prefix}-y-${key} {
-            --transform-translate-y: ${value};
-          }
-        `;
-    });
-    return cssString;
-  });
-
-  return responsiveCssString;
+function generator$8(configOptions = {}) {
+  const { prefix: globalPrefix, theme = {} } = configOptions;
+
+  const { translate = {} } = theme;
+
+  Object.entries(translate).forEach(([key, value]) => {
+    translate[`-${key}`] = `-${value}`.replace("--", "-");
+  });
+
+  const responsiveCssString = generateCssString(({ getCssByOptions }) => {
+    const cssString = getCssByOptions(translate, (keyTmp, value) => {
+      let prefix = `${globalPrefix}translate`;
+      let key = keyTmp;
+      if (`${key}`.indexOf("-") >= 0) {
+        key = key.split("-").join("");
+        prefix = `${globalPrefix}-translate`;
+      }
+      return `
+          ${prefix}-x-${key} {
+            --transform-translate-x: ${value};
+          }
+          ${prefix}-y-${key} {
+            --transform-translate-y: ${value};
+          }
+        `;
+    });
+    return cssString;
+  });
+
+  return responsiveCssString;
 }
 
 function generator$7(configOptions = {}) {
@@ -5697,59 +5699,60 @@ function generator(configOptions = {}) {
   return responsiveCssString;
 }
 
-const patterns$1 = {
-  transitionNone: {
-    regex: /^transition-none$/,
-    cssProp: "transition-property",
-    formatter: () => "none",
-  },
-  transitionAll: {
-    regex: /^transition$/,
-    cssProp: "transition-property",
-    formatter: () => "all",
-  },
-  transitionProp: {
-    regex: /^transition-(opacity|colors|color|background|background-color|transform|shadow|opacity|all|none)$/,
-    cssProp: "transition-property",
-    formatter: (value) => {
-      if (value === "colors")
-        return "color, background-color, border-color, text-decoration-color, fill, stroke";
-      if (value === "color") return "color";
-      if (value === "background") return "background-color";
-      return value;
-    },
-  },
-  duration: {
-    regex: /^duration-(\d+)$/,
-    cssProp: "transition-duration",
-    formatter: (value) => `${value}ms`,
-  },
-  delay: {
-    regex: /^delay-(\d+)$/,
-    cssProp: "transition-delay",
-    formatter: (value) => `${value}ms`,
-  },
-  ease: {
-    regex: /^ease-(linear|in|out|in-out)$/,
-    cssProp: "transition-timing-function",
-    formatter: (value) => {
-      switch (value) {
-        case "in":
-          return "cubic-bezier(0.4, 0, 1, 1)";
-        case "out":
-          return "cubic-bezier(0, 0, 0.2, 1)";
-        case "in-out":
-          return "cubic-bezier(0.4, 0, 0.2, 1)";
-        case "linear":
-        default:
-          return "linear";
-      }
-    },
-  },
+const transition = {
+  transitionNone: {
+    regex: /^transition-none$/,
+    cssProp: "transition-property",
+    formatter: () => "none",
+  },
+  transitionAll: {
+    regex: /^transition$/,
+    cssProp: "transition-property",
+    formatter: () => "all",
+  },
+  transitionProp: {
+    regex:
+      /^transition-(opacity|colors|color|background|background-color|transform|shadow|opacity|all|none)$/,
+    cssProp: "transition-property",
+    formatter: (value) => {
+      if (value === "colors")
+        return "color, background-color, border-color, text-decoration-color, fill, stroke";
+      if (value === "color") return "color";
+      if (value === "background") return "background-color";
+      return value;
+    },
+  },
+  duration: {
+    regex: /^duration-(\d+)$/,
+    cssProp: "transition-duration",
+    formatter: (value) => `${value}ms`,
+  },
+  delay: {
+    regex: /^delay-(\d+)$/,
+    cssProp: "transition-delay",
+    formatter: (value) => `${value}ms`,
+  },
+  ease: {
+    regex: /^ease-(linear|in|out|in-out)$/,
+    cssProp: "transition-timing-function",
+    formatter: (value) => {
+      switch (value) {
+        case "in":
+          return "cubic-bezier(0.4, 0, 1, 1)";
+        case "out":
+          return "cubic-bezier(0, 0, 0.2, 1)";
+        case "in-out":
+          return "cubic-bezier(0.4, 0, 0.2, 1)";
+        case "linear":
+        default:
+          return "linear";
+      }
+    },
+  },
 };
 
 const patterns = {
-  ...patterns$1,
+  ...transition,
 };
 
 const plugins = {
@@ -5923,18 +5926,49 @@ 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);
 
 function generateTailwindCssString(options = {}) {
-    // Menggunakan cache untuk mencegah pemrosesan ulang yang tidak perlu
+  // Menggunakan cache untuk mencegah pemrosesan ulang yang tidak perlu
   const key = cacheKey(options);
   if (!configOptionsCache.has(key)) {
     configOptionsCache.set(key, getConfigOptions(options));
     limitCacheSize(configOptionsCache);
   }
-  
+
   const configOptions = configOptionsCache.get(key);
   const { corePlugins = {} } = configOptions;
   const corePluginKeys = Object.keys(corePlugins);
@@ -6016,14 +6050,14 @@ const encodeBracketCache = new Map();
 function encodeBracketValues(input) {
   if (!input) return input;
   if (encodeBracketCache.has(input)) return encodeBracketCache.get(input);
-  
+
   const result = input.replace(/\[([^\]]+)\]/g, (_, content) => {
     const encoded = encodeURIComponent(content)
       .replace(/\(/g, "__P__")
       .replace(/\)/g, "__C__");
     return `[${encoded}]`;
   });
-  
+
   encodeBracketCache.set(input, result);
   limitCacheSize(encodeBracketCache);
   return result;
@@ -6033,11 +6067,11 @@ const decodeBracketCache = new Map();
 function decodeBracketValues(input) {
   if (!input) return input;
   if (decodeBracketCache.has(input)) return decodeBracketCache.get(input);
-  
+
   const result = decodeURIComponent(input)
     .replace(/__P__/g, "(")
     .replace(/__C__/g, ")");
-    
+
   decodeBracketCache.set(input, result);
   limitCacheSize(decodeBracketCache);
   return result;
@@ -6100,33 +6134,34 @@ function inlineStyleToJson(styleString) {
 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);
   }
-  
+
   // Batasi ukuran cache untuk menghindari memory leak
   limitCacheSize(cssResolutionCache);
-  
+
   const cssProperties = {};
   arr.forEach((item) => {
     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;
         }
       }
@@ -6136,8 +6171,8 @@ function separateAndResolveCSS(arr) {
   const resolvedProperties = { ...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) => {
@@ -6164,7 +6199,7 @@ function separateAndResolveCSS(arr) {
   const result = Object.entries(resolvedProperties)
     .map(([key, value]) => `${key}: ${value};`)
     .join(" ");
-    
+
   cssResolutionCache.set(cacheKey, result);
   return result;
 }
@@ -6175,14 +6210,14 @@ function limitCacheSize(cache, maxSize = 1000) {
     // Hapus 20% entri yang paling lama
     const entriesToRemove = Math.floor(cache.size * 0.2);
     const keys = Array.from(cache.keys()).slice(0, entriesToRemove);
-    keys.forEach(key => cache.delete(key));
+    keys.forEach((key) => cache.delete(key));
   }
 }
 
 // Implementasi fungsi debounce untuk mengoptimalkan panggilan berulang
 function debounce(func, wait = 100) {
   let timeout;
-  return function(...args) {
+  return function (...args) {
     const context = this;
     clearTimeout(timeout);
     timeout = setTimeout(() => func.apply(context, args), wait);
@@ -6208,8 +6243,8 @@ 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) {
       console.warn(`No valid Tailwind classes found in input: "${classNames}"`);
@@ -6221,8 +6256,13 @@ function tws(classNames, 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) {
@@ -6255,11 +6295,11 @@ function tws(classNames, convertToJson) {
  * @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) {
@@ -6314,26 +6354,27 @@ function twsx(obj) {
     } while (result !== prev);
 
     return result;
-  }  function walk(selector, val) {
-    if (!selector || typeof selector !== 'string') {
-      console.warn('Invalid selector in walk function:', selector);
+  }
+  function walk(selector, val) {
+    if (!selector || typeof selector !== "string") {
+      console.warn("Invalid selector in walk function:", selector);
       return;
     }
-    
+
     const { baseSelector, cssProperty } = parseSelector(selector);
-      if (
-        cssProperty &&
-        typeof val === "object" &&
-        Array.isArray(val) &&
-        val.length > 0
-      ) {
-        const cssValue = val[0];
-        if (typeof cssValue === "string") {
-          styles[baseSelector] = styles[baseSelector] || "";
-          styles[baseSelector] += `${cssProperty}: ${cssValue};\n`;
-          return;
-        }
+    if (
+      cssProperty &&
+      typeof val === "object" &&
+      Array.isArray(val) &&
+      val.length > 0
+    ) {
+      const cssValue = val[0];
+      if (typeof cssValue === "string") {
+        styles[baseSelector] = styles[baseSelector] || "";
+        styles[baseSelector] += `${cssProperty}: ${cssValue};\n`;
+        return;
       }
+    }
 
     if (Array.isArray(val)) {
       const [base, nested] = val;
@@ -6472,17 +6513,17 @@ function twsx(obj) {
     if (parseSelectorCache.has(selector)) {
       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 = { baseSelector, cssProperty };
     } else {
       result = { baseSelector: selector, cssProperty: null };
     }
-    
+
     parseSelectorCache.set(selector, result);
     limitCacheSize(parseSelectorCache);
     return result;