@debeshghorui/chaitailwind 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Debesh Ghorui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# ChaiTailwind
+
+ChaiTailwind is a lightweight utility-first CSS engine that scans chai-* class names and applies inline styles dynamically.
+
+## Install
+
+```bash
+npm install @debeshghorui/chaitailwind
+```
+
+## Local Development
+
+```bash
+npm install
+npm test
+npm run build
+```
+
+## Usage
+
+```js
+import { initChai } from "@debeshghorui/chaitailwind";
+
+initChai();
+```
+
+For local demo usage in this repository:
+
+```html
+<script type="module">
+	import { initChai } from "../src/index.js";
+	initChai();
+</script>
+```
+
+## Supported Utilities (v0.1)
+
+- Spacing: chai-p-*, chai-m-*
+- Colors: chai-bg-*, chai-text-*
+- Typography: chai-fs-*, chai-center
+- Borders: chai-border-*, chai-rounded-*
+- Layout: chai-flex, chai-justify-center, chai-items-center
+
+## Value Rules
+
+- Numeric values auto-convert to px: chai-p-10 -> padding: 10px
+- Explicit units are supported: px, rem, em, %, vh, vw, vmin, vmax, pt
+- 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

package/dist/index.js

@@ -0,0 +1,241 @@
+// 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);
+  chaiClasses.forEach((className) => {
+    const parsed = parseChaiClass(className);
+    if (!parsed) {
+      return;
+    }
+    const styleMap = mapUtilityToStyle(parsed);
+    if (!styleMap) {
+      return;
+    }
+    applyStyles(element, styleMap);
+  });
+}
+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;
+}
+export {
+  initChai,
+  stopChaiObserver
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@debeshghorui/chaitailwind",
+    "version": "0.1.0",
+    "description": "A lightweight utility-first CSS engine using chai-* classes",
+    "type": "module",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "test": "vitest run --environment jsdom",
+        "test:watch": "vitest --environment jsdom",
+        "build": "esbuild src/index.js --bundle --format=esm --outfile=dist/index.js",
+        "prepublishOnly": "npm run test && npm run build"
+    },
+    "keywords": [
+        "css",
+        "utility-css",
+        "tailwind",
+        "javascript",
+        "dom"
+    ],
+    "author": "Debesh",
+    "license": "MIT",
+    "devDependencies": {
+        "esbuild": "^0.25.1",
+        "jsdom": "^26.0.0",
+        "vitest": "^3.1.1"
+    }
+}