Fela-plugin-unit NPM

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.