Skip to content

Addons.md

Latest commit

 

History

History
62 lines (50 loc) · 2.96 KB

Addons.md

File metadata and controls

62 lines (50 loc) · 2.96 KB

Addons

nano-css comes only with a single put() addon pre-installed. However, it has plenty more to chose from. Below is a list of addons shipped with nano-css.

  • put() — injects CSS styles given a selector
  • rule() — injects CSS styles and returns a generated selector
  • drule() — like rule(), but allows to add on-the-fly overrides
  • sheet() — collection of rule()s, injects CSS styles only when used
  • dsheet() — like sheet(), but allows to add on-the-fly overrides
  • jsx() — creates styling blocks for virtual DOM libraries
  • useStyles() — adds styles as a second argument for your component
  • withStyles() — injects styles prop into your component
  • decorator — provides @css decorator for styling stateful React components
  • component — provides React Component class to inherit from
  • style() — allows you to create styled components
  • styled()() — better syntax for styled components
  • hyperstyle() — creates styled hyperscript h function
  • stable — generates consistent class names
  • atoms — CSS shorthands for better DX
  • nesting — better nesting features
  • keyframes() — adds @keyframes support
  • hydrate — adds support for re-hydration on client side
  • prefixer — auto-prefixes your styles with correct vendor prefixes
  • stylis — write CSS as strings
  • unitless — automatically adds px to styles
  • !important — adds !important to all declarations
  • :global — allows emitting global styles
  • animate/* — collection of animation styles
  • reset/* — collection of CSS resets
  • reset-font — global styles for better font
  • googleFont() — loads custom fonts from Google Fonts

Addon Installation

All addons are in the nano-css/addon/ folder and are exported as an addon named export. Addon is simply a function that receives nano-css renderer object as a single argument.

When these docs mention that you need to install an addon, say xxx, you simply import it from the addon folder and apply to the nano renderer object:

import {addon as addonXXX} from 'nano-css/addon/xxx';

addonXXX(nano);

nano.xxx(/* ... */);

Here we install rule() and atoms addons:

import {create} from 'nano-css';
import {addon as addonRule} from 'nano-css/addon/rule';
import {addon as addonAtoms} from 'nano-css/addon/atoms';

const nano = create();

addonRule(nano);
addonAtoms(nano);
⚡