feat(fontFace): Add missing font-face properties to mixin

Add font-display, font-feature-settings & font-variation-settings to fontDisplay mixin

closes styled-components#286

src/mixins/fontFace.js

@@ -11,6 +11,9 @@ type FontFaceConfiguration = {
   fileFormats?: Array<string>,
   localFonts?: Array<string>,
   unicodeRange?: string,
+  fontDisplay?: string,
+  fontVariationSettings?: string,
+  fontFeatureSettings?: string,
 }
 
 function generateFileReferences(
@@ -79,6 +82,9 @@ function fontFace({
   fileFormats = ['eot', 'woff2', 'woff', 'ttf', 'svg'],
   localFonts,
   unicodeRange,
+  fontDisplay,
+  fontVariationSettings,
+  fontFeatureSettings,
 }: FontFaceConfiguration): Object {
   // Error Handling
   if (!fontFamily) throw new Error('fontFace expects a name of a font-family.')
@@ -103,6 +109,9 @@ function fontFace({
       fontStyle,
       fontVariant,
       fontWeight,
+      fontDisplay,
+      fontVariationSettings,
+      fontFeatureSettings,
     },
   }
 

src/mixins/test/__snapshots__/fontFace.test.js.snap

@@ -46,10 +46,13 @@ Object {
 exports[`fontFace should set passed font configuration variables 1`] = `
 Object {
   "@font-face": Object {
+    "fontDisplay": "swap",
     "fontFamily": "Sans Pro",
+    "fontFeatureSettings": "\"smcp\" on",
     "fontStretch": "condensed",
     "fontStyle": "italic",
     "fontVariant": "small-caps",
+    "fontVariationSettings": "\"XHGT\" 0.7",
     "fontWeight": "bold",
     "src": "url(\"path/to/file.eot\"), url(\"path/to/file.woff2\"), url(\"path/to/file.woff\"), url(\"path/to/file.ttf\"), url(\"path/to/file.svg\")",
     "unicodeRange": "U+26",

src/mixins/test/fontFace.test.js

@@ -60,6 +60,9 @@ describe('fontFace', () => {
         fontWeight: 'bold',
         fontVariant: 'small-caps',
         unicodeRange: 'U+26',
+        fontDisplay: 'swap',
+        fontVariationSettings: '"XHGT" 0.7',
+        fontFeatureSettings: '"smcp" on',
       }),
     }).toMatchSnapshot()
   })