From e47728b4ba6f4d09bf94a51a14b7b55378f69f7e Mon Sep 17 00:00:00 2001
From: Ricardo Gobbo de Souza <ricardogobbosouza@yahoo.com.br>
Date: Mon, 9 Nov 2020 19:10:07 -0300
Subject: [PATCH] feat: add option to use stylesheet

---
 README.md                                   |  8 ++++
 lib/module.js                               | 12 ++++++
 test/basic.test.js                          |  5 +++
 test/fixture/use-stylesheet/nuxt.config.js  | 17 ++++++++
 test/fixture/use-stylesheet/pages/index.vue | 11 ++++++
 test/use-stylesheet.test.js                 | 43 +++++++++++++++++++++
 6 files changed, 96 insertions(+)
 create mode 100644 test/fixture/use-stylesheet/nuxt.config.js
 create mode 100644 test/fixture/use-stylesheet/pages/index.vue
 create mode 100644 test/use-stylesheet.test.js

diff --git a/README.md b/README.md
index 3b5361f..761da88 100755
--- a/README.md
+++ b/README.md
@@ -133,6 +133,14 @@ This option inject `<link rel="preload" as="style" href="https://fonts.googleapi
 
 See https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content
 
+### `useStylesheet`
+
+- Type: `Boolean`
+- Default: `false`
+
+This option inject `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" />` into your project header, 
+recommended for projects that use the AMP module that removes scripts.
+
 ### `download`
 
 - Type: `Boolean`
diff --git a/lib/module.js b/lib/module.js
index 27496d0..1bb6d51 100644
--- a/lib/module.js
+++ b/lib/module.js
@@ -11,6 +11,7 @@ module.exports = function (moduleOptions) {
       prefetch: true,
       preconnect: true,
       preload: true,
+      useStylesheet: false,
       download: false,
       base64: false,
       inject: true,
@@ -108,6 +109,17 @@ module.exports = function (moduleOptions) {
     }
 
     // append CSS
+    if (options.useStylesheet) {
+      this.options.head.link.push({
+        hid: 'gf-style',
+        rel: 'stylesheet',
+        href: url
+      })
+
+      return
+    }
+
+    // JS to inject CSS
     this.options.head.script = this.options.head.script || []
     this.options.head.script.push({
       hid: 'gf-script',
diff --git a/test/basic.test.js b/test/basic.test.js
index 19c77be..74dc659 100644
--- a/test/basic.test.js
+++ b/test/basic.test.js
@@ -26,6 +26,11 @@ describe('basic', () => {
     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">')
   })
 
+  test('no has stylesheet link', async () => {
+    const html = await get('/')
+    expect(html).not.toContain('<link data-n-head="ssr" data-hid="gf-style" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
+  })
+
   test('has script to import font css', async () => {
     const html = await get('/')
     expect(html).toContain('data-hid="gf-script"')
diff --git a/test/fixture/use-stylesheet/nuxt.config.js b/test/fixture/use-stylesheet/nuxt.config.js
new file mode 100644
index 0000000..116f985
--- /dev/null
+++ b/test/fixture/use-stylesheet/nuxt.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  rootDir: __dirname,
+  buildModules: [
+    { handler: require('../../../') }
+  ],
+  head: {
+    link: [
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Lato' }
+    ]
+  },
+  googleFonts: {
+    families: {
+      Roboto: true
+    },
+    useStylesheet: true
+  }
+}
diff --git a/test/fixture/use-stylesheet/pages/index.vue b/test/fixture/use-stylesheet/pages/index.vue
new file mode 100644
index 0000000..8c76251
--- /dev/null
+++ b/test/fixture/use-stylesheet/pages/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <div style="font-family: 'Lato'">
+    Works!
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/test/use-stylesheet.test.js b/test/use-stylesheet.test.js
new file mode 100644
index 0000000..19728c4
--- /dev/null
+++ b/test/use-stylesheet.test.js
@@ -0,0 +1,43 @@
+const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils')
+
+describe('use stylesheet', () => {
+  let nuxt
+
+  beforeAll(async () => {
+    ({ nuxt } = (await setup(loadConfig(__dirname, 'use-stylesheet'))))
+  }, 60000)
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  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="">')
+  })
+
+  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">')
+  })
+
+  test('has stylesheet link', async () => {
+    const html = await get('/')
+    expect(html).toContain('<link data-n-head="ssr" data-hid="gf-style" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
+  })
+
+  test('no has script', async () => {
+    const html = await get('/')
+    expect(html).not.toContain('data-hid="gf-script"')
+  })
+
+  test('not has noscript fallback', async () => {
+    const html = await get('/')
+    expect(html).not.toContain('data-hid="gf-noscript"')
+  })
+})