More consistent named color variables (#1595)

lib/less/functions.js

@@ -310,21 +310,19 @@ tree.functions = {
     percentage: function (n) {
         return new(tree.Dimension)(n.value * 100, '%');
     },
-    color: function (n) {
-        if (n instanceof tree.Quoted) {
-            var colorCandidate = n.value,
-                returnColor;
-            returnColor = tree.Color.fromKeyword(colorCandidate);
-            if (returnColor) {
-                return returnColor;
-            }
-            if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/.test(colorCandidate)) {
-                return new(tree.Color)(colorCandidate.slice(1));
-            }
-            throw { type: "Argument", message: "argument must be a color keyword or 3/6 digit hex e.g. #FFF" };
-        } else {
-            throw { type: "Argument", message: "argument must be a string" };
-        }
+    color: function(c) {
+        if ((c instanceof tree.Quoted) && 
+            (/^#([a-f0-9]{6}|[a-f0-9]{3})$/i.test(c.value))) {
+            return new(tree.Color)(c.value.slice(1));
+        }
+        if ((c instanceof tree.Color) || (c = tree.Color.fromKeyword(c.value))) {
+            c.keyword = undefined;
+            return c;
+        }
+        throw { 
+            type:    "Argument", 
+            message: "argument must be a color keyword or 3/6 digit hex e.g. #FFF" 
+        };
     },
     iscolor: function (n) {
         return this._isa(n, tree.Color);

lib/less/parser.js

@@ -793,15 +793,9 @@ less.Parser = function Parser(env) {
                 //     black border-collapse
                 //
                 keyword: function () {
-                    var k;
-
-                    k = $re(/^[_A-Za-z-][_A-Za-z0-9-]*/);
+                    var k = $re(/^[_A-Za-z-][_A-Za-z0-9-]*/);
                     if (k) {
-                        var color = tree.Color.fromKeyword(k);
-                        if (color) {
-                            return color;
-                        }
-                        return new(tree.Keyword)(k);
+                        return tree.Color.fromKeyword(k) || new(tree.Keyword)(k);
                     }
                 },
 
@@ -1960,4 +1954,4 @@ less.Parser.serializeVars = function(vars) {
     }
 
     return s;
-};
+};

lib/less/tree/color.js

@@ -23,8 +23,6 @@ tree.Color = function (rgb, a) {
     this.alpha = typeof(a) === 'number' ? a : 1;
 };
 
-var transparentKeyword = "transparent";
-
 tree.Color.prototype = {
     type: "Color",
     eval: function () { return this; },
@@ -34,35 +32,39 @@ tree.Color.prototype = {
         output.add(this.toCSS(env));
     },
     toCSS: function (env, doNotCompress) {
-        var compress = env && env.compress && !doNotCompress,
-            alpha = tree.fround(env, this.alpha);
+        var compress = env && env.compress && !doNotCompress, color, alpha;
+
+        // `keyword` 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 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 = tree.fround(env, this.alpha);
         if (alpha < 1) {
-            if (alpha === 0 && this.isTransparentKeyword) {
-                return transparentKeyword;
-            }
             return "rgba(" + this.rgb.map(function (c) {
                 return clamp(Math.round(c), 255);
             }).concat(clamp(alpha, 1))
                 .join(',' + (compress ? '' : ' ')) + ")";
-        } else {
-            var color = this.toRGB();
+        } 
+
+        color = this.toRGB();
 
-            if (compress) {
-                var splitcolor = color.split('');
+        if (compress) {
+            var splitcolor = color.split('');
 
-                // Convert color to short format
-                if (splitcolor[1] === splitcolor[2] && splitcolor[3] === splitcolor[4] && splitcolor[5] === splitcolor[6]) {
-                    color = '#' + splitcolor[1] + splitcolor[3] + splitcolor[5];
-                }
+            // Convert color to short format
+            if (splitcolor[1] === splitcolor[2] && splitcolor[3] === splitcolor[4] && splitcolor[5] === splitcolor[6]) {
+                color = '#' + splitcolor[1] + splitcolor[3] + splitcolor[5];
             }
-
-            return color;
         }
+
+        return color;
     },
 
     //
@@ -152,16 +154,17 @@ tree.Color.prototype = {
 };
 
 tree.Color.fromKeyword = function(keyword) {
-    keyword = keyword.toLowerCase();
-
-    if (tree.colors.hasOwnProperty(keyword)) {
-        // detect named color
-        return new(tree.Color)(tree.colors[keyword].slice(1));
+    var c, key = keyword.toLowerCase();
+    if (tree.colors.hasOwnProperty(key)) {
+        c = new(tree.Color)(tree.colors[key].slice(1));
+    }
+    else if (key === "transparent") {
+        c = new(tree.Color)([0, 0, 0], 0); 
     }
-    if (keyword === transparentKeyword) {
-        var transparent = new(tree.Color)([0, 0, 0], 0);
-        transparent.isTransparentKeyword = true;
-        return transparent;
+
+    if (c) {
+        c.keyword = keyword;
+        return c;
     }
 };
 

test/browser/css/global-vars/simple.css

@@ -1,3 +1,3 @@
 .test {
-  color: #ff0000;
+  color: red;
 }

test/browser/css/modify-vars/simple.css

@@ -2,7 +2,7 @@
   color: gainsboro;
 }
 .test {
-  color1: #008000;
-  color2: #800080;
+  color1: green;
+  color2: purple;
   scalar: 20;
 }

test/css/comments.css

@@ -48,15 +48,15 @@
 .selector,
 .lots,
 .comments {
-  color: #808080, /* blue */ #ffa500;
+  color: grey, /* blue */ orange;
   -webkit-border-radius: 2px /* webkit only */;
   -moz-border-radius: 8px /* moz only with operation */;
 }
 .test {
   color: 1px;
 }
 #last {
-  color: #0000ff;
+  color: blue;
 }
 /*  */
 /* { */

test/css/css-3.css

@@ -1,5 +1,5 @@
 .comma-delimited {
-  text-shadow: -1px -1px 1px #ff0000, 6px 5px 5px #ffff00;
+  text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
   -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset, 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
   -webkit-transform: rotate(0deg);
 }

test/css/css-escapes.css

@@ -8,7 +8,7 @@
   background: red;
 }
 .\34 04 strong {
-  color: #ff00ff;
+  color: fuchsia;
   font-weight: bold;
 }
 .trailingTest\+ {

test/css/css.css

@@ -71,7 +71,7 @@ p + h1 {
   display: -moz-inline-stack;
   width: .1em;
   background-color: #009998;
-  background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#0000ff));
+  background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
   margin: ;
   filter: alpha(opacity=100);
   width: auto\9;

test/css/extract-and-length.css

@@ -13,7 +13,7 @@
   name-value: name;
   string-value: "string";
   number-value: 12345678;
-  color-value: #0000ff;
+  color-value: blue;
   rgba-value: rgba(80, 160, 240, 0.67);
   empty-value: ;
   name-length: 1;

test/css/functions.css

@@ -87,7 +87,10 @@
   max: 3;
   max: max(8%, 1cm);
   percentage: 20%;
-  color: #ff0011;
+  color-quoted-digit: #dda0dd;
+  color-quoted-keyword: #dda0dd;
+  color-color: #dda0dd;
+  color-keyword: #dda0dd;
   tint: #898989;
   tint-full: #ffffff;
   tint-percent: #898989;

test/css/globalVars/simple.css

@@ -2,5 +2,5 @@
   * Test
   */
 .class {
-  color: #ff0000;
+  color: red;
 }

test/css/import-once.css

@@ -1,5 +1,5 @@
 #import {
-  color: #ff0000;
+  color: red;
 }
 body {
   width: 100%;

test/css/import.css

@@ -3,7 +3,7 @@
 @import url("//ha.com/file.css") (min-width: 100px);
 #import-test {
   height: 10px;
-  color: #ff0000;
+  color: red;
   width: 10px;
   height: 30%;
 }
@@ -13,11 +13,11 @@
   }
 }
 #import {
-  color: #ff0000;
+  color: red;
 }
 .mixin {
   height: 10px;
-  color: #ff0000;
+  color: red;
 }
 @media screen and (max-width: 601px) {
   #css {

test/css/mixins-args.css

@@ -8,7 +8,7 @@
   color: blue;
   width: 10px;
   height: 99%;
-  border: 2px dotted #000000;
+  border: 2px dotted black;
 }
 .one-arg {
   width: 15px;
@@ -52,7 +52,7 @@ body {
   width: 10px;
 }
 .arguments {
-  border: 1px solid #000000;
+  border: 1px solid black;
   width: 1px;
 }
 .arguments2 {

test/css/mixins-guards-default-func.css

@@ -96,10 +96,10 @@ guard-default-multi-2-3 {
   default-3: 3;
 }
 guard-default-multi-3-blue {
-  case-2: #00008b;
+  case-2: darkblue;
 }
 guard-default-multi-3-green {
-  default-color: #008000;
+  default-color: green;
 }
 guard-default-multi-3-foo {
   case-1: I am 'foo';

test/css/mixins-guards.css

@@ -62,9 +62,9 @@
   test: pass;
 }
 .colorguardtest {
-  content: is #ff0000;
-  content: is not #0000ff its #ff0000;
-  content: is not #0000ff its #800080;
+  content: is red;
+  content: is not blue its red;
+  content: is not blue its purple;
 }
 .stringguardtest {
   content: is theme1;

test/css/parens.css

@@ -1,5 +1,5 @@
 .parens {
-  border: 2px solid #000000;
+  border: 2px solid black;
   margin: 1px 3px 16 3;
   width: 36;
   padding: 2px 36px;

test/css/scope.css

@@ -2,19 +2,19 @@
   color: #998899;
 }
 .scope1 {
-  color: #0000ff;
-  border-color: #000000;
+  color: blue;
+  border-color: black;
 }
 .scope1 .scope2 {
-  color: #0000ff;
+  color: blue;
 }
 .scope1 .scope2 .scope3 {
-  color: #ff0000;
-  border-color: #000000;
-  background-color: #ffffff;
+  color: red;
+  border-color: black;
+  background-color: white;
 }
 .scope {
-  scoped-val: #008000;
+  scoped-val: green;
 }
 .heightIsSet {
   height: 1024px;

test/css/selectors.css

@@ -102,16 +102,16 @@ p a span {
   background: amber;
 }
 .other ::fnord {
-  color: #ff0000;
+  color: red;
 }
 .other::fnord {
-  color: #ff0000;
+  color: red;
 }
 .other ::bnord {
-  color: #ff0000;
+  color: red;
 }
 .other::bnord {
-  color: #ff0000;
+  color: red;
 }
 .blood {
   color: red;

test/css/strings.css

@@ -33,10 +33,10 @@
   url5: "http://lesscss.org/54.4px";
 }
 .mix-mul-class {
-  color: #0000ff;
-  color: #ff0000;
-  color: #000000;
-  color: #ffa500;
+  color: blue;
+  color: red;
+  color: black;
+  color: orange;
 }
 .watermark {
   family: Univers, Arial, Verdana, San-Serif;

test/css/whitespace.css

@@ -19,14 +19,14 @@
   color: white;
 }
 .no-semi-column {
-  color: #ffffff;
+  color: white;
 }
 .no-semi-column {
   color: white;
   white-space: pre;
 }
 .no-semi-column {
-  border: 2px solid #ffffff;
+  border: 2px solid white;
 }
 .newlines {
   background: the,