chai-tailwind-js 1.0.2 → 1.0.3

package/dist/chai-tailwind.global.js

@@ -1,34 +1,231 @@
-var chaiTailwind = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
+(() => {
+  // src/core/scanner.js
+  function scanDOM() {
+    const elements = document.querySelectorAll("[class]");
+    return elements;
+  }
+
+  // src/utils/config.js
+  var spacing = {};
+  for (let i = 0; i <= 20; i++) {
+    spacing[i] = `${i * 4}px`;
+  }
+  var config = {
+    spacing,
+    colors: {
+      red: {
+        100: "#fee2e2",
+        300: "#fca5a5",
+        500: "#ef4444",
+        700: "#b91c1c"
+      },
+      blue: {
+        100: "#dbeafe",
+        300: "#93c5fd",
+        500: "#3b82f6",
+        700: "#1d4ed8"
+      },
+      green: {
+        100: "#dcfce7",
+        300: "#86efac",
+        500: "#22c55e",
+        700: "#15803d"
+      },
+      yellow: {
+        100: "#fef9c3",
+        300: "#fde047",
+        500: "#eab308",
+        700: "#a16207"
+      },
+      purple: {
+        100: "#f3e8ff",
+        300: "#d8b4fe",
+        500: "#a855f7",
+        700: "#7e22ce"
+      },
+      pink: {
+        100: "#fce7f3",
+        300: "#f9a8d4",
+        500: "#ec4899",
+        700: "#be185d"
+      },
+      black: "black",
+      white: "white"
+    },
+    fontSize: {
+      xs: "12px",
+      sm: "14px",
+      base: "16px",
+      lg: "18px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "28px",
+      "4xl": "32px",
+      "5xl": "40px"
+    },
+    borderRadius: {
+      none: "0px",
+      sm: "4px",
+      DEFAULT: "8px",
+      md: "10px",
+      lg: "12px",
+      xl: "16px",
+      full: "9999px"
+    },
+    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)"
+    }
   };
-  var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames(from))
-        if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+
+  // src/core/parser.js
+  function parseClass(cls) {
+    let hover = null;
+    let utility = cls;
+    if (cls.includes(":")) {
+      const parts2 = cls.split(":");
+      hover = parts2[0];
+      utility = parts2[1];
+    }
+    if (!utility.startsWith("chai-")) return null;
+    utility = utility.slice(5);
+    if (!utility.includes("-")) return null;
+    const parts = utility.split("-");
+    const prefix = parts[0];
+    const value = parts.slice(1).join("-");
+    return {
+      hover,
+      prefix,
+      value
+    };
+  }
+
+  // src/runtime/interpreter.js
+  var handlers = {
+    p: (element, value) => {
+      const spacing2 = config.spacing[value];
+      if (spacing2) element.style.padding = spacing2;
+    },
+    m: (element, value) => {
+      const spacing2 = config.spacing[value];
+      if (spacing2) element.style.margin = spacing2;
+    },
+    bg: (element, value) => {
+      const [color, shade] = value.split("-");
+      const colorValue = config.colors[color]?.[shade];
+      if (colorValue) {
+        element.style.backgroundColor = colorValue;
+      }
+    },
+    text: (element, value) => {
+      const parts = value.split("-");
+      if (parts.length === 1) {
+        const size = config.fontSize[value];
+        if (size) {
+          element.style.fontSize = size;
+          return;
+        }
+        const color = config.colors[value];
+        if (color) element.style.color = color;
+      } else {
+        const [color, shade] = parts;
+        const c = config.colors[color]?.[shade];
+        if (c) element.style.color = c;
+      }
+    },
+    rounded: (element, value) => {
+      if (value === "DEFAULT") return;
+      const radius = config.borderRadius[value || "DEFAULT"];
+      if (radius) element.style.borderRadius = radius;
+    },
+    shadow: (element, value) => {
+      if (value === "DEFAULT") return;
+      const s = config.shadows[value || "DEFAULT"];
+      if (s) element.style.boxShadow = s;
+    },
+    flex: (element, value) => {
+      if (!value) {
+        element.style.display = "flex";
+        return;
+      }
+      if (value === "row") {
+        element.style.display = "flex";
+        element.style.flexDirection = "row";
+      }
+      if (value === "col") {
+        element.style.display = "flex";
+        element.style.flexDirection = "column";
+      }
+    },
+    justify: (element, value) => {
+      const map = {
+        start: "flex-start",
+        center: "center",
+        end: "flex-end",
+        between: "space-between",
+        around: "space-around",
+        evenly: "space-evenly"
+      };
+      const justify = map[value];
+      if (justify) {
+        element.style.display = "flex";
+        element.style.justifyContent = justify;
+      }
+    },
+    items: (element, value) => {
+      const map = {
+        start: "flex-start",
+        center: "center",
+        end: "flex-end",
+        stretch: "stretch",
+        baseline: "baseline"
+      };
+      const align = map[value];
+      if (align) {
+        element.style.display = "flex";
+        element.style.alignItems = align;
+      }
     }
-    return to;
   };
