fix(colors): convert rgba/hsla to rgb/hsl if opacity is >= 1

fixes clean-css#1082
clshortfuse · Jul 30, 2019 · a0c6273 · a0c6273
1 parent dc728a8
commit a0c6273
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/lib/optimizer/level-1/optimize.js b/lib/optimizer/level-1/optimize.js
@@ -89,16 +89,25 @@ function optimizeBorderRadius(property) {
   }
 }
 
+/**
+ * @param {string} name
+ * @param {string} value
+ * @param {Object} compatibility
+ * @return {string}
+ */
 function optimizeColors(name, value, compatibility) {
-  if (value.indexOf('#') === -1 && value.indexOf('rgb') == -1 && value.indexOf('hsl') == -1) {
+  if (!value.match(/#|rgb|hsl/gi)) {
     return shortenHex(value);
   }
 
   value = value
-    .replace(/rgb\((\-?\d+),(\-?\d+),(\-?\d+)\)/g, function (match, red, green, blue) {
+    .replace(/(rgb|hsl)a?\((\-?\d+),(\-?\d+\%?),(\-?\d+\%?),(0*[1-9]+[0-9]*(.?\d*)?)\)/gi, function (match, colorFn, p1, p2, p3, alpha) {
+      return (parseInt(alpha, 10) >= 1 ? colorFn + '(' + [p1,p2,p3].join(',') + ')' : match);
+    })
+    .replace(/rgb\((\-?\d+),(\-?\d+),(\-?\d+)\)/gi, function (match, red, green, blue) {
       return shortenRgb(red, green, blue);
     })
-    .replace(/hsl\((-?\d+),(-?\d+)%?,(-?\d+)%?\)/g, function (match, hue, saturation, lightness) {
+    .replace(/hsl\((-?\d+),(-?\d+)%?,(-?\d+)%?\)/gi, function (match, hue, saturation, lightness) {
       return shortenHsl(hue, saturation, lightness);
     })
     .replace(/(^|[^='"])#([0-9a-f]{6})/gi, function (match, prefix, color, at, inputValue) {
@@ -115,12 +124,13 @@ function optimizeColors(name, value, compatibility) {
     .replace(/(^|[^='"])#([0-9a-f]{3})/gi, function (match, prefix, color) {
       return prefix + '#' + color.toLowerCase();
     })
-    .replace(/(rgb|rgba|hsl|hsla)\(([^\)]+)\)/g, function (match, colorFunction, colorDef) {
+    .replace(/(rgb|rgba|hsl|hsla)\(([^\)]+)\)/gi, function (match, colorFunction, colorDef) {
       var tokens = colorDef.split(',');
-      var applies = (colorFunction == 'hsl' && tokens.length == 3) ||
-        (colorFunction == 'hsla' && tokens.length == 4) ||
-        (colorFunction == 'rgb' && tokens.length == 3 && colorDef.indexOf('%') > 0) ||
-        (colorFunction == 'rgba' && tokens.length == 4 && colorDef.indexOf('%') > 0);
+      var colorFnLowercase = colorFunction && colorFunction.toLowercase();
+      var applies = (colorFnLowercase == 'hsl' && tokens.length == 3) ||
+        (colorFnLowercase == 'hsla' && tokens.length == 4) ||
+        (colorFnLowercase == 'rgb' && tokens.length === 3 && colorDef.indexOf('%') > 0) ||
+        (colorFnLowercase == 'rgba' && tokens.length == 4 && colorDef.indexOf('%') > 0);
 
       if (!applies) {
         return match;

diff --git a/lib/optimizer/validator.js b/lib/optimizer/validator.js
@@ -6,11 +6,11 @@ var functionAnyRegexStr = '(' + variableRegexStr + '|' + functionNoVendorRegexSt
 var calcRegex = new RegExp('^(\\-moz\\-|\\-webkit\\-)?calc\\([^\\)]+\\)$', 'i');
 var decimalRegex = /[0-9]/;
 var functionAnyRegex = new RegExp('^' + functionAnyRegexStr + '$', 'i');
-var hslColorRegex = /^hsl\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31}\)|hsla\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+\s{0,31}\)$/;
+var hslColorRegex = /^hsl\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31}\)|hsla\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+\s{0,31}\)$/i;
 var identifierRegex = /^(\-[a-z0-9_][a-z0-9\-_]*|[a-z][a-z0-9\-_]*)$/i;
 var namedEntityRegex = /^[a-z]+$/i;
 var prefixRegex = /^-([a-z0-9]|-)*$/i;
-var rgbColorRegex = /^rgb\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31}\)|rgba\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\.\d]+\s{0,31}\)$/;
+var rgbColorRegex = /^rgb\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31}\)|rgba\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\.\d]+\s{0,31}\)$/i;
 var timingFunctionRegex = /^(cubic\-bezier|steps)\([^\)]+\)$/;
 var validTimeUnits = ['ms', 's'];
 var urlRegex = /^url\([\s\S]+\)$/i;