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.
![Gitter](https://badges.gitter.im/Join Chat.svg)
import jss from 'jss'
import defaultUnit from 'jss-default-unit'
// Optionally customize default units.
const options = {
'line-height': 'rem',
'font-size': 'rem'
}
jss.use(defaultUnit(options))
// Define styles.
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;
}
File a bug against cssinjs/jss prefixed with [jss-default-unit].
npm i
npm run test
MIT