JSFiddle - React, Tailwind, and code Playground

by arunzo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<textarea id="input"></textarea>
<input type="button" id="Process" value="Process"></input>
<textarea id="output"></textarea>

CSS

textarea {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    margin: 10px auto;
}
#Process {
    background-color: #C6EAFA;
    border-radius: 3px;
    border-style: outset;
    padding: 10px;
    margin: 0 auto;
    width: 150px;
    display: block;
}

JavaScript

var $inputCSS = $("#input");
var $outputCSS = $("#output");
var $process = $("#Process");

var readRegEx = function (str, re) {
    var m = [],
        n = [];
    while ((m = re.exec(str)) !== null) {
        if (m.index === re.lastIndex) {
            re.lastIndex++;
        }
        n.push({
            "mq": m[1],"bd": m[2]
        });
    }
    return n;
};

$process.click(function () {
    var mediaQueries = readRegEx($inputCSS.val(), /(@media.[^{]+)\{([\s\S]+?}\s*)}/g);
    var res = _.chain(mediaQueries)
        .groupBy("mq")
        .map(function (value, key) {
        return {
            mq: key,
            bd: _.pluck(value, "bd")
        }
    })
        .value();

    var jsm = $(res).map(function () {
        var str;
        str = this.mq + "{";
        str = str + this.bd.join(" ");
        str = str + "}";
        return str;
    }).get().join('\n');

    $outputCSS.val(jsm);

});