chaiwind 2.1.3 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +145 -0
- package/README.md +392 -108
- package/package.json +12 -8
- package/src/engine.js +144 -0
- package/src/handlers.js +218 -0
- package/src/index.js +20 -0
- package/src/tokens.js +141 -0
- package/chaiwind.js +0 -383
- package/demo/demo.html +0 -104
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to ChaiWind will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
|
|
6
|
+
|
|
7
|
+
## [3.0.0] - 2026-03-22
|
|
8
|
+
|
|
9
|
+
### 🎉 Major Refactor - Simpler & Better!
|
|
10
|
+
|
|
11
|
+
This is a complete architectural rewrite of ChaiWind with a focus on simplicity, maintainability, and extensibility.
|
|
12
|
+
|
|
13
|
+
### Breaking Changes
|
|
14
|
+
|
|
15
|
+
- **Module System**: Changed from single IIFE file to ES modules
|
|
16
|
+
- Old: `<script src="chaiwind.js"></script>` (auto-runs)
|
|
17
|
+
- New: `<script type="module">` with explicit `initChai()` call
|
|
18
|
+
|
|
19
|
+
- **File Structure**: Moved from monolithic `chaiwind.js` to modular `src/` directory
|
|
20
|
+
- `src/index.js` - Entry point
|
|
21
|
+
- `src/tokens.js` - Design system tokens
|
|
22
|
+
- `src/engine.js` - Core parsing logic
|
|
23
|
+
- `src/handlers.js` - Utility handlers
|
|
24
|
+
|
|
25
|
+
- **Initialization**: Must explicitly call `initChai()` to start
|
|
26
|
+
|
|
27
|
+
### New Usage
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<!DOCTYPE html>
|
|
31
|
+
<html>
|
|
32
|
+
<head>
|
|
33
|
+
<title>ChaiWind v3</title>
|
|
34
|
+
</head>
|
|
35
|
+
<body>
|
|
36
|
+
<div class="chai-bg-chai chai-p-4 chai-rounded-md chai-text-white">
|
|
37
|
+
Hello ChaiCode! ☕
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import { initChai } from "./node_modules/chaiwind/src/index.js";
|
|
42
|
+
initChai();
|
|
43
|
+
</script>
|
|
44
|
+
</body>
|
|
45
|
+
</html>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Added
|
|
49
|
+
|
|
50
|
+
- ✨ **MutationObserver** - Automatically processes dynamically added content
|
|
51
|
+
- Works seamlessly with React, Vue, Alpine.js, and vanilla JS
|
|
52
|
+
- No need to manually rescan when adding elements
|
|
53
|
+
|
|
54
|
+
- 🎨 **New Utilities** (70+ total, up from 60+)
|
|
55
|
+
- `chai-grid-cols-{n}` - CSS Grid columns
|
|
56
|
+
- `chai-col-span-{n}` - Grid column span
|
|
57
|
+
- `chai-leading-{value}` - Line height control
|
|
58
|
+
- `chai-tracking-{value}` - Letter spacing
|
|
59
|
+
- `chai-z-{value}` - Z-index
|
|
60
|
+
- `chai-object-cover` / `chai-object-contain` - Object fit
|
|
61
|
+
- `chai-select-none` - User select
|
|
62
|
+
- `chai-overflow-{x|y}-{value}` - Overflow control
|
|
63
|
+
|
|
64
|
+
- 📁 **Beginner-Friendly Architecture**
|
|
65
|
+
- Just 4 simple files - easy to understand how it works
|
|
66
|
+
- Clear separation of concerns
|
|
67
|
+
- Well-commented code explaining each function
|
|
68
|
+
|
|
69
|
+
- 🔧 **Easy Customization**
|
|
70
|
+
- Want new colors? Edit `src/tokens.js`
|
|
71
|
+
- Want new utilities? Add to `src/handlers.js`
|
|
72
|
+
- No build process to run!
|
|
73
|
+
|
|
74
|
+
- 🚀 **Better Developer Experience**
|
|
75
|
+
- ES modules = modern JavaScript
|
|
76
|
+
- Import only what you need
|
|
77
|
+
- Works with Vite, webpack, Rollup out of the box
|
|
78
|
+
|
|
79
|
+
### Enhanced
|
|
80
|
+
|
|
81
|
+
- **Color System**: Expanded ChaiCode-themed palettes
|
|
82
|
+
- ☕ Hitesh sir - chai, adrak, masala, kulhad, tapri, dudh
|
|
83
|
+
- 🩷 Piyush sir - piyush, rose, blush, fuschia, lipstick
|
|
84
|
+
- 🍎 Akash sir - midnight, spacegray, silver, macos-blue
|
|
85
|
+
- Plus full grayscale (gray-50 to gray-900)
|
|
86
|
+
|
|
87
|
+
- **Spacing Scale**: Added more values (14, 32) for better coverage
|
|
88
|
+
|
|
89
|
+
- **Font Scale**: Added `6xl` (64px) for extra large headings
|
|
90
|
+
|
|
91
|
+
- **Handler Organization**: Grouped by category with clear comments
|
|
92
|
+
|
|
93
|
+
### Migration from v2.x
|
|
94
|
+
|
|
95
|
+
**Step 1**: Update your HTML from:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<script src="chaiwind.js"></script>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
**To**:
|
|
102
|
+
|
|
103
|
+
```html
|
|
104
|
+
<script type="module">
|
|
105
|
+
import { initChai } from "./node_modules/chaiwind/src/index.js";
|
|
106
|
+
initChai();
|
|
107
|
+
</script>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
**Step 2**: That's it! All your existing `chai-*` classes work exactly the same.
|
|
111
|
+
|
|
112
|
+
**Note**: If you need to support older browsers without ES module support, you may want to stay on v2.x or use a bundler.
|
|
113
|
+
|
|
114
|
+
### What Stays the Same
|
|
115
|
+
|
|
116
|
+
- ✅ All existing `cai-*` class names work identically
|
|
117
|
+
- ✅ Same API - just styled with inline styles
|
|
118
|
+
- ✅ Zero dependencies
|
|
119
|
+
- ✅ Lightweight and fast
|
|
120
|
+
- ✅ ChaiCode branding and themed colors
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## [2.1.3] - 2025-XX-XX
|
|
125
|
+
|
|
126
|
+
### Changed
|
|
127
|
+
|
|
128
|
+
- Enhanced `applyClass` function for better utility handling
|
|
129
|
+
- Added new color, spacing, font size, radius, and shadow tokens
|
|
130
|
+
|
|
131
|
+
## [2.0.0] - 2025-XX-XX
|
|
132
|
+
|
|
133
|
+
### Added
|
|
134
|
+
|
|
135
|
+
- New logic with autocomplete suggestions
|
|
136
|
+
- Improved version with better architecture
|
|
137
|
+
|
|
138
|
+
## [1.0.0] - 2025-XX-XX
|
|
139
|
+
|
|
140
|
+
### Added
|
|
141
|
+
|
|
142
|
+
- Initial release
|
|
143
|
+
- Basic utility-first CSS engine
|
|
144
|
+
- ChaiCode themed colors
|
|
145
|
+
- Core utilities for padding, margin, colors, typography
|