fela-plugin-extend

Allows styles to be extended with other style objects. Supports a condition-based API. It automatically removes null and undefined values before merging styles.

Installation

yarn add fela-plugin-extend

You may alternatively use npm i --save fela-plugin-extend.

Usage

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

import { createRenderer } from 'fela'
import extend from 'fela-plugin-extend'

const renderer = createRenderer({
  plugins: [extend()],
})

Example

extend: styleObject

Input

{
  color: 'red',
  extend: { backgroundColor: 'blue' }
}

Output

{
  color: 'red',
  backgroundColor: 'blue'
}

extend: { condition, styleObject }

Input

{
  color: 'red',
  extend: {
    condition: props.bg === true,
    style: { backgroundColor: 'blue' }
  }
}

Output

Rendered using { bg: true } as props:

{
  color: 'red',
  backgroundColor: 'blue'
}

Rendered using { bg: false } as props

{
  color: 'red'
}

extend: [...]

You can also mix basic and conditional extending. It will extend the styles from left to right.

{
  color: 'red',
  extend: [{
    fontSize: '12px',
    lineHeight: 1.5
  }, {
    condition: props.bg === true,
    style: { backgroundColor: 'blue' }
  }, {
    lineHeight: 1.2
  }]
}

Output

Using { bg: true } as props:

{
  color: 'red',
  fontSize: '12px',
  lineHeight: 1.2,
  backgroundColor: 'blue'
}

License

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