Fixes stripping '%' from inside color functions.

The 'color' optimizer has to run after 'zero' optimizer as it restores '%'
inside color functions if necessary.

Author: jakubpawlowicz

History.md

@@ -1,6 +1,7 @@
 [5.1.0 / 2021-xx-xx](https://github.com/jakubpawlowicz/clean-css/compare/5.0...HEAD)
 ==================
 
+* Fixes stripping '%' from inside color functions.
 * Improves tokenization speed by ~30%.
 
 [5.0.1 / 2021-01-29](https://github.com/jakubpawlowicz/clean-css/compare/v5.0.0...v5.0.1)

lib/optimizer/configuration.js

@@ -218,8 +218,8 @@ var configuration = {
       valueOptimizers.whiteSpace,
       valueOptimizers.urlWhiteSpace,
       valueOptimizers.fraction,
-      valueOptimizers.color,
       valueOptimizers.zero,
+      valueOptimizers.color,
       valueOptimizers.urlPrefix,
       valueOptimizers.urlQuotes
     ]
@@ -269,8 +269,8 @@ var configuration = {
       valueOptimizers.urlPrefix,
       valueOptimizers.urlQuotes,
       valueOptimizers.whiteSpace,
-      valueOptimizers.color,
-      valueOptimizers.zero
+      valueOptimizers.zero,
+      valueOptimizers.color
     ]
   },
   'background-origin': {
@@ -350,8 +350,8 @@ var configuration = {
     valueOptimizers: [
       valueOptimizers.whiteSpace,
       valueOptimizers.fraction,
-      valueOptimizers.color,
-      valueOptimizers.zero
+      valueOptimizers.zero,
+      valueOptimizers.color
     ]
   },
   'border-bottom': {
@@ -372,8 +372,8 @@ var configuration = {
     valueOptimizers: [
       valueOptimizers.whiteSpace,
       valueOptimizers.fraction,
-      valueOptimizers.color,
-      valueOptimizers.zero
+      valueOptimizers.zero,
+      valueOptimizers.color
     ]
   },
   'border-bottom-color': {
@@ -488,8 +488,8 @@ var configuration = {
     valueOptimizers: [
       valueOptimizers.whiteSpace,
       valueOptimizers.fraction,
-      valueOptimizers.color,
-      valueOptimizers.zero
+      valueOptimizers.zero,
+      valueOptimizers.color
     ]
   },
   'border-left-color': {
@@ -653,9 +653,9 @@ var configuration = {
       valueOptimizers.whiteSpace,
       valueOptimizers.fraction,
       valueOptimizers.precision,
+      valueOptimizers.zero,
       valueOptimizers.color,
-      valueOptimizers.unit,
-      valueOptimizers.zero
+      valueOptimizers.unit
     ]
   },
   'border-top-color': {
@@ -757,8 +757,8 @@ var configuration = {
       valueOptimizers.fraction,
       valueOptimizers.precision,
       valueOptimizers.unit,
-      valueOptimizers.color,
-      valueOptimizers.zero
+      valueOptimizers.zero,
+      valueOptimizers.color
     ],
     vendorPrefixes: [
       '-moz-',
@@ -1281,9 +1281,9 @@ var configuration = {
     defaultValue: 'none',
     valueOptimizers: [
       valueOptimizers.whiteSpace,
-      valueOptimizers.color,
       valueOptimizers.fraction,
-      valueOptimizers.zero
+      valueOptimizers.zero,
+      valueOptimizers.color
     ]
   },
   'top': {

lib/optimizer/level-1/value-optimizers/color.js

@@ -4,6 +4,7 @@ var shortenRgb = require('./color/shorten-rgb');
 
 var split = require('../../../utils/split');
 
+var ANY_COLOR_FUNCTION_PATTERN = /(rgb|rgba|hsl|hsla)\(([^\(\)]+)\)/gi;
 var COLOR_PREFIX_PATTERN = /#|rgb|hsl/gi;
 var HEX_LONG_PATTERN = /(^|[^='"])#([0-9a-f]{6})/gi;
 var HEX_SHORT_PATTERN = /(^|[^='"])#([0-9a-f]{3})/gi;
@@ -47,6 +48,28 @@ var plugin = {
         })
         .replace(HEX_SHORT_PATTERN, function (match, prefix, color) {
           return prefix + '#' + color.toLowerCase();
+        })
+        .replace(ANY_COLOR_FUNCTION_PATTERN, function (match, colorFunction, colorDef) {
+          var tokens = colorDef.split(',');
+          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;
+          }
+
+          if (tokens[1].indexOf('%') == -1) {
+            tokens[1] += '%';
+          }
+
+          if (tokens[2].indexOf('%') == -1) {
+            tokens[2] += '%';
+          }
+
+          return colorFunction + '(' + tokens.join(',') + ')';
         });
 
       if (options.compatibility.colors.opacity && name.indexOf('background') == -1) {

test/optimizer/level-1/optimize-test.js

@@ -437,11 +437,14 @@ vows.describe('level 1 optimizations')
         '.block{color: hsl(0, 0%, calc((var(--button_color_l) - 65) * -100%))}',
         '.block{color:hsl(0,0%,calc((var(--button_color_l) - 65) * -100%))}'
       ],
-      'rgba inside a function': [
+      'rgba inside a function #1': [
         '.block{background-image:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1))}',
         '.block{background-image:linear-gradient(to right,rgba(255,255,255,0),#fff)}'
+      ],
+      'rgba inside a function #2': [
+        '.block{background:linear-gradient(hsla(0,0%,98%,.8),hsla(0,0%,98%,.8)) 0 0/100% 1px no-repeat #f0de98}',
+        '.block{background:linear-gradient(hsla(0,0%,98%,.8),hsla(0,0%,98%,.8)) 0 0/100% 1px no-repeat #f0de98}'
       ]
-
     }, { level: 1 })
   )
   .addBatch(