CSS compressor

by creativevilla

HTML

<textarea id="cssText" placeholder="Place your CSS here" rows="30" cols="100"></textarea>
  <div>
    <input type="checkbox" /><label for="">Single line comment</label>
    <input type="checkbox" /><label for="">Multiline line comment</label>
  </div>
  <div>
    <button id="compress">Compress</button>
  </div>
  <textarea id="temp" rows="5" cols="100"></textarea>

CSS

/* Global */
/* Resetting margin and padding */
/* This is multiline
comment. do you mind?
Hahahaha */
* { 
  margin : 0;
  padding  :0;
}

a {
  color: #ff6b39; /* Orange */
  text-decoration: none;
}

body {
  color: #7b7b7b; /* Gray */
  font: 14px/21px 'Arial';
}

h1 {
  color: #000;
  font: italic 30px/42px 'Arial';
}

h3 {
  font: 14px/25px 'Arial';
}

img {
  border: none;
}

nav {
  float: right;
}

nav ul li {
  display: inline;
}
nav ul li a {
  padding: 0px 16px;
}

.grid-940 {
  width: 940px;
  margin: 0px auto;
}

.highlight {
  color: #ff6b39;
}

.orange-stripe {
  border-bottom: 10px solid #fb6938;
}

.spacer {
  border-right: 1px solid #ececec;
}

/* Header */
header {
  border-bottom: 1px solid #e5e5e5; /* Light gray */
  height: 80px;
}

header:after {
  clear: both;
  content: '';
}

header h3 {
  float: left;
  padding-top: 7px;
  padding-left: 24px;
}

.header-stripe {
  background-color: #fb6938; /* Orange */
  height: 10px;
  width: 100%;
}

.logo {
  float: left;
  height: 25px;
  width: 172px;
}

.logo-box {
  float: left;
  line-height: 25px;
  padding-top: 27px;
}

/* Navigation */

header nav {
  padding-top: 29px;
}

.last {
  padding: 0 0 0 16px;
}

section {
  padding: 25px 0;
}

section:after {
  clear: both;
  content: '';
  display: table;
}

section h1 {
  float: left;
}

/* Social */
.social {
  float: right;
  height: 41px;
}

.social li{
  display: inline;
  list-style: none;
}

.social li a {
  background-image: url(../images/social-sprite.png);
  display: inline-block;
  height: 41px;
  width: 41px;
}

.social-facebook {
  background-position: 0 0;
}

.social-vimeo {
  background-position: 44px 0;
}

.social-lastfm {
  background-position: 85px 0;
}

.social-linkedin {
  background-position: 126px 0;
}

.social-dribble {
  background-position: 167px 0;
}

/* Footer */
footer {
  background: #fff;
  border-top: 1px solid #e5e5e5;
  color: #7b7b7b;
  font: 14px/25px 'Arial';
  height: 77px;
  width: 100%;
}

footer h3 {
 ...

JavaScript

(function($){
    $(document).ready(function(){
      $('#compress').on('click', function() {
        var cssText = $('#cssText').val();
        $('#temp').val(cssText); // This is temporary action. remove when tests done.
        // regex
        // Compulsaory remove
        var comments = /\/\*([\s\S]*?)\*\//g; // Remove all comments
        //var removeAllSpaces = /\s/g;
        var zeroPixel = /\s0px\s/g; // Replace 0px to 0
        var rmSpAfOpeningCurly = /(?<=\{)([\s\S]*?)(?=(\w|\-))/g; // Remove space after curly brace
        var colonSpaceBeforeAfter = /(\s\:|\:\s)/g; // Remove all spaces before and after colon

        // Optional remove


        cssText = cssText.replace(comments, '');
        cssText = cssText.replace(zeroPixel, ' 0 ');
        cssText = cssText.replace(colonSpaceBeforeAfter, '');
        //cssText = cssText.replace(removeAllSpaces, '');
        $('#cssText').val(cssText);
        //console.log(cssText);
      });
    });
  }(jQuery));