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-componentsis 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
<style>elements, but caches all styles for re-use and injects CSS using.insertRule()for performance -
@mediaqueries and animation@keyframesare 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 ofnano-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! emmetnestingkeyframes()hydrate()prefixerstylisunitless!important:globalanimate/*reset/*reset-fontgoogleFont()limitampvirtualspreadarray-
snake— demo! tachyonsrtlextractsourcemaps.unitscssomvcssom
-
- Presets
- Server-side rendering