chaiwind 1.0.0 → 2.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.
Files changed (5) hide show
  1. package/README.md +159 -24
  2. package/chaiwind.css-data.json +1072 -0
  3. package/chaiwind.js +323 -117
  4. package/package.json +12 -4
  5. package/scripts/postinstall.js +142 -0
package/README.md CHANGED
@@ -1,46 +1,181 @@
1
- # Chaiwind
1
+ # chaiwind
2
2
 
3
- A modern web project combining chai testing and Tailwind CSS.
3
+ A lightweight utility-first CSS engine for the ChaiCode family.
4
4
 
5
- ## Features
5
+ Write `chai-*` class names on your HTML elements. chaiwind scans the DOM,
6
+ parses those class names, and applies inline styles directly — no build step,
7
+ no config, no stylesheet required.
6
8
 
7
- - Fast development setup
8
- - Tailwind CSS styling
9
- - Chai testing framework
10
- - Clean project structure
9
+ ---
11
10
 
12
- ## Installation
11
+ ## Install
13
12
 
14
13
  ```bash
15
- npm install
14
+ npm install chaiwind
16
15
  ```
17
16
 
18
- ## Usage
17
+ VS Code autocomplete for all `chai-*` classes is set up automatically.
18
+ Restart VS Code once after install to activate suggestions.
19
19
 
20
- ```bash
21
- npm start
20
+ ---
21
+
22
+ ## Setup
23
+
24
+ Add the script tag at the **bottom of your body** tag:
25
+
26
+ ```html
27
+ <body>
28
+
29
+ <!-- your HTML here -->
30
+
31
+ <script src="node_modules/chaiwind/chaiwind.js"></script>
32
+ </body>
22
33
  ```
23
34
 
24
- ## Testing
35
+ Then use `chai-*` classes on any element:
25
36
 
26
- ```bash
27
- npm test
37
+ ```html
38
+ <div class="chai-bg-chai chai-p-4 chai-rounded-md chai-text-white">
39
+ Haanji!
40
+ </div>
41
+
42
+ <div class="chai-flex chai-items-center chai-justify-between chai-gap-4">
43
+ <p class="chai-fs-lg chai-font-bold chai-text-masala">Hitesh sir</p>
44
+ <p class="chai-fs-sm chai-text-gray">ChaiCode</p>
45
+ </div>
28
46
  ```
29
47
 
30
- ## Technologies
48
+ chaiwind converts each `chai-*` class into an inline style and removes the
49
+ class from the element. A `data-chaiwind` attribute is added so you can still
50
+ see what was applied by inspecting the element.
31
51
 
32
- - **Tailwind CSS** - Utility-first CSS framework
33
- - **Chai** - BDD assertion library
34
- - **Node.js** - JavaScript runtime
52
+ ---
35
53
 
