chaiwalicss

v2.1.0

Published

9 days ago

"This is lightweight utility-first CSS engine using JavaScript."

0High
0Medium
0Low

devdivyansh

chai

☕ ChaiWaliCSS

A lightweight, utility-first CSS engine powered by vanilla JavaScript — no build step, no config, just sip and style.

📖 Table of Contents

🍵 What is ChaiWaliCSS?

ChaiWaliCSS is a zero-dependency, utility-first CSS engine that lets you apply CSS styles directly in your HTML using simple shorthand class names — all processed at runtime by a tiny JavaScript engine.

No PostCSS. No Webpack. No compilation. Just import and go.

<!-- This is all it takes -->
<div class="chai-bg-#1a1a2e chai-p-24px chai-brdRadius-12px chai-d-flex chai-jc-center">
  <h1 class="chai-clr-white chai-fs-2rem chai-fw-700">Hello, World!</h1>
</div>

📦 Installation

via npm

npm install chaiwalicss

via yarn

yarn add chaiwalicss

via pnpm

pnpm add chaiwalicss

🚀 Quick Start

Add the script tag at the bottom of your HTML <body>, pointing to the installed package file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My App</title>
</head>
<body>

  <div class="chai-bg-tomato chai-p-20px chai-brdRadius-8px">
    <p class="chai-clr-white chai-fs-1.2rem chai-fw-600">Styled with ChaiWaliCSS!</p>
  </div>

  <script type="module" src="./node_modules/chaiwalicss/applychai.js"></script>
</body>
</html>

Note: Use type="module" on the script tag since ChaiWaliCSS uses ES module syntax. Place the script after your HTML elements so the DOM is ready when the engine runs.

⚙️ How It Works

ChaiWaliCSS uses JavaScript DOM traversal to scan every element on the page. When it finds a class prefixed with chai-, it:

Parses the class name into a property and a value
Maps the shorthand alias to a full CSS property name via the property dictionary
Applies the style directly using element.style[property] = value

chai-{property}-{value}
  │       │         └──▶  CSS value  (e.g. 24px, red, flex, 700)
  │       └──────────────▶ Shorthand alias  (e.g. p → padding, fs → font-size)
  └──────────────────────▶ Prefix (required — identifies ChaiWaliCSS classes)

Example Parsing:

| Class Name | Property Alias | Resolves To | Value | |-----------------------|----------------|----------------|---------| | chai-p-16px | p | padding | 16px | | chai-fs-1.5rem | fs | font-size | 1.5rem| | chai-d-flex | d | display | flex | | chai-brdRadius-50% | brdRadius | border-radius| 50% | | chai-bg-#ff6600 | bg | background-color | #ff6600 |

🏷️ Class Name Syntax

The pattern for every ChaiWaliCSS class is:

chai-{alias}-{value}

The prefix chai- is required
{alias} is a shorthand from the property map (see reference below)
{value} is any valid CSS value — no quotes needed

Examples

<!-- Spacing -->
<div class="chai-m-auto chai-p-32px chai-mt-16px chai-pb-8px"></div>

<!-- Typography -->
<p class="chai-ff-Georgia chai-fs-18px chai-fw-500 chai-clr-#333"></p>

<!-- Flexbox -->
<div class="chai-d-flex chai-jc-space-between chai-ai-center chai-gap-12px"></div>

<!-- Sizing -->
<img class="chai-w-100px chai-h-100px chai-brdRadius-50%" />

<!-- Background -->
<section class="chai-bg-#f0f4f8 chai-bgSize-cover chai-bgPos-center"></section>

<!-- Positioning -->
<div class="chai-pos-absolute chai-z-10 chai-w-100%"></div>

🔠 Multi-Word Values

Some CSS values contain spaces (e.g. 1px solid red, bold 16px Arial). In ChaiWaliCSS, use dashes (-) where there would be spaces, and the engine automatically converts them:

<!-- border: 1px solid red -->
<div class="chai-brd-1px-solid-red"></div>

<!-- font: bold 16px Arial -->
<p class="chai-font-bold-16px-Arial"></p>

<!-- box-shadow: 0px 4px 12px rgba(0,0,0,0.2) -->
<div class="chai-boxShadow-0px-4px-12px-gray"></div>

