JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="http://sources.disruptive-innovations.com/jscssp/trunk/cssParser.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/overcast/jquery-ui.css">
<textarea>

    body {
    background:red;
    background: -moz-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black); 
    
    }

</textarea>
<button>Change</button>
<style id='custom'>


</style>

CSS

textarea { width: 96%; margin:0 auto; height: 300px;}

JavaScript

$(function() {
   
    var stylesheet = $("#custom")[0];
    var input = $("textarea");
    var button = $("button");
    
    button.click(function() {
        parseInput();
    });
    
    parseInput();
        
    function parseInput() {
        
        var text = input.val();
        
        text = text.replace("-webkit-linear-gradient", "-moz-linear-gradient");
        var parser = new CSSParser();
        var sheet = parser.parse(text , false, true);
        
        if (sheet) {
            sheet.resolveVariables("screen");
            text = sheet.cssText();
        }
        console.log(sheet);
        setCssText(stylesheet, text); 

    }
});


function setCssText(stylesheet, text) {
    
    
    if ($.browser.msie) {
        stylesheet.styleSheet.cssText = text;
    }
    else {
        stylesheet.innerHTML = text;
    }
};