JSS plugin that adds units to numeric values
Provide plain numeric values in your JSS style definitions, and the plugin will insert the apposite units. Defaults to px
for sizes, ms
for durations, and %
for transform origins, and these can be customized easily (see Usage Example).
Make sure you read how to use
plugins
in general.
Demo -
JSS
![Gitter](https://badges.gitter.im/Join Chat.svg)
Usage example
import jss from 'jss'
import defaultUnit from 'jss-default-unit'
const options = {
'line-height': 'rem',
'font-size': 'rem'
}
jss.use(defaultUnit(options))
const styles = {
container: {
'line-height': 3,
'font-size': 1.7,
'height': 200,
'z-index': 1
}
}
let sheet = jss.createStyleSheet(styles)
console.log(sheet.toString())
Generates the following stylesheet:
.container-0-0 {
line-height: 3rem;
font-size: 1.7rem;
height: 200px;
z-index: 1;
}
Issues
File a bug against cssinjs/jss prefixed with [jss-default-unit].
Run tests
npm i
npm run test
License
MIT