36
- ## License
54
+ ## How it works
55
+
56
+ 1. Script runs after the DOM is ready
57
+ 2. `querySelectorAll('[class]')` finds every element with a class
58
+ 3. For each class starting with `chai-` — parses the suffix into a CSS property and value
59
+ 4. Applies styles via `Object.assign(el.style, styles)`
60
+ 5. Removes the `chai-*` class, stores applied names in `data-chaiwind`
61
+ 6. `MutationObserver` watches for elements added after load and applies the same logic
62
+
63
+ ---
64
+
65
+ ## Color tokens
66
+
67
+ ### ChaiCode brand
68
+ | Class | Value |
69
+ |---|---|
70
+ | `chai-bg-chaicode` | `#f97316` |
71
+ | `chai-bg-chaicode-dark` | `#1a1a2e` |
72
+
73
+ ### Hitesh sir
74
+ | Class | Value |
75
+ |---|---|
76
+ | `chai-bg-chai` | `#c8843a` |
77
+ | `chai-bg-adrak` | `#d4a056` |
78
+ | `chai-bg-masala` | `#8b4513` |
79
+ | `chai-bg-kulhad` | `#b5651d` |
80
+
81
+ ### Piyush sir
82
+ | Class | Value |
83
+ |---|---|
84
+ | `chai-bg-piyush` | `#ec4899` |
85
+ | `chai-bg-piyush-dark` | `#be185d` |
86
+
87
+ ### Akash sir
88
+ | Class | Value |
89
+ |---|---|
90
+ | `chai-bg-midnight` | `#1d1d1f` |
91
+ | `chai-bg-silver` | `#e8e8ed` |
92
+
93
+ Each color token generates three classes: `chai-bg-*`, `chai-text-*`, `chai-border-*`
94
+
95
+ ---
96
+
97
+ ## Spacing
98
+
99
+ `chai-p-{0|1|2|3|4|6|8|10|12}` — padding
100
+ `chai-px-` `chai-py-` `chai-pt-` `chai-pb-` `chai-pl-` `chai-pr-`
101
+ `chai-m-{0|1|2|3|4|6|8|10|12}` — margin
102
+ `chai-mx-` `chai-my-` `chai-mt-` `chai-mb-` `chai-ml-` `chai-mr-`
103
+ `chai-gap-{n}` `chai-w-{n}` `chai-h-{n}`
104
+
105
+ Scale: 0=0px 1=4px 2=8px 3=12px 4=16px 6=24px 8=32px 10=40px 12=48px
106
+
107
+ ---
108
+
109
+ ## Typography
110
+
111
+ `chai-fs-{xs|sm|base|lg|xl|2xl}` — font size
112
+ `chai-font-{normal|medium|semibold|bold}` — font weight
113
+ `chai-text-{left|center|right}` — alignment
114
+ `chai-uppercase` `chai-lowercase` `chai-capitalize`
115
+ `chai-italic` `chai-underline` `chai-no-underline` `chai-truncate`
37
116
 
38
- MIT
117
+ ---
118
+
119
+ ## Layout
120
+
121
+ `chai-flex` `chai-flex-col` `chai-flex-row` `chai-flex-wrap` `chai-flex-1`
122
+ `chai-items-{start|center|end}`
123
+ `chai-justify-{start|center|end|between}`
124
+ `chai-grid` `chai-block` `chai-inline-block` `chai-hidden`
125
+
126
+ ---
127
+
128
+ ## Sizing
129
+
130
+ `chai-w-full` `chai-w-screen` `chai-w-auto`
131
+ `chai-h-full` `chai-h-screen` `chai-h-auto`
132
+
133
+ ---
134
+
135
+ ## Position
136
+
137
+ `chai-relative` `chai-absolute` `chai-fixed` `chai-sticky`
138
+
139
+ ---
140
+
141
+ ## Border & Radius
142
+
143
+ `chai-border` `chai-border-2` `chai-border-none` `chai-border-dashed`
144
+ `chai-rounded-{none|sm|md|lg|full}`
39
145
 
40
- ## Contributing
146
+ ---
147
+
148
+ ## Misc
41
149
 
42
- Pull requests welcome. For major changes, open an issue first.
150
+ `chai-overflow-{hidden|auto}`
151
+ `chai-cursor-pointer` `chai-cursor-not-allowed`
152
+ `chai-opacity-{0|50|100}`
153
+ `chai-select-none` `chai-box-border`
43
154
 
44
155
  ---
45
156
 
46
- Feel free to customize this template with your project-specific details, commands, and additional sections as needed.
157
+ ## VS Code autocomplete
158
+
159
+ Configured automatically on install. To set up manually:
160
+
161
+ ```json
162
+ {
163
+ "css.customData": ["./node_modules/chaiwind/chaiwind.css-data.json"]
164
+ }
165
+ ```
166
+
167
+ Add this to `.vscode/settings.json` and restart VS Code.
168
+
169
+ ---
170
+
171
+ ## Known limitations
172
+
173
+ - Inline styles override all external CSS — this is a tradeoff of the inline approach
174
+ - Hover and focus states (`chai-hover-*`) are not supported — inline styles cannot express pseudo-classes
175
+ - Responsive breakpoints (`sm:chai-p-4`) are not supported — media queries require a stylesheet
176
+
177
+ ---
178
+
179
+ ## License
180
+
181
+ MIT