tailwind-to-style 2.5.1 → 2.5.3

package/dist/index.esm.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
@@ -1247,8 +1247,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,
+  vars,
 };
 
 function isFunction(functionToCheck) {
@@ -1290,6 +1297,7 @@ function getConfigOptions(options = {}) {
 
   return {
     prefix: "",
+    ...configOptions,
     ...options,
     theme: newTheme,
   };
@@ -1349,9 +1357,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),
@@ -1815,7 +1825,7 @@ function generator$2c(configOptions = {}) {
 }
 
 function generator$2b(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}blur`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -1827,10 +1837,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}
           }
         `;
     });
@@ -2224,7 +2236,7 @@ function generator$21(configOptions = {}) {
 }
 
 function generator$20(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}brightness`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -2236,10 +2248,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}
           }
         `;
     });
@@ -2352,7 +2366,7 @@ function generator$1Y(configOptions = {}) {
 }
 
 function generator$1X(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}contrast`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -2364,10 +2378,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 +2653,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;
   }
 `;
 }
@@ -3017,7 +3010,7 @@ function generator$1A(configOptions = {}) {
 }
 
 function generator$1z(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}grayscale`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -3029,10 +3022,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}
           }
         `;
     });
@@ -3316,7 +3311,7 @@ function generator$1n(configOptions = {}) {
 }
 
 function generator$1m(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const { hueRotate = {} } = theme;
 
@@ -3331,10 +3326,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}
           }
         `;
     });
@@ -3420,7 +3417,7 @@ function generator$1k(configOptions = {}) {
 }
 
 function generator$1j(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}invert`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -3432,10 +3429,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}
           }
         `;
     });
@@ -3902,7 +3901,7 @@ function generator$12(configOptions = {}) {
 }
 
 function generator$11(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}opacity`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -3915,9 +3914,11 @@ function generator$11(configOptions = {}) {
       (key, value) => `
           ${prefix}-${key} {
             opacity: ${value};
+            ${vars.filter}
           }
           ${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}-${key} {
-            --backdrop-opacity: opacity(${value});
+            --backdrop-opacity: ${value};
+            ${vars.backdropFilter}
           }
         `
     );
@@ -4455,7 +4456,7 @@ function generator$J(configOptions = {}) {
 }
 
 function generator$I(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}saturate`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -4467,10 +4468,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}
           }
         `;
     });
@@ -4481,7 +4484,7 @@ function generator$I(configOptions = {}) {
 }
 
 function generator$H(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const { rotate = {} } = theme;
 
@@ -4500,6 +4503,7 @@ function generator$H(configOptions = {}) {
       return `
           ${prefix}-${key} {
             --transform-rotate: ${value};
+            ${vars.transform}
           }
         `;
     });
@@ -4510,7 +4514,7 @@ function generator$H(configOptions = {}) {
 }
 
 function generator$G(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}scale`;
 
@@ -4523,12 +4527,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}
           }
         `
     );
@@ -4754,7 +4761,7 @@ function generator$A(configOptions = {}) {
 }
 
 function generator$z(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const prefix = `${globalPrefix}sepia`;
   const basePrefix = prefix.replace(globalPrefix, "");
@@ -4766,10 +4773,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}
           }
         `;
     });
@@ -4803,7 +4812,7 @@ function generator$y(configOptions = {}) {
 }
 
 function generator$x(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const { skew = {} } = theme;
 
@@ -4822,9 +4831,11 @@ function generator$x(configOptions = {}) {
       return `
           ${prefix}-x-${key} {
             --transform-skew-x: ${value};
+            ${vars.transform}
           }
           ${prefix}-y-${key} {
             --transform-skew-y: ${value};
+            ${vars.transform}
           }
         `;
     });
@@ -5407,19 +5418,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;
   }
 `;
 }
@@ -5446,7 +5447,7 @@ function generator$9(configOptions = {}) {
       propertyOptions,
       (key, value) => `
           ${prefix}-${key} {
-            transform-origin: ${value.replace("-", " ")} !important;
+            transform-origin: ${value.replace("-", " ")};
           }
         `
     );
@@ -5457,7 +5458,7 @@ function generator$9(configOptions = {}) {
 }
 
 function generator$8(configOptions = {}) {
-  const { prefix: globalPrefix, theme = {} } = configOptions;
+  const { prefix: globalPrefix, theme = {}, vars = {} } = configOptions;
 
   const { translate = {} } = theme;
 
@@ -5476,9 +5477,11 @@ function generator$8(configOptions = {}) {
       return `
           ${prefix}-x-${key} {
             --transform-translate-x: ${value};
+            ${vars.transform}
           }
           ${prefix}-y-${key} {
             --transform-translate-y: ${value};
+            ${vars.transform}
           }
         `;
     });
