From 3322609de5fe0ff6fc3d125ed6df7393a9ab0484 Mon Sep 17 00:00:00 2001 From: seven-phases-max Date: Thu, 23 Jan 2014 16:08:10 +0400 Subject: [PATCH] More consistent named colour variables. --- lib/less/functions.js | 28 ++++++------- lib/less/parser.js | 12 ++---- lib/less/tree/color.js | 55 +++++++++++++------------ test/browser/css/global-vars/simple.css | 2 +- test/browser/css/modify-vars/simple.css | 4 +- test/css/comments.css | 4 +- test/css/css-3.css | 2 +- test/css/css-escapes.css | 2 +- test/css/css.css | 2 +- test/css/extract-and-length.css | 2 +- test/css/functions.css | 5 ++- test/css/globalVars/simple.css | 2 +- test/css/import-once.css | 2 +- test/css/import.css | 6 +-- test/css/mixins-args.css | 4 +- test/css/mixins-guards-default-func.css | 4 +- test/css/mixins-guards.css | 6 +-- test/css/parens.css | 2 +- test/css/scope.css | 14 +++---- test/css/selectors.css | 8 ++-- test/css/strings.css | 8 ++-- test/css/whitespace.css | 4 +- test/less/functions.less | 5 ++- test/sourcemaps/basic.json | 2 +- 24 files changed, 93 insertions(+), 92 deletions(-) diff --git a/lib/less/functions.js b/lib/less/functions.js index 8c0f1031c..ffef4ec44 100644 --- a/lib/less/functions.js +++ b/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); diff --git a/lib/less/parser.js b/lib/less/parser.js index 70d2256ba..20289e101 100644 --- a/lib/less/parser.js +++ b/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 = $(/^[_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; -}; \ No newline at end of file +}; diff --git a/lib/less/tree/color.js b/lib/less/tree/color.js index 8ea3fe020..3d841b6b6 100644 --- a/lib/less/tree/color.js +++ b/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; } }; diff --git a/test/browser/css/global-vars/simple.css b/test/browser/css/global-vars/simple.css index 05b9fb02f..6446ebfd4 100644 --- a/test/browser/css/global-vars/simple.css +++ b/test/browser/css/global-vars/simple.css @@ -1,3 +1,3 @@ .test { - color: #ff0000; + color: red; } diff --git a/test/browser/css/modify-vars/simple.css b/test/browser/css/modify-vars/simple.css index 889cd53d9..2a58574d8 100644 --- a/test/browser/css/modify-vars/simple.css +++ b/test/browser/css/modify-vars/simple.css @@ -2,7 +2,7 @@ color: gainsboro; } .test { - color1: #008000; - color2: #800080; + color1: green; + color2: purple; scalar: 20; } diff --git a/test/css/comments.css b/test/css/comments.css index b85f5b4f1..3d86fb77a 100644 --- a/test/css/comments.css +++ b/test/css/comments.css @@ -48,7 +48,7 @@ .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 */; } @@ -56,7 +56,7 @@ color: 1px; } #last { - color: #0000ff; + color: blue; } /* */ /* { */ diff --git a/test/css/css-3.css b/test/css/css-3.css index 61f635c27..7d4f16cf1 100644 --- a/test/css/css-3.css +++ b/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); } diff --git a/test/css/css-escapes.css b/test/css/css-escapes.css index 4d343aa62..4ebecfe15 100644 --- a/test/css/css-escapes.css +++ b/test/css/css-escapes.css @@ -8,7 +8,7 @@ background: red; } .\34 04 strong { - color: #ff00ff; + color: fuchsia; font-weight: bold; } .trailingTest\+ { diff --git a/test/css/css.css b/test/css/css.css index b011a7e38..4fb579711 100644 --- a/test/css/css.css +++ b/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; diff --git a/test/css/extract-and-length.css b/test/css/extract-and-length.css index f550e201b..8bb5ae984 100644 --- a/test/css/extract-and-length.css +++ b/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; diff --git a/test/css/functions.css b/test/css/functions.css index 2c7896df1..5401cc50f 100644 --- a/test/css/functions.css +++ b/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; diff --git a/test/css/globalVars/simple.css b/test/css/globalVars/simple.css index 55779d8b2..630cc4c13 100644 --- a/test/css/globalVars/simple.css +++ b/test/css/globalVars/simple.css @@ -2,5 +2,5 @@ * Test */ .class { - color: #ff0000; + color: red; } diff --git a/test/css/import-once.css b/test/css/import-once.css index 2f86b3b34..f90531ec0 100644 --- a/test/css/import-once.css +++ b/test/css/import-once.css @@ -1,5 +1,5 @@ #import { - color: #ff0000; + color: red; } body { width: 100%; diff --git a/test/css/import.css b/test/css/import.css index a37491813..51e753f80 100644 --- a/test/css/import.css +++ b/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 { diff --git a/test/css/mixins-args.css b/test/css/mixins-args.css index 2b6c5c962..6e9c914e5 100644 --- a/test/css/mixins-args.css +++ b/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 { diff --git a/test/css/mixins-guards-default-func.css b/test/css/mixins-guards-default-func.css index 4b6910c34..a456fb2e4 100644 --- a/test/css/mixins-guards-default-func.css +++ b/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'; diff --git a/test/css/mixins-guards.css b/test/css/mixins-guards.css index 25e6f2873..516d25433 100644 --- a/test/css/mixins-guards.css +++ b/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; diff --git a/test/css/parens.css b/test/css/parens.css index dc09fdf52..0e8cc7c8f 100644 --- a/test/css/parens.css +++ b/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; diff --git a/test/css/scope.css b/test/css/scope.css index baa055230..3ffcca0d4 100644 --- a/test/css/scope.css +++ b/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; diff --git a/test/css/selectors.css b/test/css/selectors.css index 510550472..7dd6139dc 100644 --- a/test/css/selectors.css +++ b/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; diff --git a/test/css/strings.css b/test/css/strings.css index cd6d60202..54298b138 100644 --- a/test/css/strings.css +++ b/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; diff --git a/test/css/whitespace.css b/test/css/whitespace.css index 74c9b65e6..38ad81c1c 100644 --- a/test/css/whitespace.css +++ b/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, diff --git a/test/less/functions.less b/test/less/functions.less index 170a915b4..9772c93cc 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -93,7 +93,10 @@ max: max(1, 3); max: max(3%, 1cm, 8%, 2mm); percentage: percentage((10px / 50)); - color: color("#ff0011"); + color-quoted-digit: color("#dda0dd"); + color-quoted-keyword: color("plum"); + color-color: color(#dda0dd); + color-keyword: color(plum); tint: tint(#777777, 13); tint-full: tint(#777777, 100); tint-percent: tint(#777777, 13%); diff --git a/test/sourcemaps/basic.json b/test/sourcemaps/basic.json index ab73305da..5bc5b2e30 100644 --- a/test/sourcemaps/basic.json +++ b/test/sourcemaps/basic.json @@ -1 +1 @@ -{"version":3,"file":"sourcemaps/basic.css","sources":["testweb/sourcemaps/imported.css","testweb/sourcemaps/basic.less"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;ACAA;EACE,YAAA;EAJA,UAAA;EAWA,iBAAA;EALA,WAAA;EACA,mBAAA;;AAJF,EASE;AATF,EASM;EACF,gBAAA;;AACA,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFA;AAEF,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFA;EAGA,UAAA;;AALN;AAAI;AAUJ;EATE,iBAAA;;AADF,EAEE;AAFE,EAEF;AAFF,EAEM;AAFF,EAEE;AAQN,OARE;AAQF,OARM;EACF,gBAAA;;AACA,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFA;AAEF,EAFF,GAEI,KAFA;AAEF,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFA;AAEF,EAFF,GAEI,KAFA;AAEF,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFA;AAEF,EAFE,GAEA,KAFA;AAEF,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFA;AAEF,EAFE,GAEA,KAFA;AAQN,OARE,GAQF,UARE;AAQF,OARE,GAEI,KAFJ;AAQF,OARE,GAQF,UARM;AAQN,OARE,GAEI,KAFA;AAEF,EAFF,GAQF,UARE;AAEE,EAFF,GAQF,UARM;AAQN,OARM,GAQN,UARE;AAQF,OARM,GAEA,KAFJ;AAQF,OARM,GAQN,UARM;AAQN,OARM,GAEA,KAFA;AAEF,EAFE,GAQN,UARE;AAEE,EAFE,GAQN,UARM;EAGA,UAAA;;AAKN;EACE,WAAA"} \ No newline at end of file +{"version":3,"file":"sourcemaps/basic.css","sources":["testweb/sourcemaps/imported.css","testweb/sourcemaps/basic.less"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;ACAA;EACE,YAAA;EAJA,UAAA;EAWA,iBAAA;EALA,WAAA;EACA,iBAAA;;AAJF,EASE;AATF,EASM;EACF,gBAAA;;AACA,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFA;AAEF,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFA;EAGA,UAAA;;AALN;AAAI;AAUJ;EATE,iBAAA;;AADF,EAEE;AAFE,EAEF;AAFF,EAEM;AAFF,EAEE;AAQN,OARE;AAQF,OARM;EACF,gBAAA;;AACA,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFA;AAEF,EAFF,GAEI,KAFA;AAEF,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFJ;AAEE,EAFF,GAEI,KAFA;AAEF,EAFF,GAEI,KAFA;AAEF,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFA;AAEF,EAFE,GAEA,KAFA;AAEF,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFJ;AAEE,EAFE,GAEA,KAFA;AAEF,EAFE,GAEA,KAFA;AAQN,OARE,GAQF,UARE;AAQF,OARE,GAEI,KAFJ;AAQF,OARE,GAQF,UARM;AAQN,OARE,GAEI,KAFA;AAEF,EAFF,GAQF,UARE;AAEE,EAFF,GAQF,UARM;AAQN,OARM,GAQN,UARE;AAQF,OARM,GAEA,KAFJ;AAQF,OARM,GAQN,UARM;AAQN,OARM,GAEA,KAFA;AAEF,EAFE,GAQN,UARE;AAEE,EAFE,GAQN,UARM;EAGA,UAAA;;AAKN;EACE,WAAA"} \ No newline at end of file