From: Jakub Pawlowicz Date: Wed, 16 Nov 2016 07:36:12 +0000 (+0100) Subject: Fixes #830 - reordering border-* properties. X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?a=commitdiff_plain;h=bfa16c32ec2b2b6d272336055dbab64a235fc09c;p=clean-css.git Fixes #830 - reordering border-* properties. Why: * `border-X` and `border--X` were reorderable but obiously one cannot reorder them as that may change styling. --- diff --git a/History.md b/History.md index ad27987b..3e9d33fd 100644 --- a/History.md +++ b/History.md @@ -6,6 +6,7 @@ [3.4.21 / 2016-xx-xx](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.20...3.4) ================== +* Fixed issue [#830](https://github.com/jakubpawlowicz/clean-css/issues/830) - reordering border-* properties. * Fixed issue [#833](https://github.com/jakubpawlowicz/clean-css/issues/833) - moving `@media` queries. [3.4.20 / 2016-09-26](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.19...v3.4.20) diff --git a/lib/selectors/reorderable.js b/lib/selectors/reorderable.js index 90bef4fd..3c49a3b4 100644 --- a/lib/selectors/reorderable.js +++ b/lib/selectors/reorderable.js @@ -32,9 +32,9 @@ function canReorderSingle(left, right) { return false; if (leftNameRoot == rightNameRoot && unprefixed(leftName) == unprefixed(rightName) && (vendorPrefixed(leftName) ^ vendorPrefixed(rightName))) return false; - if (leftNameRoot == 'border' && BORDER_PROPERTIES.test(rightNameRoot) && (leftName == 'border' || leftName == rightNameRoot)) + if (leftNameRoot == 'border' && BORDER_PROPERTIES.test(rightNameRoot) && (leftName == 'border' || leftName == rightNameRoot || (leftValue != rightValue && sameBorderComponent(leftName, rightName)))) return false; - if (rightNameRoot == 'border' && BORDER_PROPERTIES.test(leftNameRoot) && (rightName == 'border' || rightName == leftNameRoot)) + if (rightNameRoot == 'border' && BORDER_PROPERTIES.test(leftNameRoot) && (rightName == 'border' || rightName == leftNameRoot || (leftValue != rightValue && sameBorderComponent(leftName, rightName)))) return false; if (leftNameRoot == 'border' && rightNameRoot == 'border' && leftName != rightName && (isSideBorder(leftName) && isStyleBorder(rightName) || isStyleBorder(leftName) && isSideBorder(rightName))) return false; @@ -60,6 +60,10 @@ function unprefixed(name) { return name.replace(/^\-(?:moz|webkit|ms|o)\-/, ''); } +function sameBorderComponent(name1, name2) { + return name1.split('-').pop() == name2.split('-').pop(); +} + function isSideBorder(name) { return name == 'border-top' || name == 'border-right' || name == 'border-bottom' || name == 'border-left'; } diff --git a/test/fixtures/big-min.css b/test/fixtures/big-min.css index c8bc893e..0f1ceeb3 100644 --- a/test/fixtures/big-min.css +++ b/test/fixtures/big-min.css @@ -2688,7 +2688,6 @@ body.slideshow .ad-top .megaban{background:#333} #core-liberation ul.list-forums span,#core-liberation ul.list-items span,#core-liberation ul.list-items-mosts li strong{color:#e20000} #core-liberation ul.list-labo-meetings li{border-bottom-color:#c6c6c6} #core-liberation .list-man-of-day a{border-left-color:#e20000} -.site-liberation .block-call-items .tpl-labo,.site-liberation .block-call-items .tpl-labo-podcast{border-left-color:#b30804} .site-liberation .block-solid-c2{background-color:#c6c6c6} .site-liberation .block-solid-c2 hr{border-top-color:#c6c6c6;border-bottom-color:#c6c6c6} .site-liberation .block-solid-c2 h5 a.theme:hover{color:#fff} @@ -2704,13 +2703,15 @@ body.slideshow .ad-top .megaban{background:#333} .site-liberation .col-contextual .block-nobg .block-top{border-bottom-color:#e20000} .site-liberation .col-contextual .block-solid-c2{background-color:#333;color:#c6c6c6} .site-liberation .col-contextual .block-solid-c2 .block-top{color:#c6c6c6;border-bottom-color:#c6c6c6} -.site-liberation .block-call-items .mini-tpl,.site-liberation .block-call-items .tpl-breaking-news,.site-liberation .block-call-items .tpl-breaking-news:last-of-type,.site-liberation .block-call-items .tpl-flash-news-29col,.site-liberation .block-call-items .tpl-flash-news-29col:last-of-type,.site-liberation .block-call-items .tpl-search-results .object-content{border-bottom-color:#ddd} .site-liberation .col-contextual .block-solid-c2 a,.site-liberation .col-contextual .block-solid-c2 a p{color:#c6c6c6} .site-liberation .col-part .block{background-color:#d7d7d7} .site-liberation .col-part .block .block-top{color:#fff} .site-liberation .col-part .block hr{border-top-color:#ccc} +.site-liberation .block-call-items .mini-tpl{border-bottom-color:#ddd} .site-liberation .block-call-items .mini-tpl .light{color:#bbbaba} .site-liberation .block-call-items .mini-tpl .label{border-color:#e7e7e7} +.site-liberation .block-call-items .tpl-labo,.site-liberation .block-call-items .tpl-labo-podcast{border-left-color:#b30804} +.site-liberation .block-call-items .tpl-breaking-news,.site-liberation .block-call-items .tpl-breaking-news:last-of-type,.site-liberation .block-call-items .tpl-flash-news-29col,.site-liberation .block-call-items .tpl-flash-news-29col:last-of-type,.site-liberation .block-call-items .tpl-search-results .object-content{border-bottom-color:#ddd} .site-liberation .block-call-items .mini-tpl .whosaid{background-color:#e20000} .site-liberation .block-call-items .mini-tpl .whosaid h4,.site-liberation .block-call-items .mini-tpl .whosaid h5 .theme{color:#fff} .site-liberation .block-call-items .mini-tpl .whosaid h3 a{color:#fafafa} @@ -2728,12 +2729,11 @@ body.slideshow .ad-top .megaban{background:#333} .site-liberation .block-call-items .tpl-labo-podcast .emission .subscribe p{color:#e20000} .site-liberation .block-call-items .tpl-search-results h4,.site-liberation .block-call-items .tpl-search-results h4 a{color:#959595} .site-liberation .block-call-items .tpl-search-results .object-picture .np .p1,.site-liberation .block-call-items .tpl-search-results .object-picture .np .p2{background-color:#fff;border-color:#c8c8c8} -#core-liberation .block-comments .block-content .comment_outer,#core-liberation .block-item-read-more{border-color:#ddd} .site-liberation .block-call-items .tpl-search-results .object-picture .np a.date{z-index:500;background-color:#c8c8c8} #core-liberation .block-item .object-picture .legende{color:#838383} .site-liberation .block-item .object-content a:hover{color:#e20000} #core-liberation .block-item-locked{border-top-color:#c1b0bb;border-bottom-color:#c1b0bb;background:#fff;background:-moz-linear-gradient(top,#dbdad6 0,#fff 2%,#fff 98%,#e1e0de 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dbdad6),color-stop(2%,#fff),color-stop(98%,#fff),color-stop(100%,#e1e0de));background:-o-linear-gradient(top,#dbdad6 0,#fff 2%,#fff 98%,#e1e0de 100%)} -#core-liberation .block-all-blogs .block-content .headrest,#core-liberation .block-all-forums .forum,#core-liberation .block-all-forums .headrest,#core-liberation .block-comments .comment_replies{border-bottom-color:#ddd} +#core-liberation .block-comments .block-content .comment_outer,#core-liberation .block-item-read-more{border-color:#ddd} #core-liberation .block-item-locked .block-top span{background-color:#fff} #core-liberation .block-item-locked .btn-zoneabo a:hover{color:#fff} #core-liberation .block-item-read-more .block-top{background-color:#fff;color:#555} @@ -2755,6 +2755,7 @@ body.slideshow .ad-top .megaban{background:#333} #core-liberation .block-comments .block-content .comment_libe>.comment_outer{background:#f8f8f8} #core-liberation .block-comments .block-content .is_removed>.comment_outer{background-color:#878787;color:#fff} #core-liberation .block-comments .comment_replies_count{background:#F8F8F8} +#core-liberation .block-comments .comment_replies{border-bottom-color:#ddd} #core-liberation .block-comments .headrest-community h3 a{color:#555} #core-liberation .block-pager-labo{background-color:#e7e7e7} #core-liberation .block-pager-labo .block-bottom{border-top-color:#222} @@ -2766,6 +2767,7 @@ body.slideshow .ad-top .megaban{background:#333} #core-liberation .block-np .tomorrow .progress-bar .done{background-color:#ee3e30} #core-liberation .block-np .block-content .railway ul li img{border-color:#222} #core-liberation .block-np .from ul li img.visual{border-color:#878787} +#core-liberation .block-all-blogs .block-content .headrest,#core-liberation .block-all-forums .forum,#core-liberation .block-all-forums .headrest{border-bottom-color:#ddd} #core-liberation .block-all-forums .headrest h4{color:#555} #core-liberation .block-all-forums .headrest h5{color:#fa9900} #core-liberation .block-all-forums .forum h5.title,#core-liberation .block-all-forums .forum span.infos,#core-liberation .block-all-forums .forum span.infos a{color:#555} @@ -2822,10 +2824,9 @@ body.slideshow .ad-top .megaban{background:#333} .site-liberation form .btn-rounded-degraded input[type=button],.site-liberation form .btn-rounded-degraded input[type=submit]{background:#e20000;background:-moz-linear-gradient(top,#f33333 0,#b33 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f33333),color-stop(100%,#b33));background:-webkit-linear-gradient(top,#f33333 0,#b33 100%);background:-o-linear-gradient(top,#f33333 0,#b33 100%);background:-ms-linear-gradient(top,#f33333 0,#b33 100%);background:linear-gradient(top,#f33333 0,#b33 100%);color:#fff} .site-liberation form .btn-rounded-degraded input[type=button]:focus,.site-liberation form .btn-rounded-degraded input[type=button]:hover,.site-liberation form .btn-rounded-degraded input[type=submit]:focus,.site-liberation form .btn-rounded-degraded input[type=submit]:hover{background:#e20000;background:-moz-linear-gradient(top,#b33 0,#f33333 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#b33),color-stop(100%,#f33333));background:-webkit-linear-gradient(top,#b33 0,#f33333 100%);background:-o-linear-gradient(top,#b33 0,#f33333 100%);background:-ms-linear-gradient(top,#b33 0,#f33333 100%);background:linear-gradient(top,#b33 0,#f33333 100%);color:#fff} .site-liberation .btn-read-digitalpaper{border-color:#878787} -.site-liberation .toolbox,.site-liberation .toolbox li.fold-options ul,.site-liberation .toolbox li.fold-options+li.fold-options{border-color:#d7d7d7} .site-liberation .btn-read-digitalpaper a,.site-liberation .btn-read-digitalpaper span{color:#2e2e2e} #core-liberation .pagination{background-color:#e7e7e7;border-top-color:#b7b7b7;border-bottom-color:#b7b7b7} -#bar-liberation,#bar-liberation #login-box-content,#bar-liberation .content ul.list li{border-bottom-color:#dadada} +.site-liberation .toolbox,.site-liberation .toolbox li.fold-options ul,.site-liberation .toolbox li.fold-options+li.fold-options{border-color:#d7d7d7} #core-liberation .pagination .disabled{background-color:transparent;color:#c8c8c8} #core-liberation .pagination .current{background-color:transparent;color:#e20000} .site-liberation .bg-sprites-icons .icon{display:block;background-image:url(http://s0.libe.com/libe/img/common/_sprites_icons/icons.png?9914d0d70a49);background-repeat:no-repeat} @@ -2865,6 +2866,7 @@ body.slideshow .ad-top .megaban{background:#333} .site-liberation .toolbox li.btn-comment a:hover{color:#f8f8f8;background:grey;text-decoration:none} .site-liberation .toolbox li.abo-1-euro a span{background:0 0} .site-liberation .toolbox li.fold-options,.site-liberation .toolbox li.fold-options ul{background:#f8f8f8} +#bar-liberation,#bar-liberation #login-box-content,#bar-liberation .content ul.list li{border-bottom-color:#dadada} .site-liberation .toolbox li.fold-options>a{color:#818181} #bar-liberation{background-color:#fff;box-shadow:0 1px 2px 0 #E2E2E2;-webkit-box-shadow:0 1px 2px 0 #E2E2E2;-moz-box-shadow:0 1px 2px 0 #E2E2E2} #bar-liberation,#bar-liberation a{color:#3c3c3c} diff --git a/test/fixtures/bootstrap-min.css b/test/fixtures/bootstrap-min.css index 7ab38890..3c037e24 100644 --- a/test/fixtures/bootstrap-min.css +++ b/test/fixtures/bootstrap-min.css @@ -1184,7 +1184,6 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro .panel-heading>.dropdown .dropdown-toggle,.panel-title,.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit} .list-group-item-heading{margin-top:0;margin-bottom:5px} .list-group-item-text{margin-bottom:0;line-height:1.3} -.carousel-inner>.item>a>img,.carousel-inner>.item>img,.close{line-height:1} .panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)} .panel-title,.panel>.list-group,.panel>.panel-collapse>.list-group,.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0} .panel-body{padding:15px} @@ -1253,8 +1252,9 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro .well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)} .well-lg{padding:24px;border-radius:6px} .well-sm{padding:9px;border-radius:3px} -.close{float:right;font-size:21px;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2} +.close{float:right;font-size:21px;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2} .popover,.tooltip{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400} +.carousel-caption,.carousel-control{text-shadow:0 1px 2px rgba(0,0,0,.6)} .close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5} button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0} .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;display:none;-webkit-overflow-scrolling:touch;outline:0} @@ -1279,7 +1279,6 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor .modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)} .modal-sm{width:300px} } -.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow{bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000} @media (min-width:992px){.modal-lg{width:900px} } .tooltip{position:absolute;z-index:1070;display:block;font-size:12px;line-height:1.4;visibility:visible;filter:alpha(opacity=0);opacity:0} @@ -1290,9 +1289,10 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor .tooltip.left{padding:0 5px;margin-left:-3px} .tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px} .tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid} -.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000} -.tooltip.top-left .tooltip-arrow{right:5px} -.tooltip.top-right .tooltip-arrow{left:5px} +.tooltip.top .tooltip-arrow,.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow{bottom:0;border-width:5px 5px 0;border-top-color:#000} +.tooltip.top .tooltip-arrow{left:50%;margin-left:-5px} +.tooltip.top-left .tooltip-arrow{right:5px;margin-bottom:-5px} +.tooltip.top-right .tooltip-arrow{left:5px;margin-bottom:-5px} .tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000} .tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000} .tooltip.bottom .tooltip-arrow,.tooltip.bottom-left .tooltip-arrow,.tooltip.bottom-right .tooltip-arrow{border-width:0 5px 5px;border-bottom-color:#000;top:0} @@ -1321,6 +1321,7 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor .popover.left>.arrow:after{right:1px;border-right-width:0;border-left-color:#fff} .carousel-inner{width:100%;overflow:hidden} .carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left} +.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1} @media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000} .carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} .carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} @@ -1334,7 +1335,7 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor .carousel-inner>.next.left,.carousel-inner>.prev.right{left:0} .carousel-inner>.active.left{left:-100%} .carousel-inner>.active.right{left:100%} -.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);filter:alpha(opacity=50);opacity:.5} +.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;filter:alpha(opacity=50);opacity:.5} .carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x} .carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x} .carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9} @@ -1347,7 +1348,7 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor .carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none} .carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px} .carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff} -.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)} +.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center} .carousel-caption .btn,.text-hide{text-shadow:none} @media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px} .carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px} diff --git a/test/selectors/reorderable-test.js b/test/selectors/reorderable-test.js index ea8fcb08..07c88872 100644 --- a/test/selectors/reorderable-test.js +++ b/test/selectors/reorderable-test.js @@ -201,6 +201,22 @@ vows.describe(canReorderSingle) assert.isFalse(result); } }, + 'different properties with same root - border #10': { + 'topic': function () { + return canReorderSingle(propertiesIn('a{border-color:red}')[0], propertiesIn('a{border-bottom-color:rgba(0,0,0,0.5)}')[0]); + }, + 'must be false': function (result) { + assert.isFalse(result); + } + }, + 'different properties with same root - border #11': { + 'topic': function () { + return canReorderSingle(propertiesIn('a{border-color:red}')[0], propertiesIn('a{border-bottom-color:red}')[0]); + }, + 'must be false': function (result) { + assert.isTrue(result); + } + }, 'shorhand and longhand with different value': { 'topic': function () { return canReorderSingle(propertiesIn('a{margin:3px}')[0], propertiesIn('a{margin-bottom:5px}')[0]); diff --git a/test/selectors/restructure-test.js b/test/selectors/restructure-test.js index 0defa690..81aa8d2d 100644 --- a/test/selectors/restructure-test.js +++ b/test/selectors/restructure-test.js @@ -159,6 +159,10 @@ vows.describe('restructure') 'no rule after comma': [ 'h1{color:#000}div{color:red},h2{color:#000;display:block}', 'h1{color:#000}div{color:red},h2{color:#000;display:block}' + ], + 'border color as hex and function': [ + '.one{border-color:#000;border-bottom-color:rgb(0,0,0,.2)}.two{border-color:#fff;border-bottom-color:rgb(0,0,0,.2)}', + '.one{border-color:#000;border-bottom-color:rgb(0,0,0,.2)}.two{border-color:#fff;border-bottom-color:rgb(0,0,0,.2)}' ] }) )