fela-plugin-extend

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 Common License.
Created with ♥ by @robinweser 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 |