SOURCE

var lCSSCoder = {
   format: function (s) {//格式化代码
        s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
        s = s.replace(/;\s*;/g, ";"); //清除连续分号
        s = s.replace(/\,[\s\.\#\d]*{/g, "{");
        s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
        s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
        s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
        return s;
    },
  packAdv: function(s) {
    s = s.replace(/\/\*(.|\n)*?\*\//g, "");
    s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
    s = s.replace(/\,[\s\.\#\d]*\{/g, "{");
    s = s.replace(/;\s*;/g, ";");
    s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);
    return (s == null) ? "": s[1];
  },
  pack: function(s) {
    s = s.replace(/\/\*(.|\n)*?\*\//g, "");
    s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
    s = s.replace(/\,[\s\.\#\d]*\{/g, "{");
    s = s.replace(/;\s*;/g, ";");
    s = s.replace(/;\s*}/g, "}");
    s = s.replace(/([^\s])\{([^\s])/g, "$1{$2");
    s = s.replace(/([^\s])\}([^\n]s*)/g, "$1}\n$2");
    return s;
  }
};

function CSS(s) {
  document.getElementById("content").value = lCSSCoder[s](document.getElementById("content").value);
}
function Empty() {
  document.getElementById('content').value = '';
  document.getElementById('content').select();
}

function GetFocus() {
  document.getElementById('content').focus();
}

<div class="panel-body">
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-primary" onclick="CSS('packAdv');">
      完全压缩
    </button>
    <button type="button" class="btn btn-primary" onclick="CSS('pack');">
      普通压缩
    </button>
    <button type="button" class="btn btn-primary" onclick="CSS('format');">
      格式化
    </button>
    <button type="button" class="btn btn-danger" onclick="Empty();">
      清空结果
    </button>
  </div>
  <textarea id="content" name="RawJson" class="json_input" rows="16" style="width: 100%;margin-top:10px;"
  spellcheck="false" placeholder="请输入 CSS 代码">
  </textarea>
</div>

{
   width: 100%;
   margin-top: 10px
 }