Changeset 42291 in spip-zone


Ignore:
Timestamp:
Nov 13, 2010, 8:07:41 PM (10 years ago)
Author:
cedric@…
Message:

Le compresseur passe en 1.3.0 et integre CSSTidy comme parseur/compacteur CSS possible.
Jeux de tests enrichis pour les options de compacte_css et les tests internes a csstidy

Location:
_core_/plugins/compresseur
Files:
5 added
1 deleted
4 edited

Legend:

Unmodified
Added
Removed
  • _core_/plugins/compresseur/inc/compresseur.php

    r42260 r42291  
    88}
    99
    10 
    11 // http://doc.spip.org/@compacte_css
    12 function compacte_css ($contenu) {
    13         // nettoyer la css de tout ce qui sert pas
    14         // pas de commentaires
    15         $contenu = preg_replace(",/\*.*\*/,Ums","",$contenu);
    16         $contenu = preg_replace(",\s//[^\n]*\n,Ums","",$contenu);
    17         // espaces autour des retour lignes
    18         $contenu = str_replace("\r\n","\n",$contenu);
    19         $contenu = preg_replace(",\s+\n,ms","\n",$contenu);
    20         $contenu = preg_replace(",\n\s+,ms","\n",$contenu);
    21         // pas d'espaces consecutifs
    22         $contenu = preg_replace(",\s(?=\s),Ums","",$contenu);
    23         // pas d'espaces avant et apres { ; ,
    24         $contenu = preg_replace("/\s?({|;|,)\s?/ms","$1",$contenu);
    25         // supprimer les espaces devant : sauf si suivi d'une lettre (:after, :first...)
    26         $contenu = preg_replace("/\s:([^a-z])/ims",":$1",$contenu);
    27         // supprimer les espaces apres :
    28         $contenu = preg_replace("/:\s/ms",":",$contenu);
    29         // pas d'espaces devant }
    30         $contenu = preg_replace("/\s}/ms","}",$contenu);
    31 
    32         // ni de point virgule sur la derniere declaration
    33         $contenu = preg_replace("/;}/ms","}",$contenu);
    34         // pas d'espace avant !important
    35         $contenu = preg_replace("/\s!important/ms","!important",$contenu);
    36         // passser les codes couleurs en 3 car si possible
    37         // uniquement si non precedees d'un [="'] ce qui indique qu'on est dans un filter(xx=#?...)
    38         $contenu = preg_replace(",([^=\"'])#([0-9a-f])(\\2)([0-9a-f])(\\4)([0-9a-f])(\\6),i","$1#$2$4$6",$contenu);
    39         // remplacer font-weight:bold par font-weight:700
    40         $contenu = preg_replace("/font-weight:bold/ims","font-weight:700",$contenu);
    41         // remplacer font-weight:normal par font-weight:400
    42         $contenu = preg_replace("/font-weight:normal/ims","font-weight:400",$contenu);
    43 
    44         // enlever le 0 des unites decimales
    45         $contenu = preg_replace("/0[.]([0-9]+em)/ims",".$1",$contenu);
    46         // supprimer les declarations vides
    47         $contenu = preg_replace(",([^{}]*){},Ums"," ",$contenu);
    48         // zero est zero, quelle que soit l'unite
    49         $contenu = preg_replace("/([^0-9.]0)(em|px|pt|%)/ms","$1",$contenu);
    50 
    51         // renommer les couleurs par leurs versions courtes quand c'est possible
    52         $colors = array(
    53                 'source'=>array('black','fuchsia','white','yellow','#800000','#ffa500','#808000','#800080','#008000','#000080','#008080','#c0c0c0','#808080','#f00'),
    54                 'replace'=>array('#000' ,'#F0F'   ,'#FFF' ,'#FF0'  ,'maroon' ,'orange' ,'olive'  ,'purple' ,'green'  ,'navy'   ,'teal'   ,'silver' ,'gray'   ,'red')
    55         );
    56         foreach($colors['source'] as $k=>$v){
    57                 $colors['source'][$k]=",([^=\"';{])".$v.",ms";
    58                 $colors['replace'][$k] = "$1".$colors['replace'][$k];
    59         }
    60         $contenu = preg_replace($colors['source'],$colors['replace'],$contenu);
    61 
    62         // raccourcir les padding qui le peuvent (sur 3 ou 2 valeurs)
    63         $contenu = preg_replace(",padding:([^\s;}]+)\s([^\s;}]+)\s([^\s;}]+)\s(\\2),ims","padding:$1 $2 $3",$contenu);
    64         $contenu = preg_replace(",padding:([^\s;}]+)\s([^\s;}]+)\s(\\1)([;}!]),ims","padding:$1 $2$4",$contenu);
    65 
    66         // raccourcir les margin qui le peuvent (sur 3 ou 2 valeurs)
    67         $contenu = preg_replace(",margin:([^\s;}]+)\s([^\s;}]+)\s([^\s;}]+)\s(\\2),ims","margin:$1 $2 $3",$contenu);
    68         $contenu = preg_replace(",margin:([^\s;}]+)\s([^\s;}]+)\s(\\1)([;}!]),ims","margin:$1 $2$4",$contenu);
    69 
    70         $contenu = trim($contenu);
    71 
    72         return $contenu;
     10/**
     11 * Minifier un contenu CSS
     12 * Si $options est non precise, on utilise la methode regxep simple
     13 * Si $options sous forme de array(), on pass par csstidy pour parser le code
     14 * et produire un contenu plus compact et prefixe eventuellement par un @media
     15 * options disponibles :
     16 *  string media : media qui seront utilises pour encapsuler par @media
     17 *        les selecteurs sans media
     18 *  string template : format de sortie parmi 'low_compression','default','high_compression','highest_compression'
     19 * @param string $contenu  contenu css
     20 * @param mixed $options options de minification
     21 * @return string
     22 */
     23function compacte_css ($contenu, $options='simple') {
     24        if (!is_array($options)){
     25
     26                // nettoyer la css de tout ce qui sert pas
     27                // pas de commentaires
     28                $contenu = preg_replace(",/\*.*\*/,Ums","",$contenu);
     29                $contenu = preg_replace(",\s//[^\n]*\n,Ums","",$contenu);
     30                // espaces autour des retour lignes
     31                $contenu = str_replace("\r\n","\n",$contenu);
     32                $contenu = preg_replace(",\s+\n,ms","\n",$contenu);
     33                $contenu = preg_replace(",\n\s+,ms","\n",$contenu);
     34                // pas d'espaces consecutifs
     35                $contenu = preg_replace(",\s(?=\s),Ums","",$contenu);
     36                // pas d'espaces avant et apres { ; ,
     37                $contenu = preg_replace("/\s?({|;|,)\s?/ms","$1",$contenu);
     38                // supprimer les espaces devant : sauf si suivi d'une lettre (:after, :first...)
     39                $contenu = preg_replace("/\s:([^a-z])/ims",":$1",$contenu);
     40                // supprimer les espaces apres :
     41                $contenu = preg_replace("/:\s/ms",":",$contenu);
     42                // pas d'espaces devant }
     43                $contenu = preg_replace("/\s}/ms","}",$contenu);
     44
     45                // ni de point virgule sur la derniere declaration
     46                $contenu = preg_replace("/;}/ms","}",$contenu);
     47                // pas d'espace avant !important
     48                $contenu = preg_replace("/\s!important/ms","!important",$contenu);
     49                // passser les codes couleurs en 3 car si possible
     50                // uniquement si non precedees d'un [="'] ce qui indique qu'on est dans un filter(xx=#?...)
     51                $contenu = preg_replace(",([^=\"'])#([0-9a-f])(\\2)([0-9a-f])(\\4)([0-9a-f])(\\6),i","$1#$2$4$6",$contenu);
     52                // remplacer font-weight:bold par font-weight:700
     53                $contenu = preg_replace("/font-weight:bold/ims","font-weight:700",$contenu);
     54                // remplacer font-weight:normal par font-weight:400
     55                $contenu = preg_replace("/font-weight:normal/ims","font-weight:400",$contenu);
     56
     57                // enlever le 0 des unites decimales
     58                $contenu = preg_replace("/0[.]([0-9]+em)/ims",".$1",$contenu);
     59                // supprimer les declarations vides
     60                $contenu = preg_replace(",([^{}]*){},Ums"," ",$contenu);
     61                // zero est zero, quelle que soit l'unite
     62                $contenu = preg_replace("/([^0-9.]0)(em|px|pt|%)/ms","$1",$contenu);
     63
     64                // renommer les couleurs par leurs versions courtes quand c'est possible
     65                $colors = array(
     66                        'source'=>array('black','fuchsia','white','yellow','#800000','#ffa500','#808000','#800080','#008000','#000080','#008080','#c0c0c0','#808080','#f00'),
     67                        'replace'=>array('#000' ,'#F0F'   ,'#FFF' ,'#FF0'  ,'maroon' ,'orange' ,'olive'  ,'purple' ,'green'  ,'navy'   ,'teal'   ,'silver' ,'gray'   ,'red')
     68                );
     69                foreach($colors['source'] as $k=>$v){
     70                        $colors['source'][$k]=",([^=\"';{])".$v.",ms";
     71                        $colors['replace'][$k] = "$1".$colors['replace'][$k];
     72                }
     73                $contenu = preg_replace($colors['source'],$colors['replace'],$contenu);
     74
     75                // raccourcir les padding qui le peuvent (sur 3 ou 2 valeurs)
     76                $contenu = preg_replace(",padding:([^\s;}]+)\s([^\s;}]+)\s([^\s;}]+)\s(\\2),ims","padding:$1 $2 $3",$contenu);
     77                $contenu = preg_replace(",padding:([^\s;}]+)\s([^\s;}]+)\s(\\1)([;}!]),ims","padding:$1 $2$4",$contenu);
     78
     79                // raccourcir les margin qui le peuvent (sur 3 ou 2 valeurs)
     80                $contenu = preg_replace(",margin:([^\s;}]+)\s([^\s;}]+)\s([^\s;}]+)\s(\\2),ims","margin:$1 $2 $3",$contenu);
     81                $contenu = preg_replace(",margin:([^\s;}]+)\s([^\s;}]+)\s(\\1)([;}!]),ims","margin:$1 $2$4",$contenu);
     82
     83                $contenu = trim($contenu);
     84
     85                return $contenu;
     86        }
     87       
     88        // compression avancee en utilisant csstidy
     89        // modele de sortie plus ou moins compact
     90        $template = 'high_compression';
     91        if (isset($options['template']) AND in_array($options['template'],array('low_compression','default','high_compression','highest_compression')))
     92                $template = $options['template'];
     93        // @media eventuel pour prefixe toutes les css
     94        // et regrouper plusieurs css entre elles
     95        $media = "";
     96        if (isset($options['media']))
     97                $media = "@media ".$options['media']." ";
     98
     99        include_spip("csstidy/class.csstidy");
     100        $css = new csstidy();
     101        $css->set_cfg('preserve_css',false);
     102        $css->set_cfg('remove_last_;',true);
     103        $css->set_cfg('merge_selectors',false);
     104        $css->load_template($template);
     105        $css->parse($contenu);
     106        #var_dump($css->log);
     107        #var_dump($css->css);
     108        return $css->print->plain($media);
    73109}
    74110
  • _core_/plugins/compresseur/plugin.xml

    r42260 r42291  
    44        <icon>images/compresseur-32.png</icon>
    55        <licence>GPL</licence>
    6         <version>1.2.2</version>
     6        <version>1.3.0</version>
    77        <etat>stable</etat>
    88        <description>Compression des css et javascript
  • _core_/plugins/compresseur/tests/css/expected.css

    r42262 r42291  
    22.form-suggest{height:200px;background:#DEE2D0;vertical-align:top}
    33.form-input input{font-size:10px}
    4 .hide{display:none}
     4@media print{.hide{display:none}}
    55.form-input textarea{font-size:11px;width:350px}
    66.form-label{font-size:10px;font-weight:700;line-height:25px;padding-right:10px;text-align:right;width:100px;color:#39738F}
     
    8080.clear{clear:both}
    8181.degrade{background-color:#777;background:-webkit-gradient(linear,left top,left bottom,from(#999),to(#666));background-image:-moz-linear-gradient(top,#999,#666);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#999999',endColorstr='#666666');filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=146,Strength=5);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#999999',endColorstr='#666666')";filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff999999',endColorstr='#ff666666')}
     82@media print{.degrade{background:none}}
  • _core_/plugins/compresseur/tests/css/source.css

    r42261 r42291  
    1818        font-size: 10px;
    1919    }
    20    
     20@media print {
    2121    .hide{
    2222        display:none;
    2323    }
    24    
     24 }
     25 
    2526    .form-input textarea{
    2627        font-size: 11px;
     
    447448        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff999999',endColorstr='#ff666666');
    448449}
     450@media print {
     451        .degrade {background:none;}
     452}
Note: See TracChangeset for help on using the changeset viewer.