sty

stylematic

💫 A comprehensive solution for inline styles

Showing:

Popularity

Downloads/wk

1.9K

GitHub Stars

16

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

3

Size (min+gzip)

4.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100