Switch branches/tags
react-fela@7.3.0 react-fela@7.2.0 react-fela@7.0.1 react-fela@6.2.4 react-fela@6.2.3 react-fela@6.2.2 react-fela@6.2.1 react-fela@6.2.0 react-fela@6.1.1 react-fela@6.0.2 react-fela@6.0.1 react-fela@6.0.0 react-fela@5.3.0 react-fela@5.2.1 react-fela@5.2.0 react-fela@5.0.0 preact-fela@7.3.0 preact-fela@7.2.0 preact-fela@7.0.1 preact-fela@6.2.4 preact-fela@6.2.3 preact-fela@6.2.2 preact-fela@6.2.1 preact-fela@6.2.0 preact-fela@6.1.1 preact-fela@6.0.2 preact-fela@6.0.1 preact-fela@6.0.0 preact-fela@5.3.0 preact-fela@5.2.1 preact-fela@5.2.0 preact-fela@5.0.0 performance-benchmarks@0.0.13 performance-benchmarks@0.0.12 performance-benchmarks@0.0.10 performance-benchmarks@0.0.9 performance-benchmarks@0.0.8 performance-benchmarks@0.0.7 performance-benchmarks@0.0.6 inferno-fela@8.2.0 inferno-fela@8.1.0 inferno-fela@7.0.1 inferno-fela@6.2.4 inferno-fela@6.2.3 inferno-fela@6.2.2 inferno-fela@6.2.1 inferno-fela@6.2.0 inferno-fela@6.1.1 inferno-fela@6.0.2 inferno-fela@6.0.1 inferno-fela@6.0.0 inferno-fela@5.3.0 inferno-fela@5.2.1 inferno-fela@5.2.0 inferno-fela@5.0.0 fela@6.1.8 fela@6.1.7 fela@6.1.3 fela@6.1.2 fela@6.1.1 fela@6.1.0 fela@6.0.2 fela@6.0.1 fela@6.0.0 fela@5.2.0 fela@5.1.1 fela@5.1.0 fela@5.0.0 fela-utils@8.0.7 fela-utils@8.0.6 fela-utils@8.0.3 fela-utils@8.0.2 fela-utils@8.0.1 fela-utils@8.0.0 fela-utils@7.0.2 fela-utils@7.0.1 fela-utils@7.0.0 fela-utils@6.0.1 fela-utils@6.0.0 fela-utils@5.0.5 fela-utils@5.0.0 fela-tools@5.1.6 fela-tools@5.1.5 fela-tools@5.1.2 fela-tools@5.1.1 fela-tools@5.1.0 fela-tools@5.0.14 fela-tools@5.0.10 fela-tools@5.0.9 fela-tools@5.0.8 fela-tools@5.0.7 fela-tools@5.0.6 fela-tools@5.0.5 fela-tools@5.0.0 fela-statistics@5.0.21 fela-statistics@5.0.20 fela-statistics@5.0.17 fela-statistics@5.0.16 fela-statistics@5.0.15 fela-statistics@5.0.14
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
src fela-identifier remove meta info from rules fix Mar 20, 2018
LICENSE update licenses Jun 22, 2017
README.md fix line breaks Apr 14, 2018
package.json Publish May 23, 2018
yarn.lock add extend tests Mar 13, 2018



npm version npm downloads

Sometimes it's handy to define some custom properties mostly used as shortcuts.

A custom property basically is just a plain function that takes a value as input and outputs an object of style declarations.


yarn add fela-plugin-custom-property

You may alternatively use npm i --save fela-plugin-custom-property.


Make sure to read the documentation on how to use plugins.

import { createRenderer } from 'fela'
import customProperty from 'fela-plugin-custom-property'

const renderer = createRenderer({
  plugins: [ customProperty() ]


In order to get custom properties resolved, you need to configure the plugin with all custom properties once.

import { createRenderer } from 'fela'
import customProperty from 'fela-plugin-custom-property'

const sizeProperty = size => ({
  width: size + 'px',
  height: size + 'px'

const customPropertyPlugin = customProperty({
  // the key defines the used CSS property
  // the value references the resolving function
  size: sizeProperty

const renderer = createRenderer({
  plugins: [ customPropertyPlugin ]


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.


  size: 25


  width: '25px',
  height: '25px'


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