Merge pull request #710 from layershifter/fix/generate-fonts

fix source generation in generateFontSource()

Author: robinweser

packages/fela/src/__tests__/__snapshots__/generateFontSource-test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Generating font sources should return valid font sources with empty aliases 1`] = `"url('font.woff') format('woff'),url('font.ttf') format('truetype')"`;
+
+exports[`Generating font sources should return valid font sources with empty files 1`] = `"local('Times New Roman'),local('Calibri')"`;
+
+exports[`Generating font sources should return valid font sources with local aliases 1`] = `"local('Times New Roman'),local('Calibri'),url('font.woff') format('woff'),url('font.ttf') format('truetype')"`;

packages/fela/src/__tests__/generateFontSource-test.js

@@ -0,0 +1,22 @@
+import generateFontSource from '../generateFontSource'
+
+describe('Generating font sources', () => {
+  it('should return valid font sources with empty aliases', () => {
+    expect(generateFontSource(['font.woff', 'font.ttf'])).toMatchSnapshot()
+  })
+
+  it('should return valid font sources with local aliases', () => {
+    expect(
+      generateFontSource(
+        ['font.woff', 'font.ttf'],
+        ['Times New Roman', 'Calibri']
+      )
+    ).toMatchSnapshot()
+  })
+
+  it('should return valid font sources with empty files', () => {
+    expect(
+      generateFontSource([], ['Times New Roman', 'Calibri'])
+    ).toMatchSnapshot()
+  })
+})

packages/fela/src/generateFontSource.js

@@ -10,14 +10,15 @@ export default function generateFontSource(
 ): string {
   const localSource = arrayReduce(
     fontLocals,
-    (src, local) => {
+    (src, local, index) => {
+      const prefix = index > 0 ? ',' : ''
       const localUrl = getFontUrl(local)
-      return `{src} local(${localUrl}), `
+
+      return `${src}${prefix}local(${localUrl})`
     },
     ''
   )
-
-  return arrayReduce(
+  const urlSource = arrayReduce(
     files,
     (src, fileSource, index) => {
       const prefix = index > 0 ? ',' : ''
@@ -26,6 +27,9 @@ export default function generateFontSource(
 
       return `${src}${prefix}url(${fileUrl}) format('${fileFormat}')`
     },
-    localSource
+    ''
   )
+  const delimiter = localSource.length > 0 && urlSource.length > 0 ? ',' : ''
+
+  return `${localSource}${delimiter}${urlSource}`
 }