Deprecated!The Fela Babel plugin (babel-plugin-fela) is deprecated, please remove it from your Babel configuration. It's use could lead to false output with newer Fela versions and doesn't add much value at all.

babel-plugin-fela

A babel plugin to optimize Fela rules. It will encapsulate static styles to be only rendered once. Optionally it can fully precompile static styles.

Installation

yarn add babel-plugin-fela

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

Limitations

Before using this plugin, be sure to read the limitations.

Right now, it only transforms rules passed to the createComponent-HoC exported by react-fela, preact-fela and inferno-fela. Additionally those rules must either be defined within the same file or directly passed as a function. It accepts both basic functions as well as arrow functions.

More use cases will be added from time to time.

Usage

Static Style Encapsulation

Encapsulating static styles works by default. It will check the return value of your rule and extract every static property. Those will then be added as a separate renderRule-call which is only called the first time that rule is rendered. This will drastically improve any rule that renders multiple times.

Via .babelrc

{
  "plugins": ["babel-plugin-fela"]
}

Via CLI

babel --plugins babel-plugin-fela script.js

Via Node API

require('babel').transform('code', {
  plugins: ['babel-plugin-fela']
});

Precompilation

In order to achieve precompilation, the plugin must be aware of the Fela renderer used to render our app. This can't be achieved within the .babelrc nor via CLI. We could use the Node API, but to be able to still use the other methods, we can also create our very own local plugin.

We just create a plugin file (e.g. babelPluginFela.js):

Be aware that the we have to pass a function that returns the renderer rather than the renderer itself!

import createPlugin from 'babel-plugin-fela/lib/createPlugin'

// add your personal fela configuration here
import { createRenderer } from 'fela'
const renderer = () => createRenderer()

// createPlugin accepts a single renderer option
export default createPlugin({
    renderer
})

Now we can just link to the relative path of our own plugin file.

{
  "plugins": ["./babelPluginFela.js"]
}

License

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