From 7b3fb2f227e3566374e98174289cd1ca1870132e Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Mon, 2 Jun 2014 23:19:33 +0100 Subject: [PATCH] Fixes #257 - turns hsla/rgba to transparent if possible. It's possible unless in compatibility mode as IE<9 understands transparent but does not rgba/hsla. --- History.md | 1 + lib/clean.js | 4 ++++ test/unit-test.js | 44 +++++++++++++++++++++++++++++++++++--------- 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/History.md b/History.md index 5a843c27..475f62b2 100644 --- a/History.md +++ b/History.md @@ -13,6 +13,7 @@ * Fixed issue [#197](https://github.com/GoalSmashers/clean-css/issues/197) - adds borders merging by understandability. * Fixed issue [#247](https://github.com/GoalSmashers/clean-css/issues/247) - removes deprecated `selectorsMergeMode` switch. * Refixed issue [#250](https://github.com/GoalSmashers/clean-css/issues/250) - based on new quotation marks removal. +* Fixed issue [#257](https://github.com/GoalSmashers/clean-css/issues/257) - turns hsla/rgba to transparent if possible. * Fixed issue [#275](https://github.com/GoalSmashers/clean-css/issues/275) - handling transform properties. [2.1.8 / 2014-03-28](https://github.com/GoalSmashers/clean-css/compare/v2.1.7...v2.1.8) diff --git a/lib/clean.js b/lib/clean.js index 1ee32127..982870f2 100644 --- a/lib/clean.js +++ b/lib/clean.js @@ -298,6 +298,10 @@ var minify = function(data, callback) { return colorFunction + '(' + tokens.join(',') + ')'; }); + // transparent rgba/hsla to 'transparent' unless in compatibility mode + if (!options.compatibility) + replace(/(rgba|hsla)\(\d+,\d+%?,\d+%?,0\)/g, 'transparent'); + // none to 0 replace(/outline:none/g, 'outline:0'); diff --git a/test/unit-test.js b/test/unit-test.js index 98743b56..ef8b2198 100644 --- a/test/unit-test.js +++ b/test/unit-test.js @@ -425,8 +425,8 @@ vows.describe('clean-units').addBatch({ 'a{-webkit-box-shadow:0 0;-moz-box-shadow:0 0}' ], 'zero as .0 #1': [ - 'a{color:rgba(0,0,0,.0)}', - 'a{color:rgba(0,0,0,0)}' + 'a{color:rgba(0,0,.0,1)}', + 'a{color:rgba(0,0,0,1)}' ], 'zero as .0 #2': [ 'body{margin:.0}', @@ -446,7 +446,7 @@ vows.describe('clean-units').addBatch({ ], 'minus zero in function to zero': [ 'body{color:rgba(-0,-0,-0,-0)}', - 'body{color:rgba(0,0,0,0)}' + 'body{color:transparent}' ], 'minus zero px to zero': [ 'body{margin:-0px}', @@ -745,7 +745,30 @@ vows.describe('clean-units').addBatch({ 'rgb out of an upper bound': [ 'a{color:rgb(256,256,256)}', 'a{color:#fff}' - ] + ], + 'turns rgba(0,0,0,0) to transparent': [ + 'a{color:rgba(0,0,0,0)}', + 'a{color:transparent}' + ], + 'turns rgba(0.0,0.0,.0,0) to transparent': [ + 'a{color:rgba(0.0,0.0,.0,0)}', + 'a{color:transparent}' + ], + 'turns rgba(255,255,255,0) to transparent': [ + 'a{color:rgba(255,255,255,0)}', + 'a{color:transparent}' + ], + 'turns rgba(255,0,255,0) to transparent': [ + 'a{color:rgba(255,0,255,0)}', + 'a{color:transparent}' + ], + 'turns hsla(120,100%,50%,0) to transparent': [ + 'a{color:hsla(120,100%,50%,0)}', + 'a{color:transparent}' + ], + 'keeps rgba(0,0,0,.5)': 'a{color:rgba(0,0,0,.5)}', + 'keeps rgba(0,255,0,.5)': 'a{color:rgba(0,255,0,.5)}', + 'keeps hsla(120,100%,50%,.5)': 'a{color:hsla(120,100%,50%,.5)}' }), 'shortening colors': colorShorteningContext(), 'font weights': cssContext({ @@ -931,7 +954,10 @@ path")}', ], 'overriding a star by a non-ajacent selector': 'a{color:red}.one{display:block}a{*color:#fff}', 'overriding a unserscore by a non-ajacent selector': 'a{color:red}.one{display:block}a{_color:#fff}', - 'overriding a backslash by a non-ajacent selector': 'a{color:red}.one{display:block}a{color:#fff\\9}' + 'overriding a backslash by a non-ajacent selector': 'a{color:red}.one{display:block}a{color:#fff\\9}', + 'keeps rgba(0,0,0,0)': 'a{color:rgba(0,0,0,0)}', + 'keeps rgba(255,255,255,0)': 'a{color:rgba(255,255,255,0)}', + 'keeps hsla(120,100%,50%,0)': 'a{color:hsla(120,100%,50%,0)}' }, { compatibility: 'ie8' }), 'IE hacks without IE compatibility': cssContext({ 'star': 'a{*color:#fff}', // See #246 @@ -1395,7 +1421,7 @@ title']{display:block}", '-ms-transform with different values #2': 'div{-ms-transform:translate(0,0);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}', 'transform with different values #1': 'div{transform:translate(0,0);transform:translate3d(0,0,0)}', 'transform with different values #2': 'div{transform:translate(0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}', - 'border(hex) with border(rgba)': 'a{border:1px solid #fff;display:none;border:1px solid rgba(1,0,0,0)}', + 'border(hex) with border(rgba)': 'a{border:1px solid #fff;display:none;border:1px solid rgba(1,0,0,.5)}', 'border(hex !important) with border(hex)': [ 'a{border:1px solid #fff!important;display:none;border:1px solid #fff}', 'a{border:1px solid #fff!important;display:none}' @@ -1725,9 +1751,9 @@ title']{display:block}", ] }), 'cares about understandability of border components': cssContext({ - 'border(none) with border(rgba)': 'a{border:none;border:1px solid rgba(1,0,0,0)}', - 'border(rgba) with border(none)': 'a{border:1px solid rgba(1,0,0,0);border:none}', - 'border(hex) with border(rgba)': 'a{border:1px solid #fff;border:1px solid rgba(1,0,0,0)}' + 'border(none) with border(rgba)': 'a{border:none;border:1px solid rgba(1,0,0,.5)}', + 'border(rgba) with border(none)': 'a{border:1px solid rgba(1,0,0,.5);border:none}', + 'border(hex) with border(rgba)': 'a{border:1px solid #fff;border:1px solid rgba(1,0,0,.5)}' }), 'merge same properties sensibly': cssContext({ 'should merge color values with same understandability #1': [ -- 2.34.1