Make font-family safe

davesnx · Oct 18, 2023 · c3cf405 · c3cf405
1 parent 232951f
commit c3cf405
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/packages/ppx/src/declarations_to_emotion.re b/packages/ppx/src/declarations_to_emotion.re
@@ -2022,22 +2022,19 @@ let render_fony_family = (~loc) =>
   | `Family_name(`String(str)) => [%expr
       `custom([%e render_string(~loc, str)])
     ]
-  | `Family_name(`Custom_ident(_list)) => raise(Unsupported_feature);
-
-let render_fony_families = (~loc, v) =>
-  List.map(render_fony_family(~loc), v) |> Builder.pexp_array(~loc);
+  | `Family_name(`Custom_ident(ident)) => [%expr
+      `custom([%e render_string(~loc, ident)])
+    ];
 
 // css-fonts-4
 let font_family =
-  emit(
+  apply(
     Parser.property_font_family,
-    (~loc as _) => id,
-    (~loc) =>
-      fun
-      | [v] => [[%expr CssJs.fontFamily([%e render_fony_family(~loc, v)])]]
-      | rest => [
-          [%expr CssJs.fontFamilies([%e render_fony_families(~loc, rest)])],
-        ],
+    (~loc) => [%expr CssJs.fontFamilies],
+    (~loc, value) =>
+      value
+      |> List.map(render_fony_family(~loc))
+      |> Builder.pexp_array(~loc),
   );
 
 let render_font_weight = (~loc) =>

diff --git a/packages/ppx/test/css-support/css-support.expected.re b/packages/ppx/test/css-support/css-support.expected.re
@@ -702,6 +702,10 @@ CssJs.unsafe({js|textDecorationThickness|js}, {js|3px|js});
 CssJs.unsafe({js|textDecorationThickness|js}, {js|10%|js});
 CssJs.unsafe({js|quotes|js}, {js|auto|js});
 CssJs.unsafe({js|content|js}, {js|"\25BA" / ""|js});
+CssJs.fontFamilies([|`custom({js|Inter Semi Bold|js})|]);
+CssJs.fontFamilies([|`custom({js|Inter|js})|]);
+CssJs.fontFamilies([|`custom({js|Inter|js}), `custom({js|Sans|js})|]);
+CssJs.fontFamilies([|`custom({js|Gill Sans Extrabold|js}), `sansSerif|]);
 CssJs.unsafe({js|fontStretch|js}, {js|normal|js});
 CssJs.unsafe({js|fontStretch|js}, {js|ultra-condensed|js});
 CssJs.unsafe({js|fontStretch|js}, {js|extra-condensed|js});

diff --git a/packages/ppx/test/css-support/css-support.re b/packages/ppx/test/css-support/css-support.re
@@ -880,6 +880,12 @@
 /* [%css {|line-snap: baseline|}]; */
 /* [%css {|line-snap: contain|}]; */
 
+/* CSS Fonts Module Level 2 */
+[%css {|font-family: "Inter Semi Bold";|}];
+[%css {|font-family: Inter;|}];
+[%css {|font-family: Inter, Sans;|}];
+[%css {|font-family: "Gill Sans Extrabold", sans-serif;|}];
+
 /* CSS Fonts Module Level 3 */
 [%css {|font-stretch: normal|}];
 [%css {|font-stretch: ultra-condensed|}];

diff --git a/packages/reason-css-parser/lib/Parser.re b/packages/reason-css-parser/lib/Parser.re
@@ -221,7 +221,7 @@ and ending_shape = [%value.rec "'circle' | 'ellipse'"]
 and explicit_track_list = [%value.rec
   "[ [ <line-names> ]? <track-size> ]+ [ <line-names> ]?"
 ]
-and family_name = [%value.rec "<string> | [ <custom-ident> ]+"]
+and family_name = [%value.rec "<string> | <custom-ident>"]
 and feature_tag_value = [%value.rec "<string> [ <integer> | 'on' | 'off' ]?"]
 and feature_type = [%value.rec
   "'@stylistic' | '@historical-forms' | '@styleset' | '@character-variant' | '@swash' | '@ornaments' | '@annotation'"