I'm looking for a "CSS Post-processor" that will optimize a CSS file.
For example, I know that that are tool that minimize .css files but I would like something that go further in this optimization. Here are some example of possible criteria:
1) Group media-query:
If I have multiple instances of the same mediaquery, this tool should group all selectors under only one instance
2) Group equal rules:
If I have these rules:
.foo1
{
color:red;
border:solid 1px green;
font-size:13px;
text-align:center;
}
.foo2
{
color:blue;
border:solid 1px green;
font-size:13px;
text-align:center;
}
They should grouped into the following final CSS:
.foo1,
.foo2
{
color:red;
border:solid 1px green;
font-size:13px;
text-align:center;
}
.foo2
{
color:blue;
}
3) Remove unused properties:
If I have these properties:
.foo1
{
color:red;
border:solid 1px green;
font-size:13px;
text-align:center;
}
.foo1
{
color:blue;
}
It's clear that with this declaration order .foo1
will never have color:red
applied, and so it should be "condensed" in:
.foo1
{
color:blue;
border:solid 1px green;
font-size:13px;
text-align:center;
}
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
@media screen and (max-width: 300px) {
html {
background-color: lightblue;
}
}
Becomes:
@media screen and (max-width:300px){body,html{background-color:#add8e6}}
.foo1
{
color:red;
border:solid 1px green;
font-size:13px;
text-align:center;
}
.foo2
{
color:blue;
border:solid 1px green;
font-size:13px;
text-align:center;
}
Becomes:
.foo1,.foo2{border:1px solid green;font-size:13px;text-align:center}.foo1{color:red}.foo2{color:#00f}
.foo1
{
color:red;
border:solid 1px green;
font-size:13px;
text-align:center;
}
.foo1
{
color:blue;
}
Becomes:
.foo1{border:1px solid green;font-size:13px;text-align:center;color:#00f}
Of course, you may want to beautify your CSS code after minimizing it. If so, run it through a CSS formatter such as http://www.cleancss.com/css-beautify/.
UPDATE By Question author:
Actually, CSSMinifier has a specific case in which minification is not perfect. Look at the following code:
.a { color:red;}
.b { color:red;}
.c { color:green;}
.c { color:green;}
.b { color:red;}
Is minimized into:
.a{color:red}
.c{color:green}
.b{color:red}
CSSMinifier, correctly understood that two declarations on .c
class are equals so, second one can be skipped, but second .b { color:red;}
after
.c { color:green;} breaks default behaviour in which
.a { color:red;}
.b { color:red;}
is minified in:
.a,.b{color:red}
Not a grave issue, but it exists.