fix(styles): do not remove external styles of font providers (#217)

* fix: keep font provides styles * test: add tests * chore: typo
nuxt-community · Dec 23, 2020 · c71406b · c71406b
1 parent df3b146
commit c71406b
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git 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;
 }
diff --git a/example/pages/index.vue b/example/pages/index.vue
@@ -132,15 +132,19 @@
 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' }
+      ]
     }
   }
 }
 </script>
 
 <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
@@ -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
@@ -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
@@ -77,14 +77,17 @@ 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'))
 
       return {
         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))
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ $bg-color: #0cf; @@
     body {
         background: $bg-color;
+        font-family: Langar;
     }