JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<div id="box">
<pre>
#overlayBuilderTour{width:100%;height:100%;position:absolute;top:0;left:0;z-index:100000;display:none;}
#mainTourOverlay img{position:absolute;display:none;}
#mainTourOverlay #step1{top:90px;left:120px;}
#mainTourOverlay #step2{top:320px;left:260px;}
#mainTourOverlay #step3{top:300px;left:140px;}
#mainTourOverlay #step4{top:100px;left:299px;}
#mainTourOverlay #step5{top:20px;left:75px;}
</pre>
</div>

<div id="canvas">
<pre></pre>
</div>

CSS

#box {
    display:none;
}

JavaScript

var content = $('#box pre').html();

var contentArr = content.match(/{([^}]*)}/gi);
var parentArr = content.match(/([\w\s#*.*,*]*[\s]*){/gi);

contentArr = _.map(contentArr,function(content){
    return content.replace(/{|}/gi,"");
})
    
    parentArr = _.map(parentArr,function(content){
    return content.replace(/{/gi,"");
    })
        

var content1 = contentArr[0].split(';');

_.each(contentArr,function(content,index){
    var content1 = splitProperties(content);
    var marginProp = findMargin(content1);
    content1 = _.without(content1,marginProp);
    var sizeProp = findSize(content1);
    content1 = _.without(content1,sizeProp);
    var borderProp = findBorder(content1);
    content1 = _.without(content1,borderProp);
    var positionProp = findPosition(content1);
    content1 = _.without(content1,positionProp);
    
    sizeProp.push(positionProp);
    sizeProp.push(marginProp);
    sizeProp.push(borderProp);
    
    var readyArr = _.flatten(sizeProp);
    readyArr = (readyArr.length) ? readyArr.join(";\n")+";\n" : "";
    content1 = (content1.length) ? content1.join(";\n")+";\n" : "";
    var parent = getParent(index);
    var str = parent +" {\n"+ readyArr + content1  + "}\n\n";
    $('#canvas pre').append(str);
})

    function getParent(index){
        var parent = parentArr[index].replace(/(^[\s]+)/gi,"");
        c(parent);        
        return parent;            
    }
    
function splitProperties(arr){
    arr = arr.split(';');
    var arr1 = _.map(arr,function(num){
        num = num.replace(/(^[\s]+)/gi,"");
        var num1 = '    ' + num;
        return num1;
    });
    arr1.pop();
    return arr1;
}

function findSize(arr){
    var tempArr = _.filter(arr,function(num,index){
        return (/width/gi).test(num) || (/height/gi).test(num);
    });
    
    return tempArr;
}
    
function findBorder(arr){
    var tempArr = _.filter(arr,function(num,index){
        return (/border/gi).test(num);
    });
    
    return tempArr;
}
   ...