Awesome

stylematic

A comprehensive solution for inline styles

Features

Automatic vendor prefixing 1
Support for value fallbacks 2
Support for pseudo selectors and media queries 2
Automatic generation of scoped CSS, hashed class names 2
Automatic injection of scoped CSS into document <head> with buffering and caching 3
Support for extraction of CSS on server for server-rendering 4
Lightweight, only ~5KB bundled, minified, and gzipped

<hr />

Quick example

const stylematic = require('stylematic');

const {passthrough, className} = stylematic({
  color: 'red',
  background: 'linear-gradient(#fff, #eee)',
  ':hover': {
    color: ['rgba(0,75,255,0.8)', 'blue']
  }
});

console.log(passthrough);
// => {color: 'red'}

console.log(className);
// => '_style_4e1hWd'

Automatically injected into document <head>

<style data-styletron>
._style_4e1hWd {
  background: -webkit-linear-gradient(#fff, #eee) !important;
  background: -moz-linear-gradient(#fff, #eee) !important;
  background: linear-gradient(#fff, #eee) !important
}
._style_4e1hWd:hover {
  color: blue !important;
  color: rgba(0,75,255,0.8) !important
}
</style>