chaitail 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 (4) hide show
  1. package/README.md +1 -1
  2. package/demo/index.html +7 -4
  3. package/package.json +1 -1
  4. package/src/applyClass.js +8 -2
package/README.md CHANGED
@@ -40,7 +40,7 @@ initChai();
40
40
 
41
41
  ```html
42
42
  <div class="chai-p-20 chai-bg-blue chai-text-white chai-flex chai-justify-center">
43
- Hello ChaiTail 🚀
43
+ Hello ChaiTail!
44
44
  </div>
45
45
  ```
46
46
 
package/demo/index.html CHANGED
@@ -5,11 +5,14 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>ChaiTail</title>
7
7
  </head>
8
- <body class="chai-bg-black">
9
- <div class="chai-p-20 chai-bg-red chai-text-white chai-rounded-10">
10
- <h1 class="chai-bg-blue chai-p-10 chai-text-yellow">Welcome To ChaiTail</h1>
11
- <p class="chai-text-red">Try it</p>
8
+ <body>
9
+ <div
10
+ class="chai-p-20 chai-bg-blue chai-text-white chai-flex chai-justify-center"
11
+ style="background-color: blue;"
12
+ >
13
+ Hello ChaiTail
12
14
  </div>
15
+
13
16
  <script type="module" src="./script.js"></script>
14
17
  </body>
15
18
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chaitail",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A lightweight utility first CSS framework",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/applyClass.js CHANGED
@@ -6,7 +6,7 @@ function parseChaiClass(cls) {
6
6
  if (parts[0] !== "chai") return null;
7
7
 
8
8
  const type = parts[1];
9
- const value = parts[2];
9
+ const value = parts.slice(2).join("-");
10
10
 
11
11
  switch (type) {
12
12
  case "p":
@@ -25,6 +25,12 @@ function parseChaiClass(cls) {
25
25
  case "flex":
26
26
  return { display: "flex" };
27
27
 
28
+ case "justify":
29
+ return { justifyContent: value };
30
+
31
+ case "items":
32
+ return { alignItems: value };
33
+
28
34
  case "rounded":
29
35
  return { borderRadius: value + "px" };
30
36
 
@@ -34,7 +40,7 @@ function parseChaiClass(cls) {
34
40
  }
35
41
 
36
42
  export function applyClasses(element) {
37
- element.classList.forEach((cls) => {
43
+ [...element.classList].forEach((cls) => {
38
44
  let style = ChaiCSS[cls];
39
45
 
40
46
  if (!style) {