Расширенный пост-процесс CSS: группа "медиа-запрос" и "равные правила", удалить "неиспользуемые свойства"

Question

Я ищу "Постпроцессор CSS", который оптимизирует файл CSS.

Например, я знаю, что это инструмент, который минимизирует файлы.css, но я хотел бы кое-что, что идет дальше в этой оптимизации. Вот несколько примеров возможных критериев:

1) Групповой медиа-запрос:

Если у меня есть несколько экземпляров одного и того же медиазапроса, этот инструмент должен сгруппировать все селекторы только по одному экземпляру.

2) Группа равных правил:

Если у меня есть эти правила:

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

Они должны быть сгруппированы в следующие окончательные CSS:

.foo1,
.foo2
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo2
{
  color:blue;
}

3) Удалить неиспользуемые свойства:

Если у меня есть эти свойства:

.foo1
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo1
{
  color:blue;
}

Понятно, что с этим порядком декларации .foo1 никогда не будет color:red применяется, и поэтому оно должно быть "сжато" в:

.foo1
{
  color:blue;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

Answer 1

Попробуйте http://cssminifier.com/.

Группирует медиа-запросы:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}
@media screen and (max-width: 300px) {
    html {
        background-color: lightblue;
    }
}

становится:

@media screen and (max-width:300px){body,html{background-color:#add8e6}}

Он группирует равные CSS-строфы:

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

становится:

.foo1,.foo2{border:1px solid green;font-size:13px;text-align:center}.foo1{color:red}.foo2{color:#00f}

Он удаляет переопределенные правила CSS:

.foo1
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo1
{
  color:blue;
}

становится:

.foo1{border:1px solid green;font-size:13px;text-align:center;color:#00f}

Конечно, вы можете захотеть украсить свой код CSS после его минимизации. Если это так, запустите его через средство форматирования CSS, например http://www.cleancss.com/css-beautify/.

---

ОБНОВЛЕНИЕ Автор вопроса:

На самом деле, CSSMinifier имеет особый случай, когда минификация не идеальна. Посмотрите на следующий код:

.a { color:red;}
.b { color:red;}

.c { color:green;}
.c { color:green;}
.b { color:red;}

Минимизируется в:

.a{color:red}
.c{color:green}
.b{color:red}

CSSMinifier, правильно понял, что два объявления на .c класс равны так, второй может быть пропущен, но второй .b { color:red;} after.c {color: green;} нарушает поведение по умолчанию, при котором

.a { color:red;}
.b { color:red;}

минимизируется в:

.a,.b{color:red}

Не серьезная проблема, но она существует.