Enhancers are similar to plugins.
While plugins operate on the style object every render, enhancers enhance the renderer once.

Use Case

They are used to add, remove or modify functionality. They can also be used as a wrapper for change subscriptions e.g. for logging or metrics reasons.

Using Enhancers

To use plugins we need to add them to the renderer configuration directly. You can do this by passing a configuration object using the

key while creating your renderer.

import { createRenderer } from 'fela'
const config = {
// It must be an array to be able
// to pass multiple enhancers
enhancers: [
/* your enhancers */
const renderer = createRenderer(config)

Official Enhancers

Fela already ships with a set of useful enhancers. Check out Introduction - Ecosystem for more information.

Note: Official enhancers are wrapped by a configuration function by default.

Custom Enhancers

Let's imagine, we would like to add a function to the

that returns the number of unique CSS classes rendered.
We can get that number by counting all cache entries with a


function getClassesCount(renderer) {
const rules = renderer.cache.filter((entry) => entry.type === 'RULE')
return rules.length

We can now utilize this little helper to write our enhancer.


import getClassesCount from './getClassesCount'
export default function classesCount(renderer) {
renderer.getClassesCount = () => getClassesCount(renderer)
return renderer



import { createRenderer } from 'fela'
import classesCount from './classesCount'
const renderer = createRenderer({
enhancers: [classesCount],
renderer.renderRule(() => ({ color: 'red' }))
// => 1