💫 A comprehensive solution for inline styles
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.travis.yml
LICENSE
README.md
css.js
index.js
package.json
reverse.js

README.md

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>