basic CSS lexer in pure JS

by Derek Anderson

HTML

<style type="text/shikiri">
body, div {
    color: red;
    color: yellow;
    div.blue{
        color: blue;
        div.green {
            color: green;
        }
    }
}
div.red {
        background: red;
    }
}
</style>


<span id="css">
</span>

JavaScript

(function(){
    var tags = document.getElementsByTagName('style');
    var out = document.getElementById("css");
    var outObj = {};
    var outCollection = [];
    for (var i=0; i < tags.length; i++) {
        if(tags[i].getAttribute('type') == "text/shikiri"){
            var token = tags[i].innerHTML.split(/[\{}]+/);
            //console.log(token);
            for (var n=0; n < token.length; n++) {
                var token_ = trim(token[n]);
                if(token_.length == 0){
                    //new grouping of css
                    out.innerHTML += "";
                }else{
                    //nested css
                    //if a colon is found then it is a property
                    if(token_.trim().indexOf(';') > 0){
                        var inner = token_.trim().split(";");
                        for (var x=0; x < inner.length; x++) {
                            if(inner[x].indexOf(':') >0){ 
                                var props = inner[x].split(':');
                                var name = props[0];
                                var value = props[1].trim();
                                outObj[name] = value;
                            }else{
                              console.log('inner selector', inner[x]);
                            }
                        }
                        out.innerHTML += "inner prop: " + token_.trim() + "<br>"; 
                    }else {
                        outObj = {'selector':token_.trim()};
                        outCollection.push(outObj);
                        //otherwise it is a selector token
                        out.innerHTML += "new selector:" + token_.trim() + "<br>"; 
                    }
                    
                }
            }
        };
    }
    
    console.log(outCollection);
    // remove multiple, leading or trailing spaces 
function trim(s) { 
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," "); 
    s =...