From fc50148f4126a204aae249a84d7ab684b89a4ba7 Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Sun, 13 Jul 2014 11:56:10 +0100 Subject: [PATCH] Fixes #315 - rgba/hsla -> transparent in gradients. Apparently Safari/Firefox does not implement transparent correctly thus it gives wrong output when replaced. --- History.md | 5 +++++ lib/clean.js | 11 +++++++++-- test/unit-test.js | 8 +++++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/History.md b/History.md index 48e9fe6f..aa9ea356 100644 --- a/History.md +++ b/History.md @@ -1,3 +1,8 @@ +[2.2.8 / 2014-xx-xx](https://github.com/GoalSmashers/clean-css/compare/v2.2.7...v2.2.8) +================== + +* Fixed issue [#315](https://github.com/GoalSmashers/clean-css/issues/315) - rgba/hsla -> transparent in gradients. + [2.2.7 / 2014-07-10](https://github.com/GoalSmashers/clean-css/compare/v2.2.6...v2.2.7) ================== diff --git a/lib/clean.js b/lib/clean.js index f5c1128e..dd36bd6e 100644 --- a/lib/clean.js +++ b/lib/clean.js @@ -19,6 +19,7 @@ var ExpressionsProcessor = require('./text/expressions'); var FreeTextProcessor = require('./text/free'); var UrlsProcessor = require('./text/urls'); var NameQuotesProcessor = require('./text/name-quotes'); +var CommaSplitter = require('./text/comma-splitter'); var SelectorsOptimizer = require('./selectors/optimizer'); @@ -306,8 +307,14 @@ var minify = function(data, callback) { }); // transparent rgba/hsla to 'transparent' unless in compatibility mode - if (!options.compatibility) - replace(/(rgba|hsla)\(\d+,\d+%?,\d+%?,0\)/g, 'transparent'); + if (!options.compatibility) { + replace(/:([^;]*)(?:rgba|hsla)\(\d+,\d+%?,\d+%?,0\)/g, function (match, prefix) { + if (new CommaSplitter(match).split().pop().indexOf('gradient(') > -1) + return match; + + return ':' + prefix + 'transparent'; + }); + } // none to 0 replace(/outline:none/g, 'outline:0'); diff --git a/test/unit-test.js b/test/unit-test.js index 6d013790..e7294075 100644 --- a/test/unit-test.js +++ b/test/unit-test.js @@ -804,7 +804,13 @@ vows.describe('clean-units').addBatch({ ], '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)}' + 'keeps hsla(120,100%,50%,.5)': 'a{color:hsla(120,100%,50%,.5)}', + 'keeps rgba(0,0,0,0) when inside a gradient': 'a{background:linear-gradient(0,#000,rgba(0,0,0,0))}', + 'keeps hsla(120,100%,50%,0) when inside a gradient': 'a{background:linear-gradient(0,#000,hsla(120,100%,50%,0))}', + 'removes only right transparent colors': [ + 'a{background-color:linear-gradient(0,#000,hsla(120,100%,50%,0)),rgba(0,0,0,0)}', + 'a{background-color:linear-gradient(0,#000,hsla(120,100%,50%,0)),transparent}' + ] }), 'border-radius': cssContext({ 'border radius H+V 0/0': [ -- 2.34.1