Home

Awesome

scope-styles

build status coverage status dependencies status code climate gpa

scope-styles is a utility that converts inline style objects into scoped css, which can be either embedded into the page or extracted into an external css bundle. Works with Radium-compatibile inline style objects. Pairs well with inline-style-prefixer and hyperstyles.

usage

styles.js

module.exports = styles;

var styles = {
  foo: {
    fontWeight: 'bold',
    fontSize: '15px'
  },
  bar: {
    color: 'red',
    backgroundColor: '#ccc',
    transition: 'all 500ms ease',
    ':hover': {
      color: 'green'
    },
    '@media (max-width: 600px)': {
      color: 'blue'
    }
  }
};

component.js

var scopeStyles = require('scope-styles');
var insertCss = require('insert-css');

var styles = require('./styles');
var scoped = scopeStyles(styles);

// create elements
var div1 = document.createElement('div');
div1.className = scoped.foo;
var div2 = document.createElement('div');
div2.className = scoped.bar;

// inject scoped css into page
var css = scopeStyles.getCss(scoped);
insertCss(css);

// render
document.body.appendChild(div1);
document.body.appendChild(div2);

rendered output

<html>
  <head>
    <style>
      .foo_1ctUW {
        font-weight: bold;
        font-size: 15px
      }
      .bar_1ctUW {
        color: red;
        background-color: #ccc;
        transition: all 500ms ease
      }
      .bar_1ctUW:hover {
        color: green
      }
      @media (max-width: 600px) {
      .bar_1ctUW {
        color: blue
      }
      }
    </style>
  </head>
  <body>
    <div class="foo_1ctUW"></div>
    <div class="bar_1ctUW"></div>
  </body>
</html>

see also