[fix] handle "monospace" font-family on web

This hack corrects the inheritance and scaling of font size when the
font-family is "monospace".

Author: necolas

packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap

@@ -6,9 +6,15 @@ Object {
 }
 `;
 
+exports[`apis/StyleSheet/createReactDOMStyle fontFamily fontFamily: "monospace" 1`] = `
+Object {
+  "fontFamily": "monospace, monospace",
+}
+`;
+
 exports[`apis/StyleSheet/createReactDOMStyle fontFamily general case 1`] = `
 Object {
-  "fontFamily": "Georgia, Times",
+  "fontFamily": "Georgia, Times, serif",
 }
 `;
 

packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -122,7 +122,11 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
 
   describe('fontFamily', () => {
     test('general case', () => {
-      expect(createReactDOMStyle({ fontFamily: 'Georgia, Times' })).toMatchSnapshot();
+      expect(createReactDOMStyle({ fontFamily: 'Georgia, Times, serif' })).toMatchSnapshot();
+    });
+
+    test('fontFamily: "monospace"', () => {
+      expect(createReactDOMStyle({ fontFamily: 'monospace' })).toMatchSnapshot();
     });
 
     test('fontFamily: "System"', () => {

packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js

@@ -60,6 +60,7 @@ const borderWidthProps = {
   borderLeftWidth: true
 };
 
+const monospaceFontStack = 'monospace, monospace';
 const systemFontStack =
   '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif';
 
@@ -234,8 +235,13 @@ const createReducer = (style, styleProps) => {
       }
 
       case 'fontFamily': {
-        const isSystem = value === 'System';
-        resolvedStyle.fontFamily = isSystem ? systemFontStack : value;
+        if (value === 'System') {
+          resolvedStyle.fontFamily = systemFontStack;
+        } else if (value === 'monospace') {
+          resolvedStyle.fontFamily = monospaceFontStack;
+        } else {
+          resolvedStyle.fontFamily = value;
+        }
         break;
       }