Feature/font family (#171)

* align font-family with other properties

* add comments from MDN documentation to font properties

example/Section.re

@@ -15,7 +15,7 @@ module Styles = {
       selector(
         "& > h1",
         [
-          fontFamily(arialNarrow),
+          fontFamily(`custom(arialNarrow)),
           fontSize(px(32)),
           fontWeight(`num(300)),
           marginTop(zero),

example/Test.re

@@ -1109,7 +1109,7 @@ let make = () =>
         className=Css.(
           style([
             color(black),
-            fontFamily("Helvetica, sans-serif"),
+            fontFamilies([`custom("Helvetica"), `sansSerif]),
             fontSize(pt(18)),
             fontVariant(`smallCaps),
             fontStyle(italic),

src/Css.re

@@ -498,7 +498,20 @@ let float = x =>
     },
   );
 
-let fontFamily = x => D("fontFamily", x);
+let fontFamily = x =>
+  D(
+    "fontFamily",
+    switch (x) {
+    | #FontFamilyName.t as n => FontFamilyName.toString(n)
+    | #Cascading.t as c => Cascading.toString(c)
+    }
+  );
+
+let fontFamilies = xs =>
+  D(
+    "fontFamily",
+    xs->Belt.List.map(FontFamilyName.toString)->join(", ")
+  );
 
 let fontSize = x =>
   D(
@@ -1810,7 +1823,7 @@ let fontFace = (~fontFamily, ~src, ~fontStyle=?, ~fontWeight=?, ()) => {
     src: $src;
     $(fontStyle);
     $(fontWeight);
-}|j};
+  }|j};
 
   Emotion.rawInjectGlobal(asString);
 

src/Css.rei

@@ -415,10 +415,24 @@ let flexWrap: [ Types.FlexWrap.t | Types.Cascading.t] => rule;
  */
 let float: [ Types.Float.t | Types.Cascading.t] => rule;
 
-let fontFamily: string => rule;
+/**
+ The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names
+ for the selected element.
+ */
+let fontFamily: [ Types.FontFamilyName.t | Types.Cascading.t] => rule;
+
+let fontFamilies: list([ Types.FontFamilyName.t]) => rule;
 
+/**
+ The font-size CSS property sets the size of the font. This property is also used to compute the size of em, ex, and
+ other relative <length> units.
+ */
 let fontSize: [ Types.Length.t | Types.Cascading.t] => rule;
 
+/**
+ The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its
+ font-family.
+ */
 let fontStyle: [ Types.FontStyle.t | Types.Cascading.t] => rule;
 
 /**
@@ -429,6 +443,10 @@ let fontStyle: [ Types.FontStyle.t | Types.Cascading.t] => rule;
  */
 let fontVariant: [ Types.FontVariant.t | Types.Cascading.t] => rule;
 
+/**
+ The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the
+ font-family you are using.
+ */
 let fontWeight: [ Types.FontWeight.t | Types.Cascading.t] => rule;
 
 /**

src/Css_AtomicTypes.re

@@ -1478,3 +1478,42 @@ module ListStyleImage = {
     fun
     | `none => "none";
 };
+
+module FontFamilyName = {
+  type t = [
+    |`custom(string)
+    |`serif
+    |`sansSerif
+    |`cursive
+    |`fantasy
+    |`monospace
+    |`systemUi
+    |`emoji
+    |`math
+    |`fangsong
+  ];
+
+  let custom = `custom;
+  let serif = `serif;
+  let sansSerif = `sansSerif;
+  let cursive = `cursive;
+  let fantasy = `fantasy;
+  let monospace = `monospace;
+  let systemUi = `systemUi;
+  let emoji = `emoji;
+  let math = `math;
+  let fangsong = `fangsong;
+
+  let toString =
+    fun
+    | `custom(name) => name
+    | `serif => "serif"
+    | `sansSerif => "sans-serif"
+    | `cursive => "cursive"
+    | `fantasy => "fantasy"
+    | `monospace => "monospace"
+    | `systemUi => "system-ui"
+    | `emoji => "emoji"
+    | `math => "math"
+    | `fangsong => "fangsong";
+};

src/Css_AtomicTypes.rei

@@ -1096,3 +1096,23 @@ module ListStyleImage: {
 
   let toString: t => string;
 };
+
+/**
+ https://developer.mozilla.org/docs/Web/CSS/font-family
+ */
+module FontFamilyName: {
+  type t = [
+    |`custom(string)
+    |`serif
+    |`sansSerif
+    |`cursive
+    |`fantasy
+    |`monospace
+    |`systemUi
+    |`emoji
+    |`math
+    |`fangsong
+  ];
+
+  let toString: t => string;
+};