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@1.2.0/dist/fela-plugin-unit.js"></script>
<!-- Fela (Production): Minified version -->
<script  src="https://unpkg.com/fela-plugin-unit@1.2.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.2.0

| Package | Changes | | --- | --- | | fela | (#756) Added a generateClassName function to renderer which can now be overwritten | | fela<br>fela-dom<br>react-fela<br>preact-fela<br>infero-fela<br>reason-fela<br>fela-bindings | (#768) Added a new renderer option styleNodeAttributes for adding custom attributes to generated style nodes | | fela-utils | (#766) Fixed IE 11 compatibility issues | | fela-sort-media-query-mobile-first<br>fela-preset-web | (#769) Updated TypeScript definitions | | fela<br>fela-plugin-prefixer<br>react-fela | (#763) Added UMD builds for these specific packages - more to come |