@risewithprakash/titan-css 1.0.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 +0 -0
- package/dist/titan.js +46 -0
- package/index.html +16 -0
- package/package.json +14 -0
- package/src/dist/titan.js +0 -0
- package/src/engine.js +10 -0
- package/src/rules.js +25 -0
- package/src/runtime.js +19 -0
- package/style.css +3 -0
package/README.md
ADDED
|
File without changes
|
package/dist/titan.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
// src/engine.js
|
|
3
|
+
function generateCSS(elements, generateClasses2) {
|
|
4
|
+
const cssSet = /* @__PURE__ */ new Set();
|
|
5
|
+
elements.forEach((el) => {
|
|
6
|
+
const rules = generateClasses2(el);
|
|
7
|
+
rules.forEach((r) => cssSet.add(r));
|
|
8
|
+
});
|
|
9
|
+
return [...cssSet].join("\n");
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// src/rules.js
|
|
13
|
+
function generateClasses(el) {
|
|
14
|
+
const rules = [];
|
|
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;}`);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return rules;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// src/runtime.js
|
|
34
|
+
var style = document.createElement("style");
|
|
35
|
+
document.head.appendChild(style);
|
|
36
|
+
var cache = /* @__PURE__ */ new Set();
|
|
37
|
+
function scan() {
|
|
38
|
+
const elements = document.querySelectorAll('[class*="mast-"]');
|
|
39
|
+
const css = generateCSS(elements, generateClasses);
|
|
40
|
+
if (!cache.has(css)) {
|
|
41
|
+
style.textContent += css;
|
|
42
|
+
cache.add(css);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
scan();
|
|
46
|
+
})();
|
package/index.html
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Document</title>
|
|
8
|
+
</head>
|
|
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>
|
|
14
|
+
</body>
|
|
15
|
+
|
|
16
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@risewithprakash/titan-css",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Runtime utility-first CSS engine",
|
|
5
|
+
"main": "src/runtime.js",
|
|
6
|
+
"module": "dist/titan.js",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "esbuild src/runtime.js --bundle --outfile=dist/titan.js"
|
|
10
|
+
},
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"esbuild": "^0.27.4"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
File without changes
|
package/src/engine.js
ADDED
package/src/rules.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export function generateClasses(el) {
|
|
2
|
+
const rules = [];
|
|
3
|
+
|
|
4
|
+
for (const cls of el.classList) {
|
|
5
|
+
const [, prefix, value] = cls.split("-");
|
|
6
|
+
|
|
7
|
+
if (prefix === "text") {
|
|
8
|
+
rules.push(`.${cls}{font-size:${value}px;}`);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
if (prefix === "bg") {
|
|
12
|
+
rules.push(`.${cls}{background-color:${value};}`);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (prefix === "color") {
|
|
16
|
+
rules.push(`.${cls}{color:${value};}`);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (prefix === "m") {
|
|
20
|
+
rules.push(`.${cls}{margin:${value}px;}`);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return rules;
|
|
25
|
+
}
|
package/src/runtime.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { generateCSS } from "./engine.js";
|
|
2
|
+
import { generateClasses } from "./rules.js";
|
|
3
|
+
|
|
4
|
+
const style = document.createElement("style");
|
|
5
|
+
document.head.appendChild(style);
|
|
6
|
+
|
|
7
|
+
const cache = new Set();
|
|
8
|
+
|
|
9
|
+
function scan() {
|
|
10
|
+
const elements = document.querySelectorAll('[class*="mast-"]');
|
|
11
|
+
const css = generateCSS(elements, generateClasses);
|
|
12
|
+
|
|
13
|
+
if (!cache.has(css)) {
|
|
14
|
+
style.textContent += css;
|
|
15
|
+
cache.add(css);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
scan();
|
package/style.css
ADDED