❤
npm
Sign UpSign In

stylematic

1.3.3 • Public • Published

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> 

Readme

Keywords

none

Package Sidebar

Install

npm i stylematic

Repository

github.com/rtsao/stylematic

Homepage

github.com/rtsao/stylematic

Weekly Downloads

3

Version

1.3.3

License

MIT

Last publish

Collaborators

  • rtsao
Try on RunKit
Report malware