Fixes #830 - reordering border-* properties.

Why:

* `border-X` and `border-<side>-X` were reorderable but obiously one
  cannot reorder them as that may change styling.

diff --git a/History.md b/History.md
index ad27987..3e9d33f 100644 (file)
--- 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 90bef4f..3c49a3b 100644 (file)
--- 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 c8bc893..0f1ceeb 100644 (file)
--- 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 7ab3889..3c037e2 100644 (file)
--- 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 ea8fcb0..07c8887 100644 (file)
--- 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 0defa69..81aa8d2 100644 (file)
--- 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)}'
       ]
     })
   )