68 lines
1.3 KiB
Markdown
68 lines
1.3 KiB
Markdown
# JSS plugin that adds units to numeric values
|
|
|
|
[](https://gitter.im/cssinjs/lobby)
|
|
|
|
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](https://github.com/cssinjs/jss/blob/master/docs/setup.md#setup-with-plugins)
|
|
in general.
|
|
|
|
## Setup
|
|
|
|
```javascript
|
|
import jss from 'jss'
|
|
import defaultUnit from 'jss-default-unit'
|
|
|
|
// Optionally you can customize default units.
|
|
const options = {
|
|
'line-height': 'rem',
|
|
'font-size': 'rem'
|
|
}
|
|
|
|
jss.use(defaultUnit(options))
|
|
```
|
|
|
|
## Example
|
|
|
|
```javascript
|
|
const styles = {
|
|
container: {
|
|
'line-height': 3,
|
|
'font-size': 1.7,
|
|
'height': 200,
|
|
'z-index': 1
|
|
}
|
|
}
|
|
```
|
|
|
|
Compiles to:
|
|
|
|
```css
|
|
.container-sdf345 {
|
|
line-height: 3rem;
|
|
font-size: 1.7rem;
|
|
height: 200px;
|
|
z-index: 1;
|
|
}
|
|
```
|
|
|
|
## Demo
|
|
|
|
[Simple](http://cssinjs.github.io/examples/plugins/jss-default-unit/simple/index.html)
|
|
|
|
## Issues
|
|
|
|
File a bug against [cssinjs/jss prefixed with \[jss-default-unit\]](https://github.com/cssinjs/jss/issues/new?title=[jss-default-unit]%20).
|
|
|
|
## Run tests
|
|
|
|
```bash
|
|
npm i
|
|
npm run test
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|