drule() Addon

March 18, 2018 · View on GitHub

drule() (or Dynamic Rule) interface is similar to rule() interface, but also allows you to create CSS dynamically inside your render function, making it a 5^th generation interface.

const css = {
    border: '1px solid #888',
    color: '#888',
};
const classNames = nano.drule(css);

Static use case is similar to rule() interface:

<button className={classNames()}>Click me!</button>
<button className={classNames.toString()}>Click me!</button>
<button className={'' + classNames}>Click me!</button>
<button className={String(classNames)}>Click me!</button>

But drule() also allows you to add custom styling overrides on the fly.

<button className={classNames({color: 'red'})}>Click me!</button>

Just like with rule() interface you can specify a semantic name.

const classNames = drule(css, 'MyButton');

Example

Below is an example of a React button component that changes its color based on primary prop.

const classNames = drule({
    border: '1px solid #888',
    color: '#fff',
});

const Button = ({children, primary}) =>
    <button className={classNames({
        background: primary ? 'blue' : 'grey'
    })}>
        {children}
    </button>;

Installation

To use, install drule addon, which depends on rule and cache addons.

import {create} from 'nano-css';
import {addon as addonCache} from 'nano-css/addon/cache';
import {addon as addonRule} from 'nano-css/addon/rule';
import {addon as addonDrule} from 'nano-css/addon/drule';

const nano = create();
addonCache(nano);
addonRule(nano);
addonDrule(nano);
const {rule, drule} = nano;

export {
    rule,
    drule
}