Addons

nano-css ships with a single pre-installed addon (put()). All other features are provided through addons. Each addon is a function that extends the renderer.

Installation Pattern

All addons are in nano-css/addon/ and export an addon named function:


import { addon as addonRule } from 'nano-css/addon/rule';
 
addonRule(nano);
nano.rule({ color: 'red' });

Available Addons

Core API

Addon	Description
`put()`	Inject CSS by selector — pre-installed
`rule()`	Generate class names from CSS objects
`drule()`	Dynamic rules with runtime overrides
`sheet()`	Lazy collection of rules
`dsheet()`	Dynamic sheets with runtime overrides

Styling Components

Addon	Description
`jsx()`	Styled components for virtual DOM
`style()`	Styled components with dynamic templates
`styled()()`	Familiar styled-components API
`Component`	React Component base class
`@css`	Decorator for class components
`useStyles()`	Styles as second component argument
`withStyles()`	HOC that injects styles prop
`hyperstyle()`	Styled hyperscript function

Utilities

Addon	Description
`atoms`	CSS property shorthands
`emmet`	Emmet-style abbreviations
`nesting`	Advanced nesting with `&`
`keyframes()`	`@keyframes` support
`prefixer`	Vendor prefix auto-detection
`stable`	Deterministic class name hashing
`unitless`	Auto-add `px` to numeric values
`!important`	Add `!important` to all declarations
`:global`	Emit global styles
`array`	Multiple values for declarations
`snake`	Method chaining for CSS objects
`tachyons`	Tachyons-style utilities
`stylis`	Write CSS as strings
`.units`	Unit helper functions
`sourcemaps`	CSS source maps in dev

Advanced

Addon	Description
`hydrate()`	Client-side CSS re-hydration
`virtual`	Atomic CSS splitting
`cssom`	CSSOM rule creation
`vcssom`	Virtual CSSOM diffing
`spread()`	Data attribute selectors
`extract`	Build-time CSS extraction
`limit`	Server-side size limit
`amp`	AMP compatibility
`rtl`	Right-to-left style flipping
`googleFont()`	Load Google Fonts
`animate/*`	Animation presets
`reset/*`	CSS reset collections
`reset-font`	Font reset styles