chai-tini 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026
+
+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,53 @@
+# chai-tini
+
+Lightweight utility-first “CSS engine” that converts `chai-*` class names into inline styles by scanning the DOM.
+
+## Install
+
+```bash
+npm i chai-tini
+```
+
+## Usage
+
+### Option A: auto-init on import (default)
+
+```js
+import "chai-tini";
+```
+
+### Option B: explicit init
+
+```js
+import { initChaiUtilities } from "chai-tini";
+
+initChaiUtilities();
+```
+
+## Supported utilities (v1)
+
+- Spacing (px): `chai-p-*`, `chai-m-*`, plus `x/y/t/r/b/l` directional variants
+  - Examples: `chai-p-2`, `chai-px-4`, `chai-mt-6`
+- Colors:
+  - `chai-bg-red` -> `background-color: red`
+  - `chai-text-red` -> `color: red`
+- Alignment:
+  - `chai-text-center|left|right|justify` -> `text-align: ...`
+- Typography:
+  - `chai-fs-16` -> `font-size: 16px`
+  - `chai-font-bold|normal|semibold|light` -> `font-weight`
+- Borders & radius:
+  - `chai-rounded-8` and `chai-rounded-t-8|r-8|b-8|l-8`
+  - `chai-border-w-1` (also sets `border-style: solid`)
+  - `chai-border-color-red`
+- Basic layout:
+  - `chai-flex|grid|block|inline|inline-block|none` -> `display`
+  - `chai-w-200`, `chai-h-50` (px)
+- Animation:
+  - `chai-animate-spin` -> `animation: chai-animate-spin 1s linear infinite`
+
+## Notes
+
+- Numeric tokens like `2` are treated as `2px`. Tokens like `10rem` or `5%` are passed through as-is.
+- The library keeps the original `chai-*` classes (it only applies inline styles).
+

package/dist/applyChaiUtilities.d.ts

@@ -0,0 +1 @@
+export declare function applyChaiUtilities(root: ParentNode | undefined): void;

package/dist/applyChaiUtilities.js

