fela-plugin-unit
v12.2.1
Published
Fela plugin to automatically add units if required
Downloads
101,765
Readme
fela-plugin-unit
Always writing length values as string with a value applied seems not like the JavaScript way to do it. You can also use mathematics to process number values.
It is aware of unitless properties such as lineHeight
, zero-values and also adds units to multiple values inside an array.
Installation
yarn add fela-plugin-unit
You may alternatively use npm i --save fela-plugin-unit
.
Usage
Make sure to read the documentation on how to use plugins.
import { createRenderer } from 'fela'
import unit from 'fela-plugin-unit'
const renderer = createRenderer({
plugins: [unit()],
})
Configuration
Parameters
| Parameter | Value | Default | Description |
| ------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| unit | ch
, em
, ex
, rem
, vh
, vw
, vmin
, vmax
, px
, cm
, mm
, in
, pc
, pt
, mozmm
| px
| unit which gets applied |
| unitPerProperty | (Object) | {}
| Default units per property |
| isUnitlessProperty | (Function) | util function
| check whether property should remain unitless |
Example
import { createRenderer } from 'fela'
import unit from 'fela-plugin-unit'
const unitPlugin = unit('em', {
margin: '%',
fontSize: 'pt',
})
const renderer = createRenderer({
plugins: [unitPlugin],
})
Example
Using the above example code:
Input
{
marginTop: 0,
width: 25,
lineHeight: 1.4,
height: '53',
fontSize: 15,
margin: 10
}
Output
{
marginTop: 0,
width: '25em',
lineHeight: 1.4,
height: '53em',
fontSize: '15pt',
margin: '10%'
}
License
Fela is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser and all the great contributors.