fela-monolithic
v12.2.1
Published
Fela enhancer for having monolithic classnames
Downloads
59,518
Readme
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.