chi-css-engine 1.0.1 → 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.
Files changed (9) hide show
  1. package/README.md +136 -9
  2. package/package.json +1 -1
  3. package/test/index.html +0 -0
  4. package/test/node_modules/.package-lock.json +0 -12
  5. package/test/node_modules/chi-css-engine/LICENSE +0 -21
  6. package/test/node_modules/chi-css-engine/README.md +0 -16
  7. package/test/node_modules/chi-css-engine/index.js +0 -94
  8. package/test/node_modules/chi-css-engine/package.json +0 -26
  9. package/test/package.json +0 -16
package/README.md CHANGED
@@ -1,16 +1,143 @@
1
- # Chai CSS ☕
1
+ ☕ Chai CSS Engine
2
2
 
3
- A lightweight utility-first CSS engine written in JavaScript.
3
+ A lightweight utility-first CSS engine built with vanilla JavaScript.
4
+ It dynamically scans the DOM, parses chai-\* utility classes, and applies corresponding inline styles at runtime — inspired by utility-first CSS frameworks.
4
5
 
5
- ## Installation
6
+ 🚀 Features
7
+ No CSS files required
8
+ Pure JavaScript (no dependencies)
9
+ Utility-first class syntax
10
+ Automatic DOM scanning
6
11
 
7
- npm install chai-css-engine
12
+ Works via CDN or npm
8
13
 
9
- ## Usage
14
+ Easy to extend and customize
15
+ 📦 Installation (npm)
10
16
 
11
- import chaiCSS from "chai-css";
12
- chaiCSS();
17
+ npm install chi-css-engine
18
+ 🔧 Usage (npm / Vite / Bundlers)
19
+ 1️⃣ Import the package
13
20
 
14
- ## Example
21
+ import "chi-css-engine";
15
22
 
