combineRules

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,

combineRules
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.

Arguments

Accepts a list of Rules.

Returns

(Function) A super selector which composes all

rules
from left to right.

Example

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;
}