Advanced Post-process CSS: group "media query" and "equal rules", remove "unused properties"

Question

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;
}

Have you tried [http://cssminifier.com/](http://cssminifier.com/)? It appears to meet all your criteria. — Anthony Hilyard, Sep 15 '15 at 14:56
@AnthonyHilyard well it seems very similar to what I'm looking for. Please, convert your comment into a detailed answer :-) — Luca Detomi, Sep 15 '15 at 15:03

score 2 · Accepted Answer · edited Oct 27 '15 at 11:05

Try http://cssminifier.com/.

It groups media-queries:

@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}}

It groups equal CSS stanzas:

.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}

It removes overridden CSS rules:

.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.

Advanced Post-process CSS: group "media query" and "equal rules", remove "unused properties"

1 Answers1

It groups media-queries:

It groups equal CSS stanzas:

It removes overridden CSS rules: