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

npm i --save fela-plugin-unit

Assuming you are using npm as your package mananger you can just npm install.
Otherwise we also provide a UMD. You can easily use it via unpkg. It registers a FelaPluginUnit global.

<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://unpkg.com/fela-plugin-unit@3.0.7/dist/fela-plugin-unit.js"></script>
<!-- Fela (Production): Minified version -->
<script  src="https://unpkg.com/fela-plugin-unit@3.0.7/dist/fela-plugin-unit.min.js"></script>

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.