csspost-processor

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


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

Solution

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