rule.md

rule() Addon

rule() is a wrapper around put() interface; it is a 3^rd generation interface. You can find this interface in many other CSS-in-JS libraries, it simply returns a list of class names given a CSS-like object:

const css = {
    color: 'tomato',
    ':hover': {
        color: 'blue',
    },
};
const className = nano.rule(css);

<div className={className}>Hello world!</div>

---

Nota Bene

The code above will automatically generate predictable class names on the server and browser. However, by default it uses unstable JSON stringify, which is fine in most cases if your app runs only in a browser, however, if you render on the server side and want to re-hydrate your CSS, you should use stable addon, which makes sure that class names are the same between different JavaScript environments.

---

Optionally, using the second argument, you can specify a name or your style explicitly for performance and semantic reasons.

const className = rule(css, 'RedText');

P.S.

If you specify all style names explicitly, you don't need to install stable addon.

Leading Space

nano-css always returns class names with a leading space, so you can concatenate those with other classes.

const otherClass = 'foo';
const className = rule(css);

<div className={otherClass + className}>Hello world!</div>

This results in:

<div class="foo _xuhuadsf">Hello world!</div>

Installation

Simply add the the rule addon.

import {create} from 'nano-css';
import {addon} from 'nano-css/addon/rule';

const nano = create();
addon(nano);
const {rule} = nano;

export {
    rule
}

Read more about the Addon Installation.