@@ -5697,909 +5700,948 @@ 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 = {
+  ...transition,
+};
+
+const plugins = {
+  accentColor: generator$2r,
+  accessibility: generator$2q,
+  alignContent: generator$2p,
+  alignItems: generator$2o,
+  alignSelf: generator$2n,
+  appearance: generator$2m,
+  aspect: generator$2l,
+  backgroundAttachment: generator$2k,
+  backgroundClip: generator$2j,
+  backgroundColor: generator$2i,
+  backgroundImage: generator$2h,
+  backgroundOpacity: generator$2g,
+  backgroundOrigin: generator$2f,
+  backgroundPosition: generator$2e,
+  backgroundRepeat: generator$2d,
+  backgroundSize: generator$2c,
+  blur: generator$2b,
+  borderCollapse: generator$2a,
+  borderColor: generator$29,
+  borderOpacity: generator$28,
+  borderRadius: generator$27,
+  borderSpacing: generator$26,
+  borderStyle: generator$25,
+  borderWidth: generator$24,
+  boxDecorationBreak: generator$23,
+  boxShadow: generator$22,
+  boxSizing: generator$21,
+  brightness: generator$20,
+  captionSide: generator$1$,
+  caretColor: generator$1_,
+  clear: generator$1Z,
+  content: generator$1Y,
+  contrast: generator$1X,
+  cursor: generator$1W,
+  display: generator$1V,
+  divideColor: generator$1U,
+  divideOpacity: generator$1T,
+  divideStyle: generator$1S,
+  divideWidth: generator$1R,
+  dropShadow: generator$1Q,
+  fill: generator$1P,
+  filter: generator$1O,
+  flex: generator$1N,
+  flexBasis: generator$1M,
+  flexDirection: generator$1L,
+  flexGrow: generator$1K,
+  flexShrink: generator$1J,
+  flexWrap: generator$1I,
+  float: generator$1H,
+  fontSize: generator$1G,
+  fontSmoothing: generator$1F,
+  fontStyle: generator$1E,
+  fontVariantNumeric: generator$1D,
+  fontWeight: generator$1C,
+  gap: generator$1B,
+  gradientColorStops: generator$1A,
+  grayscale: generator$1z,
+  gridAutoColumns: generator$1y,
+  gridAutoFlow: generator$1x,
+  gridAutoRows: generator$1w,
+  gridColumn: generator$1v,
+  gridColumnEnd: generator$1u,
+  gridColumnStart: generator$1t,
+  gridRow: generator$1s,
+  gridRowEnd: generator$1r,
+  gridRowStart: generator$1q,
+  gridTemplateColumns: generator$1p,
+  gridTemplateRows: generator$1o,
+  height: generator$1n,
+  hueRotate: generator$1m,
+  hyphens: generator$1l,
+  inset: generator$1k,
+  invert: generator$1j,
+  isolation: generator$1i,
+  justifyContent: generator$1h,
+  justifyItems: generator$1g,
+  justifySelf: generator$1f,
+  letterSpacing: generator$1e,
+  lineClamp: generator$1d,
+  lineHeight: generator$1c,
+  listStylePosition: generator$1b,
+  listStyleType: generator$1a,
+  margin: generator$19,
+  maxHeight: generator$18,
+  maxWidth: generator$17,
+  minHeight: generator$16,
+  minWidth: generator$15,
+  objectFit: generator$13,
+  mixBlendMode: generator$14,
+  objectPosition: generator$12,
+  opacity: generator$11,
+  order: generator$10,
+  outlineColor: generator$$,
+  outlineOffset: generator$_,
+  outlineOpacity: generator$Z,
+  outlineStyle: generator$Y,
+  outlineWidth: generator$X,
+  overflow: generator$W,
+  overscrollBehavior: generator$V,
+  padding: generator$U,
+  placeContent: generator$T,
+  placeItems: generator$S,
+  placeSelf: generator$R,
+  pointerEvents: generator$Q,
+  position: generator$P,
+  resize: generator$O,
+  ringColor: generator$N,
+  ringOffsetColor: generator$M,
+  ringOffsetWidth: generator$L,
+  ringOpacity: generator$K,
+  ringWidth: generator$J,
+  rotate: generator$H,
+  saturate: generator$I,
+  scale: generator$G,
+  scrollBehavior: generator$F,
+  scrollMargin: generator$E,
+  scrollPadding: generator$D,
+  scrollSnapAlign: generator$C,
+  scrollSnapStop: generator$B,
+  scrollSnapType: generator$A,
+  sepia: generator$z,
+  size: generator$y,
+  skew: generator$x,
+  space: generator$w,
+  stroke: generator$v,
+  strokeWidth: generator$u,
+  tableLayout: generator$t,
+  textAlign: generator$s,
+  textColor: generator$r,
+  textDecoration: generator$q,
+  textDecorationColor: generator$p,
+  textDecorationStyle: generator$o,
+  textDecorationThickness: generator$n,
+  textIndent: generator$m,
+  textOpacity: generator$l,
+  textOverflow: generator$k,
+  textShadowBlur: generator$j,
+  textShadowColor: generator$i,
+  textShadowOpacity: generator$h,
+  textShadowX: generator$g,
+  textShadowY: generator$f,
+  textTransform: generator$e,
+  textUnderlineOffset: generator$d,
+  textWrap: generator$c,
+  touchAction: generator$b,
+  transform: generator$a,
+  transformOrigin: generator$9,
+  translate: generator$8,
+  userSelect: generator$7,
+  verticalAlign: generator$6,
+  visibility: generator$5,
+  whitespace: generator$4,
+  width: generator$3,
+  willChange: generator$1,
+  wordBreak: generator$2,
+  zIndex: generator,
+};
+
+function parseCustomClassWithPatterns(className) {
+  for (const key in patterns) {
+    const { regex, cssProp, formatter } = patterns[key];
+    const match = className.match(regex);
+    if (match) {
+      const value = formatter(match[1]);
+      return `${cssProp}: ${value};`;
+    }
+  }
+  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
+  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);
+
+  let cssString = ``;
+  Object.keys(plugins).forEach((key) => {
+    if (corePluginKeys.indexOf(key) >= 0 && !corePlugins[key]) {
+      cssString += "";
+    } else {
+      cssString += plugins[key](configOptions);
+    }
+  });
+  return cssString;
+}
+
+function convertCssToObject(cssString) {
+  const obj = {};
+  const regex = /([a-zA-Z0-9\-_\\/.]+)\s*{\s*([^}]+)\s*}/g;
+  let match;
+
+  while ((match = regex.exec(cssString)) !== null) {
+    const className = match[1].replace(/\\\\/g, "\\").replace(/^_/, "");
+    const cssRules = match[2].trim().replace(/\s+/g, " ");
+    obj[className] = cssRules;
+  }
+
+  return obj;
+}
+
+let twString = null;
+let cssObject = null;
+
+if (!twString) {
+  twString = generateTailwindCssString().replace(/\s\s+/g, " ");
+}
+
+if (!cssObject) {
+  cssObject = convertCssToObject(twString);
+}
+
+const breakpoints = {
+  sm: "@media (min-width: 640px)",
+  md: "@media (min-width: 768px)",
+  lg: "@media (min-width: 1024px)",
+  xl: "@media (min-width: 1280px)",
+  "2xl": "@media (min-width: 1536px)",
+};
+
+const pseudoVariants = new Set([
+  "hover",
+  "focus",
+  "focus-within",
+  "active",
+  "visited",
+  "disabled",
+  "first",
+  "last",
+  "checked",
+  "invalid",
+  "required",
+]);
+
+const specialVariants = {
+  group: (state, sel) => `.group:${state} ${sel}`,
+  peer: (state, sel) => `.peer:${state} ~ ${sel}`,
 };
 
