bug#23383: [PATCH] Support completion of color functions in CSS mode

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Etienne Prud'homme]

[-- Attachment #1: Type: text/plain, Size: 415 bytes --]

The attached patch adds completion for CSS color functions such as
`rgb()'. Values were taken from the “CSS Color Module Level 4”. It can
be found at: https://drafts.csswg.org/css-color/#color-type

As a sidenote, how should we handle functions? Since they use
parentheses, the point is going to be outside of parentheses.

Eg.
rgba()*
      ^(point)

Also, should we include the parameters number?

[-- Attachment #2: 0001-Add-completion-of-color-functions-in-CSS-mode.patch --]
[-- Type: text/x-patch, Size: 1202 bytes --]

From 52cc18080206fcd0d154a6c75c458a39bdcdfcbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Etienne=20Prud=E2=80=99homme?= <e.e.f.prudhomme@gmail.com>
Date: Tue, 26 Apr 2016 18:44:08 -0400
Subject: [PATCH] Add completion of color functions in CSS mode

* lisp/textmodes/css-mode.el (css-value-class-alist): Add CSS color
  functions as candidates for color values.
---
 lisp/textmodes/css-mode.el | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index e30fb3e..78d4736 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -463,7 +463,8 @@ further value candidates, since that list would be infinite.")
     (color
      "aqua" "black" "blue" "fuchsia" "gray" "green" "lime" "maroon"
      "navy" "olive" "orange" "purple" "red" "silver" "teal" "white"
-     "yellow" "transparent")
+     "yellow" "transparent" color-functions)
+    (color-functions "color-mod()" "device-cmyk()" "gray()" "hsl()" "hsla()" "hwb()" "rgb()" "rgba()")
     (common-lig-values "common-ligatures" "no-common-ligatures")
     (contextual-alt-values "contextual" "no-contextual")
     (counter "counter()" "counters()")
-- 
2.8.1

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 1568 bytes --]

Hello Etienne, thanks for the patch.

On Wed, Apr 27, 2016 at 12:48 AM, Etienne Prud'homme 
<e.e.f.prudhomme@gmail.com> wrote:
> The attached patch adds completion for CSS color functions such as
> `rgb()'. Values were taken from the “CSS Color Module Level 4”. 
> It can
> be found at: https://drafts.csswg.org/css-color/#color-type

It will be nice to have completion for those new color functions. Some
feedback regarding the patch follows.

- In the completion definitions we've tried to stay as close as possible
  to the structure used in the CSS spec. This means that instead of
  introducing `color-functions' we should make `color' complete directly
  to "rgb()", "rgba()", and so on, then `hex-color', `named-color' and
  the literal `currentcolor' (I think we can skip
  `deprecated-system-color'). `named-color' will then contain the
  literal color names like `color' does now.

- One of the tests in test/lisp/textmodes/css-mode-tests.el needs
  updating. To see this, run `make lisp/textmodes/css-mode-tests' from
  the test directory.

- Please wrap lines around column 70 or so to stay in line with the rest
  of the file.

> As a sidenote, how should we handle functions? Since they use
> parentheses, the point is going to be outside of parentheses.
> 
> Eg.
> rgba()*
>       ^(point)

True, I'm not sure how to best solve it.

> Also, should we include the parameters number?

I think that's rather a job for something like ElDoc (I'm currently
working on adding ElDoc support to CSS mode).

-- Simen

