Refactor CSS.FontFamilyName.t: Add Union Types for Unquoted Generic…

… Families (#544) * extend font-family to use variants * rename `custom font-family name to `quoted * update font family type for tests
davesnx · Mar 10, 2025 · e804a94 · e804a94
1 parent 56c9b1c
commit e804a94
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 27 deletions.
diff --git a/e2e/melange/src/native/ui.re b/e2e/melange/src/native/ui.re
@@ -46,7 +46,7 @@ let bounce = [%keyframe
 |}
 ];
 
-let code = [|"Menlo", "monospace"|];
+let code = [| `quoted("Menlo"), `quoted("monospace") |];
 let lola = `auto;
 
 let clx = [%cx

diff --git a/e2e/melange/src/ui/ui.re b/e2e/melange/src/ui/ui.re
@@ -50,7 +50,7 @@ let bounce = [%keyframe
 |}
 ];
 
-let code = [|"Menlo", "monospace"|];
+let code = [| `quoted("Menlo"), `quoted("monospace") |];
 let lola = `auto;
 
 let clx = [%cx

diff --git a/e2e/rescript-v10-JSX4/src/content_test.res b/e2e/rescript-v10-JSX4/src/content_test.res
@@ -12,8 +12,10 @@ let testData = [
   (Content.toString(#text(`'single'`)), `'single'`),
   (Content.toString(#text(`"double"`)), `"double"`),
   (Content.toString(#text(`'`)), `"'"`),
-  (FontFamily.toString("Inter"), `"Inter"`),
-  (FontFamily.toString(`"Inter Bold"`), `"Inter Bold"`),
+  (FontFamily.toString(#quoted("Inter")), `"Inter"`),
+  (FontFamily.toString(#quoted("Inter Bold")), `"Inter Bold"`),
+  (FontFamily.toString(#serif), `serif`),
+  (FontFamily.toString(#sans_serif), `sans-serif`),
 ]
 
 describe("content as string", () => {
@@ -30,8 +32,17 @@ let testData = list{
   (%css(`content: '"'`), CSS.contentRule(#text("\""))),
   (%css(`content: "'"`), CSS.contentRule(#text("'"))),
   (%css(`content: 'xxx'`), CSS.contentRule(#text(`xxx`))),
-  (%css(`font-family: "Lola"`), CSS.fontFamily("Lola")),
-  (%css(`font-family: "Lola del rio"`), CSS.fontFamily("Lola del rio")),
+  (%css(`font-family: "Lola"`), CSS.fontFamily(#quoted("Lola"))),
+  (%css(`font-family: "Lola del rio"`), CSS.fontFamily(#quoted("Lola del rio"))),
+  (%css(`font-family: serif`), CSS.fontFamily(#serif)),
+  (%css(`font-family: sans-serif`), CSS.fontFamily(#sans_serif)),
+  (%css(`font-family: fantasy`), CSS.fontFamily(#fantasy)),
+  (%css(`font-family: cursive`), CSS.fontFamily(#cursive)),
+  (%css(`font-family: monospace`), CSS.fontFamily(#monospace)),
+  (%css(`font-family: "monospace"`), CSS.fontFamily(#quoted("monospace"))),
+  (%css(`font-family: serif`), CSS.fontFamily(#serif)),
+  (%css(`font-family: sans-serif`), CSS.fontFamily(#sans_serif)),
+  (%css(`font-family: -apple-system`), CSS.fontFamily(#apple_system)),
 }
 
 describe("content to rule", () => {

diff --git a/e2e/rescript-v10-JSX4/src/index.res b/e2e/rescript-v10-JSX4/src/index.res
@@ -116,7 +116,7 @@ module Button = %styled.button(
   }
 )
 
-let fonts = ["Inter"]
+let fonts = [#quoted("Inter")]
 
 let title = CSS.style([
   CSS.label("title"),

diff --git a/e2e/rescript-v9-JSX3/src/content_test.res b/e2e/rescript-v9-JSX3/src/content_test.res
@@ -12,8 +12,10 @@ let testData = [
   (Content.toString(#text(`'single'`)), `'single'`),
   (Content.toString(#text(`"double"`)), `"double"`),
   (Content.toString(#text(`'`)), `"'"`),
-  (FontFamily.toString("Inter"), `"Inter"`),
-  (FontFamily.toString(`"Inter Bold"`), `"Inter Bold"`),
+  (FontFamily.toString(#quoted("Inter")), `"Inter"`),
+  (FontFamily.toString(#quoted("Inter Bold")), `"Inter Bold"`),
+  (FontFamily.toString(#serif), `serif`),
+  (FontFamily.toString(#sans_serif), `sans-serif`),
 ]
 
 describe("content as string", () => {
@@ -30,8 +32,17 @@ let testData = list{
   (%css(`content: '"'`), CSS.contentRule(#text("\""))),
   (%css(`content: "'"`), CSS.contentRule(#text("'"))),
   (%css(`content: 'xxx'`), CSS.contentRule(#text(`xxx`))),
-  (%css(`font-family: "Lola"`), CSS.fontFamily("Lola")),
-  (%css(`font-family: "Lola del rio"`), CSS.fontFamily("Lola del rio")),
+  (%css(`font-family: "Lola"`), CSS.fontFamily(#quoted("Lola"))),
+  (%css(`font-family: "Lola del rio"`), CSS.fontFamily(#quoted("Lola del rio"))),
+  (%css(`font-family: serif`), CSS.fontFamily(#serif)),
+  (%css(`font-family: sans-serif`), CSS.fontFamily(#sans_serif)),
+  (%css(`font-family: fantasy`), CSS.fontFamily(#fantasy)),
+  (%css(`font-family: cursive`), CSS.fontFamily(#cursive)),
+  (%css(`font-family: monospace`), CSS.fontFamily(#monospace)),
+  (%css(`font-family: "monospace"`), CSS.fontFamily(#quoted("monospace"))),
+  (%css(`font-family: serif`), CSS.fontFamily(#serif)),
+  (%css(`font-family: sans-serif`), CSS.fontFamily(#sans_serif)),
+  (%css(`font-family: -apple-system`), CSS.fontFamily(#apple_system)),
 }
 
 describe("content to rule", () => {

diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re
@@ -2442,19 +2442,27 @@ let hanging_punctuation =
 
 let render_generic_family = (~loc) =>
   fun
-  | `Cursive => [%expr "cursive"]
-  | `Fantasy => [%expr "fantasy"]
-  | `Monospace => [%expr "monospace"]
-  | `Sans_serif => [%expr "sans-serif"]
-  | `Serif => [%expr "serif"]
-  | `_apple_system => [%expr "-apple-system"];
+  | `Cursive => [%expr `cursive]
+  | `Fantasy => [%expr `fantasy]
+  | `Monospace => [%expr `monospace]
+  | `Sans_serif => [%expr `sans_serif]
+  | `Serif => [%expr `serif]
+  | `System_ui => [%expr `system_ui]
+  | `Ui_serif => [%expr `ui_serif]
+  | `Ui_sans_serif => [%expr `ui_sans_serif]
+  | `Ui_monospace => [%expr `ui_monospace]
+  | `Ui_rounded => [%expr `ui_rounded]
+  | `Emoji => [%expr `emoji]
+  | `Math => [%expr `math]
+  | `Fangsong => [%expr `fangsong]
+  | `_apple_system => [%expr `apple_system];
 
 let render_font_family = (~loc, value) =>
   switch (value) {
   | `Interpolation(v) => render_variable(~loc, v)
   | `Generic_family(v) => render_generic_family(~loc, v)
-  | `Family_name(`String(str)) => render_string(~loc, str)
-  | `Family_name(`Custom_ident(ident)) => render_string(~loc, ident)
+  | `Family_name(`String(str)) => [%expr `quoted([%e render_string(~loc, str)])]
+  | `Family_name(`Custom_ident(ident)) => [%expr `quoted([%e render_string(~loc, ident)])]
   };
 
 // css-fonts-4
@@ -2476,7 +2484,7 @@ let font_family =
           CSS.fontFamilies(
             [%e
               font_families
-              |> List.map(render_font_family(~loc))
+              |> List.map(render_font_family(~loc)) 
               |> Builder.pexp_array(~loc)
             ],
           )

diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml
@@ -3941,13 +3941,45 @@ module FontFace = struct
 end
 
 module FontFamilyName = struct
-  type t = string
+  type t =
+    [ `serif
+    | `sans_serif
+    | `monospace
+    | `cursive
+    | `fantasy
+    | `system_ui
+    | `ui_serif
+    | `ui_sans_serif
+    | `ui_monospace
+    | `ui_rounded
+    | `emoji
+    | `math
+    | `fangsong
+    | `apple_system 
+    | `quoted of string
+    ]
 
-  let toString (x : t) =
-    match String.get x 0 with
-    | '\'' -> x
-    | '"' -> x
-    | _ -> ({js|"|js} ^ x) ^ {js|"|js}
+    let toString (x : t) =
+      match x with
+      | `serif -> {js|serif|js}
+      | `sans_serif -> {js|sans-serif|js}
+      | `monospace -> {js|monospace|js}
+      | `cursive -> {js|cursive|js}
+      | `fantasy -> {js|fantasy|js}
+      | `system_ui -> {js|system-ui|js}
+      | `ui_serif -> {js|ui-serif|js}
+      | `ui_sans_serif -> {js|ui-sans-serif|js}
+      | `ui_monospace -> {js|ui-monospace|js}
+      | `ui_rounded -> {js|ui-rounded|js}
+      | `emoji -> {js|emoji|js}
+      | `math -> {js|math|js}
+      | `fangsong -> {js|fangsong|js}
+      | `apple_system -> {js|-apple-system|js}
+      | `quoted s -> 
+        match String.get s 0 with
+        | '\'' -> s
+        | '"' -> s
+        | _ -> ({js|"|js} ^ s) ^ {js|"|js}
 end
 
 module FontDisplay = struct

diff --git a/packages/runtime/test/test_styles.ml b/packages/runtime/test/test_styles.ml
@@ -453,7 +453,7 @@ let global =
 let fontFace =
   test "global" @@ fun () ->
   let _ =
-    CSS.fontFace ~fontFamily:"foo" ~fontWeight:`bold
+    CSS.fontFace ~fontFamily:(`quoted "foo") ~fontWeight:`bold
       ~src:[| `url "foo.bar" |]
       ~fontDisplay:`swap ~fontStyle:`normal ()
       ~unicodeRange: