🍃 ChaiCore

ChaiCore is a blazing-fast, zero-build, dependency-free Runtime CSS-in-JS Utility Engine.

Designed to bring the convenience of utility-first CSS frameworks straight to the browser, ChaiCore parses classes on the fly and intelligently injects inline styles dynamically without the need for Webpack, Node.js, or any complex build processes.

🛠️ How It Works

ChaiCore runs natively in the browser on DOMContentLoaded.

1. It scans the document for any element containing classes prefixed with chai-.
2. It parses the utility segments logically (e.g., chai-bg-#ff0000 splits into the utility bg and value #ff0000).
3. It maps the utility dynamically to its valid CSS-in-JS equivalent through the internal this.rules dictionary.
4. It safely assigns the resolved styles directly to the elements via Object.assign(el.style, styleObj) and removes the raw class string from the element to keep the DOM completely clean.

📖 Exhaustive Utility Class Documentation

Below is the complete list of all supported utility classes and exactly what CSS rules they generate.

Important: All utilities must be prefixed with chai-. Numbers are automatically converted to px unless otherwise specified (or if you pass a string like 100%).

1. Typography & Text

| Class | CSS Generated | Example | | :-------------------- | :------------------------ | :-------------------------------------------- | | chai-text-[color] | color: [color] | chai-text-#ff0000, chai-text-white | | chai-text-[size] | font-size: [px] | chai-text-sm (14px), chai-text-2xl (24px) | | chai-text-[align] | text-align: [align] | chai-text-center, chai-text-right | | chai-font-[family] | font-family: [family] | chai-font-sans | | chai-bold | font-weight: bold | chai-bold | | chai-semibold | font-weight: 600 | chai-semibold | | chai-light | font-weight: 300 | chai-light | | chai-italic | font-style: italic | chai-italic | | chai-tracking-[val] | letter-spacing: [val]px | chai-tracking-2 | | chai-leading-[val] | line-height: [val] | chai-leading-1.5 |

(Available text sizes: xs (12px), sm (14px), base (16px), lg (18px), xl (20px), 2xl (24px), 3xl (30px), 4xl (36px), 5xl (48px), 6xl (64px), 7xl (80px))
(Available text aligns: left, center, right, justify)

2. Colors & Backgrounds

| Class | CSS Generated | Example | | :------------------- | :-------------------------- | :--------------------------------------- | | chai-bg-[color] | background-color: [color] | chai-bg-#0f172a, chai-bg-transparent | | chai-opacity-[val] | opacity: [val/100] | chai-opacity-50 (translates to 0.5) |

3. Spacing (Margin & Padding)

| Class | Target Property | Supported Sides / Description | Example | | :-------------- | :-------------- | :---------------------------- | :----------------------------- | | chai-p-[val] | Padding | All sides | chai-p-20 | | chai-px-[val] | Padding | Left and Right | chai-px-40 | | chai-py-[val] | Padding | Top and Bottom | chai-py-10 | | chai-pt-[val] | Padding | Top | chai-pt-5 | | chai-pr-[val] | Padding | Right | chai-pr-5 | | chai-pb-[val] | Padding | Bottom | chai-pb-5 | | chai-pl-[val] | Padding | Left | chai-pl-5 | | chai-m-[val] | Margin | All sides | chai-m-10 | | chai-mx-[val] | Margin | Left and Right | chai-mx-auto (Centers block) | | chai-my-[val] | Margin | Top and Bottom | chai-my-20 | | chai-mt-[val] | Margin | Top | chai-mt-auto | | chai-mr-[val] | Margin | Right | chai-mr-10 | | chai-mb-[val] | Margin | Bottom | chai-mb-10 | | chai-ml-[val] | Margin | Left | chai-ml-10 |

4. Sizing

| Class | Description | Example / Note | | :----------------- | :---------------- | :------------------------------------------------------------------ | | chai-w-[val] | Sets width | chai-w-full (100%), chai-w-screen (100vw), chai-w-200 (200px) | | chai-h-[val] | Sets height | chai-h-full (100%), chai-h-screen (100vh), chai-h-100 (100px) | | chai-max-w-[val] | Sets max-width | chai-max-w-screen (100vw), chai-max-w-800 (800px) | | chai-min-h-[val] | Sets min-height | chai-min-h-screen (100vh), chai-min-h-full (100%) |

5. Layout & Display

| Class | CSS Generated | | :-------------------- | :----------------------------------------- | | chai-flex | display: flex | | chai-grid | display: grid | | chai-block | display: block | | chai-inline-block | display: inline-block | | chai-hidden | display: none | | chai-absolute | position: absolute | | chai-relative | position: relative | | chai-fixed | position: fixed | | chai-sticky | position: sticky | | chai-top-[val] | top: [val]px | | chai-bottom-[val] | bottom: [val]px | | chai-right-[val] | right: [val]px | | chai-left-[val] | left: [val]px | | chai-inset-[val] | inset: [val]px | | chai-z-[val] | z-index: [val] | | chai-overflow-[val] | overflow: [val] (auto, hidden, etc.) |

6. Flexbox & Grid Controls

| Class | CSS Generated | Example | | :--------------------- | :----------------------------------------------------- | :--------------------------- | | chai-flex-col | flex-direction: column | chai-flex-col | | chai-flex-row | flex-direction: row | chai-flex-row | | chai-flex-wrap | flex-wrap: wrap | chai-flex-wrap | | chai-items-[val] | align-items: [val] | chai-items-center | | chai-justify-[val] | justify-content: [val] | chai-justify-space-between | | chai-gap-[val] | gap: [val]px | chai-gap-20 | | chai-grid-cols-[val] | grid-template-columns: repeat([val], minmax(0, 1fr)) | chai-grid-cols-3 |

7. Borders & Radius

| Class | CSS Generated | Example | | :---------------------- | :---------------------------------------------------------------------------------- | :--------------------------------------- | | chai-border | border: 1px solid currentColor | chai-border | | chai-border-[val] | If style (solid/dashed): sets border-style: [val], else border-color: [val] | chai-border-dashed, chai-border-#333 | | chai-border-t-[color] | border-top: 1px solid [color] | chai-border-t-#fff | | chai-border-b-[color] | border-bottom: 1px solid [color] | chai-border-b-rgba(0,0,0,0.1) | | chai-rounded-[val] | border-radius: [val]px (Default is 4px. full is 9999px) | chai-rounded-12, chai-rounded-full |

8. Premium Effects & Misc

| Class | CSS Generated | Note | | :------------------------- | :----------------------------- | :------------------------------------------------------- | | chai-shadow | Standard subtle box shadow | box-shadow: 0 4px ... | | chai-shadow-lg | Large prominent box shadow | box-shadow: 0 10px ... | | chai-pointer | cursor: pointer | Hover pointer on elements | | chai-backdrop-blur-[val] | backdrop-filter: blur([val]) | Sizes: sm (4px), md (12px), lg (24px), xl (40px) | | chai-filter-blur-[val] | filter: blur([val]px) | chai-filter-blur-10 | | chai-glass | Complete glassmorphism styling | Adds rgba background, blur, and subtle border | | chai-glass-card | Intensified glass card UI | Deep blur, low opacity background, 32px shadow | | chai-text-gradient | Vibrant text gradient | Applies linear-gradient to text clip |

🎨 Extending the Engine

The true architectural power of ChaiCore is how modular and painless it is to inject custom CSS logic directly in JavaScript.

Open cssEngine.js and add a new utility resolver key in this.rules:

this.rules = {
  // ... existing rules

  // Custom Transform Utility
  rotate: (value) => ({ transform: `rotate(${value}deg)` }),

  // Custom Predefined Token
  "theme-button": () => ({
    backgroundColor: "#10b981",
    border: "1px solid rgba(255,255,255,0.1)",
    borderRadius: "16px",
    padding: "12px 24px",
    cursor: "pointer",
    transition: "transform 0.3s ease",
  }),
};