Updated Optimizer

by creativevilla

HTML

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Crunch2</title>
  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />
  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/optimizer.css" />
  <script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
  <div class="row">
    <div class="large-12 columns">
      <div class="panel callout radius">Crunch - Optimise your css</div>
    </div>
  </div>
  <form>
    <div class="row">
      <div class="large-12 columns">
        <textarea id="css-input" placeholder="Put your CSS here ..."></textarea>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <div class="panel callout radius">Compression level</div>
      </div>
    </div>
    <div class="row">
      <div class="large-4 columns text-center">
        <a href="javascript:void(0)" id="low" class="button low expand radius">LOW</a>
      </div>
      <div class="large-4 columns text-center">
        <a href="javascript:void(0)" id="medium" class="button medium expand radius">MEDIUM</a>
      </div>
      <div class="large-4 columns text-center">
        <a href="javascript:void(0)" id="high" class="button high expand radius">HIGH</a>
      </div>
    </div>
    <div class="comp-options">
      <div class="show-for-medium-up">
        <div class="row">
          <div class="large-2 small-3 columns">
            <div class="switch round">
              <input id="a" name="switch-a" type="radio" checked>
              <label for="a" onclick="">Off</label>
              <input id="a1"...

CSS

textarea {
  min-height: 300px;
}

textarea:focus {
  background: #fafafa;
  border-color: #2ba6cb;
  outline: none;
}

.button.low {
  background-color: #f44;
  border: none;
}

.button.medium {
  background-color: #f80;
  border: none;
}

.button.high {
  background-color: #9c0;
  border: none;
}
.comp-options{
  display: none;
}

.comp-options .show-for-medium-up{
  width: 100%;
  margin: 0 auto 20px;
  max-width: 60.5em;
  padding-top: 20px;
}

div.switch span:last-child {
  -webkit-box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.07), 1000px 0 0 1000px #bcdf54, -2px 0 10px 0 rgba(0, 0, 0, 0.07), -1000px 0 0 1000px #ccc;
  box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.07), 1000px 0 0 980px #bcdf54, -2px 0 10px 0 rgba(0, 0, 0, 0.07), -1000px 0 0 1000px #ccc;
}

#css-output {
  color: #000;
  display: none;
}
#css-output-style{
  white-space: nowrap;
  overflow-x:scroll;
  display: none;
  color: #000;
}
#css-output-style div {
  color: #000;
  line-height: 1em;
  width: inherit;


}

#highlighter li {
  color: #000;
  list-style: none;
  line-height: 1em;
}

#highlighter ul {
  border-right: 2px solid red;
}

JavaScript

(function($){
"use strict";
  $(document).ready(function(){
    var pattern = {
      base1 : /(\,)\r?(\s)*?(?=[\w\*\.\#])/gi,
              // Remove space and return characters after comma
              // Replace with ""
      base2 : /([\w\d\]\)\*])\s*?(?={)/gi,
              // Remove space between selector and opening curly brace
              // Replace with "$1"
      base3 : /({)([\s\S]*?)(?=(\w|\-|\.|\#|\*|\@|\[|\/))/gi,
              // Remove space between opening curly brace and property
              // Replace with "$1"
      base4 : /\s*?\:\s*?(?=[\w\.\#])/gi,
              // Remove space before and after colon
              // Replace with :
      base5 : /(\;)([\s\S])*?(?=[\d\w\-\}\*\@])/gi,
              // Remove space between semicolon and property
              // Replace with ;
      base6 : /(\})([\s])*?(?=[\w\@\[\.\#\*\}])/gi,
              // Remove space between closing curly brace and selector
              // Replace with "$1"
      comments : /\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/gi,
              // Remove comments
      lastSemiColon : /\;([\s])*?(?=})/gi,
              // Remove last semicolon
              // Replace with ""
      zeroPxWithZero : /(\s)0px/gi,
              // Replace 0px with 0
              // Replace with "$10"
      colorHex : /#[0-9a-f]{6,8}/gi,
              // hexadecimal color value: #fefefe
      colorRGB : /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/gi,
              // RGB color values: rgb(255, 0, 255)
      curlyToCurly : /\{[^\}\{]*\}/g,
              // Select data from opening curly to closing curly
      allSpaces : / /g,
              // Captures all spaces
      allEnters : /[\r\n]/g,
              // Captures all enters/carriage returns
      allTabs : /[\t]/g,
              // Captures all tabs
      allMatch : /[\s\W\w]/g
              // Match everything
    };

    $('#low').on('click', function() {
      $('.comp-options').slideDown();
      $('.comp-options >...