sheet.md

sheet() Addon

sheet() interface is similar to rule() interface, but allows you to specify multiple rules at once.

const cssMap = {
    input: {
        border: '1px solid grey',
    },
    button: {
        border: '1px solid red',
        color: 'red',
    }
};
const styles = sheet(cssMap);

<input className={styles.input}>
<button className={styles.button}>Click me!</button>

---

Nota Bene

Unlike styles created using rule() interface, the styles created with sheet() interface are not injected into the DOM when they are created. The injection is postponed until the style is accessed for the first time.

// CSS in not injected yet.
const inputClassName = styles.input; // Now it is injected.

This allows to insert styles just-in-time and only if they are actually used.

---

For semantic and performance reasons you can optionally specify a name for your sheet.

const styles = sheet(cssMap, 'ContactForm');

This way your class names will look semantic:

console.log(styles.input); // pfx-ContactForm-input

Installation

Simply install rule and sheet addons.

Read more about the Addon Installation.