chai-tini 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,16 @@
 # chai-tini
 
-Lightweight utility-first “CSS engine” that converts `chai-*` class names into inline styles by scanning the DOM.
+Lightweight utility-first "CSS engine" that converts `chai-*` class names into inline styles by scanning the DOM.
+
+![npm version](https://img.shields.io/npm/v/chai-tini?style=flat&color=blue)
+![downloads](https://img.shields.io/npm/dm/chai-tini?style=flat)
+![license](https://img.shields.io/npm/l/chai-tini?style=flat)
+
+## Features
+
+- Scans the DOM for elements with `chai-*` utility classes.
+- Applies matching inline styles (the original classes stay intact).
+- Auto-initializes on import, with an optional manual + scoped API.
 
 ## Install
 
@@ -8,15 +18,15 @@ Lightweight utility-first “CSS engine” that converts `chai-*` class names in
 npm i chai-tini
 ```
 
-## Usage
+## Quick Start
 
-### Option A: auto-init on import (default)
+### Auto init (default)
 
 ```js
 import "chai-tini";
 ```
 
-### Option B: explicit init
+### Manual init
 
 ```js
 import { initChaiUtilities } from "chai-tini";
@@ -24,30 +34,70 @@ 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`
+### Scope to a subtree (recommended for SPA routes)
+
+```js
+import { initChaiUtilities } from "chai-tini";
+
+const root = document.getElementById("app");
+initChaiUtilities({ root: root ?? undefined });
+```
+
+### Example
+
+```html
+<div class="chai-p-2 chai-bg-red chai-text-center chai-fs-16 chai-font-semibold">
+  Hello
+</div>
+```
+
+## Supported Utilities
+
+### Spacing (padding / margin)
+
+- `chai-p-<n>` / `chai-m-<n>` -> `padding` / `margin`
+- Directional variants: `chai-px-<n>`, `chai-py-<n>`, `chai-pt-<n>`, `chai-pr-<n>`, `chai-pb-<n>`, `chai-pl-<n>` (and the same for `chai-m*`)
+
+### Colors / alignment
+
+- `chai-bg-<color>` -> `background-color: <color>`
+- `chai-text-<color>` -> `color: <color>`
+- `chai-text-center|left|right|justify` -> `text-align: ...`
+
+### Typography
+
+- `chai-fs-<n>` -> `font-size: <n>px`
+- `chai-font-light|normal|semibold|bold` -> `font-weight`
+
+### Borders & radius
+
+- `chai-rounded-<n>` -> `border-radius`
+- `chai-rounded-(t|r|b|l)-<n>` -> corner radii
+- `chai-border-w-<n>` -> `border-width: <n>px` and `border-style: solid`
+- `chai-border-color-<color>` -> `border-color`
+
+### Layout / display
+
+- `chai-flex` -> `display: flex`
+- `chai-grid` -> `display: grid`
+- `chai-block` -> `display: block`
+- `chai-inline` -> `display: inline`
+- `chai-inline-block` -> `display: inline-block`
+- `chai-none` -> `display: none`
+
+### Sizing
+
+- `chai-w-<n>` -> `width: <n>px`
+- `chai-h-<n>` -> `height: <n>px`
+
+### Animation
+
+- `chai-animate-spin` -> `animation: chai-animate-spin 1s linear infinite`
+  - Also injects the required `@keyframes` into the page.
 
 ## 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).
+- The library runs in the browser only. If `document` is not available, `initChaiUtilities()` is a no-op.
+- Inline styles are applied; if you update classes after init, call `applyChaiUtilities(root?)` again (or re-run `initChaiUtilities` for your scope).
 

package/dist/applyChaiUtilities.js

@@ -4,12 +4,9 @@ export function applyChaiUtilities(root) {
     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"
+    const doc = typeof queryRoot.createElement === "function"
         ? queryRoot
-        : // Otherwise use its owning document.
-            queryRoot.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+        : 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}"]`)) : [];

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,9 +1,57 @@
 import { applyChaiUtilities } from "./applyChaiUtilities.js";
+const activeObservers = new WeakMap();
+function supportsMutationObserver() {
+    return typeof MutationObserver !== "undefined";
+}
+function watchForChaiMutations(root) {
+    if (!supportsMutationObserver())
+        return;
+    if (activeObservers.has(root))
+        return;
+    let scheduled = false;
+    const scheduleApply = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        queueMicrotask(() => {
+            scheduled = false;
+            applyChaiUtilities(root);
+        });
+    };
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === "attributes" && mutation.attributeName !== "class")
+                continue;
+            scheduleApply();
+            break;
+        }
+    });
+    observer.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["class"],
+    });
+    activeObservers.set(root, observer);
+}
+export function stopChaiUtilities(root) {
+    const target = root ?? (typeof document !== "undefined" ? document : undefined);
+    if (!target)
+        return;
+    const observer = activeObservers.get(target);
+    if (!observer)
+        return;
+    observer.disconnect();
+    activeObservers.delete(target);
+}
 export function initChaiUtilities(options = {}) {
     if (typeof document === "undefined")
         return;
     const root = options.root ?? document;
-    const run = () => applyChaiUtilities(root);
+    const run = () => {
+        applyChaiUtilities(root);
+        watchForChaiMutations(root);
+    };
     if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", run, { once: true });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chai-tini",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A lightweight client-side engine that converts `chai-*` utility classes into inline styles by scanning the DOM.",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,7 +11,7 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
-    } 
+    }
   },
   "files": [
     "dist"