https://github.com/isheretoby/jsgencss
Create CSS from JavaScript or TypeScript objects. Instead of writing CSS by hand, you define your styles as objects in your code, and this tool converts them into CSS.
https://github.com/isheretoby/jsgencss
css css-preprocessor deno typescript
Last synced: 4 months ago
JSON representation
Create CSS from JavaScript or TypeScript objects. Instead of writing CSS by hand, you define your styles as objects in your code, and this tool converts them into CSS.
- Host: GitHub
- URL: https://github.com/isheretoby/jsgencss
- Owner: IsHereToby
- License: mit
- Created: 2024-06-27T20:45:46.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-06-27T21:01:38.000Z (12 months ago)
- Last Synced: 2025-01-08T18:36:16.491Z (6 months ago)
- Topics: css, css-preprocessor, deno, typescript
- Language: TypeScript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JsGenCSS
Create CSS from JavaScript or TypeScript objects. Instead of writing CSS by hand, you define your styles as objects in your code, and this tool converts them into CSS.
## Objects to CSS Using "mod.ts"
```ts
import { object2css } from "./mod.ts";
// const obj = ...
console.log(object2css(obj)); // Convert obj to css and display to console
```
## Utilizing Deno's "generate.ts" Script
```sh
# General usage (w/ watch)
deno run --allow-read --allow-write generate.ts [INPUT_FILE] [OUTPUT_FILE] --watch
# Console output only
deno run --allow-read generate.ts [INPUT_FILE]
```
## Demo
Input:
```ts
import { array2object, object2css } from "./mod.ts";
console.log(
object2css({
"html, body": {
// Simple selector
margin: 0, // Simple property
padding: 0,
},
...array2object(["left", "right"], (k) => ({
// "array2object" helper
[`.text-${k}`]: {
textAlign: k,
},
})),
".main": {
margin: `${1 / 2}rem`, // Computed property
".test": {
// Will create a ".main .test" selector
color: "#f55",
"&.center": {
// The character '&' allows you to combine with the parent selector ".main .test.center"
textAlign: "center",
},
},
},
})
);
```
Output (formatted):
```css
html,
body {
margin: 0;
padding: 0;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.main {
margin: 0.5rem;
}
.main .test {
color: #f55;
}
.main .test.center {
text-align: center;
}
```