Skip to content

Latest commit

 

History

History
73 lines (61 loc) · 3.78 KB

Addons.md

File metadata and controls

73 lines (61 loc) · 3.78 KB
Raw

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, lazy 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
  • limit — limits server-side style sheet size
  • amp — displays warnings and cleans up styles for AMP apps
  • virtual — virtual CSS renderer, splits css rules in atomic declarations
  • spread — returns an object with data attributes used as a selector
  • array — use arrays to specify multiple values
  • snake — chain styling rules
  • tachyons — use Tachyons for rule chaining
  • rtl — flips all styles RTL (right-to-left)
  • extract — allows extraction of CSS into external *.css style sheet
  • sourcemaps — generates source maps in dev mode
  • .units — CSS units as JavaScript functions

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