Write stylesheets in JS. Works with any stack.
MIT License
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 except jss 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.
I wrote this library before I learned about jss (it was called css-in-js back then). It turns out that they do exactly the same thing – and much more. In turn, jss-lite offers an extremely simple, pure functional API without implicit state. We have less features than jss – but that means less developer overhead and better performance.
npm install [--save] jss-lite
const jssLite = require('jss-lite');
const indigo = '#3F51B5';
▸ jssLite({
'.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%;
}
}
`
Any JS object is translated recursively to a CSS tree. To ensure two-way compatibility, we only support git.io/orthodox style objects.
Sometimes you need to define a block with the same pseudo-selector more than once in your stylesheet:
@font-face {
font-family: "Merriweather Light";
src: url("fonts/merriweather-light.woff") format("woff");
}
@font-face {
font-family: "Merriweather Light";
font-style: italic, oblique;
src: url("fonts/merriweather-light-italic.woff") format("woff");
}
A JS object can’t have a @font-face
key more than once – the latter overwrites the first one. Therefore we allow passing an array of objects:
▸ jssLite([{
'@font-face': {
'font-family': '"Merriweather Light"',
'src': 'url("fonts/merriweather-light.woff") format("woff")',
},
}, {
'@font-face': {
'font-family': '"Merriweather Light"',
'font-style': 'italic, oblique',
'src': 'url("fonts/merriweather-light-italic.woff") format("woff")',
},
}]);
◂ `
@font-face {
font-family: "Merriweather Light";
src: url("fonts/merriweather-light.woff") format("woff");
}
@font-face {
font-family: "Merriweather Light";
font-style: italic, oblique;
src: url("fonts/merriweather-light-italic.woff") format("woff");
}
`
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:
▸ jssLite({
'.drag-me': [{
cursor: 'pointer',
}, {
cursor: '-webkit-grab',
}, {
cursor: 'grab',
}],
});
◂ `
.drag-me {
cursor: pointer;
cursor: -webkit-grab;
cursor: grab;
}
`
jss-lite is heavily inspired by the great elm-css by Richard Feldman. The original name (css-in-js) comes from the disrupting React talk CSS in JS by Christopher Chedeau. The current name (jss-lite) is of course derived from our big brother jss.