From 21baee002db73a9f42c423528fc25f5ae202be4d Mon Sep 17 00:00:00 2001 From: GoalSmashers Date: Sun, 18 Nov 2012 15:25:05 +0000 Subject: [PATCH] Added better hex->name and name->hex color shortening. --- lib/clean.js | 44 ++++++++++++++++++++++++++++--------------- test/data/big-min.css | 24 +++++++++++------------ 2 files changed, 41 insertions(+), 27 deletions(-) diff --git a/lib/clean.js b/lib/clean.js index c4b56cbd..0433c314 100644 --- 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 9b585136..59493a68 100644 --- 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} -- 2.34.1