nano-css

Tiny 5^th 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 <style> 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.

Reference

• 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