stylematic

A comprehensive solution for inline styles

Usage no npm install needed!

<script type="module">
  import stylematic from 'https://cdn.skypack.dev/stylematic';
</script>

README

stylematic

build status dependencies status npm version

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
  1. inline-style-prefix-all
  2. epistyle
  3. styletron
  4. styletron-server

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>