createCSS

Traditional style CSS in JS ;-)

The aim is to produce legacy css string output.

In short it's ES5 friendly.

Usage

1. Basic

input JS:

createCSS({body: {color: 'red'}})

CSS output:

body {
color: red;
}

2. Nested and

input JS:

createCSS({'.nav': {border: '2px solid red','&:hover .item': {color: 'red'},'&.active': {fontWeight: 'bold'},'.other &': {borderColor: 'blue'}}})

CSS output:

.nav {
border:2px solid red;
}
.nav:hover .item {
color: red;
}
.nav.active {
font-weight: bold;
}
.other .nav {
border-color: blue;
}

3. Nested at

Input JS:

createCSS({'div': {border: '2px solid gray','@media (min-width: 1024px)': {border: '0'}}})

CSS output:

div {
border:2px solid gray;
}
@media (min-width:1024px) {
div {
border:0;
}
}

https://developer.mozilla.org/en-US/docs/Web/CSS