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 npmcdn. It registers a FelaPluginUnit global.

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

Example

Let's say we want to have a custom property size that accepts a single number which will then be transformed into both width and height with a px unit applied.

Input

{
  width: 25,
  lineHeight: 1.4,
  height: '53'
}

Output

{
  width: '25px',
  lineHeight: 1.4,
  height: '53px'
}

Configuration

By default it adds px to the value, but you may use units other than that.

import unit from 'fela-plugin-unit'

const plugin = unit('em')

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.

Changelog

11.1.0

| Package | Changes | | --- | --- | | preact-fela | (#759) Upgraded Preact version to Preact X<br>(#760) Added Preact Typings | | react-fela<br>preact-fela<br>infero-fela<br>reason-fela<br>fela-bindings | (#753) Removed some old 10.x.x deprecated bindings<br>(#752) Added a renderToNodeList-method that returns an array of style elements<br>(#764) Fixed a bug where className was passed instead of style when using FelaComponent with fela-native |