stilar
WIP
Example
const Stilar = require('stilar') const theme = new Stilar() theme.component('Playlist', { Playlist: { margin: '2px', display: 'flex', justifyContent: 'space-between', '@media screen and (max-width: 600px)': { fontFamily: '"Helvetica"', }, }, base: { backgroundColor: '3px', margin: 0, padding: '5px', display: 'inline-block', ':hover': { color: 'blue', backgroundColor: 'green', }, '@media screen and (max-width: 600px)': { color: 'red', opacity: '0.5', }, },}) theme.keyframes('stretchdelay', { '0%': { transform: 'scaleY(0.4)', }, '40%': { transform: 'scaleY(0.4)', }, '100%': { transform: 'scaleY(0.4)', }, '20%': { transform: 'scaleY(1.0)', },}) console.log(theme.toStyleString())Output:
@-webkit-keyframes stretchdelay{0%{transform:scaleY(0.4);}40%{transform:scaleY(0.4);}100%{transform:scaleY(0.4);}20%{transform:scaleY(1.0);}}@keyframes stretchdelay{0%{transform:scaleY(0.4);}40%{transform:scaleY(0.4);}100%{transform:scaleY(0.4);}20%{transform:scaleY(1.0);}}.Playlist{margin:2px;display:flex;justify-content:space-between;}@media screen and (max-width: 600px){.Playlist{font-family:"Helvetica";}}.Playlist-base{background-color:3px;margin:0;padding:5px;display:inline-block;}.Playlist-base:hover{color:blue;background-color:green;}@media screen and (max-width: 600px){.Playlist-base{color:red;opacity:0.5;}}Output (pretty printed):
@-webkit-keyframes stretchdelay { 0% { transform: scaleY(0.4); } 40% { transform: scaleY(0.4); } 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1.0); }} @keyframes stretchdelay { 0% { transform: scaleY(0.4); } 40% { transform: scaleY(0.4); } 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1.0); }} .Playlist { margin: 2px; display: flex; justify-content: space-between;} @media screen and (max-width: 600px) { .Playlist { font-family: "Helvetica"; }} .Playlist-base { background-color: 3px; margin: 0; padding: 5px; display: inline-block;} .Playlist-base:hover { color: blue; background-color: green;} @media screen and (max-width: 600px) { .Playlist-base { color: red; opacity: 0.5; }}