Gibt es einen CSS-Optimierer, der identische einzelne Eigenschaften in Selektoren erkennt und sie gruppiert?

Question

Hier ist ein Beispiel dafür, was ich erwarten würde:

Eingang:

a {
    background: red;    
}

p {
    background: red;    
}

strong {
    background: red;
    color: green;
}

Ausgabe:

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

Die meisten Optimierer geben etwa Folgendes aus:

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

Beachten Sie, dass die Tatsache nicht berücksichtigt wurde strong, obwohl es enthält color: green;, enthält auch background: red; somit kann es mit den anderen gruppiert werden?

Wir würden uns über jede Hilfe, die Sie leisten könnten, sehr freuen

Alles Gute

Iain

Answer 1

Okay, es sieht so aus, als ob das, was ich gesucht habe, entweder nicht existiert oder sehr schwer zu bekommen ist, also habe ich ein Skript geschrieben, das mein spezielles Problem löst.Ich füge es hier ein, in der Hoffnung, dass es irgendwann jemand nützlich finden könnte.

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

?>

Nun ein paar Vorbehalte.

1. Nein, das ist nicht der schönste Code der Welt. Er wurde schnell erstellt, um ein bestimmtes Problem zu lösen, das ich einmal hatte, und er ist ziemlich stark auf das CSS zugeschnitten, mit dem ich arbeiten durfte.Allerdings sollte es generisch genug sein, um mit den meisten CSS-Codes zu funktionieren, die Sie darauf verwenden.

2. Es liegt in der Natur von CSS, dass manchmal die Reihenfolge, in der eine Regel erscheint, für die Darstellung des endgültigen Dokuments wichtig ist.Es ist wahrscheinlich, dass Ihre Seite nicht mehr wie erwartet gerendert wird, wenn Sie einfach Ihr gesamtes CSS über dieses Skript ausführen.Ich verwende dieses Skript nur, um seitenspezifisches CSS in einer Webanwendung zu gruppieren, über die ich keine Kontrolle über das Layout habe.Da sich jede Regel auf ein bestimmtes Element auf einer bestimmten Seite bezieht, erwarte ich bei dieser Gruppierung keine großen Unklarheiten – das CSS wird dadurch lediglich wartbarer.

Answer 2

Vielleicht CSSTidy könnte hier helfen.

Wenn Sie einen Blick darauf werfen dieses CSS „vorher“, sehen Sie diesen Teil des Codes:

a:hover{
    color: #DD6900;
}

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

Im im CSS "nachher", Du wirst kriegen :

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

Ich bin mir nicht sicher, ob es jeden möglichen Fall behandeln wird – aber in manchen Situationen scheint es zu tun, was Sie verlangen ;-)