From fa008f54f39d31895a10e6e1186e0d400cdb3d64 Mon Sep 17 00:00:00 2001
From: Kevin Marrec <kevin@marrec.io>
Date: Mon, 17 Feb 2020 21:11:28 +0100
Subject: [PATCH] feat: allow for list of custom fonts

backport of #269
---
 src/font.ts         |  9 +++++++--
 test/module.test.ts | 22 ++++++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/font.ts b/src/font.ts
index b41e6483..0aaed363 100644
--- a/src/font.ts
+++ b/src/font.ts
@@ -2,7 +2,7 @@ import { ModuleThis } from '@nuxt/types/config/module'
 import { prependData as sassPrependData } from './sass'
 
 export interface FontOptions {
-  family?: string
+  family?: string | string[]
   size?: number
 }
 
@@ -22,7 +22,12 @@ export default function setupFont (this: ModuleThis, options: FontOptions) {
   }
 
   // Add font-family custom variable (only if not Roboto, cause already default in Vuetify styles)
-  options.family !== 'Roboto' && sassPrependData.call(this, `$body-font-family: '${options.family}', sans-serif`)
+  if (options.family !== 'Roboto') {
+    const userFontFamily = Array.isArray(options.family)
+      ? options.family.map(x => `'${x}'`).join(', ')
+      : `'${options.family}'`
+    sassPrependData.call(this, `$body-font-family: ${userFontFamily}, sans-serif`)
+  }
 
   // Add font-size custom variable
   options.size && sassPrependData.call(this, `$font-size-root: ${options.size}px`)
diff --git a/test/module.test.ts b/test/module.test.ts
index 7c54c509..8428e452 100644
--- a/test/module.test.ts
+++ b/test/module.test.ts
@@ -92,12 +92,26 @@ describe('setupFont', () => {
     })
 
     const { sass, scss } = nuxt.options.build.loaders
+    const expectedFont = "$body-font-family: 'Montserrat', sans-serif"
+    const expectedSize = '$font-size-root: 20px'
 
-    expect(sass.prependData).toContain("$body-font-family: 'Montserrat', sans-serif")
-    expect(scss.prependData).toContain("$body-font-family: 'Montserrat', sans-serif;")
+    expect(sass.prependData).toContain(expectedFont)
+    expect(sass.prependData).toContain(expectedSize)
 
-    expect(sass.prependData).toContain('$font-size-root: 20px')
-    expect(scss.prependData).toContain('$font-size-root: 20px;')
+    expect(scss.prependData).toContain(expectedFont + ';')
+    expect(scss.prependData).toContain(expectedSize + ';')
+  })
+
+  test('with list of fonts', () => {
+    setupFont({
+      family: ['Montserrat', 'Roboto']
+    })
+
+    const { sass, scss } = nuxt.options.build.loaders
+    const expected = "$body-font-family: 'Montserrat', 'Roboto', sans-serif"
+
+    expect(sass.prependData).toContain(expected)
+    expect(scss.prependData).toContain(expected + ';')
   })
 })