Tip: Dashes between words in the value are treated as spaces. The property alias itself should have no dashes (it's camelCase or a short string).

📚 Property Reference

All shorthand aliases are defined in customProperty.js. Here is the full reference:

📐 Spacing

| Alias | CSS Property | |-------|-----------------| | m | margin | | mt | margin-top | | mr | margin-right | | mb | margin-bottom | | ml | margin-left | | p | padding | | pt | padding-top | | pr | padding-right | | pb | padding-bottom | | pl | padding-left |

🎨 Colors

| Alias | CSS Property | |----------------|--------------------------| | clr | color | | brdClr | border-color | | textDecClr | text-decoration-color | | caretClr | caret-color | | columnRuleClr| column-rule-color |

🖼️ Background

| Alias | CSS Property | |-------------|--------------------------| | bg | background-color | | bgImg | background-image | | bgPos | background-position | | bgSize | background-size | | bgRepeat | background-repeat | | bgAttach | background-attachment | | bgClip | background-clip | | bgOrigin | background-origin |

📏 Sizing

| Alias | CSS Property | |--------|--------------| | w | width | | h | height | | minW | min-width | | maxW | max-width | | minH | min-height | | maxH | max-height |

📦 Box Model

| Alias | CSS Property | |-------------|----------------| | boxSizing | box-sizing | | brd | border | | brdW | border-width | | brdStyle | border-style | | brdRadius | border-radius | | boxShadow | box-shadow |

✏️ Typography / Fonts

| Alias | CSS Property | |----------------|-------------------| | ff | font-family | | fs | font-size | | fw | font-weight | | fst | font-style | | fontVariant | font-variant | | fontStretch | font-stretch | | font | font | | lineHeight | line-height | | letterSpacing| letter-spacing | | wordSpacing | word-spacing | | textIndent | text-indent | | textOverflow | text-overflow | | whiteSpace | white-space | | wordBreak | word-break |

🗂️ Display & Flexbox

| Alias | CSS Property | |-------------|--------------------| | d | display | | flexDir | flex-direction | | flexWrap | flex-wrap | | flexFlow | flex-flow | | jc | justify-content | | ai | align-items | | ac | align-content | | as | align-self | | pi | place-items | | pc | place-content | | gap | gap | | columnGap | column-gap | | rowGap | row-gap | | flex | flex | | flexGrow | flex-grow | | flexShrink| flex-shrink | | flexBasis | flex-basis | | order | order |

▦ Grid

| Alias | CSS Property | |--------------------|--------------------------| | gridTemplateCols | grid-template-columns | | gridTemplateRows | grid-template-rows | | gridArea | grid-area | | gridAutoCols | grid-auto-columns | | gridAutoRows | grid-auto-rows | | gridAutoFlow | grid-auto-flow |

📍 Position

| Alias | CSS Property | |-----------------|------------------| | pos | position | | z | z-index | | verticalAlign | vertical-align |

🖼️ Image & Object

| Alias | CSS Property | |------------------|-------------------| | objectFit | object-fit | | objectPosition | object-position | | aspectRatio | aspect-ratio |

📋 List

| Alias | CSS Property | |-----------------|----------------------| | listStyle | list-style | | listStyleType | list-style-type | | listStylePos | list-style-position | | listStyleImg | list-style-image |

🗃️ Table

| Alias | CSS Property | |---------------|------------------| | tblLayout | table-layout | | tblCollapse | border-collapse | | tblSpacing | border-spacing | | captionSide | caption-side | | emptyCells | empty-cells |

🔧 Extending with Custom Aliases

Adding your own shorthands is as simple as editing a JavaScript object. Open customProperty.js and add your alias:

const properties = {
  // ... existing aliases ...

  // ✨ Add your own
  transition: "transition",
  cursor:     "cursor",
  opacity:    "opacity",
  overflow:   "overflow",
  vis:        "visibility",
  tr:         "transform",
  filter:     "filter",
  resize:     "resize",
};

export default properties;

Then use them like any other class:

<button class="chai-cursor-pointer chai-opacity-0.8 chai-transition-all-0.3s-ease">
  Hover me
</button>

⚖️ Comparison

| Feature | ChaiWaliCSS | Tailwind CSS | Inline Styles | |-----------------------|----------------------|--------------------------|-------------------| | No build step | ✅ Yes | ❌ Requires CLI/PostCSS | ✅ Yes | | Shorthand aliases | ✅ 100+ shorthands | ✅ Predefined classes | ❌ Verbose | | Arbitrary values | ✅ Any CSS value | ⚠️ JIT mode only | ✅ Yes | | Custom properties | ✅ Plain JS object | ⚠️ Config file required | ❌ N/A | | Bundle size | ~2 KB | ~30 KB (purged) | 0 KB | | Multi-word values | ✅ Dash-separated | ⚠️ Bracket syntax | ✅ Yes | | Zero dependencies | ✅ Yes | ❌ Node ecosystem | ✅ Yes |

🤝 Contributing

Contributions are welcome! Here's how to get started:

Fork the repository

Clone your fork

git clone https://github.com/devDivyansh28/ChaiWaliCSS.git
cd ChaiWaliCSS

Create a feature branch
```
git checkout -b feat/my-new-alias
```
Make your changes (add aliases, fix bugs, improve docs)

Commit and push

git commit -m "feat: add opacity and transition aliases"
git push origin feat/my-new-alias

Open a Pull Request on GitHub

Found a bug? Open an issue →

📄 License

Made with ☕ by Divyansh Sharma