CSS Processor

Custom CSS clean up

by Oliver Kelso

HTML

<form action="post" id="form1">
<textarea rows="15" cols="100" id="texts">
#bannerCenter h1 {
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
}

#bannerCenter p {
	font-size:     12px;
	font-weight: normal;
	line-height: 18px;
	border-color: #ff0aff;
	margin: 0 0 5px 0;
	padding-top: 5px;
	padding-bottom: 5px
}

span.xClose {
	text-transform: lowercase
}

</textarea>
<div>
<label><input type="checkbox" id="cbox1" value="important"> Add !important</label>
</div>
</form>
<a href="#" id="goButton" onclick="return proc('texts')">GO</a>

CSS

html,body{
  background:#333;
  font-family:helvetica;
}
a{
  color:#FFF;
  text-decoration:none;
}
form{
  margin:0 0 20px 0;
  
}
textarea{
  width:100%;
  overflow:show;
  min-height:200px;
  max-height:500px;
  background:#222;
  border:solid 1px #000;
  color:#EEE;
  padding:5px 5px 5px 5px;
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
  margin:0 0 10px 0;
}
#goButton{
  background:#000;
  padding:5px 10px;
  font-weight:bold;
  border:solid 1px #111;
  border-radius: 5px;
}
#goButton:hover{
  background:#000;
  padding:5px 10px;
  font-weight:bold;
  border:solid 1px #666;
  border-radius: 5px;
}

JavaScript

var oliCss = {

	whitespace: function(text){
    var clean = text.replace(/\s+(?=[^{}]*})/igm," ");
    var clean2 = clean.replace(/\n|\r|\t/igm,"");
    var clean3 = clean2.replace(/( {+\s?)/igm, "{");
    var clean4 = clean3.replace(/(\s})/igm, "}");
    var clean5 = clean4.replace(/(\s?;\s+?)/igm, ";");
    var clean6 = clean5.replace(/(:\s?)/igm, ":");
    return clean6;
  },
  
  important: function(text, action){
  	if(action == "add"){
      clean0 = text.replace(/([a-z0-9])([\s]+?})/igm, "$1;$2");
      clean1 = clean0.replace(/ !important/ig,"");
      clean2 = clean1.replace(/!important;/ig,";");
      clean3 = clean2.replace(/;/ig,"!important;");
      return clean3;
    }else if(action == "remove"){
    	var clean = text.replace(/!important/igm, "");
      return clean;
    }
  },
  
  format: function(text){
  	// format css for reading
  },
  
  addCss: function(text, rule){
  	// 
  },

};


function proc(id){
  var text = document.getElementById(id).value;
  var important = document.getElementById('cbox1');
  
  if(text){
  	if(important.checked){
    	text = oliCss.important(text, "add");
    }else{
    	text = oliCss.important(text, "remove");
    }
    text = oliCss.whitespace(text);
    document.getElementById(id).value = text;
  }
  
  return false;
}