tailwind-to-style 2.5.1 → 2.5.2

package/dist/index.browser.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
@@ -5590,7 +5590,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  const patterns$1 = {
+  const transition = {
     transitionNone: {
       regex: /^transition-none$/,
       cssProp: "transition-property",
@@ -5641,7 +5641,7 @@ var tailwindToStyle = (function (exports) {
   };
 
   const patterns = {
-    ...patterns$1
+    ...transition
   };
 
   const plugins = {
@@ -5818,6 +5818,33 @@ 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;'
+   */
+  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);
@@ -5953,7 +5980,8 @@ var tailwindToStyle = (function (exports) {
   // 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);
     }
@@ -5965,13 +5993,13 @@ var tailwindToStyle = (function (exports) {
       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;
           }
         }
@@ -5981,7 +6009,7 @@ var tailwindToStyle = (function (exports) {
       ...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;
       });
@@ -6035,7 +6063,7 @@ var tailwindToStyle = (function (exports) {
     }
     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) {
@@ -6047,8 +6075,9 @@ var tailwindToStyle = (function (exports) {
       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) {
@@ -6075,9 +6104,9 @@ var tailwindToStyle = (function (exports) {
    * @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) {
@@ -6116,8 +6145,8 @@ var tailwindToStyle = (function (exports) {
       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 {
@@ -6229,8 +6258,8 @@ var tailwindToStyle = (function (exports) {
         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 = {