Esiste un ottimizzatore CSS che farà scoprire identiche proprietà singoli selettori e raggrupparli?

Question

Ecco un esempio di quello che ci si aspetterebbe:

Input:

a {
    background: red;    
}

p {
    background: red;    
}

strong {
    background: red;
    color: green;
}

Output:

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

La maggior parte ottimizzatori emette qualcosa di simile:

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

Si noti come non ha raccolto il fatto che strong, anche se contiene color: green;, contiene anche background: red; quindi può essere raggruppato con gli altri?

Qualsiasi aiuto è possibile fornire sarebbe molto apprezzato

Tutti i migliori

Iain

Answer 1

Ok, quindi sembra che ciò che cercavo o non esiste o è molto difficile da trovare, così ho scritto uno script che risolva il mio problema particolare. Sto incollando qui nella speranza che qualcuno a volte potrebbe trovare utile.

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

?>

Ora, un paio di cavaets.

1. No, questo non è il codice più bello del mondo, è stato fatto in fretta per risolvere un particolare problema che stavo avendo una volta ed è su misura piuttosto pesantemente al CSS mi è stata data con cui lavorare. Detto questo, dovrebbe essere sufficientemente generico per lavorare con la maggior parte CSS ti buttare a questo.

2. E 'la natura di CSS che a volte l'ordine in cui viene visualizzata una regola è importante per il rendering del documento finale. E 'probabile che se si esegue tutto il vostro CSS attraverso questo script che la pagina non renderà come ci si aspetta più. Sto solo utilizzare questo script per gruppo specifico pagine css su un'applicazione web che non ho controllo di layout sopra. Come ogni regola si applica a un particolare elemento in una pagina particolare, non mi aspetto di enormi quantità di dodgyness quando ho gruppo in questo modo -. E 'solo andando a fare il CSS più gestibile

Answer 2

CSSTidy potrebbe aiutare, qui.

Se si dà un'occhiata a questo CSS "prima" , ti vedere questa porzione di codice:

a:hover{
    color: #DD6900;
}

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

CSS "dopo ", si otterrà:

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

Non sono sicuro che sarà affrontare tutti i casi possibili - ma in alcune situazioni, sembra che sta facendo quello che stai chiedendo; -)