Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
LICENSE
README.md
package.json

README.md

fela-plugin-unit

npm version npm downloads Bundlephobia

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 Common License.
Created with ♥ by @rofrischmann and all the great contributors.