scope-styles
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.
usage
styles.js
moduleexports = 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 = ;var insertCss = ; var styles = ;var scoped = ; // create elementsvar div1 = document;div1className = scopedfoo;var div2 = document;div2className = scopedbar; // inject scoped css into pagevar css = scopeStyles;; // renderdocumentbody;documentbody;
rendered output