@debeshghorui/chaitailwind 0.1.0 → 0.1.2

package/README.md

@@ -24,12 +24,23 @@ import { initChai } from "@debeshghorui/chaitailwind";
 initChai();
 ```
 
+## CDN Usage (Global)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@debeshghorui/chaitailwind@0.1.0/dist/index.browser.js"></script>
+<script>
+  window.initchai();
+  // Alias also available:
+  // window.initChai();
+</script>
+```
+
 For local demo usage in this repository:
 
 ```html
 <script type="module">
-	import { initChai } from "../src/index.js";
-	initChai();
+  import { initChai } from "../src/index.js";
+  initChai();
 </script>
 ```
 
@@ -48,19 +59,6 @@ For local demo usage in this repository:
 - Percent shortcut is supported with pct suffix: chai-m-50pct -> margin: 50%
 - Colors support common tokens (red, blue, gray-100, etc.) and hex formats (#fff, #ffffff, hex-ffffff)
 
-## Scripts
-
-- npm test: runs unit and integration tests with Vitest + jsdom
-- npm run build: bundles src/index.js to dist/index.js using esbuild
-- npm run prepublishOnly: runs test + build before publish
-
-## Publish Checklist
-
-1. Create and verify your npm account at npmjs.com.
-2. Run npm login.
-3. Run npm test && npm run build.
-4. Publish with npm publish --access public.
-
 ## License
 
-MIT
+MIT

package/dist/index.browser.js

@@ -0,0 +1,251 @@
+(() => {
+  // src/utils.js
+  var COLOR_MAP = {
+    black: "#000000",
+    white: "#ffffff",
+    gray: "#6b7280",
+    "gray-100": "#f3f4f6",
+    "gray-500": "#6b7280",
+    "gray-900": "#111827",
+    red: "#ef4444",
+    "red-500": "#ef4444",
+    blue: "#3b82f6",
+    "blue-500": "#3b82f6",
+    green: "#22c55e",
+    "green-500": "#22c55e",
+    yellow: "#f59e0b"
+  };
+  var LENGTH_UNITS = ["px", "rem", "em", "%", "vh", "vw", "vmin", "vmax", "pt"];
+  function isNumeric(value) {
+    return /^-?\d+(\.\d+)?$/.test(value);
+  }
+  function normalizeLength(value) {
+    if (typeof value !== "string" || value.length === 0) {
+      return null;
+    }
+    const trimmed = value.trim().toLowerCase();
+    if (isNumeric(trimmed)) {
+      return `${trimmed}px`;
+    }
+    if (/^-?\d+(\.\d+)?pct$/.test(trimmed)) {
+      return `${trimmed.replace("pct", "")}%`;
+    }
+    if (LENGTH_UNITS.some((unit) => trimmed.endsWith(unit))) {
+      return trimmed;
+    }
+    return null;
+  }
+  function resolveColor(value) {
+    if (typeof value !== "string" || value.length === 0) {
+      return null;
+    }
+    const token = value.trim().toLowerCase();
+    if (COLOR_MAP[token]) {
+      return COLOR_MAP[token];
+    }
+    if (/^#[0-9a-f]{3}$|^#[0-9a-f]{6}$/i.test(token)) {
+      return token;
+    }
+    if (/^hex-[0-9a-f]{3}$|^hex-[0-9a-f]{6}$/i.test(token)) {
+      return `#${token.slice(4)}`;
+    }
+    return null;
+  }
+  function toKebabCase(property) {
+    return property.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+  }
+
+  // src/applyStyles.js
+  function applyStyles(element, styleMap) {
+    if (!element || !styleMap) {
+      return;
+    }
+    Object.entries(styleMap).forEach(([property, value]) => {
+      if (value == null) {
+        return;
+      }
+      element.style.setProperty(toKebabCase(property), String(value));
+    });
+  }
+
+  // src/mapper.js
+  function mapUtilityToStyle(parsed) {
+    if (!parsed) {
+      return null;
+    }
+    const { utility, value } = parsed;
+    switch (utility) {
+      case "p": {
+        const normalized = normalizeLength(value);
+        return normalized ? { padding: normalized } : null;
+      }
+      case "m": {
+        const normalized = normalizeLength(value);
+        return normalized ? { margin: normalized } : null;
+      }
+      case "fs": {
+        const normalized = normalizeLength(value);
+        return normalized ? { fontSize: normalized } : null;
+      }
+      case "rounded": {
+        const normalized = normalizeLength(value);
+        return normalized ? { borderRadius: normalized } : null;
+      }
+      case "bg": {
+        const color = resolveColor(value);
+        return color ? { backgroundColor: color } : null;
+      }
+      case "text": {
+        const color = resolveColor(value);
+        return color ? { color } : null;
+      }
+      case "border": {
+        const borderWidth = normalizeLength(value);
+        if (borderWidth) {
+          return { border: `${borderWidth} solid #000000` };
+        }
+        const borderColor = resolveColor(value);
+        if (borderColor) {
+          return { border: `1px solid ${borderColor}` };
+        }
+        return null;
+      }
+      case "center":
+        return { textAlign: "center" };
+      case "flex":
+        return { display: "flex" };
+      case "justify-center":
+        return { justifyContent: "center" };
+      case "items-center":
+        return { alignItems: "center" };
+      default:
+        return null;
+    }
+  }
+
+  // src/parser.js
+  var STATIC_UTILITIES = /* @__PURE__ */ new Set([
+    "center",
+    "flex",
+    "justify-center",
+    "items-center"
+  ]);
+  var VALUE_UTILITIES = /* @__PURE__ */ new Set([
+    "p",
+    "m",
+    "bg",
+    "text",
+    "fs",
+    "border",
+    "rounded"
+  ]);
+  function parseChaiClass(className) {
+    if (!className || !className.startsWith("chai-")) {
+      return null;
+    }
+    const payload = className.slice(5);
+    if (!payload) {
+      return null;
+    }
+    if (STATIC_UTILITIES.has(payload)) {
+      return {
+        raw: className,
+        utility: payload,
+        value: null
+      };
+    }
+    const [utility, ...rest] = payload.split("-");
+    if (!VALUE_UTILITIES.has(utility) || rest.length === 0) {
+      return null;
+    }
+    const value = rest.join("-");
+    if (!value) {
+      return null;
+    }
+    return {
+      raw: className,
+      utility,
+      value
+    };
+  }
+  function extractChaiClasses(classList) {
+    return Array.from(classList).filter((name) => name.startsWith("chai-"));
+  }
+
+  // src/scanner.js
+  function applyClassStyles(element) {
+    const chaiClasses = extractChaiClasses(element.classList);
+    const appliedClasses = [];
+    chaiClasses.forEach((className) => {
+      const parsed = parseChaiClass(className);
+      if (!parsed) {
+        return;
+      }
+      const styleMap = mapUtilityToStyle(parsed);
+      if (!styleMap) {
+        return;
+      }
+      applyStyles(element, styleMap);
+      appliedClasses.push(className);
+    });
+    appliedClasses.forEach((cls) => element.classList.remove(cls));
+  }
+  function scanDOM(root = document) {
+    if (!root || !root.querySelectorAll) {
+      return;
+    }
+    const nodes = root.querySelectorAll("[class]");
+    nodes.forEach((node) => applyClassStyles(node));
+  }
+  function scanElement(element) {
+    if (!element || !element.classList) {
+      return;
+    }
+    applyClassStyles(element);
+  }
+
+  // src/index.js
+  var observer = null;
+  function initChai(options = {}) {
+    const { root = document, observe = false } = options;
+    scanDOM(root);
+    if (observe && root && root.body) {
+      observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type !== "childList") {
+            return;
+          }
+          mutation.addedNodes.forEach((node) => {
+            if (!(node instanceof Element)) {
+              return;
+            }
+            scanElement(node);
+            if (node.querySelectorAll) {
+              scanDOM(node);
+            }
+          });
+        });
+      });
+      observer.observe(root.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  function stopChaiObserver() {
+    if (!observer) {
+      return;
+    }
+    observer.disconnect();
+    observer = null;
+  }
+
+  // src/index.browser.js
+  var globalTarget = typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : null;
+  if (globalTarget) {
+    globalTarget.initChai = initChai;
+    globalTarget.initchai = initChai;
+    globalTarget.stopChaiObserver = stopChaiObserver;
+    globalTarget.stopchaiobserver = stopChaiObserver;
+  }
+})();

