chai-tailwind-js 1.0.3 → 1.0.4

package/dist/chai-tailwind.global.js

@@ -63,6 +63,24 @@
       "4xl": "32px",
       "5xl": "40px"
     },
+    fontWeight: {
+      thin: 100,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      bold: 700
+    },
+    letterSpacing: {
+      tight: "-0.05em",
+      normal: "0",
+      wide: "0.05em"
+    },
+    lineHeight: {
+      none: "1",
+      tight: "1.25",
+      normal: "1.5",
+      loose: "2"
+    },
     borderRadius: {
       none: "0px",
       sm: "4px",
@@ -72,11 +90,92 @@
       xl: "16px",
       full: "9999px"
     },
+    borderWidth: {
+      DEFAULT: "1px",
+      2: "2px",
+      4: "4px"
+    },
     shadows: {
       sm: "0 1px 3px rgba(0,0,0,0.1)",
       DEFAULT: "0 4px 10px rgba(0,0,0,0.1)",
       md: "0 6px 20px rgba(0,0,0,0.15)",
       lg: "0 10px 30px rgba(0,0,0,0.2)"
+    },
+    zIndex: {
+      0: 0,
+      10: 10,
+      20: 20,
+      50: 50,
+      100: 100
+    },
+    transitionTiming: {
+      linear: "linear",
+      in: "ease-in",
+      out: "ease-out",
+      "in-out": "ease-in-out"
+    },
+    blur: {
+      none: "0px",
+      sm: "4px",
+      DEFAULT: "8px",
+      md: "12px",
+      lg: "16px",
+      xl: "24px"
+    },
+    opacity: {
+      0: "0",
+      5: "0.05",
+      10: "0.1",
+      20: "0.2",
+      25: "0.25",
+      30: "0.3",
+      40: "0.4",
+      50: "0.5",
+      60: "0.6",
+      70: "0.7",
+      75: "0.75",
+      80: "0.8",
+      90: "0.9",
+      95: "0.95",
+      100: "1"
+    },
+    display: {
+      block: "block",
+      inline: "inline",
+      "inline-block": "inline-block",
+      flex: "flex",
+      grid: "grid",
+      hidden: "none"
+    },
+    textAlign: {
+      left: "left",
+      center: "center",
+      right: "right",
+      justify: "justify"
+    },
+    widths: {
+      full: "100%",
+      half: "50%",
+      third: "33.333%",
+      quarter: "25%",
+      screen: "100vw",
+      auto: "auto"
+    },
+    heights: {
+      full: "100%",
+      screen: "100vh",
+      auto: "auto"
+    },
+    cursor: {
+      pointer: "pointer",
+      default: "default",
+      "not-allowed": "not-allowed"
+    },
+    overflow: {
+      hidden: "hidden",
+      auto: "auto",
+      scroll: "scroll",
+      visible: "visible"
     }
   };
 
