css-in-js v1.1.0
css-in-js
Write stylesheets in JS.
Works with any stack.
There are many ways of writing styles as JS (Free Style, restyle and babel-plugin-css-in-js – just to name a few). But none of them has the option to compile to a good old interoperable CSS stylesheet, or the new and shiny CSS module. I wanted an easy way to take advantage of JS goodness when writing stylesheets – a way compatible with any tech stack.
Installation
npm install [--save] css-in-js
Usage
const cssInJs = require('css-in-js');
const indigo = '#3F51B5';
▸ cssInJs({
'.my-button': {
'width': '50px',
'background-color': indigo,
},
'@media screen and (min-width: 80em)': {
'.my-button': {
'width': '100%',
},
},
});
◂ `
.my-button {
width: 50px;
background-color: #3F51B5;
}
@media screen and (min-width: 80em) {
.my-button {
width: 100%;
}
}
`
Syntax
Any JS object is translated recursively to a CSS tree. To ensure two-way compatibility, we only support git.io/orthodox style objects.
Fallbacks
When using fancy things which need a CSS fallback, you might want to set the same property more than once:
.drag-me {
cursor: pointer;
cursor: -webkit-grab;
cursor: grab;
}To cover these cases, we allow passing an array of style objects:
▸ cssInJs({
'.drag-me': [{
cursor: 'pointer',
}, {
cursor: '-webkit-grab',
}, {
cursor: 'grab',
}],
});
◂ `
.drag-me {
cursor: pointer;
cursor: -webkit-grab;
cursor: grab;
}
`
Credits
css-in-js is heavily inspired by the great elm-css by Richard Feldman. The name is inspired by the disrupting React talk CSS in JS by Christopher Chedeau.