# babel-plugin-fela

> Babel plugin to perform Fela optimizations and precomilation

Latest version **1.0.15** (published 2018-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-fela
pnpm add babel-plugin-fela
yarn add babel-plugin-fela
bun add babel-plugin-fela
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2018-07-05 |
| First published | 2017-09-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 25.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2282 |
| Author | Robin Frischmann |
| Maintainers | rofrischmann, txhawks |
| Keywords | fela, babel-plugin, precomilation, optimization |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-fela
- Repository: https://github.com/rofrischmann/fela/
- npm.io page: https://npm.io/package/babel-plugin-fela

## Dependencies (2)

- [fast-loops](https://npm.io/package/fast-loops.md) ^1.0.0
- [fela-utils](https://npm.io/package/fela-utils.md) ^8.0.8

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.15 (latest) — 2018-07-05
- 1.0.14 — 2018-05-23
- 1.0.13 — 2018-04-04
- 1.0.12 — 2018-03-13
- 1.0.11 — 2018-02-27
- 1.0.10 — 2017-12-22
- 1.0.9 — 2017-12-22
- 1.0.8 — 2017-12-18
- 1.0.7 — 2017-11-24
- 1.0.6 — 2017-11-14
- 1.0.4 — 2017-11-01
- 1.0.3 — 2017-10-20
- 1.0.2 — 2017-10-11
- 1.0.1 — 2017-10-09
- 1.0.0 — 2017-09-22

## README

> **Deprecated!**<br>The Fela Babel plugin (babel-plugin-fela) is deprecated, please remove it from your Babel configuration.<br>
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.<br>
It will encapsulate static styles to be only rendered once.
<br>Optionally it can fully precompile static styles.

<img alt="npm version" src="https://badge.fury.io/js/babel-plugin-fela.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/babel-plugin-fela.svg">

## Installation
```sh
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](../react-fela), [preact-fela](../preact-fela) and [inferno-fela](../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.<br>
This will drastically improve any rule that renders multiple times.
##### Via .babelrc

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

##### Via CLI

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

##### Via Node API

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

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!

```javascript
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.
```json
{
  "plugins": ["./babelPluginFela.js"]
}
```

## License
Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
Created with ♥ by [@rofrischmann](http://rofrischmann.de) and all the great contributors.

---
_Source: https://npm.io/package/babel-plugin-fela · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._