@@ -0,0 +1,42 @@
+import { parseChaiClass } from "./parseChaiClass.js";
+export function applyChaiUtilities(root) {
+    const prefix = "chai-";
+    const queryRoot = root ?? (typeof document !== "undefined" ? document : null);
+    if (!queryRoot)
+        return;
+    const doc = 
+    // If `queryRoot` is a document, use it directly.
+    typeof queryRoot.createElement === "function"
+        ? queryRoot
+        : // Otherwise use its owning document.
+            queryRoot.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+    let needsAnimateSpinKeyframes = false;
+    const selectorRoot = queryRoot;
+    const elements = typeof selectorRoot.querySelectorAll === "function" ? Array.from(selectorRoot.querySelectorAll(`[class*="${prefix}"]`)) : [];
+    for (const el of elements) {
+        const classAttr = el.getAttribute("class") ?? "";
+        const tokens = classAttr.split(/\s+/).filter(Boolean);
+        const patches = [];
+        for (const token of tokens) {
+            if (!token.startsWith(prefix))
+                continue;
+            if (token === "chai-animate-spin")
+                needsAnimateSpinKeyframes = true;
+            patches.push(...parseChaiClass(token));
+        }
+        for (const patch of patches) {
+            el.style.setProperty(patch.prop, patch.value);
+        }
+    }
+    if (needsAnimateSpinKeyframes && doc) {
+        const styleId = "chai-animate-spin-keyframes";
+        if (!doc.getElementById(styleId)) {
+            const styleEl = doc.createElement("style");
+            styleEl.id = styleId;
+            styleEl.textContent =
+                "@keyframes chai-animate-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}";
+            const head = doc.head ?? doc.getElementsByTagName("head")[0];
+            (head ?? doc.documentElement).appendChild(styleEl);
+        }
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { applyChaiUtilities } from "./applyChaiUtilities.js";
+export type ChaiUtilitiesInitOptions = {
+    root?: ParentNode;
+};
+export declare function initChaiUtilities(options?: ChaiUtilitiesInitOptions): void;
+export { applyChaiUtilities };

package/dist/index.js

@@ -0,0 +1,16 @@
+import { applyChaiUtilities } from "./applyChaiUtilities.js";
+export function initChaiUtilities(options = {}) {
+    if (typeof document === "undefined")
+        return;
+    const root = options.root ?? document;
+    const run = () => applyChaiUtilities(root);
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", run, { once: true });
+    }
+    else {
+        run();
+    }
+}
+if (typeof document !== "undefined")
+    initChaiUtilities();
+export { applyChaiUtilities };

package/dist/parseChaiClass.d.ts

@@ -0,0 +1,6 @@
+export type ChaiStylePatch = {
+    prop: string;
+    value: string;
+};
+export declare function parseNumericOrPx(raw: string): string;
+export declare function parseChaiClass(className: string): ChaiStylePatch[];

package/dist/parseChaiClass.js

@@ -0,0 +1,149 @@
+export function parseNumericOrPx(raw) {
+    if (/^-?\d+(\.\d+)?$/.test(raw))
+        return `${raw}px`;
+    return raw;
+}
+const fontWeightMap = {
+    light: "300",
+    normal: "400",
+    semibold: "600",
+    bold: "700",
+};
+function patchesForSpacing(kind, dir, valueRaw) {
+    const value = parseNumericOrPx(valueRaw);
+    const propBase = kind === "p" ? "padding" : "margin";
+    switch (dir) {
+        case undefined:
+            return [{ prop: propBase, value }];
+        case "x":
+            return [
+                { prop: `${propBase}-left`, value },
+                { prop: `${propBase}-right`, value },
+            ];
+        case "y":
+            return [
+                { prop: `${propBase}-top`, value },
+                { prop: `${propBase}-bottom`, value },
+            ];
+        case "t":
+            return [{ prop: `${propBase}-top`, value }];
+        case "r":
+            return [{ prop: `${propBase}-right`, value }];
+        case "b":
+            return [{ prop: `${propBase}-bottom`, value }];
+        case "l":
+            return [{ prop: `${propBase}-left`, value }];
+        default:
+            return [];
+    }
+}
+function patchesForRounded(className) {
+    const dirMatch = /^chai-rounded-([trbl])-(.+)$/.exec(className);
+    if (dirMatch) {
+        const dir = dirMatch[1];
+        const value = parseNumericOrPx(dirMatch[2]);
+        switch (dir) {
+            case "t":
+                return [
+                    { prop: "border-top-left-radius", value },
+                    { prop: "border-top-right-radius", value },
+                ];
+            case "r":
+                return [
+                    { prop: "border-top-right-radius", value },
+                    { prop: "border-bottom-right-radius", value },
+                ];
+            case "b":
+                return [
+                    { prop: "border-bottom-left-radius", value },
+                    { prop: "border-bottom-right-radius", value },
+                ];
+            case "l":
+                return [
+                    { prop: "border-top-left-radius", value },
+                    { prop: "border-bottom-left-radius", value },
+                ];
+            default:
+                return [];
+        }
+    }
+    const plain = /^chai-rounded-(.+)$/.exec(className);
+    if (plain)
+        return [{ prop: "border-radius", value: parseNumericOrPx(plain[1]) }];
+    return [];
+}
+function tryPatches(className) {
+    // Colors
+    const bg = /^chai-bg-(.+)$/.exec(className);
+    if (bg)
+        return [{ prop: "background-color", value: bg[1] }];
+    const text = /^chai-text-(.+)$/.exec(className);
+    if (text) {
+        const tail = text[1];
+        const align = tail === "center" ? "center" : tail === "left" ? "left" : tail === "right" ? "right" : tail === "justify" ? "justify" : null;
+        if (align)
+            return [{ prop: "text-align", value: align }];
+        return [{ prop: "color", value: tail }];
+    }
+    // Typography - Font Size
+    const fs = /^chai-fs-(.+)$/.exec(className);
+    if (fs)
+        return [{ prop: "font-size", value: parseNumericOrPx(fs[1]) }];
+    const fontWeight = /^chai-font-(.+)$/.exec(className);
+    if (fontWeight) {
+        const mapped = fontWeightMap[fontWeight[1]];
+        if (mapped)
+            return [{ prop: "font-weight", value: mapped }];
+    }
+    // BR's and Radius
+    const rounded = className.startsWith("chai-rounded-") ? patchesForRounded(className) : [];
+    if (rounded.length)
+        return rounded;
+    const borderW = /^chai-border-w-(.+)$/.exec(className);
+    if (borderW) {
+        const value = parseNumericOrPx(borderW[1]);
+        return [
+            { prop: "border-width", value },
+            { prop: "border-style", value: "solid" },
+        ];
+    }
+    const borderColor = /^chai-border-color-(.+)$/.exec(className);
+    if (borderColor)
+        return [{ prop: "border-color", value: borderColor[1] }];
+    // Spacing
+    const spacing = /^chai-(p|m)(x|y|t|r|b|l)?-(.+)$/.exec(className);
+    if (spacing)
+        return patchesForSpacing(spacing[1], spacing[2], spacing[3]);
+    const compactSpacing = /^chai-(p|m)(x|y|t|r|b|l)-(.+)$/.exec(className);
+    if (compactSpacing) {
+        return patchesForSpacing(compactSpacing[1], compactSpacing[2], compactSpacing[3]);
+    }
+    if (className === "chai-flex")
+        return [{ prop: "display", value: "flex" }];
+    if (className === "chai-grid")
+        return [{ prop: "display", value: "grid" }];
+    if (className === "chai-block")
+        return [{ prop: "display", value: "block" }];
+    if (className === "chai-inline")
+        return [{ prop: "display", value: "inline" }];
+    if (className === "chai-inline-block")
+        return [{ prop: "display", value: "inline-block" }];
+    if (className === "chai-none")
+        return [{ prop: "display", value: "none" }];
+    const w = /^chai-w-(.+)$/.exec(className);
+    if (w)
+        return [{ prop: "width", value: parseNumericOrPx(w[1]) }];
+    const h = /^chai-h-(.+)$/.exec(className);
+    if (h)
+        return [{ prop: "height", value: parseNumericOrPx(h[1]) }];
+    if (className === "chai-animate-spin") {
+        return [{ prop: "animation", value: "chai-animate-spin 1s linear infinite" }];
+    }
+    return [];
+}
+export function parseChaiClass(className) {
+    const normalized = className.trim();
+    if (!normalized.startsWith("chai-"))
+        return [];
+    return tryPatches(normalized);
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "chai-tini",
+  "version": "0.1.0",
+  "description": "A lightweight client-side engine that converts `chai-*` utility classes into inline styles by scanning the DOM.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    } 
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build",
+    "test": "npm run build && node test/test.mjs"
+  },
+  "devDependencies": {
+    "jsdom": "^29.0.1",
+    "typescript": "^5.9.3"
+  }
+}