tadka-css 1.0.0 → 1.0.2
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/README.md +275 -81
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,116 +1,246 @@
|
|
|
1
1
|
# tadka-css
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
A lightweight, runtime utility-first CSS engine for the browser.
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
- npm: https://www.npmjs.com/package/tadka-css
|
|
6
|
+
- GitHub repository: https://github.com/ashaafkhan/tadka-css
|
|
7
|
+
- Live Demo: https://tadkacss.vercel.app/
|
|
8
|
+
- Playground: https://tadkacss.vercel.app/playground/
|
|
9
|
+
|
|
10
|
+
TypeScript typings are included through `types/index.d.ts`.
|
|
11
|
+
|
|
12
|
+
## What Is Tadka CSS?
|
|
13
|
+
|
|
14
|
+
tadka-css lets you style HTML using utility class names like `tadka-p-4`, `tadka-bg-orange-500`, and `tadka-rounded-lg`.
|
|
15
|
+
|
|
16
|
+
At runtime, tadka-css scans the DOM, parses matching class names, and applies styles directly.
|
|
17
|
+
|
|
18
|
+
This project is browser-first, no build step required for basic use.
|
|
19
|
+
|
|
20
|
+
## Demo App Built With the npm Package
|
|
21
|
+
|
|
22
|
+
The demo application in this repository is built using the `tadka-css` npm package (via the published CDN bundle).
|
|
23
|
+
|
|
24
|
+
1. Demo app: https://tadkacss.vercel.app/
|
|
25
|
+
2. Playground: https://tadkacss.vercel.app/playground/
|
|
26
|
+
3. Demo source: https://github.com/ashaafkhan/tadka-css/blob/main/demo/index.html
|
|
9
27
|
|
|
10
28
|
## Installation
|
|
11
29
|
|
|
30
|
+
### npm
|
|
31
|
+
|
|
12
32
|
```bash
|
|
13
33
|
npm install tadka-css
|
|
14
34
|
```
|
|
15
35
|
|
|
16
|
-
|
|
17
|
-
<script src="https://unpkg.com/tadka-css/dist/tadka-css.js"></script>
|
|
18
|
-
```
|
|
36
|
+
### yarn / pnpm
|
|
19
37
|
|
|
20
38
|
```bash
|
|
21
39
|
yarn add tadka-css
|
|
22
40
|
pnpm add tadka-css
|
|
23
41
|
```
|
|
24
42
|
|
|
43
|
+
### CDN
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<script src="https://unpkg.com/tadka-css/dist/tadka-css.js"></script>
|
|
47
|
+
```
|
|
48
|
+
|
|
25
49
|
## Quick Start
|
|
26
50
|
|
|
27
51
|
```html
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
52
|
+
<!doctype html>
|
|
53
|
+
<html>
|
|
54
|
+
<head>
|
|
55
|
+
<meta charset="UTF-8" />
|
|
56
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
57
|
+
<script src="https://unpkg.com/tadka-css/dist/tadka-css.js"></script>
|
|
58
|
+
</head>
|
|
59
|
+
<body class="tadka-bg-slate-100 tadka-p-8">
|
|
60
|
+
<div class="tadka-bg-orange-600 tadka-text-white tadka-p-6 tadka-rounded-lg tadka-shadow-lg">
|
|
61
|
+
Hello from tadka-css
|
|
62
|
+
</div>
|
|
63
|
+
</body>
|
|
64
|
+
</html>
|
|
36
65
|
```
|
|
37
66
|
|
|
38
|
-
|
|
67
|
+
For npm/bundlers:
|
|
39
68
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
69
|
+
```js
|
|
70
|
+
import TadkaCSS from "tadka-css";
|
|
71
|
+
TadkaCSS.init();
|
|
72
|
+
```
|
|
43
73
|
|
|
44
|
-
##
|
|
74
|
+
## Class Name Anatomy
|
|
45
75
|
|
|
46
|
-
|
|
47
|
-
|---|---|
|
|
48
|
-
| `init(options)` | Initialize engine, scan DOM, and start observer |
|
|
49
|
-
| `refresh()` | Re-scan DOM |
|
|
50
|
-
| `apply(element)` | Apply to one element |
|
|
51
|
-
| `applyAll(nodeList)` | Apply to many elements |
|
|
52
|
-
| `parse(className)` | Return parsed style object |
|
|
53
|
-
| `register(name, styles)` | Add custom utility |
|
|
54
|
-
| `unregister(name)` | Remove custom utility |
|
|
55
|
-
| `getConfig()` | Get active config |
|
|
56
|
-
| `setConfig(options)` | Merge new config |
|
|
57
|
-
| `reset()` | Remove generated styles and listeners |
|
|
58
|
-
| `on(event, handler)` | Listen to `ready`, `apply`, `parse-error`, `refresh` |
|
|
76
|
+
tadka-css parses class names using this grammar:
|
|
59
77
|
|
|
60
|
-
|
|
78
|
+
1. Base utility: `tadka-{utility}-{value}`
|
|
79
|
+
2. Responsive utility: `tadka-{breakpoint}:{utility}-{value}`
|
|
80
|
+
3. Pseudo utility: `tadka-{pseudo}:{utility}-{value}`
|
|
61
81
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
82
|
+
Examples:
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<div class="tadka-p-4 tadka-bg-orange-500 tadka-md:w-1/2 tadka-hover:scale-105"></div>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Supported Attributes
|
|
89
|
+
|
|
90
|
+
This list reflects currently implemented resolver support.
|
|
91
|
+
|
|
92
|
+
### 1) Spacing Attributes
|
|
93
|
+
|
|
94
|
+
- `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl`
|
|
95
|
+
- `m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`
|
|
96
|
+
- `mx-auto`
|
|
97
|
+
- `gap`, `gap-x`, `gap-y`
|
|
98
|
+
- Arbitrary values with `[]`
|
|
99
|
+
|
|
100
|
+
Examples:
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<div class="tadka-p-4 tadka-mx-auto tadka-gap-3 tadka-mt-[18px]"></div>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### 2) Color Attributes
|
|
107
|
+
|
|
108
|
+
- `bg-*`, `text-*`, `border-*`, `accent-*`, `caret-*`, `fill-*`, `stroke-*`
|
|
109
|
+
- Gradient helpers: `from-*`, `to-*`, plus `bg-gradient-to-r`
|
|
110
|
+
- Opacity vars: `bg-opacity-*`, `text-opacity-*`
|
|
111
|
+
- Ring color var: `ring-*` (color form)
|
|
112
|
+
- Arbitrary colors like `bg-[#FF5733]`
|
|
113
|
+
|
|
114
|
+
### 3) Typography Attributes
|
|
115
|
+
|
|
116
|
+
- Font sizes: `text-xs` to `text-9xl`, plus `text-[...]`
|
|
117
|
+
- Text align: `text-left`, `text-center`, `text-right`, `text-justify`, `text-start`, `text-end`
|
|
118
|
+
- Font weight: `font-thin` ... `font-black`
|
|
119
|
+
- Font family: `font-sans`, `font-serif`, `font-mono`
|
|
120
|
+
- Decorations and casing: `italic`, `not-italic`, `underline`, `line-through`, `no-underline`, `uppercase`, `lowercase`, `capitalize`
|
|
121
|
+
- Text overflow utility: `truncate`
|
|
122
|
+
- Line-height: `leading-*` including named values and scaled/arbitrary values
|
|
123
|
+
|
|
124
|
+
### 4) Border and Ring Attributes
|
|
125
|
+
|
|
126
|
+
- `border`, `border-{number}`
|
|
127
|
+
- Border style: `border-solid`, `border-dashed`, `border-dotted`, `border-double`, `border-hidden`, `border-none`
|
|
128
|
+
- Radius: `rounded`, `rounded-none`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`
|
|
129
|
+
- Ring size: `ring-{number}`
|
|
130
|
+
- `outline-none`
|
|
131
|
+
|
|
132
|
+
### 5) Layout Attributes
|
|
133
|
+
|
|
134
|
+
- Display: `block`, `inline-block`, `inline`, `flex`, `inline-flex`, `grid`, `hidden`, `contents`
|
|
135
|
+
- Flex direction: `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
|
|
136
|
+
- Justify: `justify-start`, `justify-end`, `justify-center`, `justify-between`, `justify-around`, `justify-evenly`
|
|
137
|
+
- Align items: `items-start`, `items-end`, `items-center`, `items-baseline`, `items-stretch`
|
|
138
|
+
- Grid templates: `grid-cols-{n}`, `grid-rows-{n}`
|
|
139
|
+
- Flex basis: `basis-{n}`, `basis-full`, `basis-auto`
|
|
140
|
+
- Flex shorthands: `flex-1`, `flex-auto`, `flex-none`, `flex-wrap`, `flex-nowrap`
|
|
141
|
+
|
|
142
|
+
### 6) Positioning Attributes
|
|
71
143
|
|
|
72
|
-
|
|
144
|
+
- Position: `static`, `relative`, `absolute`, `fixed`, `sticky`
|
|
145
|
+
- Float: `float-left`, `float-right`, `float-none`
|
|
146
|
+
- Side offsets: `top-*`, `right-*`, `bottom-*`, `left-*` including `auto`, `full`, scale, arbitrary
|
|
147
|
+
- Insets: `inset-*`, `inset-x-*`, `inset-y-*`
|
|
148
|
+
- Isolation: `isolate`, `isolation-auto`
|
|
73
149
|
|
|
74
|
-
|
|
75
|
-
- Colors: `tadka-bg-orange-500`, `tadka-text-slate-900`, `tadka-border-blue-300`
|
|
76
|
-
- Layout: `tadka-flex`, `tadka-items-center`, `tadka-grid`, `tadka-grid-cols-3`
|
|
77
|
-
- Typography: `tadka-text-2xl`, `tadka-font-bold`, `tadka-underline`
|
|
150
|
+
### 7) Sizing Attributes
|
|
78
151
|
|
|
79
|
-
|
|
152
|
+
- Width: `w-*`, fractions (`w-1/2`, etc), named values (`w-full`, `w-screen`, etc), arbitrary values
|
|
153
|
+
- Height: `h-*`, named viewport values (`h-screen`, `h-svh`, etc), arbitrary values
|
|
154
|
+
- Combined: `size-*`
|
|
155
|
+
- Min/max: `min-w-*`, `max-w-*`, `min-h-*`, `max-h-*`
|
|
156
|
+
- Aspect ratio: `aspect-auto`, `aspect-square`, `aspect-video`
|
|
157
|
+
|
|
158
|
+
### 8) Effects Attributes
|
|
159
|
+
|
|
160
|
+
- Opacity: `opacity-*`
|
|
161
|
+
- Shadows: `shadow-none`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `shadow-inner`
|
|
162
|
+
- Blur/filter: `blur*`, `brightness-*`, `contrast-*`, `grayscale`, `grayscale-0`
|
|
163
|
+
|
|
164
|
+
### 9) Overflow / Interaction Attributes
|
|
165
|
+
|
|
166
|
+
- Overflow: `overflow-*`, `overflow-x-*`, `overflow-y-*`
|
|
167
|
+
- Scroll behavior: `scroll-smooth`, `scroll-auto`
|
|
168
|
+
- Scroll spacing: `scroll-p-*`, `scroll-m-*`
|
|
169
|
+
- Cursor: `cursor-pointer`, `cursor-default`, `cursor-text`, `cursor-not-allowed`
|
|
170
|
+
- Selection: `select-none`, `select-text`
|
|
171
|
+
- Pointer events: `pointer-events-none`, `pointer-events-auto`
|
|
172
|
+
- Resize: `resize`, `resize-x`, `resize-y`, `resize-none`
|
|
173
|
+
- Z-index: `z-*`, `z-auto`
|
|
174
|
+
|
|
175
|
+
### 10) Transition Attributes
|
|
176
|
+
|
|
177
|
+
- `transition`, `transition-none`, `transition-all`, `transition-colors`, `transition-opacity`, `transition-shadow`, `transition-transform`
|
|
178
|
+
- Duration: `duration-*`
|
|
179
|
+
- Delay: `delay-*`
|
|
180
|
+
- Easing: `ease-linear`, `ease-in`, `ease-out`, `ease-in-out`
|
|
181
|
+
|
|
182
|
+
### 11) Transform Attributes
|
|
183
|
+
|
|
184
|
+
- `scale-*`
|
|
185
|
+
- `rotate-*`, `-rotate-*`
|
|
186
|
+
- `translate-x-*`, `translate-y-*`, `-translate-x-*`, `-translate-y-*`
|
|
187
|
+
- `skew-x-*`, `skew-y-*`
|
|
188
|
+
- Origin: `origin-*` variants
|
|
189
|
+
- `perspective-*`
|
|
190
|
+
|
|
191
|
+
### 12) Animation Attributes
|
|
192
|
+
|
|
193
|
+
- `animate-none`, `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`
|
|
194
|
+
|
|
195
|
+
## Responsive Attributes
|
|
196
|
+
|
|
197
|
+
Default breakpoints:
|
|
80
198
|
|
|
81
199
|
| Prefix | Min Width |
|
|
82
200
|
|---|---|
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
201
|
+
| `sm` | `640px` |
|
|
202
|
+
| `md` | `768px` |
|
|
203
|
+
| `lg` | `1024px` |
|
|
204
|
+
| `xl` | `1280px` |
|
|
205
|
+
| `2xl` | `1536px` |
|
|
206
|
+
|
|
207
|
+
Example:
|
|
88
208
|
|
|
89
209
|
```html
|
|
90
210
|
<div class="tadka-w-full tadka-lg:w-1/2 tadka-xl:w-1/4"></div>
|
|
91
211
|
```
|
|
92
212
|
|
|
93
|
-
##
|
|
213
|
+
## Pseudo Attributes (JS-driven)
|
|
94
214
|
|
|
95
|
-
|
|
96
|
-
- `tadka-focus:*`
|
|
97
|
-
- `tadka-active:*`
|
|
98
|
-
- `tadka-group-hover:*`
|
|
99
|
-
- `tadka-disabled:*`
|
|
100
|
-
- `tadka-checked:*`
|
|
215
|
+
Parser recognizes:
|
|
101
216
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
217
|
+
- `hover`, `focus`, `active`, `disabled`, `checked`, `visited`, `group-hover`, `group-focus`, `peer-hover`
|
|
218
|
+
|
|
219
|
+
Runtime listeners currently implemented:
|
|
220
|
+
|
|
221
|
+
- `hover`, `focus`, `active`, `disabled`, `checked`
|
|
222
|
+
|
|
223
|
+
Important caveat:
|
|
107
224
|
|
|
108
|
-
|
|
225
|
+
- Pseudo support is implemented through JavaScript event listeners (not native CSS selectors).
|
|
226
|
+
|
|
227
|
+
## Configuration
|
|
109
228
|
|
|
110
229
|
```js
|
|
111
230
|
import TadkaCSS from "tadka-css";
|
|
112
231
|
|
|
113
232
|
TadkaCSS.init({
|
|
233
|
+
prefix: "tadka",
|
|
234
|
+
scale: 4,
|
|
235
|
+
removeClasses: false,
|
|
236
|
+
watch: true,
|
|
237
|
+
breakpoints: {
|
|
238
|
+
sm: "640px",
|
|
239
|
+
md: "768px",
|
|
240
|
+
lg: "1024px",
|
|
241
|
+
xl: "1280px",
|
|
242
|
+
"2xl": "1536px",
|
|
243
|
+
},
|
|
114
244
|
extend: {
|
|
115
245
|
spicy: { color: "#E8550A", fontWeight: "800" },
|
|
116
246
|
btn: (value) => ({
|
|
@@ -118,37 +248,101 @@ TadkaCSS.init({
|
|
|
118
248
|
borderRadius: "6px",
|
|
119
249
|
}),
|
|
120
250
|
},
|
|
121
|
-
colors: {
|
|
122
|
-
masala: { 500: "#7B3F00", 300: "#C17F3C", 100: "#F5E6D0" },
|
|
123
|
-
},
|
|
124
251
|
});
|
|
125
252
|
```
|
|
126
253
|
|
|
127
|
-
|
|
254
|
+
### Config Fields
|
|
128
255
|
|
|
129
|
-
|
|
130
|
-
|
|
256
|
+
| Field | Type | Description |
|
|
257
|
+
|---|---|---|
|
|
258
|
+
| `prefix` | `string` | Class prefix to scan (default `tadka`) |
|
|
259
|
+
| `scale` | `number` | Base spacing scale multiplier |
|
|
260
|
+
| `removeClasses` | `boolean` | If true, removes tadka classes after applying styles |
|
|
261
|
+
| `watch` | `boolean` | Enables MutationObserver auto re-scan |
|
|
262
|
+
| `breakpoints` | `object` | Responsive breakpoint map |
|
|
263
|
+
| `colors` | `object` | Override/extend palette |
|
|
264
|
+
| `extend` | `object` | Add custom static/dynamic utilities |
|
|
265
|
+
|
|
266
|
+
## Public API
|
|
267
|
+
|
|
268
|
+
| Method | Description |
|
|
269
|
+
|---|---|
|
|
270
|
+
| `init(options?)` | Build config, scan/apply, optionally start observer; returns processed element count |
|
|
271
|
+
| `refresh()` | Re-scan entire document; emits `refresh` |
|
|
272
|
+
| `apply(element)` | Apply utilities on one element |
|
|
273
|
+
| `applyAll(nodeList)` | Apply utilities on collection |
|
|
274
|
+
| `parse(className)` | Return parsed style object or `null` |
|
|
275
|
+
| `register(name, styles)` | Register custom utility at runtime |
|
|
276
|
+
| `unregister(name)` | Remove custom utility |
|
|
277
|
+
| `getConfig()` | Get active config |
|
|
278
|
+
| `setConfig(options)` | Merge config and rebuild parser/engine |
|
|
279
|
+
| `reset()` | Restore original inline styles and clear listeners/rules |
|
|
280
|
+
| `on(event, handler)` | Subscribe to events; returns unsubscribe function |
|
|
281
|
+
|
|
282
|
+
### Events and Payloads
|
|
283
|
+
|
|
284
|
+
| Event | Payload |
|
|
285
|
+
|---|---|
|
|
286
|
+
| `ready` | `{ count }` |
|
|
287
|
+
| `refresh` | `{ count }` |
|
|
288
|
+
| `apply` | `{ element, className, styles }` |
|
|
289
|
+
| `parse-error` | `{ className }` |
|
|
290
|
+
|
|
291
|
+
## TypeScript Example
|
|
292
|
+
|
|
293
|
+
```ts
|
|
294
|
+
import TadkaCSS, { TadkaInitOptions } from "tadka-css";
|
|
295
|
+
|
|
296
|
+
const config: TadkaInitOptions = {
|
|
297
|
+
prefix: "tadka",
|
|
298
|
+
watch: true,
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
TadkaCSS.init(config);
|
|
131
302
|
```
|
|
132
303
|
|
|
304
|
+
## Under the Hood
|
|
305
|
+
|
|
306
|
+
1. DOM scanner queries classes containing the configured prefix.
|
|
307
|
+
2. Parser resolves each token through utility resolvers.
|
|
308
|
+
3. Standard utilities become inline styles.
|
|
309
|
+
4. Responsive utilities become generated `@media` rules scoped via data attributes.
|
|
310
|
+
5. `watch: true` enables a MutationObserver on subtree/class changes.
|
|
311
|
+
6. `reset()` restores original inline style values and clears listeners/rules.
|
|
312
|
+
|
|
313
|
+
## Troubleshooting
|
|
314
|
+
|
|
315
|
+
### Classes are not applying
|
|
316
|
+
|
|
317
|
+
1. Ensure classes start with your configured prefix.
|
|
318
|
+
2. Ensure `TadkaCSS.init()` runs after DOM is available.
|
|
319
|
+
3. For dynamic content, use `watch: true` or call `refresh()`.
|
|
320
|
+
|
|
321
|
+
### README on npm is not updating
|
|
322
|
+
|
|
323
|
+
1. README updates on npm only after publishing a new version.
|
|
324
|
+
2. Run patch release (`npm version patch` + `npm publish`).
|
|
325
|
+
|
|
133
326
|
## Development
|
|
134
327
|
|
|
135
328
|
```bash
|
|
136
|
-
git clone https://github.com/
|
|
329
|
+
git clone https://github.com/ashaafkhan/tadka-css.git
|
|
137
330
|
cd tadka-css
|
|
138
331
|
npm install
|
|
139
332
|
npm run build
|
|
140
333
|
npm test
|
|
141
334
|
```
|
|
142
335
|
|
|
143
|
-
##
|
|
336
|
+
## Contributing
|
|
144
337
|
|
|
145
|
-
|
|
146
|
-
- Playground: [demo/playground/index.html](demo/playground/index.html)
|
|
338
|
+
Issues and pull requests are welcome.
|
|
147
339
|
|
|
148
|
-
|
|
340
|
+
Before opening a PR:
|
|
149
341
|
|
|
150
|
-
|
|
342
|
+
1. Run `npm test`
|
|
343
|
+
2. Run `npm run build`
|
|
344
|
+
3. Update docs/tests for behavior changes
|
|
151
345
|
|
|
152
346
|
## License
|
|
153
347
|
|
|
154
|
-
MIT
|
|
348
|
+
MIT
|