Write stylesheets in JS. Works with any stack.
npm install jss-lite   
**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.
``sh`
npm install [--save] jss-lite
`js
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:
`css
@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:
`js
▸ 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:
`css`
.drag-me {
cursor: pointer;
cursor: -webkit-grab;
cursor: grab;
}
To cover these cases, we allow passing an array of style objects:
`js
▸ 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.