fela-plugin-unit

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 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

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

{
  width: 25,
  lineHeight: 1.4,
  height: '53',
  fontSize: 15,
  margin: 10
}

Output

{
  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 @rofrischmann and all the great contributors.