Font-family work with quoted

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

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/e2e/rescript-v9-JSX3/src/content_test.res b/e2e/rescript-v9-JSX3/src/content_test.res
@@ -1,18 +1,23 @@
 open Vitest
 
-let testData = list{
-  (CssJs.Types.Content.toString(#text("")), "''"),
-  (CssJs.Types.Content.toString(#text(" ")), "\" \""),
-  (CssJs.Types.Content.toString(#text(" ")), `" "`),
-  (CssJs.Types.Content.toString(#text(`""`)), `''`),
-  (CssJs.Types.Content.toString(#text(`" "`)), `" "`),
-  (CssJs.Types.Content.toString(#text(`'single'`)), `'single'`),
-  (CssJs.Types.Content.toString(#text(`"double"`)), `"double"`),
-  (CssJs.Types.Content.toString(#text(`'`)), `"'"`),
-}
+module Content = CssJs.Types.Content
+module FontFamily = CssJs.Types.FontFamilyName
+
+let testData = [
+  (Content.toString(#text("")), "''"),
+  (Content.toString(#text(" ")), "\" \""),
+  (Content.toString(#text(" ")), `" "`),
+  (Content.toString(#text(`""`)), `''`),
+  (Content.toString(#text(`" "`)), `" "`),
+  (Content.toString(#text(`'single'`)), `'single'`),
+  (Content.toString(#text(`"double"`)), `"double"`),
+  (Content.toString(#text(`'`)), `"'"`),
+  (FontFamily.toString(#custom("Inter")), `"Inter"`),
+  (FontFamily.toString(#custom(`"Inter Bold"`)), `"Inter Bold"`),
+]
 
 describe("content as string", () => {
-  Belt.List.forEachWithIndex(testData, (index, (cssIn, emotionOut)) =>
+  Belt.Array.forEachWithIndex(testData, (index, (cssIn, emotionOut)) =>
     test(string_of_int(index + 1), _t => expect(cssIn)->Expect.toBe(emotionOut))
   )
 })
@@ -23,6 +28,8 @@ let testData = list{
   (%css(`content: '\"'`), CssJs.contentRule(#text("'\"'"))),
   (%css("content: ' '"), CssJs.contentRule(#text("' '"))),
   (%css("content: 'single'"), CssJs.contentRule(#text("'single'"))),
+  (%css(`font-family: "Lola"`), CssJs.fontFamily(#custom("Lola"))),
+  (%css(`font-family: "Lola del rio"`), CssJs.fontFamily(#custom("Lola del rio"))),
 }
 
 describe("content to rule", () => {

diff --git a/packages/css/native/shared/Css_AtomicTypes.ml b/packages/css/native/shared/Css_AtomicTypes.ml
@@ -2113,7 +2113,10 @@ module FontFamilyName = struct
 
   let toString x =
     match x with
-    | `custom name -> name
+    | `custom value ->
+      (match Js.String2.get value 0 with
+      | {|"|} | {|'|} -> value
+      | _ -> {|"|} ^ value ^ {|"|})
     | `serif -> {js|serif|js}
     | `sansSerif -> {js|sans-serif|js}
     | `cursive -> {js|cursive|js}