kulhadcss 1.0.3 → 1.1.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/README.md +165 -123
- package/package.json +1 -1
- package/src/applier.js +2 -2
- package/src/index.js +12 -4
package/README.md
CHANGED
|
@@ -1,159 +1,201 @@
|
|
|
1
|
-
#
|
|
1
|
+
# KulhadCSS
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A lightweight, utility-first CSS framework natively powered by Vanilla JavaScript.
|
|
4
|
+
KulhadCSS offers a unique Hindi/Hinglish nomenclature for styling web elements without the need for pre-compilers or build steps.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
## Features
|
|
7
|
+
|
|
8
|
+
- **Intuitive Desi Utility Classes**: Apply styles directly in your HTML using a familiar vocabulary.
|
|
9
|
+
- **Dynamic Property Evaluation**: Values appended to class names are evaluated in real-time. E.g., `doori-3` applies a 12px margin dynamically.
|
|
10
|
+
- **Zero Build Step Configuration**: Import the library directly in the browser; no PostCSS, Webpack, or Node environment required during runtime.
|
|
11
|
+
- **Real-time DOM Watcher**: Automatically observes DOM changes via `MutationObserver` to ensure newly added elements are instantly styled.
|
|
6
12
|
|
|
7
13
|
## Installation
|
|
8
14
|
|
|
9
|
-
|
|
15
|
+
Install the package using your preferred package manager:
|
|
16
|
+
|
|
10
17
|
```bash
|
|
11
18
|
npm install kulhadcss
|
|
12
19
|
```
|
|
13
20
|
|
|
14
|
-
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
### HTML/Vanilla JS Usage
|
|
26
|
+
|
|
27
|
+
Import the package in your entry point. Upon loading, the library will scan the DOM and set up the observer system to listen for UI changes.
|
|
28
|
+
|
|
29
|
+
```javascript
|
|
30
|
+
import 'kulhadcss';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Alternatively, you can manually invoke the parsing process on your document tree:
|
|
34
|
+
|
|
35
|
+
```javascript
|
|
36
|
+
import { scanDom } from 'kulhadcss';
|
|
37
|
+
|
|
38
|
+
// Manually process all elements with a class attribute
|
|
39
|
+
scanDom();
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Write your structural templates by combining these class strings:
|
|
43
|
+
|
|
15
44
|
```html
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
45
|
+
<div class="milkar beech ghera-4 rang-piche-grey dhancha-khada parchaayi-halki ghumaav-2">
|
|
46
|
+
<h1 class="likhai-size-32 likhai-vazan-bhaari likhai-rang-white">Welcome to KulhadCSS</h1>
|
|
47
|
+
<p class="doori-upar-2 likhai-rang-white">A modern framework with a desi touch.</p>
|
|
48
|
+
</div>
|
|
19
49
|
```
|
|
20
50
|
|
|
21
|
-
|
|
51
|
+
### React Usage
|
|
22
52
|
|
|
23
|
-
KulhadCSS
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
53
|
+
KulhadCSS works seamlessly with React and other modern frameworks. Just import the library at the root of your application (e.g., `main.jsx` or `App.jsx`) and use the utility strings in the `className` attribute. Because of the built-in `MutationObserver`, dynamic component renders will be styled automatically.
|
|
54
|
+
|
|
55
|
+
**`main.jsx`**
|
|
56
|
+
```jsx
|
|
57
|
+
import React from 'react';
|
|
58
|
+
import ReactDOM from 'react-dom/client';
|
|
59
|
+
import App from './App';
|
|
60
|
+
import 'kulhadcss'; // Import it once here
|
|
61
|
+
|
|
62
|
+
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
63
|
+
<React.StrictMode>
|
|
64
|
+
<App />
|
|
65
|
+
</React.StrictMode>
|
|
66
|
+
);
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**`App.jsx`**
|
|
70
|
+
```jsx
|
|
71
|
+
export default function App() {
|
|
72
|
+
return (
|
|
73
|
+
<div className="milkar beech poora-parda rang-piche-black dhancha-khada">
|
|
74
|
+
<div className="ghera-8 ghumaav-4 shish-mahal parchaayi-5">
|
|
75
|
+
<h1 className="likhai-size-40 likhai-vazan-zyada likhai-rang-white likhai-rukh-beech">
|
|
76
|
+
React + KulhadCSS
|
|
77
|
+
</h1>
|
|
78
|
+
<button className="doori-upar-4 ghera-x-6 ghera-y-2 rang-piche-blue likhai-rang-white ghumaav-gol ungli-haan raftaar-theek dhundhla-9">
|
|
79
|
+
Click Me
|
|
80
|
+
</button>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
```
|
|
27
86
|
|
|
28
87
|
---
|
|
29
88
|
|
|
30
|
-
##
|
|
89
|
+
## API Reference
|
|
31
90
|
|
|
32
|
-
All
|
|
33
|
-
> **1 unit = 4px**
|
|
91
|
+
*Note: All numeric dimensional utilities (padding, margin, width, height, positioning, gaps) are evaluated by multiplying the appended value by `4px`.*
|
|
34
92
|
|
|
35
|
-
###
|
|
93
|
+
### Static Utilities
|
|
36
94
|
|
|
37
|
-
| Class Name | Equivalent
|
|
95
|
+
| Class Name | CSS Equivalent | Description |
|
|
38
96
|
|---|---|---|
|
|
39
|
-
| `milkar` | `display: flex
|
|
40
|
-
| `jaali-hai` | `display: grid
|
|
41
|
-
| `beech` | `display: flex; justify-content: center; align-items: center
|
|
42
|
-
| `gayab` | `display: none
|
|
43
|
-
| `block` | `display: block
|
|
44
|
-
| `inline` | `display: inline
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
|
97
|
+
| `milkar` | `display: flex` | Establishes a flex container. |
|
|
98
|
+
| `jaali-hai` | `display: grid` | Establishes a grid container. |
|
|
99
|
+
| `beech` | `display: flex; justify-content: center; align-items: center` | Quick flex centering utility. |
|
|
100
|
+
| `gayab` | `display: none` | Hides the element from the document flow. |
|
|
101
|
+
| `block` | `display: block` | Sets block display. |
|
|
102
|
+
| `inline` | `display: inline` | Sets inline display. |
|
|
103
|
+
| `ungli-haan` | `cursor: pointer` | Sets a pointer cursor. |
|
|
104
|
+
| `chuna-mana` | `pointer-events: none` | Disables pointer events interactions. |
|
|
105
|
+
| `likhai-neeche` | `text-decoration: underline` | Applies underline to text. |
|
|
106
|
+
| `likhai-kaato` | `text-decoration: line-through` | Applies a strikethrough. |
|
|
107
|
+
| `likhai-itallic` | `font-style: italic` | Italicizes the text. |
|
|
108
|
+
| `likhai-seedhi` | `font-style: normal` | Resets to normal font style. |
|
|
109
|
+
| `chipka-hua` | `position: sticky; top: 0` | Creates a sticky positioned element. |
|
|
110
|
+
| `poora-parda` | `width: 100vw; height: 100vh` | Covers the full viewport dimensions. |
|
|
111
|
+
| `shish-mahal` | `backdrop-filter: blur(12px); background-color: rgba(255,255,255,0.1)` | Renders a frosted glassmorphism effect. |
|
|
112
|
+
|
|
113
|
+
### Typography (`likhai`)
|
|
114
|
+
|
|
115
|
+
| Pattern | Value Options | Example | CSS Equivalent |
|
|
52
116
|
|---|---|---|---|
|
|
53
|
-
| `likhai-size-{
|
|
54
|
-
| `likhai-vazan-{
|
|
55
|
-
| `likhai-rang-{
|
|
56
|
-
| `likhai-rukh-{
|
|
57
|
-
| `likhai-line-{
|
|
58
|
-
| `likhai-
|
|
59
|
-
| `likhai-
|
|
60
|
-
| `likhai-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
### Spacing (Ghera & Doori)
|
|
66
|
-
|
|
67
|
-
Padding (`ghera`) and Margin (`doori`) use the 1 unit = 4px multiplier.
|
|
68
|
-
|
|
69
|
-
| Feature | Prefix | Example | Calculation | CSS Result |
|
|
117
|
+
| `likhai-size-{val}` | `{number}` (px) or `{string}` | `likhai-size-24` | `font-size: 24px` |
|
|
118
|
+
| `likhai-vazan-{val}` | `halka`, `theek`, `bhaari`, `zyada` | `likhai-vazan-bhaari` | `font-weight: 700` |
|
|
119
|
+
| `likhai-rang-{color}` | Standard CSS color names/hex | `likhai-rang-red` | `color: red` |
|
|
120
|
+
| `likhai-rukh-{val}` | `baayein`, `beech`, `daayein`, `patt-se` | `likhai-rukh-beech` | `text-align: center` |
|
|
121
|
+
| `likhai-line-{val}` | `{number}` | `likhai-line-2` | `line-height: 2` |
|
|
122
|
+
| `likhai-space-{val}` | `{number}` | `likhai-space-1` | `letter-spacing: 1px` |
|
|
123
|
+
| `likhai-badi` | N/A | `likhai-badi` | `text-transform: uppercase` |
|
|
124
|
+
| `likhai-choti` | N/A | `likhai-choti` | `text-transform: lowercase` |
|
|
125
|
+
|
|
126
|
+
### Spacing (Padding & Margin - Value x 4px)
|
|
127
|
+
|
|
128
|
+
| Type | Uniform All Sides | Vertical (Y) | Horizontal (X) | Top / Bottom / Left / Right |
|
|
70
129
|
|---|---|---|---|---|
|
|
71
|
-
| Padding | `ghera-{
|
|
72
|
-
|
|
|
73
|
-
| Padding X | `ghera-x-{n}` | `ghera-x-5` | 5 × 4px | `padding-left: 20px; padding-right: 20px;` |
|
|
74
|
-
| Margin | `doori-{n}` | `doori-8` | 8 × 4px | `margin: 32px;` |
|
|
75
|
-
| Margin Auto | `doori-auto` | `doori-auto` | - | `margin: auto;` |
|
|
130
|
+
| **Padding (`ghera`)** | `ghera-{val}` | `ghera-y-{val}` | `ghera-x-{val}` | `ghera-upar-{val}`, `ghera-neeche-{val}`, `ghera-baayein-{val}`, `ghera-daayein-{val}` |
|
|
131
|
+
| **Margin (`doori`)** | `doori-{val}` | `doori-y-{val}` | `doori-x-{val}` | `doori-upar-{val}`, `doori-neeche-{val}`, `doori-baayein-{val}`, `doori-daayein-{val}` |
|
|
76
132
|
|
|
77
|
-
*
|
|
133
|
+
*Note: For margins, `doori-auto` is available which evaluates to `margin: auto;`.*
|
|
78
134
|
|
|
79
|
-
###
|
|
135
|
+
### Flexbox & Grid Configuration
|
|
80
136
|
|
|
81
|
-
|
|
|
137
|
+
| Pattern | Value Options | Example | CSS Equivalent |
|
|
138
|
+
|---|---|---|---|
|
|
139
|
+
| `dhancha-{val}` | `khada`, `{row/etc}` | `dhancha-khada` | `flex-direction: column` |
|
|
140
|
+
| `faasla-{val}` | `{number}` (gap x 4px) | `faasla-4` | `gap: 16px` |
|
|
141
|
+
| `faasla-x-{val}` | `{number}` | `faasla-x-2` | `column-gap: 8px` |
|
|
142
|
+
| `faasla-y-{val}` | `{number}` | `faasla-y-3` | `row-gap: 12px` |
|
|
143
|
+
| `milap-kaise-{val}` | `beech`, `door`, `aas-paas`, `chipak-ke`, `ant-mein` | `milap-kaise-door` | `justify-content: space-between` |
|
|
144
|
+
| `khada-milap-{val}` | `beech`, `chipak-ke`, `neeche`, `fail-ke` | `khada-milap-fail-ke` | `align-items: stretch` |
|
|
145
|
+
| `lapait-{val}` | `haan`, `na` | `lapait-haan` | `flex-wrap: wrap` |
|
|
146
|
+
| `khali-jagah-{val}`| `{number}` | `khali-jagah-1` | `flex-grow: 1` |
|
|
147
|
+
| `dabna-{val}` | `{number}` | `dabna-0` | `flex-shrink: 0` |
|
|
148
|
+
| `jaali-cols-{val}` | `{number}` | `jaali-cols-3` | `grid-template-columns: repeat(3, minmax(0, 1fr))` |
|
|
149
|
+
| `jaali-rows-{val}` | `{number}` | `jaali-rows-2` | `grid-template-rows: repeat(2, minmax(0, 1fr))` |
|
|
150
|
+
|
|
151
|
+
### Dimensions & Sizing
|
|
152
|
+
|
|
153
|
+
| Pattern | Value Options | Example | CSS Equivalent |
|
|
82
154
|
|---|---|---|---|
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `lakheer-style-{v}`| `lakheer-style-dashed`| `border-style: dashed;` | Sets border style |
|
|
155
|
+
| `chaudaai-{val}` | `poora`, `parda`, `{number}` | `chaudaai-poora` | `width: 100%` |
|
|
156
|
+
| `chaudaai-max-{val}`| `poora`, `{number}` | `chaudaai-max-32` | `max-width: 128px` |
|
|
157
|
+
| `lambai-{val}` | `poora`, `parda`, `{number}` | `lambai-parda` | `height: 100vh` |
|
|
158
|
+
| `lambai-max-{val}` | `poora`, `{number}` | `lambai-max-poora`| `max-height: 100%` |
|
|
88
159
|
|
|
89
|
-
###
|
|
160
|
+
### Borders & Backgrounds
|
|
90
161
|
|
|
91
|
-
|
|
|
162
|
+
| Pattern | Value Options | Example | CSS Equivalent |
|
|
92
163
|
|---|---|---|---|
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `jaali-cols-{n}` | `jaali-cols-3` | `grid-template-columns: repeat(3, ...)`| Grid columns |
|
|
101
|
-
| `jaali-rows-{n}` | `jaali-rows-2` | `grid-template-rows: repeat(2, ...)`| Grid rows |
|
|
102
|
-
|
|
103
|
-
### Sizing
|
|
104
|
-
|
|
105
|
-
| Class Prefix | Example | CSS Result | Note |
|
|
106
|
-
|---|---|---|---|
|
|
107
|
-
| `chaudaai-{n}` | `chaudaai-10` | `width: 40px;` | Multiply by 4px. Use `poora` (100%) or `parda` (100vw) |
|
|
108
|
-
| `chaudaai-max-{n}`| `chaudaai-max-poora`| `max-width: 100%;`| Max Width |
|
|
109
|
-
| `lambai-{n}` | `lambai-20` | `height: 80px;` | Multiply by 4px. Use `poora` (100%) or `parda` (100vh) |
|
|
110
|
-
| `lambai-max-{n}` | `lambai-max-poora` | `max-height: 100%;` | Max Height |
|
|
164
|
+
| `rang-piche-{color}` | CSS color string | `rang-piche-black` | `background-color: black` |
|
|
165
|
+
| `lakheer-{val}` | `{number}` (px) | `lakheer-2` | `border-width: 2px; border-style: solid` |
|
|
166
|
+
| `lakheer-rang-{clr}`| CSS color string | `lakheer-rang-red` | `border-color: red` |
|
|
167
|
+
| `lakheer-style-{st}`| `solid`, `dashed`, etc. | `lakheer-style-dashed`| `border-style: dashed` |
|
|
168
|
+
| `ghumaav-{val}` | `gol`, `{number}` (x 4px) | `ghumaav-gol` | `border-radius: 9999px` |
|
|
169
|
+
| `ghumaav-upar-{val}`| `{number}` (x 4px) | `ghumaav-upar-2` | `border-top-radius: 8px` |
|
|
170
|
+
| `ghumaav-neeche-{v}`| `{number}` (x 4px) | `ghumaav-neeche-4`| `border-bottom-radius: 16px` |
|
|
111
171
|
|
|
112
|
-
###
|
|
172
|
+
### Positioning Engine
|
|
113
173
|
|
|
114
|
-
|
|
|
174
|
+
| Pattern | Value Options | Example | CSS Equivalent |
|
|
115
175
|
|---|---|---|---|
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `ungli-{v}` | `ungli-haan` | `cursor: pointer;` | Cursors: `haan`, `na`, `likhai`, `rok-do`, `khisko` |
|
|
123
|
-
| `raftaar-{v}` | `raftaar-tez` | `transition: all 150ms...`| Transition speeds: `tez` (150ms), `theek` (350ms), `haule` (800ms), `ekdum-slow` (2s) |
|
|
124
|
-
| `had-se-bahar-{v}`| `had-se-bahar-chupao`| `overflow: hidden;` | Overflow: `chupao` (hidden), `ghumaao` (auto) |
|
|
125
|
-
| `tikaana-{v}` | `tikaana-absolute` | `position: absolute;` | Position (absolute, relative, fixed, etc.) |
|
|
126
|
-
| `uunchai-{n}` | `uunchai-50` | `z-index: 50;` | Specifies z-index |
|
|
127
|
-
|
|
128
|
-
*(Position directions supported: `upar` (top), `neeche` (bottom), `baayein` (left), `daayein` (right))*
|
|
176
|
+
| `tikaana-{val}` | `absolute`, `relative`, `fixed`, `sticky` | `tikaana-absolute` | `position: absolute` |
|
|
177
|
+
| `upar-{val}` | `{number}` (x 4px) | `upar-4` | `top: 16px` |
|
|
178
|
+
| `neeche-{val}` | `{number}` (x 4px) | `neeche-0` | `bottom: 0px` |
|
|
179
|
+
| `baayein-{val}` | `{number}` (x 4px) | `baayein-2` | `left: 8px` |
|
|
180
|
+
| `daayein-{val}` | `{number}` (x 4px) | `daayein-2` | `right: 8px` |
|
|
181
|
+
| `uunchai-{val}` | `{number}` | `uunchai-50` | `z-index: 50` |
|
|
129
182
|
|
|
130
|
-
|
|
183
|
+
### Visual Render Effects
|
|
131
184
|
|
|
132
|
-
|
|
185
|
+
| Pattern | Value Options | Example | CSS Equivalent |
|
|
186
|
+
|---|---|---|---|
|
|
187
|
+
| `parchaayi-{val}` | `halki`, `{number}` | `parchaayi-2` | `box-shadow: 0px 2px 6px rgba(0,0,0,0.25)` |
|
|
188
|
+
| `dhundhla-{val}` | `{number}` (/ 10) | `dhundhla-5` | `opacity: 0.5` |
|
|
189
|
+
| `saaf-saaf-{val}` | `{number}` (px) | `saaf-saaf-10` | `filter: blur(10px)` |
|
|
190
|
+
| `pakaayi-{val}` | `{number}` (/ 10) | `pakaayi-8` | `filter: brightness(0.8)` |
|
|
191
|
+
| `shakal-{val}` | `square`, `video`, `khada`, `photo` | `shakal-video` | `aspect-ratio: 16 / 9` |
|
|
192
|
+
| `fit-kaise-{val}` | `bhar-do`, `beech-mein`, `kheench-ke` | `fit-kaise-bhar-do` | `object-fit: cover` |
|
|
133
193
|
|
|
134
|
-
|
|
194
|
+
### Interactivity & Mechanics
|
|
135
195
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<script type="module">
|
|
143
|
-
import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
|
|
144
|
-
</script>
|
|
145
|
-
</head>
|
|
146
|
-
<body style="background: #fdf5e6; margin: 0; min-height: 100vh;" class="beech">
|
|
147
|
-
<div class="milkar dhancha-khada beech ghera-10 ghumaav-5 parchaayi-2" style="background: #8b4513; color: white;">
|
|
148
|
-
<h1 class="doori-neeche-2 likhai-vazan-bhaari">🏺 KulhadCSS is Kadak!</h1>
|
|
149
|
-
<p class="likhai-size-14 dhundhla-8">Styling is now desi & simple.</p>
|
|
150
|
-
<button class="doori-upar-4 ghera-x-6 ghera-y-2 ghumaav-gol rang-piche-white likhai-rang-black ungli-haan raftaar-tez">
|
|
151
|
-
Piyo!
|
|
152
|
-
</button>
|
|
153
|
-
</div>
|
|
154
|
-
</body>
|
|
155
|
-
</html>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
## License
|
|
159
|
-
[ISC](https://opensource.org/licenses/ISC) © Rachit
|
|
196
|
+
| Pattern | Value Options | Example | CSS Equivalent |
|
|
197
|
+
|---|---|---|---|
|
|
198
|
+
| `raftaar-{val}` | `tez` (150ms), `theek` (350ms), `haule` (800ms), `ekdum-slow` (2s) | `raftaar-theek` | `transition: all 350ms ease-in-out` |
|
|
199
|
+
| `had-se-bahar-{val}`| `chupao` (hidden), `ghumaao` (auto) | `had-se-bahar-chupao` | `overflow: hidden` |
|
|
200
|
+
| `had-se-bahar-x/y` | `chupao`, `ghumaao` | `had-se-bahar-x-ghumaao` | `overflow-x: auto` |
|
|
201
|
+
| `ungli-{val}` | `haan`, `na`, `likhai`, `rok-do`, `khisko` | `ungli-haan` | `cursor: pointer` |
|
package/package.json
CHANGED
package/src/applier.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { parseKulhadClass } from './parser.js';
|
|
2
2
|
|
|
3
3
|
export function applyStyles(element) {
|
|
4
4
|
let element_classes = Array.from(element.classList);
|
|
5
5
|
|
|
6
6
|
element_classes.forEach(cls => {
|
|
7
|
-
const styleObject =
|
|
7
|
+
const styleObject = parseKulhadClass(cls);
|
|
8
8
|
if (styleObject) {
|
|
9
9
|
Object.assign(element.style, styleObject);
|
|
10
10
|
}
|
package/src/index.js
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { scanDom } from './applier.js';
|
|
2
|
+
|
|
2
3
|
if (typeof window !== 'undefined') {
|
|
3
|
-
|
|
4
|
-
window.addEventListener('DOMContentLoaded', () => {
|
|
4
|
+
const observer = new MutationObserver((mutations) => {
|
|
5
5
|
scanDom();
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
})
|
|
7
|
+
observer.observe(document.body, {
|
|
8
|
+
childList: true,
|
|
9
|
+
subtree: true,
|
|
10
|
+
attributes: true,
|
|
11
|
+
attributeFilter: ['class']
|
|
12
|
+
})
|
|
13
|
+
scanDom();
|
|
14
|
+
console.log("KulhadCSS: Styles brewed successfully! 🏺☕");
|
|
15
|
+
|
|
8
16
|
}
|
|
9
17
|
export { scanDom };
|