هل هناك مُحسّن CSS سيكتشف خصائص واحدة متطابقة في المحددات وتجميعها معًا؟

Question

إليك مثال على ما أتوقعه:

إدخال:

a {
    background: red;    
}

p {
    background: red;    
}

strong {
    background: red;
    color: green;
}

انتاج:

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

سيقوم معظم المحسنين بإخراج شيء من هذا القبيل:

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

لاحظ كيف لم يلتقط حقيقة ذلك strong, ، على الرغم من أنه يحتوي color: green;, ، يحتوي أيضا على background: red; وبالتالي يمكن تجميعها مع الآخرين؟

أي مساعدة يمكن أن تقدم موضع تقدير كبير

أتمنى لك كل خير

إيان

Answer 1

حسنًا ، يبدو أن ما كنت عليه بعد غير موجود أو يصعب الوصول إليه ، لذلك كتبت نصًا يحل مشكلتي الخاصة. أنا ألصقها هنا على أمل أن يجدها شخص ما في وقت ما.

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

?>

الآن ، زوجان من cavaets.

1. لا ، هذا ليس أجمل رمز في العالم ، وقد تم ذلك بسرعة لحل مشكلة معينة كنت أواجهها مرة واحدة ، وهي مصممة بشكل كبير على CSS التي أعطيت لها للعمل معها. ومع ذلك ، يجب أن تكون عامة بما يكفي للعمل مع معظم CSS التي ترميها.

2. إن طبيعة CSS هي أن الترتيب الذي تظهر به القاعدة مهم في بعض الأحيان لتقديم المستند النهائي. من المحتمل أنه إذا قمت فقط بتشغيل جميع CSS من خلال هذا البرنامج النصي ، فلن يتم عرض صفحتك كما تتوقع بعد الآن. أنا فقط أستخدم هذا البرنامج النصي إلى مجموعة CSS الخاصة بالصفحة على تطبيق ويب ليس لدي أي تحكم تخطيط. نظرًا لأن كل قاعدة تنطبق على عنصر معين على صفحة معينة ، فأنا لا أتوقع كميات هائلة من المراوغة عندما أقوم بتجميع بهذه الطريقة - إنها ستجعل CSS أكثر قابلية للصيانة.

Answer 2

يمكن csstidy يمكن أن يساعد ، هنا.

إذا ألقيت نظرة على هذا CSS "قبل", ، سترى هذا الجزء من الكود:

a:hover{
    color: #DD6900;
}

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

في CSS "بعد"، ستحصل على:

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

لست متأكدًا من أنها ستتعامل مع كل حالة ممكنة-ولكن في بعض المواقف ، يبدو أنها تفعل ما تطلبه ؛-)