talwinder-css-engine 1.1.3
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/.vscode/settings.json +3 -0
- package/package.json +18 -0
- package/src/applyTalwinder.js +20 -0
- package/src/demo/index.html +14 -0
- package/src/index.js +5 -0
- package/src/parseClass.js +17 -0
- package/src/parsers/parseBorder.js +33 -0
- package/src/parsers/parseDimension.js +28 -0
- package/src/parsers/parseLayout.js +24 -0
- package/src/parsers/parseSpacing.js +31 -0
- package/src/parsers/parserColor.js +24 -0
- package/src/utils/styleApply.js +7 -0
package/package.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "talwinder-css-engine",
|
|
3
|
+
"version": "1.1.3",
|
|
4
|
+
"description": "Utility-first CSS engine powered by JavaScript",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"css",
|
|
11
|
+
"utility-first",
|
|
12
|
+
"tailwind",
|
|
13
|
+
"javascript"
|
|
14
|
+
],
|
|
15
|
+
"author": "Shaurya Gupta",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"type": "commonjs"
|
|
18
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import parseClass from "./parseClass.js";
|
|
2
|
+
import applyStyles from "./utils/styleApply.js";
|
|
3
|
+
|
|
4
|
+
function applyTalwinder(root = document){
|
|
5
|
+
const elements = root.querySelectorAll("*");
|
|
6
|
+
|
|
7
|
+
elements.forEach(el =>{
|
|
8
|
+
el.classList.forEach(cls =>{
|
|
9
|
+
if(!cls.startsWith("talwinder-")) return;
|
|
10
|
+
|
|
11
|
+
const styles = parseClass(cls);
|
|
12
|
+
|
|
13
|
+
if(styles){
|
|
14
|
+
applyStyles(el, styles);
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default applyTalwinder
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Document</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div class="talwinder-bg-green talwinder-text-orange talwinder-text-center">Hello Talwinder</div>
|
|
10
|
+
<div class="talwinder-m-2 talwinder-p-6 talwinder-px-8 talwinder-py-2 talwinder-ml-2 talwinder-mr-3 talwinder-mt-4 talwinder-mb-5">This is Margin parser</div>
|
|
11
|
+
<div class="talwinder-h-50 talwinder-w-50 talwinder-border-1 talwinder-rounded-2"></div>
|
|
12
|
+
<script type="module" src="../index.js"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
package/src/index.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import parseColors from "./parsers/parserColor.js";
|
|
2
|
+
import parseSpacing from "./parsers/parseSpacing.js";
|
|
3
|
+
import parseLayout from "./parsers/parseLayout.js";
|
|
4
|
+
import parseDimension from "./parsers/parseDimension.js";
|
|
5
|
+
import parseBorder from "./parsers/parseBorder.js";
|
|
6
|
+
|
|
7
|
+
function parseClass(cls){
|
|
8
|
+
return (
|
|
9
|
+
parseColors(cls)||
|
|
10
|
+
parseSpacing(cls)||
|
|
11
|
+
parseLayout(cls) ||
|
|
12
|
+
parseDimension(cls)||
|
|
13
|
+
parseBorder(cls)
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export default parseClass
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
function getSize(value) {
|
|
2
|
+
if (isNaN(value)) return value; // allow "50%", "100px"
|
|
3
|
+
return `${value * 8}px`;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
function parseBorder(cls){
|
|
7
|
+
const match = cls.match(/^talwinder-([a-zA-Z]+)-(.+)$/);
|
|
8
|
+
|
|
9
|
+
if(!match) return null;
|
|
10
|
+
const [,type, value] = match;
|
|
11
|
+
|
|
12
|
+
if(type === "border"){
|
|
13
|
+
return {
|
|
14
|
+
borderSize: getSize(value),
|
|
15
|
+
borderStyle: "solid"
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if(type === "border-color"){
|
|
20
|
+
return {
|
|
21
|
+
borderColor: value
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if(type === "rounded"){
|
|
26
|
+
return {
|
|
27
|
+
borderRadius: getSize(value)
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default parseBorder
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
function getSize(value) {
|
|
2
|
+
if (isNaN(value)) return value; // allow "50%", "100px"
|
|
3
|
+
return `${value * 8}px`;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
function parseDimension(cls){
|
|
7
|
+
|
|
8
|
+
if(!cls.startsWith("talwinder-")) return null;
|
|
9
|
+
|
|
10
|
+
const match = cls.match(/^talwinder-(\w+)-(.+)$/);
|
|
11
|
+
|
|
12
|
+
if(!match) return null;
|
|
13
|
+
|
|
14
|
+
const[, type, value] = match;
|
|
15
|
+
|
|
16
|
+
const dimensionMap = {
|
|
17
|
+
h: "height",
|
|
18
|
+
w: "width",
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if(!dimensionMap[type]) return null;
|
|
22
|
+
|
|
23
|
+
return {
|
|
24
|
+
[dimensionMap[type]]: getSize(value)
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export default parseDimension
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
function parseLayout(cls){
|
|
2
|
+
const match = cls.match(/^talwinder-display-(.+)$/);
|
|
3
|
+
|
|
4
|
+
if(!match) return null;
|
|
5
|
+
|
|
6
|
+
const [, value] = match;
|
|
7
|
+
|
|
8
|
+
const displayMap = {
|
|
9
|
+
flex: ["flex"],
|
|
10
|
+
grid: ["grid"],
|
|
11
|
+
inline: ["inline"],
|
|
12
|
+
"inline-block": " inline-block",
|
|
13
|
+
block: ["block"],
|
|
14
|
+
none: ["none"]
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
if(!displayMap[value]) return null
|
|
18
|
+
|
|
19
|
+
return {
|
|
20
|
+
display: displayMap[value]
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default parseLayout
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
function parseSpacing(cls){
|
|
2
|
+
const match = cls.match(/^talwinder-(\w+)-(.+)$/);
|
|
3
|
+
|
|
4
|
+
if(!match) return null;
|
|
5
|
+
|
|
6
|
+
const [, type, value] = match;
|
|
7
|
+
|
|
8
|
+
const spacingMap = {
|
|
9
|
+
m: ["margin"],
|
|
10
|
+
mt: ["marginTop"],
|
|
11
|
+
mb: ["marginBottom"],
|
|
12
|
+
ml: ["marginLeft"],
|
|
13
|
+
mr: ["marginRight"],
|
|
14
|
+
p: ["padding"],
|
|
15
|
+
px: ["paddingLeft", "paddingRight"],
|
|
16
|
+
py: ["paddingTop", "paddingBottom"]
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
if(!spacingMap[type]) return null;
|
|
20
|
+
|
|
21
|
+
const finalValue = isNaN(value) ? value : `${value * 8}px`;
|
|
22
|
+
|
|
23
|
+
const styles = {};
|
|
24
|
+
|
|
25
|
+
spacingMap[type].forEach(prop =>{
|
|
26
|
+
styles[prop] = finalValue;
|
|
27
|
+
});
|
|
28
|
+
return styles;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default parseSpacing
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
function parseColors(cls){
|
|
2
|
+
const match = cls.match(/^talwinder-(\w+)-(.+)$/);
|
|
3
|
+
|
|
4
|
+
if(!match) return null;
|
|
5
|
+
|
|
6
|
+
const [, type, value] = match;
|
|
7
|
+
|
|
8
|
+
const colorMap = {
|
|
9
|
+
bg: ["backgroundColor"],
|
|
10
|
+
text: ["Color"]
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
if(!colorMap[type]) return null;
|
|
14
|
+
|
|
15
|
+
if(type === "text" && ["center", "left", "right"].includes(value)){
|
|
16
|
+
return {textAlign: value};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return {
|
|
20
|
+
[colorMap[type]]: value
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default parseColors
|