, , , , ,

Simple way to add CSS minifier to an websites.


Here the codes:

HTML
<div class="next-wrap">
  <div id="cssminifier">
    <span class="clear"></span>
    <textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
    <div class="button-group">
      <div class="box">
        <input class="opt1" id="stripAllComment" type="checkbox" />
        <label for="stripAllComment">Strip all comments</label>
        <input class="opt2" id="superCompact" type="checkbox" />
        <label for="superCompact">Super compact</label>
        <input class="opt3" id="betterIndentation" type="checkbox" />
        <label for="betterIndentation">Keep indentation</label>
        <input checked="" class="opt4" id="keepLastComma" type="checkbox" />
        <label for="keepLastComma">Remove the last semicolon</label>
      </div>
      <button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
      <button onclick="clearField(&quot;cssField&quot;);">Clear Field</button>
      <button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
    </div>
    <div class="clear">
    </div>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  background: #2ecc71;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.next-wrap {
  position: relative;
  max-width: 840px;
  margin: 8% auto;
  background: #ecf0f1;
  color: #666;
  font-size: 1em;
  line-height: normal;
  border-radius: 5px;
  overflow: hidden;
  padding: 20px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

#cssminifier {
  overflow: hidden;
  background: #ecf0f1;
  position: relative;
  display: block;
  clear: both;
  border-radius: 5px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.05)
}

#cssminifier textarea {
  overflow: hidden;
  width: 100%;
  height: 240px;
  margin: 0 auto;
  display: block;
  background-color: #fff;
  padding: 20px;
  font: normal 13px 'Courier New', Monospace;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  border-radius: 5px 5px 0 0;
  resize: none
}

textarea:focus {
  background-color: #FFF;
  color: #303030
}

#cssminifier .box {
  margin: 10px auto 30px;
  color: rgba(255, 2255, 255, .6);
}

#cssminifier .box p {
  margin: 0 0 2px
}

#cssminifier button {
  cursor: pointer;
}

#cssminifier .col {
  width: 48%;
  margin: 0 auto 30px
}

#cssminifier .left {
  float: left;
  margin-left: 1%
}

#cssminifier .right {
  float: right;
  margin-right: 1%
}

#cssminifier .button-group {
  background: #2980b9;
  text-align: center;
  padding: 20px 20px 40px 20px;
  margin: 0;
  border-radius: 0 0 5px 5px
}

#cssminifier button,
#cssminifier button[disabled]:active {
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
  color: #fefefe;
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.471;
  border-radius: 4px;
  margin: 0 5px;
  border: 0;
  transition: all .1s
}

#cssminifier button:hover,
#cssminifier button:active {
  background: #fff;
  color: #2980b9
}

#cssminifier button[disabled],
#cssminifier button[disabled]:active {
  background: #fff;
}

#cssminifier .opt1,
#cssminifier .opt2,
#cssminifier .opt3,
#cssminifier .opt4,
#cssminifier .opt5 {
  display: inline-block;
  margin: 0 0 0 10px;
  vertical-align: middle;
  border: none;
  outline: none
}

#cssminifier br {
  display: none
}

Javascript

function get(e) {
  return document.getElementById(e)
}

function highlightCode(e) {
  if (hc.checked) {
    var a = e.innerHTML;
    a = a.replace(/\{([\s\S]+?)\}/g, function(e) {
      return e.replace(/\'(.*?)\'/g, "<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g, "<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g, "{<span class='pr'>")
    }), a = a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g, function(e) {
      return e.replace(/'(.*?)'/g, "<span class='vl'>'$1'</span>").replace(/"(.*?)"/g, "<span class='vl'>\"$1\"</span>")
    }), a = a.replace(/\{([\s\S]+?)\}/g, function(e) {
      return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "<span class='pn'>$1</span>").replace(/\!important/gi, "<span class='im'>!important</span>")
    }), a = a.replace(/\/\*([\w\W]+?)\*\//gm, "<span class='cm'>/*$1*/</span>"), e.innerHTML = "<code>" + a + "</code>", hr.style.display = "block", rt.style.display = "block"
  } else hr.style.display = "none", rt.style.display = "none"
}

function compressCSS(e) {
  var a = get(e),
    c = /@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,
    n = a.value,
    t = n.length;
  n = sa.checked || sc.checked ? n.replace(/\/\*[\w\W]*?\*\//gm, "") : n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm, "\n$2\n"), n = n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g, "$2"), n = sc.checked ? n : n.replace(/\}(?!\})/g, "}\n"), n = bi.checked ? n.replace(c, function(e) {
    return e.replace(/\n+/g, "\n  ")
  }) : n.replace(c, function(e) {
    return e.replace(/\n+/g, "")
  }), n = bi.checked && !sc.checked ? n.replace(/\}\}/g, "}\n}") : n, n = bi.checked && !sc.checked ? n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g, "@$1$2{\n  ") : n, n = cm.checked ? n.replace(/;\}/g, "}") : n.replace(/\}/g, ";}").replace(/;+\}/g, ";}").replace(/\};\}/g, "}}"), n = n.replace(/\:0(px|em|pt)/gi, ":0"), n = n.replace(/ 0(px|em|pt)/gi, " 0"), n = n.replace(/\s+\!important/gi, "!important"), n = n.replace(/(^\n+|\n+$)/, ""), a.value = n, hr.innerHTML = "/* " + (t - n.length) + " of " + t + " unused characters has been removed. */\n" + n.replace(/</g, "&lt;").replace(/>/g, "&gt;"), highlightCode(hr)
}

function clearField(e) {
  var a = get(e);
  a.value = "", a.focus()
}

function selectAll(e) {
  get(e).focus(), get(e).select()
}
var hc = get("highlightCode"),
  sa = get("stripAllComment"),
  sc = get("superCompact"),
  cm = get("keepLastComma"),
  bi = get("betterIndentation"),
  bs = get("breakSelector"),
  tt = get("toTab"),
  to = get("tabOpt").getElementsByTagName("input"),
  sb = get("spaceBetween"),
  ip = get("inlineSingleProp"),
  rs = get("removeLastSemicolon"),
  il = get("inlineLayout"),
  si = get("singleBreak"),
  hr = get("highlightedResult"),
  rt = document.getElementsByTagName("h2")[1];

DEMO:

See the pen on CodePen.