Fix polygon grammar (#549)

* fix: wrong polygon grammar

* chore: font-family quoted not yet promoted

Author: zakybilfagih

packages/css-property-parser/lib/Parser.re

@@ -357,7 +357,7 @@ and function_paint = [%value.rec
 and function_path = [%value.rec "path( <string> )"]
 and function_perspective = [%value.rec "perspective( <property-perspective> )"]
 and function_polygon = [%value.rec
-  "polygon( [ <fill-rule> ]? ',' [ <extended-length> | <extended-percentage> <extended-length> | <extended-percentage> ]# )"
+  "polygon( [ <fill-rule> ',' ]? [ <length-percentage> <length-percentage> ]# )"
 ]
 and function_radial_gradient = [%value.rec
   "radial-gradient( <ending-shape>? <radial-size>? ['at' <position> ]? ','? <color-stop-list> )"

packages/ppx/test/css-support/fonts-module.t/run.t

@@ -15,13 +15,13 @@ If this test fail means that the module is not in sync with the ppx
 
   $ dune describe pp ./input.re | sed '1,/^];$/d'
 
-  CSS.fontFamilies([|{js|Inter Semi Bold|js}|]);
+  CSS.fontFamilies([|`quoted({js|Inter Semi Bold|js})|]);
   CSS.fontFamilies(fonts: array(CSS.Types.FontFamilyName.t));
-  CSS.fontFamilies([|{js|Inter|js}|]);
+  CSS.fontFamilies([|`quoted({js|Inter|js})|]);
   CSS.fontFamilies(font: array(CSS.Types.FontFamilyName.t));
-  CSS.fontFamilies([|{js|Inter|js}, {js|Sans|js}|]);
-  CSS.fontFamilies([|{js|Inter|js}, font|]);
-  CSS.fontFamilies([|{js|Gill Sans Extrabold|js}, "sans-serif"|]);
+  CSS.fontFamilies([|`quoted({js|Inter|js}), `quoted({js|Sans|js})|]);
+  CSS.fontFamilies([|`quoted({js|Inter|js}), font|]);
+  CSS.fontFamilies([|`quoted({js|Gill Sans Extrabold|js}), `sans_serif|]);
 
   CSS.fontSynthesisWeight(`none);
   CSS.fontSynthesisStyle(`auto);

packages/ppx/test/css-support/masking-module.t/input.re

@@ -1,6 +1,9 @@
 [%css {|clip-path: url('#clip')|}];
 [%css {|clip-path: inset(50%)|}];
 [%css {|clip-path: path('M 20 20 H 80 V 30')|}];
+[%css {|clip-path: polygon(50% 100%, 0 0, 100% 0)|}];
+[%css {|clip-path: polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)|}];
+[%css {|clip-path: polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)|}];
 [%css {|clip-path: border-box|}];
 [%css {|clip-path: padding-box|}];
 [%css {|clip-path: content-box|}];

packages/ppx/test/css-support/masking-module.t/run.t

@@ -17,6 +17,15 @@ If this test fail means that the module is not in sync with the ppx
   CSS.unsafe({js|clipPath|js}, {js|url('#clip')|js});
   CSS.unsafe({js|clipPath|js}, {js|inset(50%)|js});
   CSS.unsafe({js|clipPath|js}, {js|path('M 20 20 H 80 V 30')|js});
+  CSS.unsafe({js|clipPath|js}, {js|polygon(50% 100%, 0 0, 100% 0)|js});
+  CSS.unsafe(
+    {js|clipPath|js},
+    {js|polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)|js},
+  );
+  CSS.unsafe(
+    {js|clipPath|js},
+    {js|polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)|js},
+  );
   CSS.unsafe({js|clipPath|js}, {js|border-box|js});
   CSS.unsafe({js|clipPath|js}, {js|padding-box|js});
   CSS.unsafe({js|clipPath|js}, {js|content-box|js});