npm package: @iamharshitsharma/chai-css
Description: A lightweight utility-first CSS engine in vanilla JavaScript. Write chai-* class names, get inline styles — no build step required.
Author: Harshit
Latest version: 1.0.0

# ☕ chai-css

A lightweight utility-first CSS engine in vanilla JavaScript.

Write `chai-*` class names on any HTML element — the engine scans the DOM, converts them to inline styles, and removes the classes. No build step, no framework, no dependencies.

```html
<div class="chai-p-4 chai-bg-blue chai-text-white chai-rounded-lg">
  Hello, Chai!
</div>
```

---

## Installation

```bash
npm install chai-css
```

Or via CDN (no install needed):

```html
<script src="https://unpkg.com/chai-css/dist/chai.umd.js"></script>
```

---

## Usage

### Script tag (browser, zero setup)

```html
<script src="https://unpkg.com/chai-css/dist/chai.umd.js"></script>

<div class="chai-flex chai-gap-4 chai-p-8">
  <div class="chai-bg-blue chai-text-white chai-p-4 chai-rounded-lg">Card</div>
</div>
```

The engine runs automatically on `DOMContentLoaded`. No extra code needed.

### ES Module

```js
import chai from 'chai-css';

// Run manually (useful after inserting elements dynamically)
chai.run();

// Or run on a specific subtree
chai.run(document.getElementById('my-container'));

// Parse a single class name (returns a style object or null)
chai.parse('chai-px-4');  // → { paddingLeft: '16px', paddingRight: '16px' }
```

### CommonJS (Node / older bundlers)

```js
const chai = require('chai-css');

chai.run();
```

---

## Supported utilities

### Spacing
| Class | CSS output |
|-------|-----------|
| `chai-p-{n}` | `padding: {n*4}px` |
| `chai-px-{n}` | `padding-left/right: {n*4}px` |
| `chai-py-{n}` | `padding-top/bottom: {n*4}px` |
| `chai-pt/pr/pb/pl-{n}` | individual sides |
| `chai-m-{n}` | `margin: {n*4}px` (same variants) |

### Colors
| Class | CSS output |
|-------|-----------|
| `chai-bg-{color}` | `background-color` |
| `chai-text-{color}` | `color` |
| `chai-border-{color}` | `border-color` |

Colors: `red`, `blue`, `green`, `purple`, `pink`, `teal`, `amber`, `orange`, `yellow`, `gray`, `slate`, `white`, `black` — plus shade variants like `blue-500`, `red-100`.

### Typography
| Class | CSS output |
|-------|-----------|
| `chai-text-{xs\|sm\|base\|lg\|xl\|2xl\|3xl\|4xl}` | `font-size` |
| `chai-font-{thin\|light\|normal\|medium\|semibold\|bold\|extrabold}` | `font-weight` |
| `chai-font-{sans\|serif\|mono}` | `font-family` |
| `chai-italic` | `font-style: italic` |
| `chai-uppercase\|lowercase\|capitalize` | `text-transform` |
| `chai-underline\|line-through` | `text-decoration` |
| `chai-text-{left\|center\|right\|justify}` | `text-align` |
| `chai-leading-{none\|tight\|normal\|relaxed\|loose}` | `line-height` |
| `chai-tracking-{tight\|normal\|wide\|wider\|widest}` | `letter-spacing` |

### Layout
| Class | CSS output |
|-------|-----------|
| `chai-flex` | `display: flex` |
| `chai-grid` | `display: grid` |
| `chai-block\|inline-block\|hidden` | `display` |
| `chai-flex-col\|flex-row` | `flex-direction` |
| `chai-flex-wrap\|flex-nowrap` | `flex-wrap` |
| `chai-justify-{start\|end\|center\|between\|around}` | `justify-content` |
| `chai-items-{start\|end\|center\|stretch}` | `align-items` |
| `chai-gap-{n}` | `gap: {n*4}px` |
| `chai-grid-cols-{n}` | `grid-template-columns: repeat(n, ...)` |

### Sizing
| Class | CSS output |
|-------|-----------|
| `chai-w-{n}\|full\|screen\|auto\|fit` | `width` |
| `chai-h-{n}\|full\|screen\|auto` | `height` |
| `chai-max-w-{xs\|sm\|md\|lg\|xl\|...\|full}` | `max-width` |

### Borders
| Class | CSS output |
|-------|-----------|
| `chai-border` | `border: 1px solid currentColor` |
| `chai-border-{2\|4\|8}` | `border-width` |
| `chai-border-{solid\|dashed\|dotted}` | `border-style` |
| `chai-rounded\|rounded-{sm\|md\|lg\|xl\|2xl\|full}` | `border-radius` |

### Misc
| Class | CSS output |
|-------|-----------|
| `chai-shadow\|shadow-{sm\|md\|lg\|xl\|2xl}` | `box-shadow` |
| `chai-opacity-{0\|25\|50\|75\|100}` | `opacity` |
| `chai-absolute\|relative\|fixed\|sticky` | `position` |
| `chai-top/right/bottom/left-{n}` | inset values |
| `chai-z-{10\|20\|30\|40\|50}` | `z-index` |
| `chai-overflow-{hidden\|auto\|scroll}` | `overflow` |
| `chai-cursor-pointer\|default\|...` | `cursor` |

---

## Dynamic usage

If you add elements after page load, call `chai.run()` to process them:

```js
import chai from 'chai-css';

const card = document.createElement('div');
card.className = 'chai-bg-purple chai-text-white chai-p-6 chai-rounded-xl';
document.body.appendChild(card);

chai.run();  // processes the new card
```

Or pass a root element to only scan a subtree:

```js
const container = document.getElementById('dynamic-area');
container.innerHTML = `<p class="chai-text-blue chai-font-bold">Hi!</p>`;
chai.run(container);
```

---

## Adding custom utilities

The parser is a single function — extend it by importing and wrapping:

```js
import { parseClass as baseParser } from 'chai-css/src/index.js';

function myParser(cls) {
  // Your custom utilities
  if (cls === 'chai-glass') {
    return { backdropFilter: 'blur(8px)', background: 'rgba(255,255,255,0.1)' };
  }
  // Fall back to built-in parser
  return baseParser(cls);
}
```

---

## API

```ts
chai.run(root?: Element | Document): void
// Scan root (default: document) for chai-* classes and apply them.

chai.parse(className: string): object | null
// Convert one class name to a style object. Returns null if unrecognised.

chai.applyStyles(el: Element): void
// Process a single element directly.
```

---

## License

MIT © Harshit