feat: add option to use stylesheet

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`

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',

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"')

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
+  }
+}

test/fixture/use-stylesheet/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div style="font-family: 'Lato'">
+    Works!
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

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"')
+  })
+})