JSFiddle - React, Tailwind, and code Playground

by g30rg3

HTML

<div class="red"></div>

JavaScript

$(function () {

    var styleSheet = $("<style />").attr('id', 'PageStyle');
    $('html > head').append(styleSheet);

    addStylesheetRules([
        ['.red', ['background-color', 'red'],
            ['width', '100px'],
            ['height', '100px']
        ]
    ]);
    
    
    var mods = {'.red': {'background-color': 'green'}};
    
    var newMods = $.map(mods,function(v,k){
        return [ k, $.map(v,function(vv,kk){
            return [kk,vv];
        })];
    });
    
    modifyStylesheetRules([newMods]);
    
    if(0){
        alert('-1')
    }else{
         alert('not -1')   
    }
    
});

function addStylesheetRules(rules) {
    var styleEl = document.getElementById('PageStyle'),
        styleSheet;

    // Apparently some version of Safari needs the following line? I dunno.
    //styleEl.appendChild(document.createTextNode(''));

    // Append style element to head
    //document.head.appendChild(styleEl);

    // Grab style sheet
    styleSheet = styleEl.sheet;

    for (var i = 0, rl = rules.length; i < rl; i++) {
        var j = 1,
            rule = rules[i],
            selector = rules[i][0],
            propStr = '';
        // If the second argument of a rule is an array of arrays, correct our variables.
        if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') {
            rule = rule[1];
            j = 0;
        }

        for (var pl = rule.length; j < pl; j++) {
            var prop = rule[j];
            propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
        }

        // Insert CSS Rule
        styleSheet.insertRule(selector + '{' + propStr + '}', styleSheet.cssRules.length);
    }
}

function modifyStylesheetRules(rules) {
    var styleEl = document.getElementById('PageStyle'),
        styleSheet,
        cssRules;

    //if it doesnt exist for some reason, create it
    if (!styleEl) {
        styleEl = this._addStyleSheet()[0];
    }

    // Grab style sheet
    styleSheet =...