css3: workaround complex rgb/rgba comma grammars

The VDS syntax allows a non-context free mode of automatic comma
removal (requires at least some sort of lookahead/backtracking). So
workaround the main two grammars where we encounter this: rgb/rgba. We
group the comma and the following alpha value and make the whole group
optional.

Add to ticket mdn/data#341. However, looks
like the workaround is unlikely to be incorporated since the
contextual comma removal appears desired for ease of specifying those
cases.

Author: kanaka

data/css3.ebnf

@@ -6650,8 +6650,10 @@ func-rgb =
           nonprop-percentage
         )
       )
-      (',' S)
-      nonprop-alpha-value?
+      (
+        (',' S)
+        nonprop-alpha-value
+      )?
       (')' S)
     ) |
     (
@@ -6664,8 +6666,10 @@ func-rgb =
           nonprop-number
         )
       )
-      (',' S)
-      nonprop-alpha-value?
+      (
+        (',' S)
+        nonprop-alpha-value
+      )?
       (')' S)
     )
   ) ;
@@ -6714,8 +6718,10 @@ func-rgba =
           nonprop-percentage
         )
       )
-      (',' S)
-      nonprop-alpha-value?
+      (
+        (',' S)
+        nonprop-alpha-value
+      )?
       (')' S)
     ) |
     (
@@ -6728,8 +6734,10 @@ func-rgba =
           nonprop-number
         )
       )
-      (',' S)
-      nonprop-alpha-value?
+      (
+        (',' S)
+        nonprop-alpha-value
+      )?
       (')' S)
     )
   ) ;
@@ -6894,11 +6902,11 @@ nonprop-shape =
       ('rect' S)
       ('(' S)
       nonprop-top
-      (',' S)
+      ',' S
       nonprop-right
       (',' S)
       nonprop-bottom
-      ',' S
+      (',' S)
       nonprop-left
       (')' S)
     ) |

data/css3.vds

@@ -524,8 +524,8 @@
 <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
 <repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
 <repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
-<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
-<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
+<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} [ , <alpha-value> ]? ) | rgb( <number>#{3} [ , <alpha-value> ]? )
+<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} [ , <alpha-value> ]? ) | rgba( <number>#{3} [ , <alpha-value> ]? )
 <rotate()> = rotate( <angle> )
 <rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
 <rotateX()> = rotateX( <angle> )

src/html5_css3_ebnf/css3.clj

@@ -64,6 +64,20 @@
                (= k "page-body")
                nil
 
+               ;; VDS has a comma combining syntax that is difficult
+               ;; to parse but only applies to rbg and rgba currently
+               ;; so fix them up to be easier to parse. A bug related
+               ;; to this: https://github.com/mdn/data/issues/341
+               ;; Original:
+               ;;     "rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )"
+               (= k "rgb()")
+               [k {"syntax" "rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} [ , <alpha-value> ]? ) | rgb( <number>#{3} [ , <alpha-value> ]? )"}]
+
+               ;; Original:
+               ;;     "rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )"
+               (= k "rgba()")
+               [k {"syntax" "rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} [ , <alpha-value> ]? ) | rgba( <number>#{3} [ , <alpha-value> ]? )" }]
+
                :else
                [k v]))))