12.0.3 • Published 4 years ago
@fela-next/fela-plugin-unit v12.0.3
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-unitYou 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-next/fela'
import unit from '@fela-next/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-next/fela'
import unit from '@fela-next/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 Common License. Created with ♥ by @robinweser and all the great contributors.