This project allows you to generate CSS from JavaScript/Typescript object.
import { object2css } from './mod.ts';
// const obj = ...
console.log(object2css(obj)); // Convert obj to css and display to console
# Help
deno run generate.ts --help
# 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]
Input:
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):
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;
}