@@ -104,62 +203,78 @@
 
   // src/runtime/interpreter.js
   var handlers = {
-    p: (element, value) => {
-      const spacing2 = config.spacing[value];
-      if (spacing2) element.style.padding = spacing2;
+    p: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.padding = s;
     },
-    m: (element, value) => {
-      const spacing2 = config.spacing[value];
-      if (spacing2) element.style.margin = spacing2;
+    m: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.margin = s;
     },
-    bg: (element, value) => {
+    bg: (el, value) => {
       const [color, shade] = value.split("-");
-      const colorValue = config.colors[color]?.[shade];
-      if (colorValue) {
-        element.style.backgroundColor = colorValue;
-      }
+      const c = config.colors[color]?.[shade];
+      if (c) el.style.backgroundColor = c;
     },
-    text: (element, value) => {
+    text: (el, value) => {
       const parts = value.split("-");
       if (parts.length === 1) {
         const size = config.fontSize[value];
-        if (size) {
-          element.style.fontSize = size;
-          return;
-        }
+        if (size) return el.style.fontSize = size;
         const color = config.colors[value];
-        if (color) element.style.color = color;
+        if (color) el.style.color = color;
       } else {
         const [color, shade] = parts;
         const c = config.colors[color]?.[shade];
-        if (c) element.style.color = c;
+        if (c) el.style.color = c;
       }
     },
-    rounded: (element, value) => {
-      if (value === "DEFAULT") return;
-      const radius = config.borderRadius[value || "DEFAULT"];
-      if (radius) element.style.borderRadius = radius;
+    font: (el, value) => {
+      const fw = config.fontWeight[value];
+      if (fw) el.style.fontWeight = fw;
+    },
+    tracking: (el, value) => {
+      const ls = config.letterSpacing[value];
+      if (ls) el.style.letterSpacing = ls;
+    },
+    leading: (el, value) => {
+      const lh = config.lineHeight[value];
+      if (lh) el.style.lineHeight = lh;
     },
-    shadow: (element, value) => {
-      if (value === "DEFAULT") return;
+    uppercase: (el) => el.style.textTransform = "uppercase",
+    lowercase: (el) => el.style.textTransform = "lowercase",
+    capitalize: (el) => el.style.textTransform = "capitalize",
+    rounded: (el, value) => {
+      const r = config.borderRadius[value || "DEFAULT"];
+      if (r) el.style.borderRadius = r;
+    },
+    shadow: (el, value) => {
       const s = config.shadows[value || "DEFAULT"];
-      if (s) element.style.boxShadow = s;
+      if (s) el.style.boxShadow = s;
     },
-    flex: (element, value) => {
+    border: (el, value) => {
       if (!value) {
-        element.style.display = "flex";
+        el.style.borderWidth = config.borderWidth.DEFAULT;
+        el.style.borderStyle = "solid";
         return;
       }
-      if (value === "row") {
-        element.style.display = "flex";
-        element.style.flexDirection = "row";
+      if (config.borderWidth[value]) {
+        el.style.borderWidth = config.borderWidth[value];
+        el.style.borderStyle = "solid";
+        return;
       }
-      if (value === "col") {
-        element.style.display = "flex";
-        element.style.flexDirection = "column";
+      const [color, shade] = value.split("-");
+      const c = config.colors[color]?.[shade] || config.colors[color];
+      if (c) {
+        el.style.border = `${config.borderWidth.DEFAULT} solid ${c}`;
       }
     },
-    justify: (element, value) => {
+    flex: (el, value) => {
+      el.style.display = "flex";
+      if (value === "col") el.style.flexDirection = "column";
+      if (value === "row") el.style.flexDirection = "row";
+    },
+    justify: (el, value) => {
       const map = {
         start: "flex-start",
         center: "center",
@@ -168,13 +283,12 @@
         around: "space-around",
         evenly: "space-evenly"
       };
-      const justify = map[value];
-      if (justify) {
-        element.style.display = "flex";
-        element.style.justifyContent = justify;
+      if (map[value]) {
+        el.style.display = "flex";
+        el.style.justifyContent = map[value];
       }
     },
-    items: (element, value) => {
+    items: (el, value) => {
       const map = {
         start: "flex-start",
         center: "center",
@@ -182,11 +296,183 @@
         stretch: "stretch",
         baseline: "baseline"
       };
-      const align = map[value];
-      if (align) {
-        element.style.display = "flex";
-        element.style.alignItems = align;
+      if (map[value]) {
+        el.style.display = "flex";
+        el.style.alignItems = map[value];
+      }
+    },
+    grid: (el, value) => {
+      el.style.display = "grid";
+      if (value && value.startsWith("cols-")) {
+        const n = value.replace("cols-", "");
+        el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
       }
+    },
+    gap: (el, value) => {
+      const g = config.spacing[value];
+      if (g) el.style.gap = g;
+    },
+    w: (el, value) => {
+      const named = config.widths[value];
+      if (named) {
+        el.style.width = named;
+        return;
+      }
+      const s = config.spacing[value];
+      if (s) el.style.width = s;
+    },
+    h: (el, value) => {
+      const named = config.heights[value];
+      if (named) {
+        el.style.height = named;
+        return;
+      }
+      const s = config.spacing[value];
+      if (s) el.style.height = s;
+    },
+    align: (el, value) => {
+      const a = config.textAlign[value];
+      if (a) el.style.textAlign = a;
+    },
+    cursor: (el, value) => {
+      const c = config.cursor[value];
+      if (c) el.style.cursor = c;
+    },
+    overflow: (el, value) => {
+      const o = config.overflow[value];
+      if (o) el.style.overflow = o;
+    },
+    opacity: (el, value) => {
+      el.style.opacity = value / 100;
+    },
+    relative: (el) => el.style.position = "relative",
+    absolute: (el) => el.style.position = "absolute",
+    top: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.top = s;
+    },
+    left: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.left = s;
+    },
+    z: (el, value) => {
+      const z = config.zIndex[value];
+      if (z !== void 0) el.style.zIndex = z;
+    },
+    transition: (el) => {
+      el.style.transition = "all 0.2s ease";
+    },
+    duration: (el, value) => {
+      el.style.transitionDuration = `${value}ms`;
+    },
+    ease: (el, value) => {
+      const t = config.transitionTiming[value];
+      if (t) el.style.transitionTimingFunction = t;
+    },
+    scale: (el, value) => {
+      el.style.transform = `scale(${value / 100})`;
+    },
+    px: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.paddingLeft = s;
+        el.style.paddingRight = s;
+      }
+    },
+    py: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.paddingTop = s;
+        el.style.paddingBottom = s;
+      }
+    },
+    mx: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.marginLeft = s;
+        el.style.marginRight = s;
+      }
+    },
+    my: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.marginTop = s;
+        el.style.marginBottom = s;
+      }
+    },
+    mt: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginTop = s;
+    },
+    mb: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginBottom = s;
+    },
+    ml: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginLeft = s;
+    },
+    mr: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginRight = s;
+    },
+    pt: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingTop = s;
+    },
+    pb: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingBottom = s;
+    },
+    pl: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingLeft = s;
+    },
+    pr: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingRight = s;
+    },
+    "space-x": (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        Array.from(el.children).forEach((child, idx) => {
+          if (idx > 0) child.style.marginLeft = s;
+        });
+      }
+    },
+    "space-y": (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        Array.from(el.children).forEach((child, idx) => {
+          if (idx > 0) child.style.marginTop = s;
+        });
+      }
+    },
+    "backdrop-blur": (el, value) => {
+      const b = config.blur[value || "DEFAULT"];
+      if (b) el.style.backdropFilter = `blur(${b})`;
+    },
+    "bg-opacity": (el, value) => {
+      const opacity = config.opacity[value];
+      if (opacity !== void 0) {
+        const bgColor = window.getComputedStyle(el).backgroundColor;
+        const rgbaColor = bgColor.replace(/rgba?\(/, "rgba(").replace(/\)/, `)`);
+        const match = rgbaColor.match(/(rgba?\([^,]+,[^,]+,[^,]+),/);
+        if (match) {
+          el.style.backgroundColor = `${match[1]}, ${opacity})`;
+        }
+      }
+    },
+    hidden: (el) => el.style.display = "none",
+    block: (el) => el.style.display = "block",
+    inline: (el) => el.style.display = "inline",
+    right: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.right = s;
+    },
+    bottom: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.bottom = s;
     }
   };
   function interpretClass(element, cls) {
@@ -199,13 +485,12 @@
       handler(element, value);
     }
     if (hover === "hover") {
-      let original = "";
+      const original = element.style.cssText;
       element.addEventListener("mouseenter", () => {
-        original = element.style.backgroundColor;
         handler(element, value);
       });
       element.addEventListener("mouseleave", () => {
-        element.style.backgroundColor = original;
+        element.style.cssText = original;
       });
     }
   }

