Added better hex->name and name->hex color shortening.

diff --git a/lib/clean.js b/lib/clean.js
index c4b56cb..0433c31 100644 (file)
--- a/lib/clean.js
+++ b/lib/clean.js
@@ -7,10 +7,25 @@
 
 var CleanCSS = {
   colors: {
-    white: '#fff',
-    black: '#000',
-    fuchsia: '#f0f',
-    yellow: '#ff0'
+    toHex: {
+      aqua: '#0ff',
+      black: '#000',
+      blue: '#00f',
+      fuchsia: '#f0f',
+      white: '#fff',
+      yellow: '#ff0'
+    },
+    toName: {
+      '#000080': 'navy',
+      '#008000': 'green',
+      '#008080': 'teal',
+      '#800000': 'maroon',
+      '#800080': 'purple',
+      '#808000': 'olive',
+      '#808080': 'gray',
+      '#c0c0c0': 'silver',
+      '#f00': 'red'
+    }
   },
 
   process: function(data, options) {
@@ -114,7 +129,7 @@ var CleanCSS = {
       return encoded;
     });
 
-    // long hex to short hex
+    // long color hex to short hex
     replace(/([,: \(])#([0-9a-f]{6})/gi, function(match, prefix, color) {
       if (color[0] == color[1] && color[2] == color[3] && color[4] == color[5])
         return prefix + '#' + color[0] + color[2] + color[4];
@@ -122,16 +137,15 @@ var CleanCSS = {
         return prefix + '#' + color;
     });
 
-    // replace standard colors with hex values (only if color name is longer then hex value)
-    var pattern = "(" + Object.keys(CleanCSS.colors).join('|') + ")";
-    var colorSwitcher = function(match, prefix, colorName, suffix) {
-      return prefix + CleanCSS.colors[colorName] + suffix;
-    };
-    replace(new RegExp("(.)" + pattern + "([;\\}!\\)])", 'g'), colorSwitcher);
-    replace(new RegExp("(,)" + pattern + "(,)", 'g'), colorSwitcher);
-
-    // replace #f00 with red as it's shorter
-    replace(/([: ,\(])#f00/g, '$1red');
+    // replace color name with hex values if shorter (or other way around)
+    ['toHex', 'toName'].forEach(function(type) {
+      var pattern = "(" + Object.keys(CleanCSS.colors[type]).join('|') + ")";
+      var colorSwitcher = function(match, prefix, colorValue, suffix) {
+        return prefix + CleanCSS.colors[type][colorValue] + suffix;
+      };
+      replace(new RegExp("(.)" + pattern + "([;\\}!\\) ])", 'g'), colorSwitcher);
+      replace(new RegExp("(,)" + pattern + "(,)", 'g'), colorSwitcher);
+    });
 
     // replace font weight with numerical value
     replace(/(font|font\-weight):(normal|bold)([ ;\}!])/g, function(match, property, weight, suffix) {

diff --git a/test/data/big-min.css b/test/data/big-min.css
index 9b58513..59493a6 100644 (file)
--- a/test/data/big-min.css
+++ b/test/data/big-min.css
@@ -30,7 +30,7 @@ img{border:0;-ms-interpolation-mode:bicubic}
 svg:not(:root){overflow:hidden}
 figure{margin:0}
 form{margin:0}
-fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
+fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
 legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
 button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
 button,input{line-height:normal}
@@ -1624,13 +1624,13 @@ img.spacer{width:1px;height:1px}
 #header-liberation .header-base .sites-info-search ul.sites li.boutique{width:84px}
 #header-liberation .header-base .sites-info-search ul.sites li.boutique span.logo{top:7px;left:14px;width:58px;height:27px;background-position:-36px 0}
 #header-liberation .header-base .sites-info-search .info{display:block;height:32px}
-#header-liberation .header-base .sites-info-search .info span{display:block;color:#808080;font-size:11.2px;font-family:Arial,Verdana,sans-serif;padding-top:9px}
-#header-liberation .header-base .sites-info-search .search{display:block;width:278px;height:22px;border:1px solid #808080}
-#header-liberation .header-base .sites-info-search .search input[type=text]{border:0;color:#808080;height:22px;width:220px;padding:0 5px}
+#header-liberation .header-base .sites-info-search .info span{display:block;color:gray;font-size:11.2px;font-family:Arial,Verdana,sans-serif;padding-top:9px}
+#header-liberation .header-base .sites-info-search .search{display:block;width:278px;height:22px;border:1px solid gray}
+#header-liberation .header-base .sites-info-search .search input[type=text]{border:0;color:gray;height:22px;width:220px;padding:0 5px}
 #header-liberation .header-base .sites-info-search .search input[type=submit]{background:url(http://s0.libe.com/libe/img/common/_sprites_header/header.png?df8de01457fa) no-repeat 0 -32px;display:block;float:right;width:29px;height:22px;border:0}
 #header-liberation .header-base .links h2{font-weight:400;text-transform:uppercase;font-size:11px;height:16px}
 #header-liberation .header-base .links ul li{font-family:Arial,Verdana,sans-serif;font-size:11.5px}
-#header-liberation .header-base .links ul li a{color:#808080}
+#header-liberation .header-base .links ul li a{color:gray}
 #header-liberation .header-base .nav{display:block;clear:both;position:relative}
 #header-liberation .header-base .nav li{display:block;float:left}
 #header-liberation .header-base .nav .nav1{font-weight:400;text-transform:uppercase;font-size:11px}
@@ -2700,8 +2700,8 @@ body.slideshow .ad-top .megaban{background:#333}
 #header-liberation .header-base .links .lnk2{box-shadow:-9px 0 10px -11px #6c6c6c;-moz-box-shadow:-9px 0 10px -11px #6c6c6c;-webkit-box-shadow:-9px 0 10px -11px #6c6c6c}
 #header-liberation .header-base .digitalpaper a.dl,#header-liberation .header-base .digitalpaper a.abo{color:#fff}
 #header-liberation .header-base .digitalpaper a.abo{background-color:#f2f2f2;color:#2e2e2e}
-#header-liberation .header-base .digitalpaper a.une{box-shadow:0 -1px 7px 0 #808080;-webkit-box-shadow:0 -1px 7px 0 #808080;-moz-box-shadow:0 -1px 7px 0 #808080}
-#header-liberation .header-base .digitalpaper .mask{background:#fff;box-shadow:7px -12px 8px -10px #808080;-webkit-box-shadow:7px -12px 8px -10px #808080;-moz-box-shadow:7px -12px 8px -10px #808080}
+#header-liberation .header-base .digitalpaper a.une{box-shadow:0 -1px 7px 0 gray;-webkit-box-shadow:0 -1px 7px 0 gray;-moz-box-shadow:0 -1px 7px 0 gray}
+#header-liberation .header-base .digitalpaper .mask{background:#fff;box-shadow:7px -12px 8px -10px gray;-webkit-box-shadow:7px -12px 8px -10px gray;-moz-box-shadow:7px -12px 8px -10px gray}
 #header-liberation .header-base .nav .on .nav1 a,#header-liberation .header-base .nav-no-js>li:hover .nav1 a,#header-liberation .header-base .nav .nav1 a:hover{color:#fff}
 #header-liberation .header-base .nav .on .nav1 a span,#header-liberation .header-base .nav-no-js>li:hover .nav1 a span,#header-liberation .header-base .nav .nav1 a:hover span{background-color:#fff}
 #header-liberation .header-base .nav .cat-laune .nav1 .on a,#header-liberation .header-base .nav-no-js .cat-laune:hover .nav1 a,#header-liberation .header-base .nav .cat-laune .nav1 a:hover{background-color:#e20000}
@@ -2758,7 +2758,7 @@ body.slideshow .ad-top .megaban{background:#333}
 .site-liberation h5 .theme{color:#e20000}
 .site-liberation h5 a.theme:hover,.site-liberation a:hover h5 .theme{color:#222}
 .site-liberation h5 .date{color:#bbbaba}
-#core-liberation .text-404 p{color:#808080}
+#core-liberation .text-404 p{color:gray}
 .site-liberation .text-item p.others{border-color:#b3b3b3}
 .site-liberation .text-item p.others span{color:#e20000}
 .site-liberation .text-item p.others li a:hover{color:#222}
@@ -2985,8 +2985,8 @@ body.slideshow .ad-top .megaban{background:#333}
 .site-liberation .toolbox li a.facebook,.site-liberation .toolbox li a.twitter{background-color:#f7f7f7;border-color:#d7d7d7}
 .site-liberation .toolbox li a.facebook:hover,.site-liberation .toolbox li a.twitter:hover{background-color:#818181;color:#F7F7F7}
 .site-liberation .toolbox li.btn-comment,.site-liberation .toolbox li.abo-1-euro{background:#f8f8f8}
-.site-liberation .toolbox li.btn-comment a{color:#808080}
-.site-liberation .toolbox li.btn-comment a:hover{color:#f8f8f8;background:#808080;text-decoration:none}
+.site-liberation .toolbox li.btn-comment a{color:gray}
+.site-liberation .toolbox li.btn-comment a:hover{color:#f8f8f8;background:gray;text-decoration:none}
 .site-liberation .toolbox li.abo-1-euro a span{background:0}
 .site-liberation .toolbox li.fold-options,.site-liberation .toolbox li.fold-options ul{background:#f8f8f8}
 .site-liberation .toolbox li.fold-options+li.fold-options,.site-liberation .toolbox li.fold-options ul{border-color:#d7d7d7}
@@ -3011,8 +3011,8 @@ body.slideshow .ad-top .megaban{background:#333}
 #bar-liberation .content .unfolded{box-shadow:0 1px 1px 0 #E2E2E2;-webkit-box-shadow:0 1px 2px 0 #E2E2E2;-moz-box-shadow:0 1px 2px 0 #E2E2E2}
 #bar-liberation .content .other a span{color:#a40000}
 #page-404 .error{border-right-color:#ddd}
-#page-404 form{border-color:#808080}
-#page-404 form input[type=text]{color:#808080}
+#page-404 form{border-color:gray}
+#page-404 form input[type=text]{color:gray}
 #page-mailfriend .content a{color:#e20000}
 #page-mailfriend .content p.note{color:#999}
 #page-paywall .content a.close strong{color:#666}