fela-plugin-extend

fela-plugin-extend

Allows styles to be extended with other style objects. Supports a condition-based API.

Installation

npm i --save fela-plugin-extend

Assuming you are using npm as your package manager you can just npm install.
Otherwise we also provide a UMD. You can easily use it via unpkg. It registers a FelaPluginExtend global.

<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://unpkg.com/fela-plugin-extend@4.1.2/dist/fela-plugin-extend.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://unpkg.com/fela-plugin-extend@4.1.2/dist/fela-plugin-extend.min.js"></script>

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 @rofrischmann and all the great contributors.