From 5e98107617470eda5b51816c914be02e45982ae8 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sat, 2 Sep 2017 12:25:16 -0700
Subject: [PATCH] [fix] support "System" as a font-family on web

Fix #622
---
 .../createReactDOMStyle-test.js.snap          | 12 +++++++
 .../__tests__/createReactDOMStyle-test.js     | 10 ++++++
 src/apis/StyleSheet/createReactDOMStyle.js    | 32 ++++++++++++++-----
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
index 4f5cabf9..35b38692 100644
--- a/src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
+++ b/src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`apis/StyleSheet/createReactDOMStyle fontFamily fontFamily: "System" 1`] = `
+Object {
+  "fontFamily": "-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif",
+}
+`;
+
+exports[`apis/StyleSheet/createReactDOMStyle fontFamily general case 1`] = `
+Object {
+  "fontFamily": "Georgia, Times",
+}
+`;
+
 exports[`apis/StyleSheet/createReactDOMStyle shortform -> longform 1`] = `
 Object {
   "borderBottomColor": "white",
diff --git a/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js b/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js
index 521c7c16..1a5a27e8 100644
--- a/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js
+++ b/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js
@@ -102,6 +102,16 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
     });
   });
 
+  describe('fontFamily', () => {
+    test('general case', () => {
+      expect(createReactDOMStyle({ fontFamily: 'Georgia, Times' })).toMatchSnapshot();
+    });
+
+    test('fontFamily: "System"', () => {
+      expect(createReactDOMStyle({ fontFamily: 'System' })).toMatchSnapshot();
+    });
+  });
+
   test('shortform -> longform', () => {
     const style = {
       borderStyle: 'solid',
diff --git a/src/apis/StyleSheet/createReactDOMStyle.js b/src/apis/StyleSheet/createReactDOMStyle.js
index bfe312ca..b0516164 100644
--- a/src/apis/StyleSheet/createReactDOMStyle.js
+++ b/src/apis/StyleSheet/createReactDOMStyle.js
@@ -52,6 +52,9 @@ const colorProps = {
   color: true
 };
 
+const systemFontStack =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif';
+
 const alphaSortProps = propsArray =>
   propsArray.sort((a, b) => {
     if (a < b) {
@@ -144,6 +147,15 @@ const createReducer = (style, styleProps) => {
     }
 
     switch (prop) {
+      // ignore React Native styles
+      case 'aspectRatio':
+      case 'elevation':
+      case 'overlayColor':
+      case 'resizeMode':
+      case 'tintColor': {
+        break;
+      }
+
       case 'display': {
         resolvedStyle.display = value;
         // defaults of 'flexBasis:auto' and 'flexShrink:0' have lowest precedence
@@ -157,14 +169,7 @@ const createReducer = (style, styleProps) => {
         }
         break;
       }
-      // ignore React Native styles
-      case 'aspectRatio':
-      case 'elevation':
-      case 'overlayColor':
-      case 'resizeMode':
-      case 'tintColor': {
-        break;
-      }
+
       case 'flex': {
         if (value > 0) {
           resolvedStyle.flexGrow = value;
@@ -179,6 +184,13 @@ const createReducer = (style, styleProps) => {
         }
         break;
       }
+
+      case 'fontFamily': {
+        const isSystem = value === 'System';
+        resolvedStyle.fontFamily = isSystem ? systemFontStack : value;
+        break;
+      }
+
       case 'shadowColor':
       case 'shadowOffset':
       case 'shadowOpacity':
@@ -189,10 +201,12 @@ const createReducer = (style, styleProps) => {
         hasResolvedShadow = true;
         break;
       }
+
       case 'textAlignVertical': {
         resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
         break;
       }
+
       case 'textShadowColor':
       case 'textShadowOffset':
       case 'textShadowRadius': {
@@ -202,11 +216,13 @@ const createReducer = (style, styleProps) => {
         hasResolvedTextShadow = true;
         break;
       }
+
       case 'transform':
       case 'transformMatrix': {
         resolveTransform(resolvedStyle, style);
         break;
       }
+
       default: {
         // normalize color values
         let finalValue = value;