From c71406bb80438abfc61d9b8afd7ede83ef97dbbb Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Wed, 23 Dec 2020 18:44:25 +0330
Subject: [PATCH] fix(styles): do not remove external styles of font providers
 (#217)

* fix: keep font provides styles

* test: add tests

* chore: typo
---
 example/assets/styles/amp-custom.scss |  1 +
 example/pages/index.vue               |  8 ++++++--
 lib/module.js                         |  8 +++-----
 lib/utils.js                          | 22 ++++++++++++++++++++++
 test/module.test.js                   |  9 ++++++++-
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/example/assets/styles/amp-custom.scss b/example/assets/styles/amp-custom.scss
index 762cabc8..e16de5d1 100644
--- a/example/assets/styles/amp-custom.scss
+++ b/example/assets/styles/amp-custom.scss
@@ -2,4 +2,5 @@ $bg-color: #0cf;
 
 body {
     background: $bg-color;
+    font-family: Langar;
 }
\ No newline at end of file
diff --git a/example/pages/index.vue b/example/pages/index.vue
index d30219e0..4653fa65 100644
--- a/example/pages/index.vue
+++ b/example/pages/index.vue
@@ -132,7 +132,11 @@
 export default {
   head () {
     return {
-      title: 'AMP module for Nuxtjs'
+      title: 'AMP module for Nuxtjs',
+      link: [
+        { rel: 'preconnecy', href: 'https://fonts.gstatic.com' },
+        { hid: 'google-font', rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Langar&display=swap' }
+      ]
     }
   }
 }
@@ -140,7 +144,7 @@ export default {
 
 <style>
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: Langar, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 body > * {
   margin: 0.5rem 0 0.5rem 0.5rem;
diff --git a/lib/module.js b/lib/module.js
index 11f120a0..6cabcc68 100644
--- a/lib/module.js
+++ b/lib/module.js
@@ -1,7 +1,7 @@
 const { resolve, join } = require('path')
 const chalk = require('chalk')
 const { getTags, getNecessaryScripts } = require('./tags')
-const { logger } = require('./utils')
+const { logger, removeExternalStyles } = require('./utils')
 
 const AMPBoilerplate = '<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>' +
 '<script async src="https://cdn.ampproject.org/v0.js"></script>'
@@ -163,10 +163,8 @@ function registerRendererHook (options) {
        * Remove external styles
        */
       .replace(/<style[^>]*>.*?<\/style>/g, '')
-      /**
-       * Remove external stylesheet
-       */
-      .replace(/<link[^>]*rel="stylesheet".*>/gi, '')
+
+    params.HEAD = removeExternalStyles(params.HEAD)
 
     params.HEAD += AMPBoilerplate
 
diff --git a/lib/utils.js b/lib/utils.js
index be56d240..2d4d426c 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -1,3 +1,25 @@
 import consola from 'consola'
 
 export const logger = consola.withScope('@nuxtjs/amp')
+
+export const VALID_FONT_PROVIDERS = [
+  'https://cloud.typography.com',
+  'https://fast.fonts.net',
+  'https://fonts.googleapis.com',
+  'https://use.typekit.net',
+  'https://maxcdn.bootstrapcdn.com',
+  'https://use.fontawesome.com'
+]
+
+/**
+ * Remove external stylesheet links from input head HTML and leave
+ * valid font ptovider styles
+ */
+export function removeExternalStyles (head) {
+  return head.replace(/<link[^>]*rel="stylesheet"[^>]*>/gi, (v) => {
+    if (VALID_FONT_PROVIDERS.some(domain => v.includes(domain))) {
+      return v
+    }
+    return ''
+  })
+}
diff --git a/test/module.test.js b/test/module.test.js
index 6af6d382..4c21989d 100644
--- a/test/module.test.js
+++ b/test/module.test.js
@@ -77,6 +77,8 @@ describe('Render AMP version of home page', () => {
       const canonical = document.querySelector('[rel=canonical]').getAttribute('href')
       const amphtml = document.querySelector('[rel=amphtml]')
 
+      const googleFont = document.querySelector('[data-hid="google-font"]').getAttribute('href')
+
       const detectedTags = [...document.querySelectorAll('script[custom-element],script[custom-template]')]
         .map(a => a.getAttribute('custom-element') || a.getAttribute('custom-template'))
 
@@ -84,7 +86,8 @@ describe('Render AMP version of home page', () => {
         ampAttr,
         detectedTags,
         canonical,
-        amphtml
+        amphtml,
+        googleFont
       }
     })
     source = await response.text()
@@ -102,6 +105,10 @@ describe('Render AMP version of home page', () => {
     expect(info.canonical).toEqual(url(''))
   })
 
+  test('Keep links of valid font providers', () => {
+    expect(info.googleFont).toEqual('https://fonts.googleapis.com/css2?family=Langar&display=swap')
+  })
+
   test('Detect all tags', () => {
     const expected = ['amp-carousel', 'amp-list', 'amp-bind', 'amp-mustache']
     expect(info.detectedTags).toEqual(expect.arrayContaining(expected))