[-- Attachment #2: Type: text/html, Size: 2219 bytes --]

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Etienne Prud'homme]

[-- Attachment #1: Type: text/plain, Size: 1292 bytes --]

On Wed, 27 Apr 2016 21:16:58 +0200,
Simen Heggestøyl <simenheg@gmail.com> wrote:

> - In the completion definitions we've tried to stay as close as
> possible to the structure used in the CSS spec. This means that
> instead of introducing `color-functions' we should make `color'
> complete directly to "rgb()", "rgba()", and so on, then `hex-color',
> `named-color' and the literal `currentcolor' (I think we can skip
>   `deprecated-system-color'). `named-color' will then contain the
>   literal color names like `color' does now.
That’s a good point. Since I saw that `color' lacked most of
them, I wasn’t sure where we were going.

> - One of the tests in test/lisp/textmodes/css-mode-tests.el needs
>   updating. To see this, run `make lisp/textmodes/css-mode-tests' from
>   the test directory.
> 
> - Please wrap lines around column 70 or so to stay in line with the
> rest of the file.
Thanks for reminding me! I completely forgot. Much easier to read.

I’ve made a second patch according to your recommendations. Color
functions are now part of `color' and `named-color' is now a separate
entity. I’ve tried to follow CSSWG ordering, but it’s not always the
same order in the specifications. I also found two more functions not
present earlier.

[-- Attachment #2: 0001-Add-completion-of-colors-in-CSS-mode.patch --]
[-- Type: text/x-patch, Size: 3693 bytes --]

From 3e000ab30b3c6a4cd8cc1f76bd98c5f7c5aa0c30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Etienne=20Prud=E2=80=99homme?= <e.e.f.prudhomme@gmail.com>
Date: Wed, 27 Apr 2016 19:52:28 -0400
Subject: [PATCH] Add completion of colors in CSS mode

* lisp/textmodes/css-mode.el (css-value-class-alist): Add CSS colors
  candidates from "CSS Color Module Level 4".
---
 lisp/textmodes/css-mode.el | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index e30fb3e..3b795fd 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -460,10 +460,9 @@ css-value-class-alist
     (bg-layer bg-image position repeat-style attachment box)
     (bg-size length percentage "auto" "cover" "contain")
     (box "border-box" "padding-box" "content-box")
-    (color
-     "aqua" "black" "blue" "fuchsia" "gray" "green" "lime" "maroon"
-     "navy" "olive" "orange" "purple" "red" "silver" "teal" "white"
-     "yellow" "transparent")
+    (color "rgb()" "rgba()" "hsl()" "hsla()" "hwb()" "gray()" "lab()"
+           "lch()" "device-cmyk()" "color-mod()" "#" namedColor
+           "transparent" "currentColor")
     (common-lig-values "common-ligatures" "no-common-ligatures")
     (contextual-alt-values "contextual" "no-contextual")
     (counter "counter()" "counters()")
@@ -502,6 +501,37 @@ css-value-class-alist
     (line-width length "thin" "medium" "thick")
     (linear-gradient "linear-gradient()")
     (margin-width "auto" length percentage)
+    (named-color
+     "aliceblue" "antiquewhite" "aqua" "aquamarine" "azure" "beige"
+     "bisque" "black" "blanchedalmond" "blue" "blueviolet" "brown"
+     "burlywood" "cadetblue" "chartreuse" "chocolate" "coral"
+     "cornflowerblue" "cornsilk" "crimson" "cyan" "darkblue"
+     "darkcyan" "darkgoldenrod" "darkgray" "darkgreen" "darkgrey"
+     "darkkhaki" "darkmagenta" "darkolivegreen" "darkorange"
+     "darkorchid" "darkred" "darksalmon" "darkseagreen"
+     "darkslateblue" "darkslategray" "darkslategrey" "darkturquoise"
+     "darkviolet" "deeppink" "deepskyblue" "dimgray" "dimgrey"
+     "dodgerblue" "firebrick" "floralwhite" "forestgreen" "fuchsia"
+     "gainsboro" "ghostwhite" "gold" "goldenrod" "gray" "green"
+     "greenyellow" "grey" "honeydew" "hotpink" "indianred" "indigo"
+     "ivory" "khaki" "lavender" "lavenderblush" "lawn reen"
+     "lemonchiffon" "lightblue" "lightcoral" "lightcyan"
+     "lightgoldenrodyellow" "lightgray" "lightgreen" "lightgrey"
+     "lightpi k" "lightsalmon" "lightseagreen" "lightskyblue"
+     "lightslategray" "lightslategrey" "lightsteelblue" "lightyellow"
+     "lime" "limeg een" "linen" "magenta" "maroon" "mediumaquamarine"
+     "mediumblue" "mediumorchid" "mediumpurple" "mediumseagreen"
+     "mediumslateblu " "mediumspringgreen" "mediumturquoise"
+     "mediumvioletred" "midnightblue" "mintcream" "mistyrose"
+     "moccasin" "navajowhite" "nav " "oldlace" "olive" "olivedrab"
+     "orange" "orangered" "orchid" "palegoldenrod" "palegreen"
+     "paleturquoise" "palevioletred" "pap yawhip" "peachpuff" "peru"
+     "pink" "plum" "powderblue" "purple" "rebeccapurple" "red"
+     "rosybrown" "royalblue" "saddlebrown" "sa mon" "sandybrown"
+     "seagreen" "seashell" "sienna" "silver" "skyblue" "slateblue"
+     "slategray" "slategrey" "snow" "springgreen" " teelblue" "tan"
+     "teal" "thistle" "tomato" "turquoise" "violet" "wheat" "white"
+     "whitesmoke" "yellow" "yellowgreen")
     (number "calc()")
     (numeric-figure-values "lining-nums" "oldstyle-nums")
     (numeric-fraction-values "diagonal-fractions" "stacked-fractions")
-- 
2.8.1

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 908 bytes --]

Thanks for the revision, Etienne.

There are still a couple of issues that need to be resolved.

- I think we should stick to the current CSS Color Module Level 3
  recommendation [1]. The functions apart from `rgb()', `rgba()',
  `hsl()', and `hsla()' are only present in an Editor's Draft. I find no
  other resources about them, so I don't think we should include them
  until the new spec becomes at least a Candidate Recommendation.

- I think there's little use in completing `#' since it's only one
  character.

- `namedColor' must be changed to `named-color' to match the name of the
  value class.

- The new color names need to be double-checked. For instance I see that
  `limegreen' has become `limeg een' and `salmon' has become `sa mon'.

- The test `css-test-property-values' in
  test/lisp/textmodes/css-mode-tests.el needs a small update.

[1] https://www.w3.org/TR/css3-color/

-- Simen



[-- Attachment #2: Type: text/html, Size: 1291 bytes --]

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Etienne Prud'homme]

[-- Attachment #1: Type: text/plain, Size: 1693 bytes --]

I've attached the current patch.

> - I think we should stick to the current CSS Color Module Level 3
>   recommendation [1]. The functions apart from `rgb()', `rgba()',
>   `hsl()', and `hsla()' are only present in an Editor's Draft. I find
> no other resources about them, so I don't think we should include them
>   until the new spec becomes at least a Candidate Recommendation.
Thanks. I didn't realize the high probability most of them won't be in
the recommendation

> - I think there's little use in completing `#' since it's only one
>   character.

I was also thinking the same thing. I interpreted: "and so
on, then `hex-color'" too literally.

> - `namedColor' must be changed to `named-color' to match the name of
> the value class.
Thanks for pointing that out.

> - The new color names need to be double-checked. For instance I see
> that `limegreen' has become `limeg een' and `salmon' has become `sa
> mon'.
I made the list with a macro. I was too tired to double check 140
colors. The current list was generated from Dough Crockford's color
list [1] using:

| var list = "";
| for(var i=0, len=colors.length; i<len; i++)
|     list += '"' + colors[i] + '" ';

`colors` needs to be extracted from the Immediately-invoked function
expression [2].

> - The test `css-test-property-values' in
>   test/lisp/textmodes/css-mode-tests.el needs a small update.

I updated the list length to 147 since there's 141
namedColors and 6 values in color. However, I can't make the test
execute since my Git repository is broken and the remote doesn't work
as of now.

Thanks for your patience.

[1] http://www.crockford.com/wrrrld/color.html
[2] https://en.wikipedia.org/wiki/IIFE

Etienne

[-- Attachment #2: 0001-Add-completion-of-colors-in-CSS-mode.patch --]
[-- Type: text/x-patch, Size: 3693 bytes --]

From 3e000ab30b3c6a4cd8cc1f76bd98c5f7c5aa0c30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Etienne=20Prud=E2=80=99homme?= <e.e.f.prudhomme@gmail.com>
Date: Wed, 27 Apr 2016 19:52:28 -0400
Subject: [PATCH] Add completion of colors in CSS mode

* lisp/textmodes/css-mode.el (css-value-class-alist): Add CSS colors
  candidates from "CSS Color Module Level 4".
---
 lisp/textmodes/css-mode.el | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index e30fb3e..3b795fd 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -460,10 +460,9 @@ css-value-class-alist
     (bg-layer bg-image position repeat-style attachment box)
     (bg-size length percentage "auto" "cover" "contain")
     (box "border-box" "padding-box" "content-box")
-    (color
-     "aqua" "black" "blue" "fuchsia" "gray" "green" "lime" "maroon"
-     "navy" "olive" "orange" "purple" "red" "silver" "teal" "white"
-     "yellow" "transparent")
+    (color "rgb()" "rgba()" "hsl()" "hsla()" "hwb()" "gray()" "lab()"
+           "lch()" "device-cmyk()" "color-mod()" "#" namedColor
+           "transparent" "currentColor")
     (common-lig-values "common-ligatures" "no-common-ligatures")
     (contextual-alt-values "contextual" "no-contextual")
     (counter "counter()" "counters()")
@@ -502,6 +501,37 @@ css-value-class-alist
     (line-width length "thin" "medium" "thick")
     (linear-gradient "linear-gradient()")
     (margin-width "auto" length percentage)
+    (named-color
+     "aliceblue" "antiquewhite" "aqua" "aquamarine" "azure" "beige"
+     "bisque" "black" "blanchedalmond" "blue" "blueviolet" "brown"
+     "burlywood" "cadetblue" "chartreuse" "chocolate" "coral"
+     "cornflowerblue" "cornsilk" "crimson" "cyan" "darkblue"
+     "darkcyan" "darkgoldenrod" "darkgray" "darkgreen" "darkgrey"
+     "darkkhaki" "darkmagenta" "darkolivegreen" "darkorange"
+     "darkorchid" "darkred" "darksalmon" "darkseagreen"
+     "darkslateblue" "darkslategray" "darkslategrey" "darkturquoise"
+     "darkviolet" "deeppink" "deepskyblue" "dimgray" "dimgrey"
+     "dodgerblue" "firebrick" "floralwhite" "forestgreen" "fuchsia"
+     "gainsboro" "ghostwhite" "gold" "goldenrod" "gray" "green"
+     "greenyellow" "grey" "honeydew" "hotpink" "indianred" "indigo"
+     "ivory" "khaki" "lavender" "lavenderblush" "lawn reen"
+     "lemonchiffon" "lightblue" "lightcoral" "lightcyan"
+     "lightgoldenrodyellow" "lightgray" "lightgreen" "lightgrey"
+     "lightpi k" "lightsalmon" "lightseagreen" "lightskyblue"
+     "lightslategray" "lightslategrey" "lightsteelblue" "lightyellow"
+     "lime" "limeg een" "linen" "magenta" "maroon" "mediumaquamarine"
+     "mediumblue" "mediumorchid" "mediumpurple" "mediumseagreen"
+     "mediumslateblu " "mediumspringgreen" "mediumturquoise"
+     "mediumvioletred" "midnightblue" "mintcream" "mistyrose"
+     "moccasin" "navajowhite" "nav " "oldlace" "olive" "olivedrab"
+     "orange" "orangered" "orchid" "palegoldenrod" "palegreen"
+     "paleturquoise" "palevioletred" "pap yawhip" "peachpuff" "peru"
+     "pink" "plum" "powderblue" "purple" "rebeccapurple" "red"
+     "rosybrown" "royalblue" "saddlebrown" "sa mon" "sandybrown"
+     "seagreen" "seashell" "sienna" "silver" "skyblue" "slateblue"
+     "slategray" "slategrey" "snow" "springgreen" " teelblue" "tan"
+     "teal" "thistle" "tomato" "turquoise" "violet" "wheat" "white"
+     "whitesmoke" "yellow" "yellowgreen")
     (number "calc()")
     (numeric-figure-values "lining-nums" "oldstyle-nums")
     (numeric-fraction-values "diagonal-fractions" "stacked-fractions")
-- 
2.8.1

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 240 bytes --]

On Fri, May 20, 2016 at 9:37 PM, Etienne Prud'homme 
<e.e.f.prudhomme@gmail.com> wrote:
> I've attached the current patch.

Thank you, Etienne, but it looks like the wrong patch was attached. It
is the same as the one from April.

-- Simen

[-- Attachment #2: Type: text/html, Size: 412 bytes --]

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Etienne Prud'homme]

[-- Attachment #1: Type: text/plain, Size: 159 bytes --]


> Thank you, Etienne, but it looks like the wrong patch was attached. It
> is the same as the one from April.

Oops! I've attached the new patch now.

Etienne

[-- Attachment #2: 0001-Add-completion-of-colors-in-CSS-mode.patch --]
[-- Type: text/x-patch, Size: 4079 bytes --]

From 024683b111b1459c440da5a67582720b0d119457 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Etienne=20Prud=E2=80=99homme?= <e.e.f.prudhomme@gmail.com>
Date: Fri, 20 May 2016 14:10:46 -0400
Subject: [PATCH] Add completion of colors in CSS mode

* lisp/textmodes/css-mode.el (css-value-class-alist): Add CSS colors
  from "CSS Color Module Level 3".
---
 lisp/textmodes/css-mode.el            | 35 ++++++++++++++++++++++++++++++++---
 test/lisp/textmodes/css-mode-tests.el |  2 +-
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index cf407ef..060af33 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -463,9 +463,8 @@ css-value-class-alist
     (bg-size length percentage "auto" "cover" "contain")
     (box "border-box" "padding-box" "content-box")
     (color
-     "aqua" "black" "blue" "fuchsia" "gray" "green" "lime" "maroon"
-     "navy" "olive" "orange" "purple" "red" "silver" "teal" "white"
-     "yellow" "transparent")
+     "rgb()" "rgba()" "hsl()" "hsla()" named-color "transparent"
+     "currentColor")
     (common-lig-values "common-ligatures" "no-common-ligatures")
     (contextual-alt-values "contextual" "no-contextual")
     (counter "counter()" "counters()")
@@ -504,6 +503,36 @@ css-value-class-alist
     (line-width length "thin" "medium" "thick")
     (linear-gradient "linear-gradient()")
     (margin-width "auto" length percentage)
+    (named-color
+     "aliceblue" "antiquewhite" "aqua" "aquamarine" "azure" "beige"
+     "bisque" "black" "blanchedalmond" "blue" "blueviolet" "brown"
+     "burlywood" "cadetblue" "chartreuse" "chocolate" "coral"
+     "cornflowerblue" "cornsilk" "crimson" "cyan" "darkblue"
+     "darkcyan" "darkgoldenrod" "darkgray" "darkgreen" "darkkhaki"
+     "darkmagenta" "darkolivegreen" "darkorange" "darkorchid"
+     "darkred" "darksalmon" "darkseagreen" "darkslateblue"
+     "darkslategray" "darkturquoise" "darkviolet" "deeppink"
+     "deepskyblue" "dimgray" "dodgerblue" "firebrick" "floralwhite"
+     "forestgreen" "fuchsia" "gainsboro" "ghostwhite" "gold"
+     "goldenrod" "gray" "green" "greenyellow" "honeydew" "hotpink"
+     "indianred" "indigo" "ivory" "khaki" "lavender" "lavenderblush"
+     "lawngreen" "lemonchiffon" "lightblue" "lightcoral" "lightcyan"
+     "lightgoldenrodyellow" "lightgray" "lightgreen" "lightpink"
+     "lightsalmon" "lightseagreen" "lightskyblue" "lightslategray"
+     "lightsteelblue" "lightyellow" "lime" "limegreen" "linen"
+     "magenta" "maroon" "mediumaquamarine" "mediumblue" "mediumorchid"
+     "mediumpurple" "mediumseagreen" "mediumslateblue"
+     "mediumspringgreen" "mediumturquoise" "mediumvioletred"
+     "midnightblue" "mintcream" "mistyrose" "moccasin" "navajowhite"
+     "navy" "oldlace" "olive" "olivedrab" "orange" "orangered"
+     "orchid" "palegoldenrod" "palegreen" "paleturquoise"
+     "palevioletred" "papayawhip" "peachpuff" "peru" "pink" "plum"
+     "powderblue" "purple" "rebeccapurple" "red" "rosybrown"
+     "royalblue" "saddlebrown" "salmon" "sandybrown" "seagreen"
+     "seashell" "sienna" "silver" "skyblue" "slateblue" "slategray"
+     "snow" "springgreen" "steelblue" "tan" "teal" "thistle" "tomato"
+     "turquoise" "violet" "wheat" "white" "whitesmoke" "yellow"
+     "yellowgreen")
     (number "calc()")
     (numeric-figure-values "lining-nums" "oldstyle-nums")
     (numeric-fraction-values "diagonal-fractions" "stacked-fractions")
diff --git a/test/lisp/textmodes/css-mode-tests.el b/test/lisp/textmodes/css-mode-tests.el
index 80d678a..fd86fd2 100644
--- a/test/lisp/textmodes/css-mode-tests.el
+++ b/test/lisp/textmodes/css-mode-tests.el
@@ -58,7 +58,7 @@
 
   ;; Check that the `color' property doesn't cause infinite recursion
   ;; because it refers to the value class of the same name.
-  (should (= (length (css--property-values "color")) 18)))
+  (should (= (length (css--property-values "color")) 147)))
 
 (ert-deftest css-test-property-value-cache ()
   "Test that `css--property-value-cache' is in use."
-- 
2.7.4

bug#23383: [PATCH] Support completion of color functions in CSS mode

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 182 bytes --]

On Sun, May 22, 2016 at 12:43 AM, Etienne Prud'homme 
<e.e.f.prudhomme@gmail.com> wrote:
> Oops! I've attached the new patch now.

Thanks, looks good. Installed in master.

-- Simen

[-- Attachment #2: Type: text/html, Size: 321 bytes --]