JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/lhorie/mithril.js/next/mithril.min.js"></script>
<script src="https://rawgit.com/pygy/j2c/next/dist/j2c.global.js"></script>
JavaScript
//- lib -------------------
var styles = '';
var liveStyles = '';
var styler = {
liveUpdate: function(style) {
var scopedStyle = j2c.sheet(style);
liveStyles += scopedStyle;
return scopedStyle;
},
attach: function(style) {
var scopedStyle = j2c.sheet(style);
styles += scopedStyle;
return scopedStyle;
},
view: function() {
var el = [m('style', styles),m('style', liveStyles)];
liveStyles = '';
return el;
}
};
//- some module -------------------
var cls = styler.attach({
'.foo': {
background: 'blue'
}
});
function someRandomView() {
return m('span.' + cls.foo, 'Some random content');
}
function someDynamiclyStlyedView(scope) {
var cls = styler.liveUpdate({
'.bar': { background: scope.background }
});
return m('span.' + cls.bar, 'Some blinky stuff content');
}
//- main view -------------------
m.mount(document, {
controller: function() {
var scope = {
background: 'red'
};
setInterval(function() {
scope.background = scope.background === 'red' ? 'green' : 'red';
m.redraw();
}, 1000);
return scope;
},
view: function(scope) {
return [
someRandomView(),
someDynamiclyStlyedView(scope),
styler.view()
];
}
});