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

``sh
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.

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

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

Example

$3

#### Input

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

#### Output

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

$3

#### Input

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

#### Output

Rendered using { bg: true } as props:

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

Rendered using { bg: false } as props

`javascript
{
color: 'red'
}
`

$3

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

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

#### Output

Using { bg: true } as props:

`javascript
{
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.