Merge pull request #2380 from seven-phases-max/referencing-variable-b…

…y-color-keyword

Colour keyword as variable name reference

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 {