fela-plugin-unit

2019-08-22

Fela plugin to automatically add units if required

fela-plugin-unit

npm versionnpm downloadsBundlephobia

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
ParameterValueDefaultDescription
unitch, em, ex, rem, vh, vw, vmin, vmax, px, cm, mm, in, pc, pt, mozmmpxunit which gets applied
unitPerProperty(Object){}Default units per property
isUnitlessProperty(Function)util functioncheck 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 @robinweserand all the great contributors.

Repository

https://github.com/robinweser/fela/


上一篇:fela-combine-arrays
下一篇:fela-plugin-prefixer
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部