-  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  function interpretClass(element, cls) {
+    const parsed = parseClass(cls);
+    if (!parsed) return;
+    const { hover, prefix, value } = parsed;
+    const handler = handlers[prefix];
+    if (!handler) return;
+    if (!hover) {
+      handler(element, value);
+    }
+    if (hover === "hover") {
+      let original = "";
+      element.addEventListener("mouseenter", () => {
+        original = element.style.backgroundColor;
+        handler(element, value);
+      });
+      element.addEventListener("mouseleave", () => {
+        element.style.backgroundColor = original;
+      });
+    }
+  }
+
+  // src/core/styler.js
+  function applyStyles(elements) {
+    elements.forEach((element) => {
+      element.classList.forEach((cls) => {
+        interpretClass(element, cls);
+      });
+    });
+  }
 
   // src/index.js
-  var index_exports = {};
-  __export(index_exports, {
-    default: () => index_default
-  });
   function chaiTailwind() {
     const elements = scanDOM();
     applyStyles(elements);
   }
   var index_default = chaiTailwind;
-  if (typeof window !== "undefined") {
-    window.chaiTailwind = chaiTailwind;
-  }
-  return __toCommonJS(index_exports);
+
+  // src/browser.js
+  window.chaiTailwind = index_default;
 })();

package/dist/chai-tailwind.js

