Merge pull request #2380 from seven-phases-max/referencing-variable-by-color-keyword

Colour keyword as variable name reference

Author: lukeapage

lib/less/functions/color.js

@@ -259,7 +259,7 @@ colorFunctions = {
             return new Color(c.value.slice(1));
         }
         if ((c instanceof Color) || (c = Color.fromKeyword(c.value))) {
-            c.keyword = undefined;
+            c.value = undefined;
             return c;
         }
         throw {

lib/less/functions/svg.js

@@ -1,6 +1,7 @@
 module.exports = function(environment) {
     var Dimension = require("../tree/dimension"),
         Color = require("../tree/color"),
+        Expression = require("../tree/expression"),
         Quoted = require("../tree/quoted"),
         URL = require("../tree/url"),
         functionRegistry = require("./function-registry");
@@ -50,7 +51,7 @@ module.exports = function(environment) {
             '<' + gradientType + 'Gradient id="gradient" gradientUnits="userSpaceOnUse" ' + gradientDirectionSvg + '>';
 
         for (i = 0; i < stops.length; i+= 1) {
-            if (stops[i].value) {
+            if (stops[i] instanceof Expression) {
                 color = stops[i].value[0];
                 position = stops[i].value[1];
             } else {

lib/less/tree/color.js

@@ -56,11 +56,11 @@ Color.prototype.genCSS = function (context, output) {
 Color.prototype.toCSS = function (context, doNotCompress) {
     var compress = context && context.compress && !doNotCompress, color, alpha;
 
-    // `keyword` is set if this color was originally
+    // `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.
-    if (this.keyword) {
-        return this.keyword;
+    if (this.value) {
+        return this.value;
     }
 
     // If we have some transparency, the only way to represent it
@@ -179,7 +179,7 @@ Color.fromKeyword = function(keyword) {
     }
 
     if (c) {
-        c.keyword = keyword;
+        c.value = keyword;
         return c;
     }
 };

test/css/variables.css

@@ -22,7 +22,13 @@
   multi-important: #888888 #888888, 'Trebuchet' !important;
   multi: something 'A', B, C, 'Trebuchet';
 }
-.variable-names {
+.variable-names .quoted {
+  name: 'hello';
+}
+.variable-names .unquoted {
+  name: 'hello';
+}
+.variable-names .color-keyword {
   name: 'hello';
 }
 .alpha {

test/less/variables.less

@@ -51,9 +51,23 @@
 }
 
 .variable-names {
-    @var: 'hello';
-    @name: 'var';
-    name: @@name;
+    .quoted {
+        @var: 'hello';
+        @name: 'var';
+        name: @@name;
+    }
+
+    .unquoted {
+        @var: 'hello';
+        @name: var;
+        name: @@name;
+    }
+    
+    .color-keyword {
+        @red: 'hello';
+        @name: red;
+        name: @@name;
+    }
 }
 
 .alpha {