@risewithprakash/titan-css 1.0.0 → 1.0.1

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 (7) hide show
  1. package/README.md +23 -0
  2. package/dist/titan.js +34 -13
  3. package/index.html +24 -5
  4. package/package.json +1 -1
  5. package/src/rules.js +38 -12
  6. package/src/runtime.js +4 -1
  7. package/src/dist/titan.js +0 -0
package/README.md CHANGED
@@ -0,0 +1,23 @@
1
+ # ⚡ TitanCSS
2
+
3
+ A lightweight, utility-first CSS engine that generates styles directly from class names — inspired by Tailwind, built for speed and simplicity.
4
+
5
+ ---
6
+
7
+ ## 🚀 Features
8
+
9
+ - ⚡ Generate CSS on the fly from class names
10
+ - 🧩 Utility-first approach (`namespace-prefix-value`)
11
+ - 🪶 Lightweight and fast
12
+ - 🔌 Easy to extend with custom utilities
13
+ - 🎯 No build step required (works in browser)
14
+
15
+ ---
16
+
17
+ ## 📦 Installation
18
+
19
+ ### CDN
20
+
21
+ ```html
22
+ <script src="https://cdn.jsdelivr.net/npm/@risewithprakash/titan-css/dist/titan.js"></script>
23
+ ```
package/dist/titan.js CHANGED
@@ -13,18 +13,38 @@
13
13
  function generateClasses(el) {
14
14
  const rules = [];
15
15
  for (const cls of el.classList) {
16
- const [, prefix, value] = cls.split("-");
17
- if (prefix === "text") {
18
- rules.push(`.${cls}{font-size:${value}px;}`);
19
- }
20
- if (prefix === "bg") {
21
- rules.push(`.${cls}{background-color:${value};}`);
22
- }
23
- if (prefix === "color") {
24
- rules.push(`.${cls}{color:${value};}`);
25
- }
26
- if (prefix === "m") {
27
- rules.push(`.${cls}{margin:${value}px;}`);
16
+ const [namespace, prefix, value] = cls.split("-");
17
+ if (namespace === "kadak") {
18
+ if (prefix === "bg") {
19
+ rules.push(`.${cls}{background-color:${value};}`);
20
+ }
21
+ if (prefix === "text") {
22
+ rules.push(`.${cls}{font-size:${value}px;}`);
23
+ }
24
+ if (prefix === "color") {
25
+ rules.push(`.${cls}{color:${value};}`);
26
+ }
27
+ if (prefix === "weight") {
28
+ rules.push(`.${cls}{font-weight:${value};}`);
29
+ }
30
+ if (prefix === "lh") {
31
+ rules.push(`.${cls}{line-height:${value};}`);
32
+ }
33
+ if (prefix === "align") {
34
+ rules.push(`.${cls}{text-align:${value};}`);
35
+ }
36
+ if (prefix === "transform") {
37
+ rules.push(`.${cls}{text-transform:${value};}`);
38
+ }
39
+ if (prefix === "spacing") {
40
+ rules.push(`.${cls}{letter-spacing:${value}px;}`);
41
+ }
42
+ if (prefix === "display") {
43
+ rules.push(`.${cls}{display:${value};}`);
44
+ }
45
+ if (prefix === "hidden") {
46
+ rules.push(`.${cls}{display:none;}`);
47
+ }
28
48
  }
29
49
  }
30
50
  return rules;
@@ -35,7 +55,8 @@
35
55
  document.head.appendChild(style);
36
56
  var cache = /* @__PURE__ */ new Set();
37
57
  function scan() {
38
- const elements = document.querySelectorAll('[class*="mast-"]');
58
+ const elements = document.body.querySelectorAll("*");
59
+ console.log(elements);
39
60
  const css = generateCSS(elements, generateClasses);
40
61
  if (!cache.has(css)) {
41
62
  style.textContent += css;
package/index.html CHANGED
@@ -3,14 +3,33 @@
3
3
 
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
+ <title>Titan CSS</title>
6
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Document</title>
8
8
  </head>
9
9
 
10
- <body>
11
- <h1 class="mast-text-100 mast-color-red">Hello</h1>
12
- <div class="mast-bg-blue">Hello</div>
13
- <script type="module" src="./src/runtime.js"></script>
10
+ <style>
11
+ body {
12
+ background-color: lightgray;
13
+ padding: 20px;
14
+ font-family: sans-serif;
15
+ }
16
+ </style>
17
+
18
+ <body class="">
19
+
20
+ <h1 class="kadak-text-24 kadak-color-red kadak-weight-700">
21
+ Hello World
22
+ </h1>
23
+
24
+ <p class="kadak-text-16 kadak-lh-1.5 kadak-align-center">
25
+ This is a paragraph
26
+ </p>
27
+
28
+ <div class="kadak-bg-lightblue kadak-display-flex">
29
+ Flex Box
30
+ </div>
31
+
14
32
  </body>
33
+ <script type="module" src="./dist/titan.js"></script>
15
34
 
16
35
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@risewithprakash/titan-css",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Runtime utility-first CSS engine",
5
5
  "main": "src/runtime.js",
6
6
  "module": "dist/titan.js",
package/src/rules.js CHANGED
@@ -2,22 +2,48 @@ export function generateClasses(el) {
2
2
  const rules = [];
3
3
 
4
4
  for (const cls of el.classList) {
5
- const [, prefix, value] = cls.split("-");
5
+ const [namespace, prefix, value] = cls.split("-");
6
6
 
7
- if (prefix === "text") {
8
- rules.push(`.${cls}{font-size:${value}px;}`);
9
- }
7
+ if (namespace === "kadak") {
8
+ if (prefix === "bg") {
9
+ rules.push(`.${cls}{background-color:${value};}`);
10
+ }
10
11
 
11
- if (prefix === "bg") {
12
- rules.push(`.${cls}{background-color:${value};}`);
13
- }
12
+ if (prefix === "text") {
13
+ rules.push(`.${cls}{font-size:${value}px;}`);
14
+ }
14
15
 
15
- if (prefix === "color") {
16
- rules.push(`.${cls}{color:${value};}`);
17
- }
16
+ if (prefix === "color") {
17
+ rules.push(`.${cls}{color:${value};}`);
18
+ }
19
+
20
+ if (prefix === "weight") {
21
+ rules.push(`.${cls}{font-weight:${value};}`);
22
+ }
23
+
24
+ if (prefix === "lh") {
25
+ rules.push(`.${cls}{line-height:${value};}`);
26
+ }
27
+
28
+ if (prefix === "align") {
29
+ rules.push(`.${cls}{text-align:${value};}`);
30
+ }
31
+
32
+ if (prefix === "transform") {
33
+ rules.push(`.${cls}{text-transform:${value};}`);
34
+ }
35
+
36
+ if (prefix === "spacing") {
37
+ rules.push(`.${cls}{letter-spacing:${value}px;}`);
38
+ }
39
+
40
+ if (prefix === "display") {
41
+ rules.push(`.${cls}{display:${value};}`);
42
+ }
18
43
 
19
- if (prefix === "m") {
20
- rules.push(`.${cls}{margin:${value}px;}`);
44
+ if (prefix === "hidden") {
45
+ rules.push(`.${cls}{display:none;}`);
46
+ }
21
47
  }
22
48
  }
23
49
 
package/src/runtime.js CHANGED
@@ -7,7 +7,10 @@ document.head.appendChild(style);
7
7
  const cache = new Set();
8
8
 
9
9
  function scan() {
10
- const elements = document.querySelectorAll('[class*="mast-"]');
10
+ const elements = document.body.querySelectorAll("*");
11
+
12
+ console.log(elements);
13
+
11
14
  const css = generateCSS(elements, generateClasses);
12
15
 
13
16
  if (!cache.has(css)) {
package/src/dist/titan.js DELETED
File without changes