@@ -1,12 +1,229 @@
+// src/core/scanner.js
+function scanDOM() {
+  const elements = document.querySelectorAll("[class]");
+  return elements;
+}
+
+// src/utils/config.js
+var spacing = {};
+for (let i = 0; i <= 20; i++) {
+  spacing[i] = `${i * 4}px`;
+}
+var config = {
+  spacing,
+  colors: {
+    red: {
+      100: "#fee2e2",
+      300: "#fca5a5",
+      500: "#ef4444",
+      700: "#b91c1c"
+    },
+    blue: {
+      100: "#dbeafe",
+      300: "#93c5fd",
+      500: "#3b82f6",
+      700: "#1d4ed8"
+    },
+    green: {
+      100: "#dcfce7",
+      300: "#86efac",
+      500: "#22c55e",
+      700: "#15803d"
+    },
+    yellow: {
+      100: "#fef9c3",
+      300: "#fde047",
+      500: "#eab308",
+      700: "#a16207"
+    },
+    purple: {
+      100: "#f3e8ff",
+      300: "#d8b4fe",
+      500: "#a855f7",
+      700: "#7e22ce"
+    },
+    pink: {
+      100: "#fce7f3",
+      300: "#f9a8d4",
+      500: "#ec4899",
+      700: "#be185d"
+    },
+    black: "black",
+    white: "white"
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "18px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "28px",
+    "4xl": "32px",
+    "5xl": "40px"
+  },
+  borderRadius: {
+    none: "0px",
+    sm: "4px",
+    DEFAULT: "8px",
+    md: "10px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  },
+  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)"
+  }
+};
+
+// src/core/parser.js
+function parseClass(cls) {
+  let hover = null;
+  let utility = cls;
+  if (cls.includes(":")) {
+    const parts2 = cls.split(":");
+    hover = parts2[0];
+    utility = parts2[1];
+  }
+  if (!utility.startsWith("chai-")) return null;
+  utility = utility.slice(5);
+  if (!utility.includes("-")) return null;
+  const parts = utility.split("-");
+  const prefix = parts[0];
+  const value = parts.slice(1).join("-");
+  return {
+    hover,
+    prefix,
+    value
+  };
+}
+
+// src/runtime/interpreter.js
+var handlers = {
+  p: (element, value) => {
+    const spacing2 = config.spacing[value];
+    if (spacing2) element.style.padding = spacing2;
+  },
+  m: (element, value) => {
+    const spacing2 = config.spacing[value];
+    if (spacing2) element.style.margin = spacing2;
+  },
+  bg: (element, value) => {
+    const [color, shade] = value.split("-");
+    const colorValue = config.colors[color]?.[shade];
+    if (colorValue) {
+      element.style.backgroundColor = colorValue;
+    }
+  },
+  text: (element, value) => {
+    const parts = value.split("-");
+    if (parts.length === 1) {
+      const size = config.fontSize[value];
+      if (size) {
+        element.style.fontSize = size;
+        return;
+      }
+      const color = config.colors[value];
+      if (color) element.style.color = color;
+    } else {
+      const [color, shade] = parts;
+      const c = config.colors[color]?.[shade];
+      if (c) element.style.color = c;
+    }
+  },
+  rounded: (element, value) => {
+    if (value === "DEFAULT") return;
+    const radius = config.borderRadius[value || "DEFAULT"];
+    if (radius) element.style.borderRadius = radius;
+  },
+  shadow: (element, value) => {
+    if (value === "DEFAULT") return;
+    const s = config.shadows[value || "DEFAULT"];
+    if (s) element.style.boxShadow = s;
+  },
+  flex: (element, value) => {
+    if (!value) {
+      element.style.display = "flex";
+      return;
+    }
+    if (value === "row") {
+      element.style.display = "flex";
+      element.style.flexDirection = "row";
+    }
+    if (value === "col") {
+      element.style.display = "flex";
+      element.style.flexDirection = "column";
+    }
+  },
+  justify: (element, value) => {
+    const map = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly"
+    };
+    const justify = map[value];
+    if (justify) {
+      element.style.display = "flex";
+      element.style.justifyContent = justify;
+    }
+  },
+  items: (element, value) => {
+    const map = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+      baseline: "baseline"
+    };
+    const align = map[value];
+    if (align) {
+      element.style.display = "flex";
+      element.style.alignItems = align;
+    }
+  }
+};
+function interpretClass(element, cls) {
+  const parsed = parseClass(cls);
+  if (!parsed) return;
+  const { hover, prefix, value } = parsed;
+  const handler = handlers[prefix];
+  if (!handler) return;
+  if (!hover) {
+    handler(element, value);
+  }
+  if (hover === "hover") {
+    let original = "";
+    element.addEventListener("mouseenter", () => {
+      original = element.style.backgroundColor;
+      handler(element, value);
+    });
+    element.addEventListener("mouseleave", () => {
+      element.style.backgroundColor = original;
+    });
+  }
+}
+
+// src/core/styler.js
+function applyStyles(elements) {
+  elements.forEach((element) => {
+    element.classList.forEach((cls) => {
+      interpretClass(element, cls);
+    });
+  });
+}
+
 // src/index.js
 function chaiTailwind() {
   const elements = scanDOM();
   applyStyles(elements);
 }
 var index_default = chaiTailwind;
-if (typeof window !== "undefined") {
-  window.chaiTailwind = chaiTailwind;
-}
 export {
   index_default as default
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "chai-tailwind-js",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/chai-tailwind.js",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:global",
     "build:esm": "esbuild src/index.js --bundle --format=esm --outfile=dist/chai-tailwind.js",
-    "build:global": "esbuild src/index.js --bundle --format=iife --global-name=chaiTailwind --outfile=dist/chai-tailwind.global.js"
+    "build:global": "esbuild src/browser.js --bundle --format=iife --outfile=dist/chai-tailwind.global.js"
   },
   "keywords": [],
   "author": "",