fela-monolithic

fela-monolithic

Warning: This plugin is not meant to be used in production. We don't monitor its performance and also can't make sure that it works with every plugin. It was initially build for better developer experience, but since Chrome fixed the issue with debugging styles rendered with insertRule, we no longer need it for that regard. The only use case for which we actively recommend this plugin is snapshot testing.

The monolithic enhancer will use unique class names instead of atomic ones. These generated class names are not re-usable like the atomic design but allows you to debug and modify styles with ease. Every ruleset will have it's own unique class - this means that a new class will be generated if you are using props and they change. If you want to fix the class name, you can add property className into your rule set. This can be useful if you want to generate an external stylesheet that's human readable, re-usable and can be used on non-JS projects.

Installation

yarn add fela-monolithic

You may alternatively use npm i --save fela-monolithic.

Usage

import { createRenderer } from 'fela'
import monolithic from 'fela-monolithic'

const renderer = createRenderer({
  enhancers: [monolithic()],
})

const rule = () => ({
  className: 'custom',
  color: 'red',
})

renderer.renderRule(rule)

outputs

.custom {
  color: red;
}

if className property is not used, the output will be

.137u7ef {
  color: red;
}

137u7ef is a hash based on rule properties (color: red in this case).

Configuration

Options

Option	Value	Default	Description
prettySelectors	(boolean)	false	use pretty selectors in development

If you are using prettySelectors with plain Fela rules it will add the rule.name to the className e.g.

Note: anonymous functions will still only use the hash!

import { createRenderer } from 'fela'
import monolithic from 'fela-monolithic'

const renderer = createRenderer({
  enhancers: [monolithic({ prettySelectors: true })],
})

const redText = () => ({
  color: 'red',
})

renderer.renderRule(redText) // => redText_137u7ef

.redText_137u7ef {
  color: red;
}

If you use it together with createComponent or connect from react-fela, preact-fela or inferno-fela, it will also add the component type or displayName to the rule. e.g.

import { createComponent } from 'react-fela'

const Button = () => ({
  color: 'red'
})

const Comp = createComponent(Button)

<Button />
// => <div class="Button_div__137u7ef"></div>

const ExtendedButton = () => ({
  backgroundColor: 'blue'
})

const Comp2 = createComponent(ExtendedButton, Button)

<Comp2 />
// => <div class="ExtendedButton_Button__xxxxx"></div>

License

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