JSFiddle - React, Tailwind, and code Playground

HTML

<textarea name="in" id="textCSS" cols="30" rows="10"></textarea>
<button id="com">Compress</button>
<textarea name="out" id="textCSSO" cols="30" rows="10"></textarea>

CSS

.column, .columns {
      position: relative;
      padding-left: 0.9375em;
      padding-right: 0.9375em;
      float: left;
  }
  .small-1 {
      width: 8.33333%;
      position: relative;
  }

JavaScript

$('#com').on('click', function () {
    debugger;
    var t = $('#textCSS').val(),
        reg = /\{[^\}\{]*\}/gm;
    t = t.replace(reg, function (str) {
        alert('hi');
        str = str.replace(/[\{\}]/g, "");
        str = str.split(';');
        for (var i = 0, len = str.length; i <= len; i++) {

            if (str[i] === /[^\s]/g) {
                alert('hi');
            }


        }
        console.log(str);
        /* if (string.length - 1 === "" || string[0 ) {
            string.splice(string.length - 1);
        }*/
        return '{' + str.sort().join(';') + ';\n}';
    });
    alert(t);
    $('#textCSSO').val(t);
});

// .split(';').sort().join(';')

/*$('#com').on('click', function() {
   var t =  $('#textCSS').val(),
      reg = /{([\s\S])*?}/g,
       s = t.match(reg);
    for(var i=0; i<s.length; i++) {
        t = t.replace(reg,  s[i].replace(/[\{\}]/g, "").split(';').sort().join(';') );
    }
    $('#textCSSO').val(t);
       
});*/