JSFiddle - React, Tailwind, and code Playground

by mynameiswilson

HTML

<script src="http://sources.disruptive-innovations.com/jscssp/trunk/cssParser.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div id="foo"></div>
<div id="bar"></div>


<div id="style1" style="display:none">
#foo { display: block; height: 50px; width: 50px; background: #f00; 
}

#bar {
display: block; height: 50px; width: 50px; background: #0f0; 
}
</div>
<div id="style2" style="display:none">

    #foo { 
        display: block; 
        height: 25px; 
        width: 25px; 
        background: #ff0; 
        opacity: 1; 
        position: absolute;
        top: 75px;
        left: 75px;
        z-index:99;
    }

    #bar {
        display: block; 
        height: 50px; 
        width: 50px; 
        background: #0f0; 
        opacity: 1; 
        position: absolute;
        top: 50px;
        left: 50px;   

    }

</div>
<div id="style3" style="display:none">
    #foo { 
        display: block; 
        height: 60px; 
        width: 60px; 
        background: #ff0; 
        opacity: 1; 
        position: absolute; 
        top: 150px; 
        left: 150px;
        border: 3px dashed #0f0;
        border-radius: 10px;
    }

    #bar {
        display: block; 
        height: 50px; 
        width: 50px; 
        background: #b4b4b4; 
        opacity: 1; 
        
    
    }
    
    #baz { 
        display: block; 
        border: 3px dashed #0f0;
        width: 30px;
        height: 30px;
    }
</div>
<div id="buttons" style="position: absolute; bottom: 0">
    <button data-style="#style1">STYLE 1</button>
    <button data-style="#style2" data-wrapper="@media(min-width:1023px) { %s}">STYLE 2</button>
    <button data-style="#style3">STYLE 3</button>
</div>

JavaScript

$(document).ready(function() {
    $('head').append(
        $("<style>")
        .attr('id','styleTween')
        .html($('#style1').html())
        );
    
    $('#buttons button').click( function() {    
        switch_styles( $($(this).data("style")).html(), ($(this).data("wrapper"))?$(this).data("wrapper"):'' );
    });
});

//pull selectors from a JSCSSP parser result
function get_selectors(foo) {
    if (typeof foo == "object" && foo.hasOwnProperty("cssRules") ) {
        var selectors = [];
        for (var h=0;h<foo.cssRules.length;h++) {
            var r = foo.cssRules[h];
            selectors.push(r.mSelectorText);
        }
        selectors.sort();
        return selectors;
    } else return [];
 
}

function switch_styles(new_style_css,wrapper) {

    var parser = new CSSParser();
    var current_style = parser.parse($('#styleTween').html());
    var new_style = parser.parse(new_style_css);
    var old_style_selectors = [];
    var new_style_selectors = [];
    var common_selectors = [];
    var to_be_animated = [];
    var selectors_affected = [];
    
    console.log(new_style);

    if (current_style.cssRules[0].error == "INVALID") { return; }    
    if (new_style.cssRules[0].error == "INVALID") { return; }

    if (current_style && new_style) {
        
        old_style_selectors = get_selectors(current_style);
        new_style_selectors = get_selectors(new_style);
    
        
        //find declarations (#foo, #bar, .wamp) that we need to deal with
        common_selectors = intersection(old_style_selectors, new_style_selectors);

        //find style rules in the NEW style that we need to change, from this list of common declarations            
        var declarations_to_be_animated = new_style.cssRules.filter(function(val) { 
            return 0 != in_array(val.mSelectorText, common_selectors);
        });    


        for (var h=0;h<declarations_to_be_animated.length;h++) {
            var s = declarations_to_be_animated[h];
     ...