¿Existe un optimizador CSS que descubra propiedades individuales idénticas en selectores y las agrupe?

Question

Aquí hay un ejemplo de lo que esperaría:

Aporte:

a {
    background: red;    
}

p {
    background: red;    
}

strong {
    background: red;
    color: green;
}

Producción:

strong{color:green;}
a,p,strong{background:red;}

La mayoría de los optimizadores generarán algo como esto:

strong{background:red;color:green;}
a,p{background:red;}

Observe cómo no ha recogido el hecho de que strong, aunque contiene color: green;, también contiene background: red; ¿Por lo tanto, se puede agrupar con los demás?

Cualquier ayuda que pueda proporcionar sería muy apreciada

Mis mejores deseos

Iain

Answer 1

De acuerdo, parece que lo que era después no existe o es muy difícil de encontrar, así que escribí un guión que resuelve mi problema particular. Lo estoy pegando aquí con la esperanza de que alguien alguna vez pueda encontrarlo útil.

<?php

$css = file_get_contents('test.css');

//Strip comments and whitespace. Tabs to spaces
$css = preg_replace("/\s{2,}/e", ' ', $css);
$css = preg_replace("/\/\*.*?\*\//", '', $css);
$css = str_replace("\t", " ", $css);
$css = str_replace(": ", ":", $css);
$css = str_replace(" }", "}", $css);
$css = str_replace("{", "{", $css);
$css = str_replace(";}", "}", $css);

//Break each rule out onto a new line
$css = preg_replace("/}\s*/", "}\r\n", $css);

//Break @ rules out onto new lines
$css = preg_replace('/(@.*?;\s*)/', '\0'."\r\n", $css);


//Parse CSS Rules
$parsed = array();
$css = explode("\r\n", $css);
foreach($css as $line => $rule){
    if (preg_match('/(.*?)\{(.*?)\}/i', $rule, $regs)) {
        $clean_selectors =  preg_replace('/\s*,\s*/', ',', $regs[1]);
        $clean_selectors =  preg_replace('/,\s*$|\s$/', '', $clean_selectors);
        $parsed[$line]['selectors'] = explode(',', $clean_selectors);
        $parsed[$line]['properties'] = explode(';', $regs[2]);
    } elseif(trim($rule) != '') {
        $parsed[$line] = $rule;
    }   
}

//Group CSS by property
$groups =  array();
foreach($parsed as $line => $css){
    if(is_array($css)){
        foreach($css['properties'] as $pline => $property){
            if(isset($groups[$property])){
                $groups[$property] = array_merge($groups[$property], $css['selectors']);
            } else {
                $groups[$property] = $css['selectors'];
            }

        }
    } else {
        $groups[$line] = $css;  
    }
}

//Output CSS sorted by property
foreach($groups as $property => $selectors){
    if(is_array($selectors)){
        asort($selectors);
        echo implode(",\r\n", $selectors)." {\r\n\t".trim($property).";\r\n}\r\n\r\n";
    } else {
        echo $selectors."\r\n\r\n"; 
    }
}

?>

Ahora, un par de cavaets.

1. No, este no es el código más hermoso del mundo, se hizo rápidamente para resolver un problema en particular que estaba teniendo una vez y se adapta bastante al CSS con el que me han dado para trabajar. Dicho esto, debería ser lo suficientemente genérico como para trabajar con la mayoría de los CS que le arrojas.

2. Es la naturaleza de CSS que a veces el orden en el que aparece una regla es importante para la representación del documento final. Es probable que si solo ejecute todos sus CSS a través de este script que su página ya no represente como espere. Solo estoy usando este script para agrupar CSS específicos de página en una aplicación web sobre la que no tengo control de diseño. A medida que cada regla se aplica a un elemento en particular en una página en particular, no espero grandes cantidades de dudosa cuando agrupé de esta manera, solo hará que el CSS sea más mantenible.

Answer 2

Quizás Csstidy podría ayudar, aquí.

Si echas un vistazo a este CSS "antes", verá esta parte del código:

a:hover{
    color: #DD6900;
}

a.admin:hover,a.mod:hover{
    color: #DD6900;
}

En en el CSS "después", obtendrás :

a:hover,a.admin:hover,a.mod:hover,a.topictitle:hover {
color:#DD6900
}

No estoy seguro de que se ocupe de todos los casos posibles, pero en algunas situaciones, parece que está haciendo lo que estás pidiendo ;-)