CSS Optimizer

by creativevilla

HTML

<link rel="stylesheet" href="http://techef.net/tools/fiddle-foundation/4/css/normalize.css">
<link rel="stylesheet" href="http://techef.net/tools/fiddle-foundation/4/css/foundation.min.css">
<script src="http://techef.net/tools/fiddle-foundation/4/js/vendor/jquery.js"></script>
<script src="http://techef.net/tools/fiddle-foundation/4/js/vendor/custom.modernizr.js"></script>
<script src="http://techef.net/tools/fiddle-foundation/4/js/foundation.min.js"></script>
<body>
  <form>
    <div class="row">
      <div class="large-12 columns">
        <label>Textarea Label</label>
        <textarea id="css-input" placeholder="Put your CSS here ..."></textarea>
      </div>
    </div>
    <div class="row">
      <div class="large-2 columns">
        <div class="switch large round">
          <input id="a" name="switch-a" type="radio" checked>
          <label for="a" onclick="">Off</label>
          <input id="a1" name="switch-a" type="radio">
          <label for="a1" onclick="">On</label>
          <span></span>
        </div>
      </div>
      <div class="large-4 columns">
        <label for="left-label" class="left inline">Remove last semicolon</label>
      </div>
      <div class="large-2 columns">
        <div class="switch large round">
          <input id="b" name="switch-b" type="radio" checked>
          <label for="b" onclick="">Off</label>
          <input id="b1" name="switch-b" type="radio">
          <label for="b1" onclick="">On</label>
          <span></span>
        </div>
      </div>
      <div class="large-4 columns">
        <label for="left-label" class="left inline">Replace 0px with 0</label>
      </div>
    </div>
    <div class="row">
      <div class="large-2 columns">
        <div class="switch large round">
          <input id="c" name="switch-c" type="radio" checked>
          <label for="c" onclick="">Off</label>
          <input id="c1" name="switch-c" type="radio">
          <label for="c1" onclick="">On</label>
          <span></span>
 ...

CSS

textarea {
  min-height: 300px;
}

JavaScript

(function($){
"use strict";
  $(document).ready(function(){
    /*
    01. Remove comments                                                 /\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/gi
                                                                        old: /\/\*([\s\S]*?)\*\//gi
    02. Remove space and return characters before and after comma       /(\,)\r?(\s)*?(?=[\w\*])/gi replace with "$1"
    03. Remove space between selector and opening curly brace           /([\w\d\]\)\*])\s*?(?={)/gi replace with "$1"
    04. Remove space between opening curly brace and property           /({)([\s\S]*?)(?=(\w|\-|\.|\#|\*|\@|\[|\/))/gi replace with "$1"
    05. Remove space between property and colon, also space between col /\s*?\:\s*?(?=[\w\.\#])/gi Replace with :
    06. Remove space between semicolon and property                     /(\;)([\s\S])*?(?=[\d\w\-\}\*\@])/gi replace with "$1"
    08. Remove space between closing curly brace and selector           /(\})([\s])*?(?=[\w\@\[\.\#\*\}])/gi replace with "$1"
    09. Remove last semicolon                                           /\;([\s])*?(?=})/gi
    10. Replace 0px with 0                                              /(\s)0px/gi replace with "$10"
    12. Optimize color values                                           /#[0-9a-f]{6,8}/gi
    */
    $('#crunch').on('click', function(){
      var cssInput = $('#css-input').val(),
          rmComments = /\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/gi,
          rmSpReBeAfComma = /(\,)\r?(\s)*?(?=[\w\*\.\#])/gi,
          rmSpSelctorOpenCurly= /([\w\d\]\)\*])\s*?(?={)/gi,
          rmSpOpenCurlySel= /({)([\s\S]*?)(?=(\w|\-|\.|\#|\*|\@|\[|\/))/gi,
          rmSpBeAfColon= /\s*?\:\s*?(?=[\w\.\#])/gi,
          rmSpSemiColonProp= /(\;)([\s\S])*?(?=[\d\w\-\}\*\@])/gi,
          rmSpClosingCurlySel = /(\})([\s])*?(?=[\w\@\[\.\#\*\}])/gi,
          rmLstSemi = /\;([\s])*?(?=})/gi,
          replacePxWithZero = /(\s)0px/gi,
          colorHex = /#[0-9a-f]{6,8}/gi,
         ...