16
- <div class="chai-p-2 chai-bg-red">Hello</div>
23
+ ⚠️ No function call is required.
24
+ The engine runs automatically after DOMContentLoaded.
25
+
26
+ 2️⃣ Use utility classes in HTML
27
+
28
+ <div class="chai-p-3 chai-bg-blue chai-text-center chai-rounded-md">
29
+ Hello Chai CSS ☕
30
+ </div>
31
+ 🌐 Usage via CDN (No Build Tools)
32
+
33
+ If you are not using npm or Vite, use the CDN directly:
34
+
35
+ <script src="https://unpkg.com/chi-css-engine@latest"></script>
36
+
37
+ Full CDN Example
38
+
39
+ <!DOCTYPE html>
40
+ <html>
41
+ <head>
42
+ <title>Chai CSS CDN Demo</title>
43
+ </head>
44
+ <body>
45
+
46
+ <div class="chai-p-3 chai-bg-blue chai-text-center chai-rounded-md">
47
+ Hello Chai CSS ☕
48
+ </div>
49
+
50
+ <script src="https://unpkg.com/chi-css-engine@latest"></script>
51
+ </body>
52
+ </html>
53
+
54
+ ✅ No Node.js
55
+ ✅ No npm
56
+ ✅ No bundler
57
+
58
+ 🧠 How It Works
59
+ Waits for DOMContentLoaded
60
+ Traverses all DOM elements
61
+ Finds class names starting with chai-
62
+ Parses utility patterns
63
+ Applies inline styles dynamically
64
+
65
+ 📐 Supported Utilities
66
+
67
+ 🧱 Spacing
68
+ Class Effect
69
+ chai-p-0 padding: 0px
70
+ chai-p-1 padding: 4px
71
+ chai-p-2 padding: 8px
72
+ chai-p-3 padding: 12px
73
+ chai-p-4 padding: 16px
74
+ chai-m-2 margin: 8px
75
+
76
+ 🎨 Colors
77
+ Class Effect
78
+ chai-bg-red background-color: red
79
+ chai-bg-blue background-color: blue
80
+ chai-text-black color: black
81
+
82
+ ✔ Any valid CSS color value is supported.
83
+
84
+ ✍ Typography
85
+ Text Alignment
86
+ Class Effect
87
+ chai-text-center text-align: center
88
+ chai-text-left text-align: left
89
+ chai-text-right text-align: right
90
+ Font Size
91
+ Class Font Size
92
+ chai-text-sm 12px
93
+ chai-text-md 16px
94
+ chai-text-lg 18px
95
+ chai-text-xl 24px
96
+
97
+ 🧩 Borders
98
+ Class Effect
99
+ chai-border-1 1px solid black
100
+ chai-border-2 2px solid black
101
+
102
+ 🔵 Border Radius
103
+ Class Radius
104
+ chai-rounded-sm 4px
105
+ chai-rounded-md 6px
106
+ chai-rounded-lg 12px
107
+ chai-rounded-10 10px
108
+
109
+ 📦 Layout Utilities
110
+ Class Effect
111
+ chai-flex display: flex
112
+ chai-items-center align-items: center
113
+ chai-justify-center justify-content: center
114
+
115
+ 🧪 Example Layout
116
+
117
+ <div class="chai-flex chai-justify-center chai-items-center chai-p-4 chai-bg-gray">
118
+ <p class="chai-text-lg chai-text-center">
119
+ Centered Content
120
+ </p>
121
+ </div>
122
+
123
+ 🛠 Customization
124
+
125
+ You can extend utilities by modifying:
126
+
127
+ spacingScale
128
+ fontSizeMap
129
+ radiusMap
130
+
131
+ Add new rules inside the applyUtility() switch to support more utilities.
132
+
133
+ ⚠️ Limitations
134
+ Uses inline styles (overrides external CSS)
135
+ No responsive utilities (yet)
136
+ No hover / pseudo-class support (yet)
137
+ 📄 License
138
+
139
+ MIT License © 2026
140
+
141
+ ⭐ Author
142
+
143
+ Built with ☕ by Nitesh Shedge
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chi-css-engine",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Lightweight utility-first CSS engine",
5
5
  "keywords": [
6
6
  "\"css\"",
package/test/index.html DELETED
File without changes
package/test/node_modules/.package-lock.json DELETED
@@ -1,12 +0,0 @@
1
- {
2
- "lockfileVersion": 3,
3
- "requires": true,
4
- "packages": {
5
- "node_modules/chi-css-engine": {
6
- "version": "1.0.0",
7
- "resolved": "https://registry.npmjs.org/chi-css-engine/-/chi-css-engine-1.0.0.tgz",
8
- "integrity": "sha512-4Yuy7XvbtpJ2e60GfmH44AO4yfJzRx6547knHg4quJd0eGM0UFySNPq0GSJfoXLYCKIcr3csVqvAAApBoL5zng==",
9
- "license": "MIT"
10
- }
11
- }
12
- }
package/test/node_modules/chi-css-engine/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 nitesh011y
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
package/test/node_modules/chi-css-engine/README.md DELETED
@@ -1,16 +0,0 @@
1
- # Chai CSS ☕
2
-
3
- A lightweight utility-first CSS engine written in JavaScript.
4
-
5
- ## Installation
6
-
7
- npm install chai-css
8
-
9
- ## Usage
10
-
11
- import chaiCSS from "chai-css";
12
- chaiCSS();
13
-
14
- ## Example
15
-
16
- <div class="chai-p-2 chai-bg-red">Hello</div>
package/test/node_modules/chi-css-engine/index.js DELETED
@@ -1,94 +0,0 @@
1
- const spacingScale = {
2
- 0: "0px",
3
- 1: "4px",
4
- 2: "8px",
5
- 3: "12px",
6
- 4: "16px",
7
- };
8
-
9
- const fontSizeMap = {
10
- sm: "12px",
11
- md: "16px",
12
- lg: "18px",
13
- xl: "24px",
14
- };
15
-
16
- const radiusMap = {
17
- sm: "4px",
18
- md: "6px",
19
- lg: "12px",
20
- };
21
-
22
- document.addEventListener("DOMContentLoaded", () => {
23
- const elements = document.querySelectorAll("*");
24
-
25
- elements.forEach((el) => {
26
- [...el.classList].forEach((className) => {
27
- if (!className.startsWith("chai-")) return;
28
-
29
- const parts = className.replace("chai-", "").split("-");
30
-
31
- applyUtility(el, parts);
32
- });
33
- });
34
- });
35
-
36
- function applyUtility(el, parts) {
37
- const [type, value] = parts;
38
-
39
- switch (type) {
40
- /* SPACING */
41
- case "p":
42
- el.style.padding = spacingScale[value] || value + "px";
43
- break;
44
-
45
- case "m":
46
- el.style.margin = spacingScale[value] || value + "px";
47
- break;
48
-
49
- /* COLORS */
50
- case "bg":
51
- el.style.backgroundColor = value;
52
- break;
53
-
54
- case "text":
55
- if (value === "center" || value === "left" || value === "right") {
56
- el.style.textAlign = value;
57
- } else {
58
- el.style.color = value;
59
- }
60
- break;
61
-
62
- /* TYPOGRAPHY */
63
- case "text":
64
- if (fontSizeMap[value]) {
65
- el.style.fontSize = fontSizeMap[value];
66
- }
67
- break;
68
-
69
- /* BORDERS */
70
- case "border":
71
- el.style.border = `${value}px solid black`;
72
- break;
73
-
74
- case "rounded":
75
- el.style.borderRadius = radiusMap[value] || value + "px";
76
- break;
77
-
78
- /* LAYOUT */
79
- case "flex":
80
- el.style.display = "flex";
81
- break;
82
-
83
- case "items":
84
- el.style.alignItems = value;
85
- break;
86
-
87
- case "justify":
88
- el.style.justifyContent = value;
89
- break;
90
-
91
- default:
92
- console.warn("Unknown utility:", parts.join("-"));
93
- }
94
- }
package/test/node_modules/chi-css-engine/package.json DELETED
@@ -1,26 +0,0 @@
1
- {
2
- "name": "chi-css-engine",
3
- "version": "1.0.0",
4
- "description": "Lightweight utility-first CSS engine",
5
- "keywords": [
6
- "\"css\"",
7
- "\"utility\"",
8
- "\"tailwind\"",
9
- "\"dom\""
10
- ],
11
- "homepage": "https://github.com/nitesh011y/Chai-tailwind#readme",
12
- "bugs": {
13
- "url": "https://github.com/nitesh011y/Chai-tailwind/issues"
14
- },
15
- "repository": {
16
- "type": "git",
17
- "url": "git+https://github.com/nitesh011y/Chai-tailwind.git"
18
- },
19
- "license": "MIT",
20
- "author": "nitesh011y",
21
- "type": "commonjs",
22
- "main": "index.js",
23
- "scripts": {
24
- "test": "echo \"Error: no test specified\" && exit 1"
25
- }
26
- }
package/test/package.json DELETED
@@ -1,16 +0,0 @@
1
- {
2
- "name": "test",
3
- "version": "1.0.0",
4
- "main": "index.js",
5
- "scripts": {
6
- "test": "echo \"Error: no test specified\" && exit 1"
7
- },
8
- "keywords": [],
9
- "author": "",
10
- "license": "ISC",
11
- "type": "commonjs",
12
- "description": "",
13
- "dependencies": {
14
- "chi-css-engine": "^1.0.0"
15
- }
16
- }