From 0a453c14375c68ea2ff95d45ae7a02702954a01f Mon Sep 17 00:00:00 2001
From: Ricardo Gobbo de Souza <ricardogobbosouza@yahoo.com.br>
Date: Wed, 21 Oct 2020 15:18:26 -0300
Subject: [PATCH] fix: use script to load fonts

---
 lib/module.js      | 21 ++++++++++++++-------
 test/basic.test.js | 21 +++++++++++++++++++--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/lib/module.js b/lib/module.js
index 7588360..0fc81f3 100644
--- a/lib/module.js
+++ b/lib/module.js
@@ -107,17 +107,24 @@ module.exports = function (moduleOptions) {
       })
     }
 
-    // import CSS
-    this.options.head.style = this.options.head.style || []
-    this.options.head.style.push({
-      hid: 'gf-style',
-      pbody: true,
-      innerHTML: `@import "${url}"`
+    // append CSS
+    this.options.head.script = this.options.head.script || []
+    this.options.head.script.push({
+      hid: 'gf-script',
+      innerHTML: `(function(){var l=document.createElement('link');l.rel="stylesheet";l.href="${url}";document.querySelector("head").appendChild(l);})();`
+    })
+
+    // no-JS fallback
+    this.options.head.noscript = this.options.head.noscript || []
+    this.options.head.noscript.push({
+      hid: 'gf-noscript',
+      innerHTML: `<link rel="stylesheet" href="${url}">`
     })
 
     // Disable sanitazions
     this.options.head.__dangerouslyDisableSanitizersByTagID = this.options.head.__dangerouslyDisableSanitizersByTagID || {}
-    this.options.head.__dangerouslyDisableSanitizersByTagID['gf-style'] = ['innerHTML']
+    this.options.head.__dangerouslyDisableSanitizersByTagID['gf-script'] = ['innerHTML']
+    this.options.head.__dangerouslyDisableSanitizersByTagID['gf-noscript'] = ['innerHTML']
   })
 }
 
diff --git a/test/basic.test.js b/test/basic.test.js
index 596c8d2..7e8c15f 100644
--- a/test/basic.test.js
+++ b/test/basic.test.js
@@ -11,11 +11,28 @@ describe('basic', () => {
     await nuxt.close()
   })
 
-  test('render', async () => {
+  test('has prefetch link', async () => {
     const html = await get('/')
     expect(html).toContain('<link data-n-head="ssr" data-hid="gf-prefetch" rel="dns-prefetch" href="https://fonts.gstatic.com/">')
+  })
+
+  test('has preconnect link', async () => {
+    const html = await get('/')
     expect(html).toContain('<link data-n-head="ssr" data-hid="gf-preconnect" rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="true">')
+  })
+
+  test('has preload link', async () => {
+    const html = await get('/')
     expect(html).toContain('<link data-n-head="ssr" data-hid="gf-preload" rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
-    expect(html).toContain('<style data-n-head="ssr" data-hid="gf-style" data-pbody="true">@import "https://fonts.googleapis.com/css2?family=Roboto&family=Lato"</style>')
+  })
+
+  test('has script to import font css', async () => {
+    const html = await get('/')
+    expect(html).toContain('data-hid="gf-script"')
+  })
+
+  test('has noscript fallback', async () => {
+    const html = await get('/')
+    expect(html).toContain('data-hid="gf-noscript"')
   })
 })