Fixes #986 - CSS 4 colors in level 2 optimizations.

Author: jakubpawlowicz

History.md

@@ -5,6 +5,7 @@
 * Fixed issue [#861](https://github.com/jakubpawlowicz/clean-css/issues/861) - new `transition` property optimizer.
 * Fixed issue [#895](https://github.com/jakubpawlowicz/clean-css/issues/895) - ignoring specific styles.
 * Fixed issue [#947](https://github.com/jakubpawlowicz/clean-css/issues/947) - selector based filtering.
+* Fixed issue [#986](https://github.com/jakubpawlowicz/clean-css/issues/986) - level 2 optimizations and CSS 4 colors.
 * Fixed issue [#1038](https://github.com/jakubpawlowicz/clean-css/issues/1038) - `font-variation-settings` quoting.
 * Fixes ReDOS vulnerabilities in validator code.
 

lib/optimizer/validator.js

@@ -8,16 +8,19 @@ 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 identifierRegex = /^(\-[a-z0-9_][a-z0-9\-_]*|[a-z][a-z0-9\-_]*)$/i;
-var longHexColorRegex = /^#[0-9a-f]{6}$/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 shortHexColorRegex = /^#[0-9a-f]{3}$/i;
 var timingFunctionRegex = /^(cubic\-bezier|steps)\([^\)]+\)$/;
 var validTimeUnits = ['ms', 's'];
 var urlRegex = /^url\([\s\S]+\)$/i;
 var variableRegex = new RegExp('^' + variableRegexStr + '$', 'i');
 
+var eightValueColorRegex = /^#[0-9a-f]{8}$/i;
+var fourValueColorRegex = /^#[0-9a-f]{4}$/i;
+var sixValueColorRegex = /^#[0-9a-f]{6}$/i;
+var threeValueColorRegex = /^#[0-9a-f]{3}$/i;
+
 var DECIMAL_DOT = '.';
 var MINUS_SIGN = '-';
 var PLUS_SIGN = '+';
@@ -365,7 +368,7 @@ function isFunction(value) {
 }
 
 function isHexColor(value) {
-  return shortHexColorRegex.test(value) || longHexColorRegex.test(value);
+  return threeValueColorRegex.test(value) || fourValueColorRegex.test(value) || sixValueColorRegex.test(value) || eightValueColorRegex.test(value);
 }
 
 function isHslColor(value) {

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

@@ -106,6 +106,18 @@ vows.describe('level 2 optimizer')
       ]
     }, { level: 2 })
   )
+  .addBatch(
+    optimizerContext('colors', {
+      'four value colors': [
+        '.block{border:1px solid #0001}',
+        '.block{border:1px solid #0001}'
+      ],
+      'eight value colors': [
+        '.block{border:1px solid #00000001}',
+        '.block{border:1px solid #00000001}'
+      ]
+    }, { level: 2 })
+  )
   .addBatch(
     optimizerContext('unit merging', {
       'font-size': [