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.
Permalink
..
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

README.md

fela-plugin-custom-property

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.

Installation

yarn add fela-plugin-custom-property

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

Usage

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() ]
})

Configuration

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 ]
})

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

{
  size: 25
}

Output

{
  width: '25px',
  height: '25px'
}

License

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