-const patterns = {
-  ...patterns$1,
+const selectorVariants = {
+  first: () => `> :first-child`,
+  last: () => `> :last-child`,
+  odd: () => `> :nth-child(odd)`,
+  even: () => `> :nth-child(even)`,
+  not: (arg) => `> :not(${arg})`,
+  number: (arg) => `> :nth-child(${arg})`,
 };
 
-const plugins = {
-  accentColor: generator$2r,
-  accessibility: generator$2q,
-  alignContent: generator$2p,
-  alignItems: generator$2o,
-  alignSelf: generator$2n,
-  appearance: generator$2m,
-  aspect: generator$2l,
-  backgroundAttachment: generator$2k,
-  backgroundClip: generator$2j,
-  backgroundColor: generator$2i,
-  backgroundImage: generator$2h,
-  backgroundOpacity: generator$2g,
-  backgroundOrigin: generator$2f,
-  backgroundPosition: generator$2e,
-  backgroundRepeat: generator$2d,
-  backgroundSize: generator$2c,
-  blur: generator$2b,
-  borderCollapse: generator$2a,
-  borderColor: generator$29,
-  borderOpacity: generator$28,
-  borderRadius: generator$27,
-  borderSpacing: generator$26,
-  borderStyle: generator$25,
-  borderWidth: generator$24,
-  boxDecorationBreak: generator$23,
-  boxShadow: generator$22,
-  boxSizing: generator$21,
-  brightness: generator$20,
-  captionSide: generator$1$,
-  caretColor: generator$1_,
-  clear: generator$1Z,
-  content: generator$1Y,
-  contrast: generator$1X,
-  cursor: generator$1W,
-  display: generator$1V,
-  divideColor: generator$1U,
-  divideOpacity: generator$1T,
-  divideStyle: generator$1S,
-  divideWidth: generator$1R,
-  dropShadow: generator$1Q,
-  fill: generator$1P,
-  filter: generator$1O,
-  flex: generator$1N,
-  flexBasis: generator$1M,
-  flexDirection: generator$1L,
-  flexGrow: generator$1K,
-  flexShrink: generator$1J,
-  flexWrap: generator$1I,
-  float: generator$1H,
-  fontSize: generator$1G,
-  fontSmoothing: generator$1F,
-  fontStyle: generator$1E,
-  fontVariantNumeric: generator$1D,
-  fontWeight: generator$1C,
-  gap: generator$1B,
-  gradientColorStops: generator$1A,
-  grayscale: generator$1z,
-  gridAutoColumns: generator$1y,
-  gridAutoFlow: generator$1x,
-  gridAutoRows: generator$1w,
-  gridColumn: generator$1v,
-  gridColumnEnd: generator$1u,
-  gridColumnStart: generator$1t,
-  gridRow: generator$1s,
-  gridRowEnd: generator$1r,
-  gridRowStart: generator$1q,
-  gridTemplateColumns: generator$1p,
-  gridTemplateRows: generator$1o,
-  height: generator$1n,
-  hueRotate: generator$1m,
-  hyphens: generator$1l,
-  inset: generator$1k,
-  invert: generator$1j,
-  isolation: generator$1i,
-  justifyContent: generator$1h,
-  justifyItems: generator$1g,
-  justifySelf: generator$1f,
-  letterSpacing: generator$1e,
-  lineClamp: generator$1d,
-  lineHeight: generator$1c,
-  listStylePosition: generator$1b,
-  listStyleType: generator$1a,
-  margin: generator$19,
-  maxHeight: generator$18,
-  maxWidth: generator$17,
-  minHeight: generator$16,
-  minWidth: generator$15,
-  objectFit: generator$13,
-  mixBlendMode: generator$14,
-  objectPosition: generator$12,
-  opacity: generator$11,
-  order: generator$10,
-  outlineColor: generator$$,
-  outlineOffset: generator$_,
-  outlineOpacity: generator$Z,
-  outlineStyle: generator$Y,
-  outlineWidth: generator$X,
-  overflow: generator$W,
-  overscrollBehavior: generator$V,
-  padding: generator$U,
-  placeContent: generator$T,
-  placeItems: generator$S,
-  placeSelf: generator$R,
-  pointerEvents: generator$Q,
-  position: generator$P,
-  resize: generator$O,
-  ringColor: generator$N,
-  ringOffsetColor: generator$M,
-  ringOffsetWidth: generator$L,
-  ringOpacity: generator$K,
-  ringWidth: generator$J,
-  rotate: generator$H,
-  saturate: generator$I,
-  scale: generator$G,
-  scrollBehavior: generator$F,
-  scrollMargin: generator$E,
-  scrollPadding: generator$D,
-  scrollSnapAlign: generator$C,
-  scrollSnapStop: generator$B,
-  scrollSnapType: generator$A,
-  sepia: generator$z,
-  size: generator$y,
-  skew: generator$x,
-  space: generator$w,
-  stroke: generator$v,
-  strokeWidth: generator$u,
-  tableLayout: generator$t,
-  textAlign: generator$s,
-  textColor: generator$r,
-  textDecoration: generator$q,
-  textDecorationColor: generator$p,
-  textDecorationStyle: generator$o,
-  textDecorationThickness: generator$n,
-  textIndent: generator$m,
-  textOpacity: generator$l,
-  textOverflow: generator$k,
-  textShadowBlur: generator$j,
-  textShadowColor: generator$i,
-  textShadowOpacity: generator$h,
-  textShadowX: generator$g,
-  textShadowY: generator$f,
-  textTransform: generator$e,
-  textUnderlineOffset: generator$d,
-  textWrap: generator$c,
-  touchAction: generator$b,
-  transform: generator$a,
-  transformOrigin: generator$9,
-  translate: generator$8,
-  userSelect: generator$7,
-  verticalAlign: generator$6,
-  visibility: generator$5,
-  whitespace: generator$4,
-  width: generator$3,
-  willChange: generator$1,
-  wordBreak: generator$2,
-  zIndex: generator,
-};
-
-function parseCustomClassWithPatterns(className) {
-  for (const key in patterns) {
-    const { regex, cssProp, formatter } = patterns[key];
-    const match = className.match(regex);
-    if (match) {
-      const value = formatter(match[1]);
-      return `${cssProp}: ${value};`;
-    }
-  }
-  return null;
-}
-
-// 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
-  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);
-
-  let cssString = ``;
-  Object.keys(plugins).forEach((key) => {
-    if (corePluginKeys.indexOf(key) >= 0 && !corePlugins[key]) {
-      cssString += "";
-    } else {
-      cssString += plugins[key](configOptions);
-    }
-  });
-  return cssString;
-}
-
-function convertCssToObject(cssString) {
-  const obj = {};
-  const regex = /([a-zA-Z0-9\-_\\/.]+)\s*{\s*([^}]+)\s*}/g;
-  let match;
-
-  while ((match = regex.exec(cssString)) !== null) {
-    const className = match[1].replace(/\\\\/g, "\\").replace(/^_/, "");
-    const cssRules = match[2].trim().replace(/\s+/g, " ");
-    obj[className] = cssRules;
-  }
-
-  return obj;
-}
-
-let twString = null;
-let cssObject = null;
-
-if (!twString) {
-  twString = generateTailwindCssString().replace(/\s\s+/g, " ");
-}
-
-if (!cssObject) {
-  cssObject = convertCssToObject(twString);
-}
-
-const breakpoints = {
-  sm: "@media (min-width: 640px)",
-  md: "@media (min-width: 768px)",
-  lg: "@media (min-width: 1024px)",
-  xl: "@media (min-width: 1280px)",
-  "2xl": "@media (min-width: 1536px)",
-};
-
-const pseudoVariants = new Set([
-  "hover",
-  "focus",
-  "focus-within",
-  "active",
-  "visited",
-  "disabled",
-  "first",
-  "last",
-  "checked",
-  "invalid",
-  "required",
-]);
-
-const specialVariants = {
-  group: (state, sel) => `.group:${state} ${sel}`,
-  peer: (state, sel) => `.peer:${state} ~ ${sel}`,
-};
-
-const selectorVariants = {
-  first: () => `> :first-child`,
-  last: () => `> :last-child`,
-  odd: () => `> :nth-child(odd)`,
-  even: () => `> :nth-child(even)`,
-  not: (arg) => `> :not(${arg})`,
-  number: (arg) => `> :nth-child(${arg})`,
-};
-
-// Mengoptimalkan encoding/decoding bracket values dengan memoization
-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;
-}
-
-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;
-}
-
-function replaceSelector(selector) {
-  return selector.replace(
-    /c-(first|last|odd|even|\d+|not\([^)]+\))/g,
-    (_, raw) => {
-      if (/^\d+$/.test(raw)) return selectorVariants.number(raw);
-      const notMatch = raw.match(/^not\(([^)]+)\)$/);
-      if (notMatch) return selectorVariants.not(notMatch[1]);
-      if (selectorVariants[raw]) return selectorVariants[raw]();
-      return raw;
-    }
-  );
-}
-
-function resolveVariants(selector, variants) {
-  let media = null;
-  let finalSelector = selector;
-
-  for (const v of variants) {
-    if (breakpoints[v]) {
-      media = breakpoints[v];
-    } else if (pseudoVariants.has(v)) {
-      finalSelector += `:${v}`;
-    } else {
-      for (const key in specialVariants) {
-        if (v.startsWith(`${key}-`)) {
-          const state = v.slice(key.length + 1);
-          finalSelector = specialVariants[key](state, finalSelector);
-          break;
-        }
-      }
-    }
-  }
-
-  return { media, finalSelector };
-}
-
-function inlineStyleToJson(styleString) {
-  const styles = styleString.split(";").filter((style) => style.trim() !== "");
-  const styleObject = {};
-
-  styles.forEach((style) => {
-    const [key, value] = style.split(":").map((s) => s.trim());
-    if (key && value) {
-      const camelCaseKey = key.replace(/-([a-z])/g, (_, letter) =>
-        letter.toUpperCase()
-      );
-      styleObject[camelCaseKey] = value;
-    }
-  });
-
-  return styleObject;
-}
-
-// Cache untuk CSS resolusi
-const cssResolutionCache = new Map();
-
-function separateAndResolveCSS(arr) {
-  // Membuat kunci cache  const cacheKey = arr.join('|');
-  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(':');
-      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]) {
-          cssProperties[key] = value;
-        }
-      }
-    });
-  });
-
-  const resolvedProperties = { ...cssProperties };
-
-  const resolveValue = (value, variables) => {
-    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;
-      }
-    );
-  };
-
-  // Resolve variables
-  Object.keys(resolvedProperties).forEach((key) => {
-    resolvedProperties[key] = resolveValue(
-      resolvedProperties[key],
-      resolvedProperties
-    );
-  });
-
-  // Remove CSS variables after resolution
-  Object.keys(resolvedProperties).forEach((key) => {
-    if (key.startsWith("--")) {
-      delete resolvedProperties[key];
-    }
-  });
-
-  const result = Object.entries(resolvedProperties)
-    .map(([key, value]) => `${key}: ${value};`)
-    .join(" ");
-    
-  cssResolutionCache.set(cacheKey, result);
-  return result;
-}
-
-// Fungsi untuk membatasi ukuran cache untuk mencegah memory leak
-function limitCacheSize(cache, maxSize = 1000) {
-  if (cache.size > maxSize) {
-    // 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));
-  }
-}
-
-// Implementasi fungsi debounce untuk mengoptimalkan panggilan berulang
-function debounce(func, wait = 100) {
-  let timeout;
-  return function(...args) {
-    const context = this;
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(context, args), wait);
-  };
-}
-
-/**
- * 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)
-  ) {
-    return convertToJson ? {} : "";
-  }
-
-  let classes;
-  try {
-    classes = classNames.match(/[\w-]+\[[^\]]+\]|[\w-]+\.\d+|[\w-]+/g);
-    
-    // Jika tidak ada class yang valid ditemukan
-    if (!classes || classes.length === 0) {
-      console.warn(`No valid Tailwind classes found in input: "${classNames}"`);
-      return convertToJson ? {} : "";
-    }
-  } catch (error) {
-    console.error(`Error parsing Tailwind classes: ${error.message}`);
-    return convertToJson ? {} : "";
-  }
-
-  let cssResult = classes.map((className) => {
-    if (cssObject[className]) {
-      return cssObject[className];
-    } else if (className.includes("[")) {
-      const match = className.match(/\[([^\]]+)\]/);
-      if (match) {
-        const customValue = match[1];
-        const baseKey = className.split("[")[0];
-        if (cssObject[`${baseKey}custom`]) {
-          return cssObject[`${baseKey}custom`].replace(
-            /custom_value/g,
-            customValue
-          );
-        }
-      }
-    }
-    return "";
-  });
-
-  cssResult = separateAndResolveCSS(cssResult);
-
-  if (convertToJson) {
-    cssResult = inlineStyleToJson(cssResult);
-  }
-
-  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
- */
-function twsx(obj) {
-  if (!obj || typeof obj !== 'object') {
-    console.warn('twsx: Expected an object but received:', obj);
-    return '';
-  }
-  
-  const styles = {};
-
-  function expandGroupedClass(input) {
-    function expandDirectiveGroups(str) {
-      return str.replace(/(\w+)\(([^()]+)\)/g, (_, directive, content) => {
-        return content
-          .trim()
-          .split(/\s+/)
-          .map((val) => {
-            if (val.includes(":")) {
-              const [variant, v] = val.split(":");
-              const prefix = v.startsWith("-") ? "-" : "";
-              const value = v.startsWith("-") ? v.slice(1) : v;
-              return `${variant}:${prefix}${directive}-${value}`;
-            }
-            const prefix = val.startsWith("-") ? "-" : "";
-            const value = val.startsWith("-") ? val.slice(1) : val;
-            return `${prefix}${directive}-${value}`;
-          })
-          .join(" ");
-      });
-    }
-
-    function expandVariants(str, parent = "") {
-      return str.replace(
-        /(\w+):\(([^()]+(?:\((?:[^()]+)\))?[^()]*)\)/g,
-        (_, variant, content) => {
-          return content
-            .trim()
-            .split(/\s+/)
-            .map((c) => {
-              if (/\w+:\(.*\)/.test(c)) {
-                return expandVariants(
-                  c,
-                  parent ? `${parent}:${variant}` : variant
-                );
-              }
-              return `${parent ? `${parent}:${variant}` : variant}:${c}`;
-            })
-            .join(" ");
-        }
-      );
-    }
-
-    let result = encodeBracketValues(input);
-    let prev;
-
-    do {
-      prev = result;
-      result = expandVariants(result);
-      result = expandDirectiveGroups(result);
-    } while (result !== prev);
-
-    return result;
-  }  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 (Array.isArray(val)) {
-      const [base, nested] = val;
-
-      if (typeof base !== "string") {
-        return;
-      }
-
-      for (const cls of base.split(" ")) {
-        if (cls.trim() === "") continue;
-
-        const [rawVariants, className] = cls.includes(":")
-          ? [cls.split(":").slice(0, -1), cls.split(":").slice(-1)[0]]
-          : [[], cls];
-
-        let isImportant = false;
-        let pureClassName = className;
-
-        if (className.startsWith("!")) {
-          isImportant = true;
-          pureClassName = className.slice(1);
-        }
-
-        const { media, finalSelector } = resolveVariants(selector, rawVariants);
-
-        let declarations =
-          cssObject[pureClassName] ||
-          cssObject[pureClassName.replace(/(\/)/g, "\\$1")] ||
-          cssObject[pureClassName.replace(/\./g, "\\.")];
-
-        if (!declarations && pureClassName.includes("[")) {
-          const match = pureClassName.match(/^(.+?)\[(.+)\]$/);
-          if (match) {
-            const [, prefix, dynamicValue] = match;
-            const customKey = `${prefix}custom`;
-            const template = cssObject[customKey];
-            if (template) {
-              declarations = template.replace(
-                /custom_value/g,
-                decodeBracketValues(dynamicValue)
-              );
-            }
-          }
-        }
-
-        if (!declarations) {
-          declarations = parseCustomClassWithPatterns(pureClassName);
-        }
-
-        if (!declarations) {
-          continue;
-        }
-
-        if (isImportant) {
-          declarations = declarations.replace(
-            /([^:;]+):([^;]+)(;?)/g,
-            (_, prop, value) => {
-              return prop.trim().startsWith("--")
-                ? `${prop}:${value};`
-                : `${prop}:${value.trim()} !important;`;
-            }
-          );
-        }
-
-        const isSpaceOrDivide = [
-          "space-x-",
-          "-space-x-",
-          "space-y-",
-          "-space-y-",
-          "divide-",
-        ].some((prefix) => pureClassName.startsWith(prefix));
-
-        const expandedSelector = replaceSelector(finalSelector);
-        const targetSelector = isSpaceOrDivide
-          ? `${expandedSelector} > :not([hidden]) ~ :not([hidden])`
-          : expandedSelector;
-
-        if (media) {
-          styles[media] = styles[media] || {};
-          styles[media][targetSelector] = styles[media][targetSelector] || "";
-          styles[media][targetSelector] += declarations + "\n";
-        } else {
-          styles[targetSelector] = styles[targetSelector] || "";
-          styles[targetSelector] += declarations + "\n";
-        }
-      }
-
-      for (const nestedSel in nested) {
-        const nestedVal = nested[nestedSel];
-        if (nestedSel === "@css" && typeof nestedVal === "object") {
-          const cssDeclarations = Object.entries(nestedVal)
-            .map(([key, value]) => `${key}: ${value};`)
-            .join(" ");
-
-          if (selector in styles) {
-            styles[selector] += cssDeclarations + "\n";
-          } else {
-            styles[selector] = cssDeclarations + "\n";
-          }
-          continue;
-        }
-
-        const combinedSel = nestedSel.includes("&")
-          ? nestedSel.replace(/&/g, selector)
-          : `${selector} ${nestedSel}`;
-        walk(combinedSel, nestedVal);
-      }
-    } else if (typeof val === "string") {
-      if (val.trim() === "") return;
-
-      walk(selector, [expandGroupedClass(val)]);
-    } else if (typeof val === "object" && val !== null) {
-      const { baseSelector, cssProperty } = parseSelector(selector);
-      if (cssProperty) {
-        const cssValue = Object.values(val).join(" ");
-        styles[baseSelector] = styles[baseSelector] || "";
-        styles[baseSelector] += `${cssProperty}: ${cssValue};\n`;
-        return;
-      }
-
-      const cssDeclarations = Object.entries(val)
-        .map(([key, value]) => `${key}: ${value};`)
-        .join(" ");
-
-      if (selector in styles) {
-        styles[selector] += cssDeclarations + "\n";
-      } else {
-        styles[selector] = cssDeclarations + "\n";
-      }
-    }
-  }
-
-  // Menambahkan memoization untuk parseSelector
-  const parseSelectorCache = new Map();
-  function parseSelector(selector) {
-    if (parseSelectorCache.has(selector)) {
-      return parseSelectorCache.get(selector);
-    }
-    
-    let result;
-    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;
-  }
-
-  function isSelectorObject(val) {
-    return typeof val === "object" && val !== null && !Array.isArray(val);
-  }
-
-  function flatten(obj, parentSelector = "") {
-    const result = {};
-
-    for (const selector in obj) {
-      const val = obj[selector];
-      const currentSelector = parentSelector
-        ? selector.includes("&")
-          ? selector.replace(/&/g, parentSelector)
-          : `${parentSelector} ${selector}`
-        : selector;
-
-      if (typeof val === "string") {
-        result[currentSelector] = val;
-      } else if (Array.isArray(val)) {
-        const flatArray = [];
-        for (const item of val) {
-          if (typeof item === "string") {
-            flatArray.push(item);
-          } else if (isSelectorObject(item)) {
-            const nested = flatten(item, currentSelector);
-            Object.assign(result, nested);
-          }
-        }
-        if (flatArray.length > 0) {
-          result[currentSelector] = result[currentSelector] || [];
-          result[currentSelector].push(...flatArray);
-        }
-      } else if (isSelectorObject(val)) {
-        const nested = flatten(val, currentSelector);
-        Object.assign(result, nested);
-      }
-    }
-
-    return result;
-  }
-
-  const flattened = flatten(obj);
-
-  for (const selector in flattened) {
-    let val = flattened[selector];
-    let baseClass = "";
-    let nested = {};
-
-    if (typeof val === "string") {
-      baseClass = expandGroupedClass(val);
-    } else if (Array.isArray(val)) {
-      for (const item of val) {
-        if (typeof item === "string") {
-          baseClass += (baseClass ? " " : "") + expandGroupedClass(item);
-        } else if (typeof item === "object" && item !== null) {
-          Object.assign(nested, item);
-        }
-      }
-    }
-
-    walk(selector, [baseClass, nested]);
-  }
-
-  let cssString = "";
-
-  const baseStyles = [];
-  const mediaStyles = [];
-
-  for (const sel in styles) {
-    if (!sel.startsWith("@media")) {
-      baseStyles.push({ sel, css: styles[sel] });
-    } else {
-      mediaStyles.push({ sel, content: styles[sel] });
-    }
-  }
-
-  for (const { sel, css } of baseStyles) {
-    cssString += `${sel}{${css.trim().replace(/\n/g, "")}}`;
-  }
-
-  function mediaPriority(sel) {
-    const match = sel.match(/@media \(min-width: (\d+)px\)/);
-    return match ? parseInt(match[1], 10) : 99999;
-  }
-
-  mediaStyles.sort((a, b) => mediaPriority(a.sel) - mediaPriority(b.sel));
-
-  for (const { sel, content } of mediaStyles) {
-    cssString += `${sel}{`;
-    for (const subSel in content) {
-      cssString += `${subSel}{${content[subSel].trim().replace(/\n/g, "")}}`;
-    }
-    cssString += `}`;
-  }
-  return cssString.trim();
-}
-
-// 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
- */
-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
- */
+// Mengoptimalkan encoding/decoding bracket values dengan memoization
+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;
+}
+
+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;
+}
+
+function replaceSelector(selector) {
+  return selector.replace(
+    /c-(first|last|odd|even|\d+|not\([^)]+\))/g,
+    (_, raw) => {
+      if (/^\d+$/.test(raw)) return selectorVariants.number(raw);
+      const notMatch = raw.match(/^not\(([^)]+)\)$/);
+      if (notMatch) return selectorVariants.not(notMatch[1]);
+      if (selectorVariants[raw]) return selectorVariants[raw]();
+      return raw;
+    }
+  );
+}
+
+function resolveVariants(selector, variants) {
+  let media = null;
+  let finalSelector = selector;
+
+  for (const v of variants) {
+    if (breakpoints[v]) {
+      media = breakpoints[v];
+    } else if (pseudoVariants.has(v)) {
+      finalSelector += `:${v}`;
+    } else {
+      for (const key in specialVariants) {
+        if (v.startsWith(`${key}-`)) {
+          const state = v.slice(key.length + 1);
+          finalSelector = specialVariants[key](state, finalSelector);
+          break;
+        }
+      }
+    }
+  }
+
+  return { media, finalSelector };
+}
+
+function inlineStyleToJson(styleString) {
+  const styles = styleString.split(";").filter((style) => style.trim() !== "");
+  const styleObject = {};
+
+  styles.forEach((style) => {
+    const [key, value] = style.split(":").map((s) => s.trim());
+    if (key && value) {
+      const camelCaseKey = key.replace(/-([a-z])/g, (_, letter) =>
+        letter.toUpperCase()
+      );
+      styleObject[camelCaseKey] = value;
+    }
+  });
+
+  return styleObject;
+}
+
+// Cache untuk CSS resolusi
+const cssResolutionCache = new Map();
+
+function separateAndResolveCSS(arr) {
+  // 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(":");
+      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]) {
+          cssProperties[key] = value;
+        }
+      }
+    });
+  });
+
+  const resolvedProperties = { ...cssProperties };
+
+  const resolveValue = (value, variables) => {
+    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;
+      }
+    );
+  };
+
+  // Resolve variables
+  Object.keys(resolvedProperties).forEach((key) => {
+    resolvedProperties[key] = resolveValue(
+      resolvedProperties[key],
+      resolvedProperties
+    );
+  });
+
+  // Remove CSS variables after resolution
+  Object.keys(resolvedProperties).forEach((key) => {
+    if (key.startsWith("--")) {
+      delete resolvedProperties[key];
+    }
+  });
+
+  const result = Object.entries(resolvedProperties)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(" ");
+
+  cssResolutionCache.set(cacheKey, result);
+  return result;
+}
+
+// Fungsi untuk membatasi ukuran cache untuk mencegah memory leak
+function limitCacheSize(cache, maxSize = 1000) {
+  if (cache.size > maxSize) {
+    // 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));
+  }
+}
+
+// Implementasi fungsi debounce untuk mengoptimalkan panggilan berulang
+function debounce(func, wait = 100) {
+  let timeout;
+  return function (...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
+
+/**
+ * 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)
+  ) {
+    return convertToJson ? {} : "";
+  }
+
+  let classes;
+  try {
+    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}"`);
+      return convertToJson ? {} : "";
+    }
+  } catch (error) {
+    console.error(`Error parsing Tailwind classes: ${error.message}`);
+    return convertToJson ? {} : "";
+  }
+
+  let cssResult = classes.map((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) {
+        const customValue = match[1];
+        const baseKey = className.split("[")[0];
+        if (cssObject[`${baseKey}custom`]) {
+          return cssObject[`${baseKey}custom`].replace(
+            /custom_value/g,
+            customValue
+          );
+        }
+      }
+    }
+    return "";
+  });
+
+  cssResult = separateAndResolveCSS(cssResult);
+
+  if (convertToJson) {
+    cssResult = inlineStyleToJson(cssResult);
+  }
+
+  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
+ */
+function twsx(obj) {
+  if (!obj || typeof obj !== "object") {
+    console.warn("twsx: Expected an object but received:", obj);
+    return "";
+  }
+
+  const styles = {};
+
+  function expandGroupedClass(input) {
+    function expandDirectiveGroups(str) {
+      return str.replace(/(\w+)\(([^()]+)\)/g, (_, directive, content) => {
+        return content
+          .trim()
+          .split(/\s+/)
+          .map((val) => {
+            if (val.includes(":")) {
+              const [variant, v] = val.split(":");
+              const prefix = v.startsWith("-") ? "-" : "";
+              const value = v.startsWith("-") ? v.slice(1) : v;
+              return `${variant}:${prefix}${directive}-${value}`;
+            }
+            const prefix = val.startsWith("-") ? "-" : "";
+            const value = val.startsWith("-") ? val.slice(1) : val;
+            return `${prefix}${directive}-${value}`;
+          })
+          .join(" ");
+      });
+    }
+
+    function expandVariants(str, parent = "") {
+      return str.replace(
+        /(\w+):\(([^()]+(?:\((?:[^()]+)\))?[^()]*)\)/g,
+        (_, variant, content) => {
+          return content
+            .trim()
+            .split(/\s+/)
+            .map((c) => {
+              if (/\w+:\(.*\)/.test(c)) {
+                return expandVariants(
+                  c,
+                  parent ? `${parent}:${variant}` : variant
+                );
+              }
+              return `${parent ? `${parent}:${variant}` : variant}:${c}`;
+            })
+            .join(" ");
+        }
+      );
+    }
+
+    let result = encodeBracketValues(input);
+    let prev;
+
+    do {
+      prev = result;
+      result = expandVariants(result);
+      result = expandDirectiveGroups(result);
+    } while (result !== prev);
+
+    return result;
+  }
+  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 (Array.isArray(val)) {
+      const [base, nested] = val;
+
+      if (typeof base !== "string") {
+        return;
+      }
+
+      for (const cls of base.split(" ")) {
+        if (cls.trim() === "") continue;
+
+        const [rawVariants, className] = cls.includes(":")
+          ? [cls.split(":").slice(0, -1), cls.split(":").slice(-1)[0]]
+          : [[], cls];
+
+        let isImportant = false;
+        let pureClassName = className;
+
+        if (className.startsWith("!")) {
+          isImportant = true;
+          pureClassName = className.slice(1);
+        }
+
+        const { media, finalSelector } = resolveVariants(selector, rawVariants);
+
+        let declarations =
+          cssObject[pureClassName] ||
+          cssObject[pureClassName.replace(/(\/)/g, "\\$1")] ||
+          cssObject[pureClassName.replace(/\./g, "\\.")];
+
+        if (!declarations && pureClassName.includes("[")) {
+          const match = pureClassName.match(/^(.+?)\[(.+)\]$/);
+          if (match) {
+            const [, prefix, dynamicValue] = match;
+            const customKey = `${prefix}custom`;
+            const template = cssObject[customKey];
+            if (template) {
+              declarations = template.replace(
+                /custom_value/g,
+                decodeBracketValues(dynamicValue)
+              );
+            }
+          }
+        }
+
+        if (!declarations) {
+          declarations = parseCustomClassWithPatterns(pureClassName);
+        }
+
+        if (!declarations) {
+          continue;
+        }
+
+        if (isImportant) {
+          declarations = declarations.replace(
+            /([^:;]+):([^;]+)(;?)/g,
+            (_, prop, value) => {
+              return prop.trim().startsWith("--")
+                ? `${prop}:${value};`
+                : `${prop}:${value.trim()} !important;`;
+            }
+          );
+        }
+
+        const isSpaceOrDivide = [
+          "space-x-",
+          "-space-x-",
+          "space-y-",
+          "-space-y-",
+          "divide-",
+        ].some((prefix) => pureClassName.startsWith(prefix));
+
+        const expandedSelector = replaceSelector(finalSelector);
+        const targetSelector = isSpaceOrDivide
+          ? `${expandedSelector} > :not([hidden]) ~ :not([hidden])`
+          : expandedSelector;
+
+        if (media) {
+          styles[media] = styles[media] || {};
+          styles[media][targetSelector] = styles[media][targetSelector] || "";
+          styles[media][targetSelector] += declarations + "\n";
+        } else {
+          styles[targetSelector] = styles[targetSelector] || "";
+          styles[targetSelector] += declarations + "\n";
+        }
+      }
+
+      for (const nestedSel in nested) {
+        const nestedVal = nested[nestedSel];
+        if (nestedSel === "@css" && typeof nestedVal === "object") {
+          const cssDeclarations = Object.entries(nestedVal)
+            .map(([key, value]) => `${key}: ${value};`)
+            .join(" ");
+
+          if (selector in styles) {
+            styles[selector] += cssDeclarations + "\n";
+          } else {
+            styles[selector] = cssDeclarations + "\n";
+          }
+          continue;
+        }
+
+        const combinedSel = nestedSel.includes("&")
+          ? nestedSel.replace(/&/g, selector)
+          : `${selector} ${nestedSel}`;
+        walk(combinedSel, nestedVal);
+      }
+    } else if (typeof val === "string") {
+      if (val.trim() === "") return;
+
+      walk(selector, [expandGroupedClass(val)]);
+    } else if (typeof val === "object" && val !== null) {
+      const { baseSelector, cssProperty } = parseSelector(selector);
+      if (cssProperty) {
+        const cssValue = Object.values(val).join(" ");
+        styles[baseSelector] = styles[baseSelector] || "";
+        styles[baseSelector] += `${cssProperty}: ${cssValue};\n`;
+        return;
+      }
+
+      const cssDeclarations = Object.entries(val)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join(" ");
+
+      if (selector in styles) {
+        styles[selector] += cssDeclarations + "\n";
+      } else {
+        styles[selector] = cssDeclarations + "\n";
+      }
+    }
+  }
+
+  // Menambahkan memoization untuk parseSelector
+  const parseSelectorCache = new Map();
+  function parseSelector(selector) {
+    if (parseSelectorCache.has(selector)) {
+      return parseSelectorCache.get(selector);
+    }
+
+    let result;
+    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;
+  }
+
+  function isSelectorObject(val) {
+    return typeof val === "object" && val !== null && !Array.isArray(val);
+  }
+
+  function flatten(obj, parentSelector = "") {
+    const result = {};
+
+    for (const selector in obj) {
+      const val = obj[selector];
+      const currentSelector = parentSelector
+        ? selector.includes("&")
+          ? selector.replace(/&/g, parentSelector)
+          : `${parentSelector} ${selector}`
+        : selector;
+
+      if (typeof val === "string") {
+        result[currentSelector] = val;
+      } else if (Array.isArray(val)) {
+        const flatArray = [];
+        for (const item of val) {
+          if (typeof item === "string") {
+            flatArray.push(item);
+          } else if (isSelectorObject(item)) {
+            const nested = flatten(item, currentSelector);
+            Object.assign(result, nested);
+          }
+        }
+        if (flatArray.length > 0) {
+          result[currentSelector] = result[currentSelector] || [];
+          result[currentSelector].push(...flatArray);
+        }
+      } else if (isSelectorObject(val)) {
+        const nested = flatten(val, currentSelector);
+        Object.assign(result, nested);
+      }
+    }
+
+    return result;
+  }
+
+  const flattened = flatten(obj);
+
+  for (const selector in flattened) {
+    let val = flattened[selector];
+    let baseClass = "";
+    let nested = {};
+
+    if (typeof val === "string") {
+      baseClass = expandGroupedClass(val);
+    } else if (Array.isArray(val)) {
+      for (const item of val) {
+        if (typeof item === "string") {
+          baseClass += (baseClass ? " " : "") + expandGroupedClass(item);
+        } else if (typeof item === "object" && item !== null) {
+          Object.assign(nested, item);
+        }
+      }
+    }
+
+    walk(selector, [baseClass, nested]);
+  }
+
+  let cssString = "";
+
+  const baseStyles = [];
+  const mediaStyles = [];
+
+  for (const sel in styles) {
+    if (!sel.startsWith("@media")) {
+      baseStyles.push({ sel, css: styles[sel] });
+    } else {
+      mediaStyles.push({ sel, content: styles[sel] });
+    }
+  }
+
+  for (const { sel, css } of baseStyles) {
+    cssString += `${sel}{${css.trim().replace(/\n/g, "")}}`;
+  }
+
+  function mediaPriority(sel) {
+    const match = sel.match(/@media \(min-width: (\d+)px\)/);
+    return match ? parseInt(match[1], 10) : 99999;
+  }
+
+  mediaStyles.sort((a, b) => mediaPriority(a.sel) - mediaPriority(b.sel));
+
+  for (const { sel, content } of mediaStyles) {
+    cssString += `${sel}{`;
+    for (const subSel in content) {
+      cssString += `${subSel}{${content[subSel].trim().replace(/\n/g, "")}}`;
+    }
+    cssString += `}`;
+  }
+  return cssString.trim();
+}
+
+// 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
+ */
+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
+ */
 const debouncedTwsx = debounce(twsx);
 
 export { debouncedTws, debouncedTwsx, tws, twsx };