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.
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>