package/dist/index.js

@@ -174,6 +174,7 @@ function extractChaiClasses(classList) {
 // src/scanner.js
 function applyClassStyles(element) {
   const chaiClasses = extractChaiClasses(element.classList);
+  const appliedClasses = [];
   chaiClasses.forEach((className) => {
     const parsed = parseChaiClass(className);
     if (!parsed) {
@@ -184,7 +185,9 @@ function applyClassStyles(element) {
       return;
     }
     applyStyles(element, styleMap);
+    appliedClasses.push(className);
   });
+  appliedClasses.forEach((cls) => element.classList.remove(cls));
 }
 function scanDOM(root = document) {
   if (!root || !root.querySelectorAll) {

package/package.json

@@ -1,14 +1,18 @@
 {
     "name": "@debeshghorui/chaitailwind",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "description": "A lightweight utility-first CSS engine using chai-* classes",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
+    "browser": "dist/index.browser.js",
+    "unpkg": "dist/index.browser.js",
+    "jsdelivr": "dist/index.browser.js",
     "exports": {
         ".": {
             "import": "./dist/index.js"
-        }
+        },
+        "./browser": "./dist/index.browser.js"
     },
     "files": [
         "dist",
@@ -18,7 +22,9 @@
     "scripts": {
         "test": "vitest run --environment jsdom",
         "test:watch": "vitest --environment jsdom",
-        "build": "esbuild src/index.js --bundle --format=esm --outfile=dist/index.js",
+        "build": "npm run build:esm && npm run build:browser",
+        "build:esm": "esbuild src/index.js --bundle --format=esm --outfile=dist/index.js",
+        "build:browser": "esbuild src/index.browser.js --bundle --format=iife --outfile=dist/index.browser.js",
         "prepublishOnly": "npm run test && npm run build"
     },
     "keywords": [