Fixes #315 - rgba/hsla -> transparent in gradients.

Apparently Safari/Firefox does not implement transparent correctly thus
it gives wrong output when replaced.

diff --git a/History.md b/History.md
index 48e9fe6..aa9ea35 100644 (file)
--- 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 f5c1128..dd36bd6 100644 (file)
--- 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 6d01379..e729407 100644 (file)
--- 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': [