From: Jakub Pawlowicz <contact@jakubpawlowicz.com>
Date: Fri, 6 Mar 2015 21:16:07 +0000 (+0000)
Subject: Fixes #483 - property order in restructuring.
X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?a=commitdiff_plain;h=1842312de7d8a9bfaf77a13d97a298954ad67b59;p=clean-css.git

Fixes #483 - property order in restructuring.

This:

```css
a{background-size:100%}
p{background:no-repeat;background-size:100%}
```

cannot be restructured into:

```css
a,p{background-size:100%}
p{background:no-repeat}
```
---

diff --git a/History.md b/History.md
index d730dd06..9589f0c5 100644
--- a/History.md
+++ b/History.md
@@ -5,6 +5,11 @@
 * Fixed issue [#396](https://github.com/jakubpawlowicz/clean-css/issues/396) - better input source maps tracking.
 * Fixed issue [#480](https://github.com/jakubpawlowicz/clean-css/issues/480) - extracting upcase property names.
 
+[3.1.5 / 2015-xx-xx](https://github.com/jakubpawlowicz/clean-css/compare/v3.1.4...3.1)
+==================
+
+* Fixes issue [#483](https://github.com/jakubpawlowicz/clean-css/issues/483) - property order in restructuring.
+
 [3.1.4 / 2015-03-04](https://github.com/jakubpawlowicz/clean-css/compare/v3.1.3...v3.1.4)
 ==================
 
diff --git a/lib/selectors/optimizers/advanced.js b/lib/selectors/optimizers/advanced.js
index 08bed221..744b3c31 100644
--- a/lib/selectors/optimizers/advanced.js
+++ b/lib/selectors/optimizers/advanced.js
@@ -583,6 +583,7 @@ AdvancedOptimizer.prototype.restructure = function (tokens) {
   for (var i = tokens.length - 1; i >= 0; i--) {
     var token = tokens[i];
     var isSelector;
+    var j, k, m;
 
     if (token.kind == 'selector') {
       isSelector = true;
@@ -598,11 +599,21 @@ AdvancedOptimizer.prototype.restructure = function (tokens) {
     var properties = extractProperties(token);
     movedToBeDropped = [];
 
-    for (var j = 0, m = properties.length; j < m; j++) {
+    var unmovableInCurrentToken = [];
+    for (j = properties.length - 1; j >= 0; j--) {
+      for (k = j - 1; k >= 0; k--) {
+        if (!canReorderSingle(properties[j], properties[k])) {
+          unmovableInCurrentToken.push(j);
+          break;
+        }
+      }
+    }
+
+    for (j = 0, m = properties.length; j < m; j++) {
       var property = properties[j];
       var movedSameProperty = false;
 
-      for (var k = 0; k < movedCount; k++) {
+      for (k = 0; k < movedCount; k++) {
         var movedProperty = movedProperties[k];
 
         if (movedToBeDropped.indexOf(k) == -1 && !canReorderSingle(property, movedProperty)) {
@@ -615,7 +626,7 @@ AdvancedOptimizer.prototype.restructure = function (tokens) {
           movedSameProperty = property[0] == movedProperty[0] && property[1] == movedProperty[1];
       }
 
-      if (!isSelector)
+      if (!isSelector || unmovableInCurrentToken.indexOf(j) > -1)
         continue;
 
       var key = property[3];
diff --git a/test/fixtures/big-min.css b/test/fixtures/big-min.css
index c5381b26..a14690cd 100644
--- a/test/fixtures/big-min.css
+++ b/test/fixtures/big-min.css
@@ -1,8 +1,10 @@
 /*! normalize.css 2012-01-31T16:06 UTC - http://github.com/necolas/normalize.css */
 small,sub,sup{font-size:75%}
 .alpha,.ie .une_normale .liste_carre_999.liste_une .ie_impair,.liste_carre_999.liste_une li:nth-child(2n+3){clear:left}
-.clear,.clearfix:after,.deplier{visibility:hidden}
+.bt_fonce a,.btn,.btn_abo,.btn_fonce,.btn_petit{filter:progid:dximagetransform.microsoft.gradient(enabled=false)}
 .btn:hover,.btn_abo:hover,.btn_fonce:hover,.btn_petit:hover,.conteneur_pagination .next:hover,.conteneur_pagination .prev:hover{-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear}
+.bt_abo:hover,a{text-decoration:none}
+.clear,.clearfix:after,.deplier{visibility:hidden}
 article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
 audio,canvas,video{display:inline-block}
 [hidden],audio:not([controls]){display:none}
@@ -189,7 +191,7 @@ body{font-size:1.3rem;font-size:13px;line-height:140%;color:#16212c;background:#
 .lmd-footer #bandeau_bas{display:none}
 .lmd-header #header{margin-bottom:16px}
 .deroule_edito,.deroule_fleuve,.ombre_section,.une_edito{-webkit-box-shadow:0 6px 6px -6px rgba(202,205,209,1);-moz-box-shadow:0 6px 6px -6px rgba(202,205,209,1);box-shadow:0 6px 6px -6px rgba(202,205,209,1);padding-top:0;margin-bottom:16px;margin-top:16px;overflow:hidden}
-a{color:#036;text-decoration:none}
+a{color:#036}
 .bg_fonce a,.flashy,.lien_focus,a:active,a:focus,a:hover{color:#129af0}
 .bg_fonce a{opacity:.85}
 .bg_fonce a:focus,.bg_fonce a:hover{opacity:1}
@@ -256,9 +258,9 @@ section article{margin:0 0 16px}
 .bloc_abo{border-top:3px solid #ffd500}
 img[width="642"],img[width="312"]{margin-bottom:6px}
 img[width="202"]{margin-bottom:4px}
-.btn,.btn_abo,.btn_fonce,.btn_petit{display:inline-block;padding:4px 10px;margin-bottom:0;color:#000b15;text-align:center;font-weight:700;vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-ms-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(top,#fff,#e6e6e6);background-repeat:repeat-x;filter:progid:dximagetransform.microsoft.gradient(enabled=false);border:1px solid #ccc;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);cursor:pointer}
-.bt_fonce a,.btn_fonce{color:#fff;background-color:#000b15;background-image:-moz-linear-gradient(top,#5d666d,#000b15);background-image:-ms-linear-gradient(top,#5d666d,#000b15);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5d666d),to(#000b15));background-image:-webkit-linear-gradient(top,#5d666d,#000b15);background-image:-o-linear-gradient(top,#5d666d,#000b15);background-image:linear-gradient(top,#5d666d,#000b15);background-repeat:repeat-x;border-color:#000b15;border-color:rgba(0,0,0,.1);filter:progid:dximagetransform.microsoft.gradient(enabled=false)}
-.btn_abo{color:#000b15;background-color:#ffc600;background-image:-moz-linear-gradient(top,#ffe562,#ffc600);background-image:-ms-linear-gradient(top,#ffe562,#ffc600);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffe562),to(#ffc600));background-image:-webkit-linear-gradient(top,#ffe562,#ffc600);background-image:-o-linear-gradient(top,#ffe562,#ffc600);background-image:linear-gradient(top,#ffe562,#ffc600);background-repeat:repeat-x;border-color:#ffc600;border-color:rgba(0,0,0,.1);filter:progid:dximagetransform.microsoft.gradient(enabled=false)}
+.btn,.btn_abo,.btn_fonce,.btn_petit{display:inline-block;padding:4px 10px;margin-bottom:0;color:#000b15;text-align:center;font-weight:700;vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-ms-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(top,#fff,#e6e6e6);background-repeat:repeat-x;border:1px solid #ccc;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);cursor:pointer}
+.bt_fonce a,.btn_fonce{color:#fff;background-color:#000b15;background-image:-moz-linear-gradient(top,#5d666d,#000b15);background-image:-ms-linear-gradient(top,#5d666d,#000b15);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5d666d),to(#000b15));background-image:-webkit-linear-gradient(top,#5d666d,#000b15);background-image:-o-linear-gradient(top,#5d666d,#000b15);background-image:linear-gradient(top,#5d666d,#000b15);background-repeat:repeat-x;border-color:#000b15;border-color:rgba(0,0,0,.1)}
+.btn_abo{color:#000b15;background-color:#ffc600;background-image:-moz-linear-gradient(top,#ffe562,#ffc600);background-image:-ms-linear-gradient(top,#ffe562,#ffc600);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffe562),to(#ffc600));background-image:-webkit-linear-gradient(top,#ffe562,#ffc600);background-image:-o-linear-gradient(top,#ffe562,#ffc600);background-image:linear-gradient(top,#ffe562,#ffc600);background-repeat:repeat-x;border-color:#ffc600;border-color:rgba(0,0,0,.1)}
 .btn.large{width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
 .btn_petit{padding:2px 4px;font-size:11px;line-height:16px}
 .btn:hover,.btn_abo:hover,.btn_fonce:hover,.btn_petit:hover{text-decoration:none;background-position:0 -15px;-o-transition:background-position .1s linear;transition:background-position .1s linear}
@@ -278,7 +280,7 @@ input.btn,input.btn_abo,input.btn_fonce,input.btn_petit{-webkit-box-sizing:conte
 #bar-liberation .other .god a,.bloc_part.empruntis .contenu .texte,.bloc_part.gymglish .contenu{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
 button::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0;border:0}
 .bt_abo{display:inline-block;padding:3px 12px;background:#ffd500;font-weight:700;color:#650}
-.bt_abo:hover{background:#ffc600;color:#000;font-weight:700;cursor:pointer;text-decoration:none}
+.bt_abo:hover{background:#ffc600;color:#000;font-weight:700;cursor:pointer}
 .fleuve .liens .permalien:hover,.lien_chaine a:hover,.lien_chaine span:hover{text-decoration:underline}
 .titre_bt_fleche{display:inline-block;overflow:hidden;background:#f5f8f9}
 .titre_bt_fleche:hover{background:#e9edf0}
@@ -521,8 +523,7 @@ input[disabled=disabled]{background:#eef1f5}
 #header .acces_compte .avatar_nom,#header_utilisateur .recherche p{-webkit-border-radius:4px;border-radius:4px;-moz-border-radius:4px}
 .rnd4{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}
 .conteneur_autocompletion>ul{position:absolute;top:-4px!important;max-height:160px;overflow:auto;padding:16px 8px 8px;border:solid #b9c0c5;border-color:#8b9299;border-width:0 1px 1px;background:#f8f9fb;-webkit-box-shadow:0 4px 8px -3px #444;-moz-box-shadow:0 4px 8px -3px #444;-o-box-shadow:0 4px 8px -3px #444;-ms-box-shadow:0 4px 8px -3px #444;box-shadow:0 4px 8px -3px #444;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}
-.img_ico,.pagination .plus{position:relative}
-.img_ico{display:block;margin:0}
+.img_ico{position:relative;display:block;margin:0}
 .liste_img_lien .img_ico{float:left;width:92px;height:61px}
 .ico_infographie,.ico_live,.ico_portfolio,.ico_video{display:inline-block;background-image:url(/medias/web/img/sprites/icos_medias.png);text-indent:-9999px;position:absolute}
 .ico63x63{bottom:3%;left:2%;width:63px;height:63px}
@@ -620,6 +621,7 @@ img[height="97"]+.ico29x29{bottom:6%;left:3.5%}
 .pagination .page{border:solid #e4e6e9;border-width:0 0 0 1px;display:block;float:left;padding:0 9px;height:26px;border-left:1px solid #e4e6e9;text-align:center;line-height:26px;font-size:12px}
 .pagination>li>a,.pagination>li>span{color:#5d666d}
 .pagination .page.actif{height:28px;margin-top:-1px;padding-top:1px;background:#fff;border-color:#fff;color:#b9c0c5}
+.pagination .plus{position:relative}
 .pagination .plus div{display:none;position:absolute;top:24px;right:-70px}
 .pagination .plus ul{background:#a2a9ae;border-radius:4px;height:26px}
 .pagination .plus ul li{border-left:1px solid #a2a9ae}
@@ -716,11 +718,10 @@ img[height="97"]+.ico29x29{bottom:6%;left:3.5%}
 #header_facebook,#header_google,#header_twitter{position:relative}
 .conteneur_popinbox{position:absolute;z-index:10;top:20px;left:-145px;padding:11px 0 0;-webkit-box-shadow:-1px 4px 3px -2px rgba(0,11,21,.5);-moz-box-shadow:-1px 4px 3px -2px rgba(0,11,21,.5);box-shadow:-1px 4px 3px -2px rgba(0,11,21,.5);background:url(/medias/web/img/habillage/lightbox_sociaux_coche.png)center top no-repeat;display:none}
 #header,.position_pub:hover{z-index:3}
-#barre_titre,#header,#nav,#surheader .services li,.carrousel,.carrousel .elt,.conteneur_carrousel,.position_pub{position:relative}
 .popinbox{padding:10px;background:#fff;overflow:visible}
 .sociaux .popinbox{width:292px;text-indent:0}
 #header_facebook_contenu{position:relative;height:258px}
-.position_pub{line-height:0}
+.position_pub{position:relative;line-height:0}
 .position_pub.bottom2{width:1000px;margin:0 auto;text-align:center}
 .position_pub.bottom2.filled{margin:16px auto}
 .position_pub.top{width:1000px;min-height:16px;margin:0 auto}
@@ -730,9 +731,9 @@ img[height="97"]+.ico29x29{bottom:6%;left:3.5%}
 .col_droite .position_pub.filled{margin-bottom:25px;padding:7px 7px 13px;background:url(/medias/web/img/textes/marqueur_pub_col_droite.png)bottom right no-repeat #e9edf0}
 .col_droite .position_pub.filled.noborder{background:0 0;padding:0}
 .conteneur_ligatus{margin:25px 0}
-.conteneur_carrousel{overflow:hidden;height:321px}
-.carrousel{width:6000px}
-.carrousel .elt{width:644px;float:left}
+.conteneur_carrousel{position:relative;overflow:hidden;height:321px}
+.carrousel{width:6000px;position:relative}
+.carrousel .elt{width:644px;float:left;position:relative}
 .conteneur_carrousel .navigation{text-align:center;clear:both;-webkit-user-select:none}
 .conteneur_carrousel .navigation .precedent,.conteneur_carrousel .navigation .precedent span,.conteneur_carrousel .navigation .repere,.conteneur_carrousel .navigation .reperes,.conteneur_carrousel .navigation .suivant,.conteneur_carrousel .navigation .suivant span{display:inline-block;vertical-align:middle}
 .conteneur_carrousel .navigation .reperes{display:inline;background:0 0}
@@ -756,6 +757,7 @@ img[height="97"]+.ico29x29{bottom:6%;left:3.5%}
 .portfolio_appel_revolutionnaire.conteneur_carrousel .navigation .precedent:hover span,.portfolio_appel_revolutionnaire.conteneur_carrousel .navigation .suivant:hover span{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";opacity:.9;color:#222}
 .portfolio_appel_revolutionnaire.conteneur_carrousel .navigation .suivant{left:auto;right:0}
 .portfolio_appel_revolutionnaire a .legende.bg_fonce{color:#fff}
+#barre_titre,#header,#nav{position:relative}
 #header{font-size:12px;text-align:left}
 #barre-titre{z-index:2}
 #nav{z-index:1}
@@ -774,7 +776,7 @@ img[height="97"]+.ico29x29{bottom:6%;left:3.5%}
 #surheader .droit .services:hover{background:#fff}
 #surheader .droit .services>li>.obf{padding:0 10px;height:24px;line-height:24px}
 #surheader .droit .services:hover a{color:#000b15}
-#surheader .services li{line-height:25px}
+#surheader .services li{position:relative;line-height:25px}
 #surheader .services div{display:none;position:absolute;right:0;top:25px;-webkit-box-shadow:0 2px 4px rgba(0,11,21,.5);-moz-box-shadow:0 2px 4px rgba(0,11,21,.5);box-shadow:0 2px 4px rgba(0,11,21,.5);width:340px;z-index:10;background:#fff}
 #surheader .services.droite div{right:auto;left:0}
 #surheader .services li:hover div{display:block}
diff --git a/test/selectors/optimizer-test.js b/test/selectors/optimizer-test.js
index 883da10f..8ca22748 100644
--- a/test/selectors/optimizer-test.js
+++ b/test/selectors/optimizer-test.js
@@ -169,6 +169,10 @@ vows.describe(SelectorsOptimizer)
         'div{margin-top:0}@media{.one{margin-top:0}}.two{display:block;margin:0}',
         'div{margin-top:0}@media{.one{margin-top:0}}.two{display:block;margin:0}'
       ],
+      'over a property in the same selector': [
+        'div{background-size:100%}a{background:no-repeat;background-size:100%}',
+        'div{background-size:100%}a{background:no-repeat;background-size:100%}'
+      ],
       'multiple granular up to a shorthand': [
         '.one{border:1px solid #bbb}.two{border-color:#666}.three{border-width:1px;border-style:solid}',
         '.one{border:1px solid #bbb}.two{border-color:#666}.three{border-width:1px;border-style:solid}'