JSFiddle - React, Tailwind, and code Playground

by tmcw

HTML

<!DOCTYPE html>
<html><head></head>
    <body>
    </body>
</html>

JavaScript

var surrogate = document.createElement('div');
var sel = '.foo';

var styles = {
    '.foo': function(el) {
        el.style.fontSize = '40px';
    },
    '.bar': {
        color: 'red'
    }
};

function applyStyle(s, n) {
    for (var property in s) {
        n.style[property] = s[property];
    }
}

var observer = new WebKitMutationObserver(function(mutations, observer) {
    mutations.forEach(function(m) {
        var i = -1, n;
        while (n = m.addedNodes[++i]) {
            surrogate.innerHTML = n.outerHTML;
            for (s in styles) {
                if (surrogate.querySelector(s)) {
                    if (typeof styles[s] === 'function') styles[s](n);
                    else applyStyle(styles[s], n);
                }
            }
        }
    });
});

observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true
});

var d = document.body.appendChild(document.createElement('div'));
d.innerHTML = 'This matches div.foo and is restyled';
d.className = 'foo';


var d = document.body.appendChild(document.createElement('div'));
d.innerHTML = 'This does not match div.foo';
d.className = 'fo';

var d = document.body.appendChild(document.createElement('div'));
d.innerHTML = 'This matches bar and gets styled with an object';
d.className = 'bar';