A common pattern when styling elements is to have some base styles which get applied to every instance as well as some extended styles which get added based on some condition. Just concatenating classNames may lead to specificity problems as the last rendered rule always wins.
To solve this issue,

allows you to compose multiple rules into a single super selector.

Combining rules actually is the best practice in terms of style composition as it prevents property specificity issues by default.


Accepts a list of Rules.


(Function) A super selector which composes all

from left to right.


import { combineRules } from 'fela'
const renderer = createRenderer()
const rule = props => ({
fontSize: props.fontSize
color: 'red'
const anotherRule = props => ({
color: 'blue'
const superRule = combineRules(rule, anotherRule)
renderer.renderRule(rule, { fontSize: '12px '}) // => a b
renderer.renderRule(anotherRule) // => c
renderer.renderRule(superRule, { fontSize: '12px' }) // => a c

The following CSS would be rendered:

.a {
font-size: 12px;
.b {
color: red;
.c {
color: blue;