Smallest 5th gen CSS-in-JS library
npm install nano-css[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
__Tiny 5th generation CSS-in-JS library__ that you can actually use in production.
__Motto of nano-css is simple__: create the smallest possible CSS-in-JS library and provide all features of any other library through addons.
- __Only 0.5 Kb__ in base configuration, e.g. styled-components is 15.1Kb
- __Library-agnostic__ — use it standalone, with React, Preact, Vue.js, or any other library
- __Isomorphic__ — render on server and browser, generates stable class names, and re-hydrates
- __Performant__ — simply the fastest library; does not create wrapper components, does not use inline styles or inline elements, but caches all styles for re-use and injects CSS using .insertRule() for performance
- __@media queries__ and __animation @keyframes__ are supported
- __Auto-prefixes__ your styles
- __Extract CSS__ into external style sheet
- __Public domain__ — Unlicense license
> For pre-configured simple-to-use package see nano-theme, which builds on top of nano-css.
- Installation
- Addons
- put() — demo!
- rule() — demo!
- drule() — demo!
- sheet() — demo!
- dsheet() — demo!
- jsx() — demo!
- useStyles() — demo!
- withStyles() — demo!
- decorator — demo № 1 and demo № 2
- component — demo!
- style() — demo!
- styled()() — demo!
- hyperstyle() — demo!
- stable
- atoms — demo!
- emmet
- nesting
- keyframes()
- hydrate()
- prefixer
- stylis
- unitless
- !important
- :global
- animate/*
- reset/*
- reset-font
- googleFont()
- limit
- amp
- virtual
- spread
- array
- snake — demo!
- tachyons
- rtl
- extract
- sourcemaps
- .units
- cssom
- vcssom
- Presets
- Server-side rendering
[npm-url]: https://www.npmjs.com/package/nano-css
[npm-badge]: https://img.shields.io/npm/v/nano-css.svg
[travis-url]: https://travis-ci.org/streamich/nano-css
[travis-badge]: https://travis-ci.org/streamich/nano-css.svg?branch=master