A comprehensive solution for inline styles
- 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
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>