JSFiddle - React, Tailwind, and code Playground
HTML
<button>Clean CSS</button>
<textarea id="css">
head{
margin:0;
}
body {
margin:0;
padding:0;
font-family: "Arial Black";
font-size:90%;
}
body > .trex {
margin: 10px;
}
header, footer, section, nav, body, head{
display:block;
}
body img{
border:none;
}
.clearboth{
clear:both;
}
body#redbar{
position:fixed;
background-color:#ef4135;
height:5px;
width:100%;
z-index:999;
}
#layout{
margin:0 auto 0 auto;
width:1000px;
}
#layout_header{
position:fixed;
margin-top:5px;
width:150px;
float:left;
}
#layout_header h1 span{
display:none;
}
#layout_header object{
width:150px;
height:112.5px;
overflow:hidden;
}
#site_nav{
text-transform:uppercase;
}
#site_nav ul{
margin:0;
padding:0;
list-style:none;
}
#site_nav li{
margin:5px;
float:right;
}
#site_nav a{
background-color:#404040;
padding:4px 7px 4px 7px;
color:#fff;
text-decoration:none;
}
#site_nav a:hover, #site_nav a.selected{
background-color:#ef4135;
}
#site_lang{
margin-top:10px;
}
#site_lang ul{
margin:0;
padding:0;
list-style:none;
}
#site_lang li{
display:block;
float:right;
margin:5px;
}
#site_lang a{
color:#000;
font-family:Arial;
text-decoration:none;
}
#page_wrapper{
margin-left:180px;
padding-top:65px;
}
#page_wrapper header{
margin-bottom:25px;
}
#page_wrapper header h1{
display:inline;
clear:both;
background-color:#404040;
padding:4px 7px 4px 7px;
color:#fff;
font-size:120%;
}
#page{
font-family: Arial, Helvetica, sans-serif;
}
#layout_footer{
padding:30px 0 30px 0;
}
#find_close{
display:none;
float:right;
margin-right:-15px;
}
#find-content{
background-color:#fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top:10px;
}
input{
padding:2px;
border:#ccc solid 1px;
border-right:#999 solid 1px;
...
CSS
body {
margin:0;
padding:0;
}
textarea, pre {
float: left;
overflow: auto;
width: 400px;
height: 300px;
border: 1px solid #000;
}
JavaScript
$$('button')[0].addEvent('click', function(){
var css = document.id('css').get('text');
var newCss = css
// replace multiple tabs or spaces by one
.replace(/( |\t)+/g, " ")
// remove space at beginning of line
.replace(/(^\s)/gm, "")
// remove body in selector lists
.replace(/(,\s*body\s*(?={|,)|body\s*,)/gi, "")
// remove body before {
.replace(/(body\s*(?={))/gi, "")
// remove rules without selector
.replace(/[\n\r]+\{[^\}]*\}/g, "")
// remove linebreaks
.replace(/[\n\r]+/g, "");
document.id('cleancss').set('text', newCss);
});