package/dist/chai-tailwind.js

@@ -62,6 +62,24 @@ var config = {
     "4xl": "32px",
     "5xl": "40px"
   },
+  fontWeight: {
+    thin: 100,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    bold: 700
+  },
+  letterSpacing: {
+    tight: "-0.05em",
+    normal: "0",
+    wide: "0.05em"
+  },
+  lineHeight: {
+    none: "1",
+    tight: "1.25",
+    normal: "1.5",
+    loose: "2"
+  },
   borderRadius: {
     none: "0px",
     sm: "4px",
@@ -71,11 +89,92 @@ var config = {
     xl: "16px",
     full: "9999px"
   },
+  borderWidth: {
+    DEFAULT: "1px",
+    2: "2px",
+    4: "4px"
+  },
   shadows: {
     sm: "0 1px 3px rgba(0,0,0,0.1)",
     DEFAULT: "0 4px 10px rgba(0,0,0,0.1)",
     md: "0 6px 20px rgba(0,0,0,0.15)",
     lg: "0 10px 30px rgba(0,0,0,0.2)"
+  },
+  zIndex: {
+    0: 0,
+    10: 10,
+    20: 20,
+    50: 50,
+    100: 100
+  },
+  transitionTiming: {
+    linear: "linear",
+    in: "ease-in",
+    out: "ease-out",
+    "in-out": "ease-in-out"
+  },
+  blur: {
+    none: "0px",
+    sm: "4px",
+    DEFAULT: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px"
+  },
+  opacity: {
+    0: "0",
+    5: "0.05",
+    10: "0.1",
+    20: "0.2",
+    25: "0.25",
+    30: "0.3",
+    40: "0.4",
+    50: "0.5",
+    60: "0.6",
+    70: "0.7",
+    75: "0.75",
+    80: "0.8",
+    90: "0.9",
+    95: "0.95",
+    100: "1"
+  },
+  display: {
+    block: "block",
+    inline: "inline",
+    "inline-block": "inline-block",
+    flex: "flex",
+    grid: "grid",
+    hidden: "none"
+  },
+  textAlign: {
+    left: "left",
+    center: "center",
+    right: "right",
+    justify: "justify"
+  },
+  widths: {
+    full: "100%",
+    half: "50%",
+    third: "33.333%",
+    quarter: "25%",
+    screen: "100vw",
+    auto: "auto"
+  },
+  heights: {
+    full: "100%",
+    screen: "100vh",
+    auto: "auto"
+  },
+  cursor: {
+    pointer: "pointer",
+    default: "default",
+    "not-allowed": "not-allowed"
+  },
+  overflow: {
+    hidden: "hidden",
+    auto: "auto",
+    scroll: "scroll",
+    visible: "visible"
   }
 };
 
