Color function updates - #RRGGBBAA and CSS Variables (#3291)

* Supports #RRGGBBAA color form

* Allow conversion of #RRGGBBAA to rgba()

* Preserves unsupported color values - Fixes #2986

* Maintains color-space when possible

Author: matthew-dean

lib/less/functions/color.js

@@ -8,8 +8,17 @@ var Dimension = require('../tree/dimension'),
 function clamp(val) {
     return Math.min(1, Math.max(0, val));
 }
-function hsla(color) {
-    return colorFunctions.hsla(color.h, color.s, color.l, color.a);
+function hsla(origColor, hsl) {
+    var color = colorFunctions.hsla(hsl.h, hsl.s, hsl.l, hsl.a);
+    if (color) {
+        if (origColor.value && 
+            /^(rgb|hsl)/.test(origColor.value)) {
+            color.value = origColor.value;
+        } else {
+            color.value = 'rgb';
+        }
+        return color;
+    }
 }
 function number(n) {
     if (n instanceof Dimension) {
@@ -32,46 +41,79 @@ function scaled(n, size) {
 }
 colorFunctions = {
     rgb: function (r, g, b) {
-        return colorFunctions.rgba(r, g, b, 1.0);
+        var color = colorFunctions.rgba(r, g, b, 1.0);
+        if (color) {
+            color.value = 'rgb';
+            return color;
+        }
     },
     rgba: function (r, g, b, a) {
-        var rgb = [r, g, b].map(function (c) { return scaled(c, 255); });
-        a = number(a);
-        return new Color(rgb, a);
+        try {
+            if (r instanceof Color) {
+                if (g) {
+                    a = number(g);
+                } else {
+                    a = r.alpha;
+                }
+                return new Color(r.rgb, a, 'rgba');
+            }
+            var rgb = [r, g, b].map(function (c) { return scaled(c, 255); });
+            a = number(a);
+            return new Color(rgb, a, 'rgba');
+        }
+        catch (e) {}
     },
     hsl: function (h, s, l) {
-        return colorFunctions.hsla(h, s, l, 1.0);
+        var color = colorFunctions.hsla(h, s, l, 1.0);
+        if (color) {
+            color.value = 'hsl';
+            return color;
+        }
     },
     hsla: function (h, s, l, a) {
+        try {
+            if (h instanceof Color) {
+                if (s) {
+                    a = number(s);
+                } else {
+                    a = h.alpha;
+                }
+                return new Color(h.rgb, a, 'hsla');
+            }
 
-        var m1, m2;
+            var m1, m2;
 
-        function hue(h) {
-            h = h < 0 ? h + 1 : (h > 1 ? h - 1 : h);
-            if (h * 6 < 1) {
-                return m1 + (m2 - m1) * h * 6;
-            }
-            else if (h * 2 < 1) {
-                return m2;
-            }
-            else if (h * 3 < 2) {
-                return m1 + (m2 - m1) * (2 / 3 - h) * 6;
-            }
-            else {
-                return m1;
+            function hue(h) {
+                h = h < 0 ? h + 1 : (h > 1 ? h - 1 : h);
+                if (h * 6 < 1) {
+                    return m1 + (m2 - m1) * h * 6;
+                }
+                else if (h * 2 < 1) {
+                    return m2;
+                }
+                else if (h * 3 < 2) {
+                    return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+                }
+                else {
+                    return m1;
+                }
             }
-        }
 
-        h = (number(h) % 360) / 360;
-        s = clamp(number(s)); l = clamp(number(l)); a = clamp(number(a));
+            h = (number(h) % 360) / 360;
+            s = clamp(number(s)); l = clamp(number(l)); a = clamp(number(a));
 
-        m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
-        m1 = l * 2 - m2;
+            m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
+            m1 = l * 2 - m2;
 
-        return colorFunctions.rgba(hue(h + 1 / 3) * 255,
-            hue(h)       * 255,
-            hue(h - 1 / 3) * 255,
-            a);
+            var rgb = [
+                hue(h + 1 / 3) * 255,
+                hue(h)       * 255,
+                hue(h - 1 / 3) * 255
+            ];
+            a = number(a);
+            return new Color(rgb, a, 'hsla');
+        }
+        catch (e) {}
     },
 
     hsv: function(h, s, v) {
@@ -159,7 +201,7 @@ colorFunctions = {
             hsl.s += amount.value / 100;
         }
         hsl.s = clamp(hsl.s);
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     desaturate: function (color, amount, method) {
         var hsl = color.toHSL();
@@ -171,7 +213,7 @@ colorFunctions = {
             hsl.s -= amount.value / 100;
         }
         hsl.s = clamp(hsl.s);
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     lighten: function (color, amount, method) {
         var hsl = color.toHSL();
@@ -183,7 +225,7 @@ colorFunctions = {
             hsl.l += amount.value / 100;
         }
         hsl.l = clamp(hsl.l);
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     darken: function (color, amount, method) {
         var hsl = color.toHSL();
@@ -195,7 +237,7 @@ colorFunctions = {
             hsl.l -= amount.value / 100;
         }
         hsl.l = clamp(hsl.l);
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     fadein: function (color, amount, method) {
         var hsl = color.toHSL();
@@ -207,7 +249,7 @@ colorFunctions = {
             hsl.a += amount.value / 100;
         }
         hsl.a = clamp(hsl.a);
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     fadeout: function (color, amount, method) {
         var hsl = color.toHSL();
@@ -219,22 +261,22 @@ colorFunctions = {
             hsl.a -= amount.value / 100;
         }
         hsl.a = clamp(hsl.a);
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     fade: function (color, amount) {
         var hsl = color.toHSL();
 
         hsl.a = amount.value / 100;
         hsl.a = clamp(hsl.a);
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     spin: function (color, amount) {
         var hsl = color.toHSL();
         var hue = (hsl.h + amount.value) % 360;
 
         hsl.h = hue < 0 ? 360 + hue : hue;
 
-        return hsla(hsl);
+        return hsla(color, hsl);
     },
     //
     // Copyright (c) 2006-2009 Hampton Catlin, Natalie Weizenbaum, and Chris Eppstein
@@ -338,16 +380,17 @@ colorFunctions = {
     },
     color: function(c) {
         if ((c instanceof Quoted) &&
-            (/^#([a-f0-9]{6}|[a-f0-9]{3})$/i.test(c.value))) {
-            return new Color(c.value.slice(1));
+            (/^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3,4})$/i.test(c.value))) {
+            var val = c.value.slice(1);
+            return new Color(val, undefined, '#' + val);
         }
         if ((c instanceof Color) || (c = Color.fromKeyword(c.value))) {
             c.value = undefined;
             return c;
         }
         throw {
             type:    'Argument',
-            message: 'argument must be a color keyword or 3/6 digit hex e.g. #FFF'
+            message: 'argument must be a color keyword or 3|4|6|8 digit hex e.g. #FFF'
         };
     },
     tint: function(color, amount) {

lib/less/parser/parser.js

@@ -636,15 +636,8 @@ var Parser = function Parser(context, imports, fileInfo) {
                 color: function () {
                     var rgb;
 
-                    if (parserInput.currentChar() === '#' && (rgb = parserInput.$re(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/))) {
-                        // strip colons, brackets, whitespaces and other characters that should not
-                        // definitely be part of color string
-                        var colorCandidateString = rgb.input.match(/^#([\w]+).*/);
-                        colorCandidateString = colorCandidateString[1];
-                        if (!colorCandidateString.match(/^[A-Fa-f0-9]+$/)) { // verify if candidate consists only of allowed HEX characters
-                            error('Invalid HEX color code');
-                        }
-                        return new(tree.Color)(rgb[1], undefined, '#' + colorCandidateString);
+                    if (parserInput.currentChar() === '#' && (rgb = parserInput.$re(/^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3,4})/))) {
+                        return new(tree.Color)(rgb[1], undefined, rgb[0]);
                     }
                 },
 

lib/less/tree/color.js

@@ -5,6 +5,7 @@ var Node = require('./node'),
 // RGB Colors - #ff0014, #eee
 //
 var Color = function (rgb, a, originalForm) {
+    var self = this;
     //
     // The end goal here, is to parse the arguments
     // into an integer triplet, such as `128, 255, 0`
@@ -13,16 +14,26 @@ var Color = function (rgb, a, originalForm) {
     //
     if (Array.isArray(rgb)) {
         this.rgb = rgb;
-    } else if (rgb.length == 6) {
-        this.rgb = rgb.match(/.{2}/g).map(function (c) {
-            return parseInt(c, 16);
+    } else if (rgb.length >= 6) {
+        this.rgb = [];
+        rgb.match(/.{2}/g).map(function (c, i) {
+            if (i < 3) {
+                self.rgb.push(parseInt(c, 16));
+            } else {
+                self.alpha = (parseInt(c, 16)) / 255;
+            }
         });
     } else {
-        this.rgb = rgb.split('').map(function (c) {
-            return parseInt(c + c, 16);
+        this.rgb = [];
+        rgb.split('').map(function (c, i) {
+            if (i < 3) {
+                self.rgb.push(parseInt(c + c, 16));
+            } else {
+                self.alpha = (parseInt(c + c, 16)) / 255;
+            }
         });
     }
-    this.alpha = typeof a === 'number' ? a : 1;
+    this.alpha = this.alpha || (typeof a === 'number' ? a : 1);
     if (typeof originalForm !== 'undefined') {
         this.value = originalForm;
     }
@@ -57,25 +68,54 @@ Color.prototype.genCSS = function (context, output) {
     output.add(this.toCSS(context));
 };
 Color.prototype.toCSS = function (context, doNotCompress) {
-    var compress = context && context.compress && !doNotCompress, color, alpha;
+    var compress = context && context.compress && !doNotCompress, color, alpha,
+        colorFunction, args = [];
 
     // `value` is set if this color was originally
     // converted from a named color string so we need
     // to respect this and try to output named color too.
+    alpha = this.fround(context, this.alpha);
+
     if (this.value) {
-        return this.value;
+        if (this.value.indexOf('rgb') === 0) {
+            if (alpha < 1) {
+                colorFunction = 'rgba';
+            }
+        } else if (this.value.indexOf('hsl') === 0) {
+            if (alpha === 1) {
+                colorFunction = 'hsl';
+            } else {
+                colorFunction = 'hsla';
+            }
+        } else {
+            return this.value;
+        }
+    } else {
+        if (alpha < 1) {
+            colorFunction = 'rgba';
+        }
     }
 
-    // If we have some transparency, the only way to represent it
-    // is via `rgba`. Otherwise, we use the hex representation,
-    // which has better compatibility with older browsers.
-    // Values are capped between `0` and `255`, rounded and zero-padded.
-    alpha = this.fround(context, this.alpha);
-    if (alpha < 1) {
-        return 'rgba(' + this.rgb.map(function (c) {
-            return clamp(Math.round(c), 255);
-        }).concat(clamp(alpha, 1))
-            .join(',' + (compress ? '' : ' ')) + ')';
+    switch (colorFunction) {
+        case 'rgba':
+            args = this.rgb.map(function (c) {
+                return clamp(Math.round(c), 255);
+            }).concat(clamp(alpha, 1));
+            break;
+        case 'hsla':
+            args.push(clamp(alpha, 1));
+        case 'hsl':
+            color = this.toHSL();
+            args = [
+                this.fround(context, color.h),
+                this.fround(context, color.s * 100) + '%',
+                this.fround(context, color.l * 100) + '%'
+            ].concat(args);
+    }
+
+    if (colorFunction) {
+        // Values are capped between `0` and `255`, rounded and zero-padded.
+        return colorFunction + '(' + args.join(',' + (compress ? '' : ' ')) + ')';
     }
 
     color = this.toRGB();

test/css/colors.css

@@ -23,7 +23,7 @@
   color: #1a0000ff;
 }
 #alpha #hsla {
-  color: rgba(61, 45, 41, 0.6);
+  color: hsla(11, 20%, 20%, 0.6);
 }
 #overflow .a {
   color: #000000;
@@ -47,10 +47,10 @@
   color: #333333;
 }
 #808080 {
-  color: #808080;
+  color: hsl(0, 0%, 50%);
 }
 #00ff00 {
-  color: #00ff00;
+  color: hsl(120, 100%, 50%);
 }
 .lightenblue {
   color: #3333ff;
@@ -85,3 +85,18 @@
   color: 255;
   border-color: rgba(255, 0, 0, 0.5);
 }
+#rrggbbaa {
+  test-1: #55FF5599;
+  test-2: #5F59;
+  test-3: rgba(136, 255, 136, 0.6);
+  test-4: rgba(85, 255, 85, 0.1);
+  test-5: rgba(85, 255, 85, 0.6);
+  test-6: rgba(85, 255, 85, 0.6);
+  test-7: rgba(85, 255, 85, 0.5);
+  test-8: rgba(var(--color-accent), 0.2);
+  test-9: rgb(var(--color-accent));
+  test-9: hsla(var(--color-accent));
+  test-10: #55FF5599;
+  test-11: hsla(120, 100%, 66.66666667%, 0.6);
+  test-12: hsla(120, 100%, 66.66666667%, 0.5);
+}