@@ -103,62 +202,78 @@ function parseClass(cls) {
 
 // src/runtime/interpreter.js
 var handlers = {
-  p: (element, value) => {
-    const spacing2 = config.spacing[value];
-    if (spacing2) element.style.padding = spacing2;
+  p: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.padding = s;
   },
-  m: (element, value) => {
-    const spacing2 = config.spacing[value];
-    if (spacing2) element.style.margin = spacing2;
+  m: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.margin = s;
   },
-  bg: (element, value) => {
+  bg: (el, value) => {
     const [color, shade] = value.split("-");
-    const colorValue = config.colors[color]?.[shade];
-    if (colorValue) {
-      element.style.backgroundColor = colorValue;
-    }
+    const c = config.colors[color]?.[shade];
+    if (c) el.style.backgroundColor = c;
   },
-  text: (element, value) => {
+  text: (el, value) => {
     const parts = value.split("-");
     if (parts.length === 1) {
       const size = config.fontSize[value];
-      if (size) {
-        element.style.fontSize = size;
-        return;
-      }
+      if (size) return el.style.fontSize = size;
       const color = config.colors[value];
-      if (color) element.style.color = color;
+      if (color) el.style.color = color;
     } else {
       const [color, shade] = parts;
       const c = config.colors[color]?.[shade];
-      if (c) element.style.color = c;
+      if (c) el.style.color = c;
     }
   },
-  rounded: (element, value) => {
-    if (value === "DEFAULT") return;
-    const radius = config.borderRadius[value || "DEFAULT"];
-    if (radius) element.style.borderRadius = radius;
+  font: (el, value) => {
+    const fw = config.fontWeight[value];
+    if (fw) el.style.fontWeight = fw;
+  },
+  tracking: (el, value) => {
+    const ls = config.letterSpacing[value];
+    if (ls) el.style.letterSpacing = ls;
+  },
+  leading: (el, value) => {
+    const lh = config.lineHeight[value];
+    if (lh) el.style.lineHeight = lh;
   },
-  shadow: (element, value) => {
-    if (value === "DEFAULT") return;
+  uppercase: (el) => el.style.textTransform = "uppercase",
+  lowercase: (el) => el.style.textTransform = "lowercase",
+  capitalize: (el) => el.style.textTransform = "capitalize",
+  rounded: (el, value) => {
+    const r = config.borderRadius[value || "DEFAULT"];
+    if (r) el.style.borderRadius = r;
+  },
+  shadow: (el, value) => {
     const s = config.shadows[value || "DEFAULT"];
-    if (s) element.style.boxShadow = s;
+    if (s) el.style.boxShadow = s;
   },
-  flex: (element, value) => {
+  border: (el, value) => {
     if (!value) {
-      element.style.display = "flex";
+      el.style.borderWidth = config.borderWidth.DEFAULT;
+      el.style.borderStyle = "solid";
       return;
     }
-    if (value === "row") {
-      element.style.display = "flex";
-      element.style.flexDirection = "row";
+    if (config.borderWidth[value]) {
+      el.style.borderWidth = config.borderWidth[value];
+      el.style.borderStyle = "solid";
+      return;
     }
-    if (value === "col") {
-      element.style.display = "flex";
-      element.style.flexDirection = "column";
+    const [color, shade] = value.split("-");
+    const c = config.colors[color]?.[shade] || config.colors[color];
+    if (c) {
+      el.style.border = `${config.borderWidth.DEFAULT} solid ${c}`;
     }
   },
-  justify: (element, value) => {
+  flex: (el, value) => {
+    el.style.display = "flex";
+    if (value === "col") el.style.flexDirection = "column";
+    if (value === "row") el.style.flexDirection = "row";
+  },
+  justify: (el, value) => {
     const map = {
       start: "flex-start",
       center: "center",
@@ -167,13 +282,12 @@ var handlers = {
       around: "space-around",
       evenly: "space-evenly"
     };
-    const justify = map[value];
-    if (justify) {
-      element.style.display = "flex";
-      element.style.justifyContent = justify;
+    if (map[value]) {
+      el.style.display = "flex";
+      el.style.justifyContent = map[value];
     }
   },
-  items: (element, value) => {
+  items: (el, value) => {
     const map = {
       start: "flex-start",
       center: "center",
@@ -181,11 +295,183 @@ var handlers = {
       stretch: "stretch",
       baseline: "baseline"
     };
-    const align = map[value];
-    if (align) {
-      element.style.display = "flex";
-      element.style.alignItems = align;
+    if (map[value]) {
+      el.style.display = "flex";
+      el.style.alignItems = map[value];
+    }
+  },
+  grid: (el, value) => {
+    el.style.display = "grid";
+    if (value && value.startsWith("cols-")) {
+      const n = value.replace("cols-", "");
+      el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
     }
+  },
+  gap: (el, value) => {
+    const g = config.spacing[value];
+    if (g) el.style.gap = g;
+  },
+  w: (el, value) => {
+    const named = config.widths[value];
+    if (named) {
+      el.style.width = named;
+      return;
+    }
+    const s = config.spacing[value];
+    if (s) el.style.width = s;
+  },
+  h: (el, value) => {
+    const named = config.heights[value];
+    if (named) {
+      el.style.height = named;
+      return;
+    }
+    const s = config.spacing[value];
+    if (s) el.style.height = s;
+  },
+  align: (el, value) => {
+    const a = config.textAlign[value];
+    if (a) el.style.textAlign = a;
+  },
+  cursor: (el, value) => {
+    const c = config.cursor[value];
+    if (c) el.style.cursor = c;
+  },
+  overflow: (el, value) => {
+    const o = config.overflow[value];
+    if (o) el.style.overflow = o;
+  },
+  opacity: (el, value) => {
+    el.style.opacity = value / 100;
+  },
+  relative: (el) => el.style.position = "relative",
+  absolute: (el) => el.style.position = "absolute",
+  top: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.top = s;
+  },
+  left: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.left = s;
+  },
+  z: (el, value) => {
+    const z = config.zIndex[value];
+    if (z !== void 0) el.style.zIndex = z;
+  },
+  transition: (el) => {
+    el.style.transition = "all 0.2s ease";
+  },
+  duration: (el, value) => {
+    el.style.transitionDuration = `${value}ms`;
+  },
+  ease: (el, value) => {
+    const t = config.transitionTiming[value];
+    if (t) el.style.transitionTimingFunction = t;
+  },
+  scale: (el, value) => {
+    el.style.transform = `scale(${value / 100})`;
+  },
+  px: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.paddingLeft = s;
+      el.style.paddingRight = s;
+    }
+  },
+  py: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.paddingTop = s;
+      el.style.paddingBottom = s;
+    }
+  },
+  mx: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.marginLeft = s;
+      el.style.marginRight = s;
+    }
+  },
+  my: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.marginTop = s;
+      el.style.marginBottom = s;
+    }
+  },
+  mt: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginTop = s;
+  },
+  mb: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginBottom = s;
+  },
+  ml: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginLeft = s;
+  },
+  mr: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginRight = s;
+  },
+  pt: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingTop = s;
+  },
+  pb: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingBottom = s;
+  },
+  pl: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingLeft = s;
+  },
+  pr: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingRight = s;
+  },
+  "space-x": (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      Array.from(el.children).forEach((child, idx) => {
+        if (idx > 0) child.style.marginLeft = s;
+      });
+    }
+  },
+  "space-y": (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      Array.from(el.children).forEach((child, idx) => {
+        if (idx > 0) child.style.marginTop = s;
+      });
+    }
+  },
+  "backdrop-blur": (el, value) => {
+    const b = config.blur[value || "DEFAULT"];
+    if (b) el.style.backdropFilter = `blur(${b})`;
+  },
+  "bg-opacity": (el, value) => {
+    const opacity = config.opacity[value];
+    if (opacity !== void 0) {
+      const bgColor = window.getComputedStyle(el).backgroundColor;
+      const rgbaColor = bgColor.replace(/rgba?\(/, "rgba(").replace(/\)/, `)`);
+      const match = rgbaColor.match(/(rgba?\([^,]+,[^,]+,[^,]+),/);
+      if (match) {
+        el.style.backgroundColor = `${match[1]}, ${opacity})`;
+      }
+    }
+  },
+  hidden: (el) => el.style.display = "none",
+  block: (el) => el.style.display = "block",
+  inline: (el) => el.style.display = "inline",
+  right: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.right = s;
+  },
+  bottom: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.bottom = s;
   }
 };
 function interpretClass(element, cls) {
@@ -198,13 +484,12 @@ function interpretClass(element, cls) {
     handler(element, value);
   }
   if (hover === "hover") {
-    let original = "";
+    const original = element.style.cssText;
     element.addEventListener("mouseenter", () => {
-      original = element.style.backgroundColor;
       handler(element, value);
     });
     element.addEventListener("mouseleave", () => {
-      element.style.backgroundColor = original;
+      element.style.cssText = original;
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chai-tailwind-js",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/chai-tailwind.js",
   "type": "module",
   "scripts": {