feat!: custom amp styles

docs/api/options.md

@@ -6,6 +6,7 @@ General options of amp module
 | Option  | Default | Valid values | Description |
 | ------  | ------- | ------------ | ----------- |
 | cdnBase | `https://cdn.ampproject.org/v0/` | Any String | A CDN Domain to load AMP elements scripts |
+| css | `~/assets/style/amp-custom.css` | Path to CSS style | Custom styles for AMP pages |
 |  tags   | `{}`    | Object of tag options  | Define new tags or modify current tags, for instance if you want to use `amp-mustache` version 0.1, tags value must be `{ 'amp-mustache': { version: '0.1' } }` |
 | origin  | `` | Any String | Main domain of website. Using this AMP modules tries to add missing canonical link for pages. |
 | mode    | `hybrid` | `only\|hybrid\|false` | Default behaviour of amp module. (`only` all pages serve in AMP mode by default, `hybrid` pages serves in both normal and AMP mode, `false` pages does not serve AMP by default ) |

example/assets/styles/amp-custom.css

@@ -0,0 +1,3 @@
+body {
+    background: #0cf;
+}

example/nuxt.config.js

@@ -7,9 +7,15 @@ module.exports = {
   render: {
     resourceHints: false
   },
+  css: [
+    '~/assets/styles/default.scss'
+  ],
+  build: {
+    extractCSS: true
+  },
   modules: [
-    [ 'nuxt-i18n', {
-      locales: [ 'en', 'fr' ],
+    ['nuxt-i18n', {
+      locales: ['en', 'fr'],
       defaultLocale: 'en',
       vueI18n: {
         fallbackLocale: 'en',
@@ -22,10 +28,11 @@ module.exports = {
           }
         }
       }
-    } ],
+    }],
     { handler: require('../') }
   ],
   amp: {
+    css: '~/assets/styles/amp-custom.css',
     origin: 'http://localhost:3000'
   }
 }

lib/module.js

@@ -1,10 +1,8 @@
 const { readdirSync } = require('fs')
 const { resolve, join } = require('path')
-const consola = require('consola')
 const chalk = require('chalk')
 const { getTags, getNecessaryScripts } = require('./tags')
-
-const logger = consola.withScope('@nuxtjs/amp')
+const { logger, getAmpCustom, watchAmpCustom } = 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>'
@@ -15,6 +13,7 @@ const ampBodyPattern = /<amp-body[^>]*>([.\S\s]*)<\/amp-body>/
 module.exports = function (moduleOptions) {
   const options = {
     cdnBase: undefined,
+    css: '~/assets/styles/amp-custom.css',
     origin: '',
     mode: 'hybrid',
     tags: {},
@@ -24,6 +23,17 @@ module.exports = function (moduleOptions) {
     ...moduleOptions
   }
 
+  if (options.css) {
+    options.css = this.nuxt.resolver.resolveAlias(options.css)
+    options._fileWatcher = watchAmpCustom(options.css)
+    this.nuxt.hook('close', () => {
+      if (options._fileWatcher) {
+        options._fileWatcher.close()
+        delete options._fileWatcher
+      }
+    })
+  }
+
   registerPlugin.call(this, options)
   copyAMP.call(this, options)
   registerRendererHook.call(this, options)
@@ -142,9 +152,16 @@ function registerRendererHook (options) {
 
     params.HEAD = params.HEAD
       .replace(scriptPattern, v => (v.includes('custom-element') || v.includes('application/ld+json')) ? v : '')
-      .replace(/<\/style>\S*<style [^>]*>/g, '')
-      .replace(/<style/, '<style amp-custom')
-      .replace('@charset "UTF-8";', '')
+      /**
+       * Remove external styles
+       */
+      .replace(/<style[^>]*>.*?<\/style>/g, '')
+      /**
+       * Remove external stylesheet
+       */
+      .replace(/<link[^>]*rel="stylesheet".*>/gi, '')
+
+    params.HEAD += `<style amp-custom>${getAmpCustom(this.nuxt, options)}</style>`
 
     params.HEAD += AMPBoilerplate
 

lib/utils.js

@@ -0,0 +1,43 @@
+import fs from 'fs'
+import chokidar from 'chokidar'
+import consola from 'consola'
+
+export const logger = consola.withScope('@nuxtjs/amp')
+
+const ampCustom = {
+  path: '',
+  content: ''
+}
+export function getAmpCustom (nuxt, options) {
+  if (!options.css) {
+    return ''
+  }
+  if (!ampCustom.path || ampCustom.path !== options.css) {
+    ampCustom.path = options.css
+    if (!fs.existsSync(ampCustom.path)) {
+      return ''
+    }
+    ampCustom.content = fs.readFileSync(ampCustom.path, { encoding: 'utf8' })
+  }
+  return ampCustom.content
+}
+
+export function clearAmpCustomCache () {
+  logger.info('Cache cleared')
+  ampCustom.path = ''
+  ampCustom.content = ''
+}
+export function watchAmpCustom (input) {
+  const filesWatcher = chokidar.watch(input, {
+    ignoreInitial: true
+  })
+
+  if (filesWatcher) {
+    logger.info('Watching for style changes')
+    filesWatcher.on('add', clearAmpCustomCache)
+    filesWatcher.on('change', clearAmpCustomCache)
+    filesWatcher.on('unlink', clearAmpCustomCache)
+    filesWatcher.on('unlinkDir', clearAmpCustomCache)
+  }
+  return filesWatcher
+}

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "amphtml-validator": "^1.0.33",
     "chalk": "^4.1.0",
+    "chokidar": "^3.4.3",
     "consola": "^2.15.0"
   },
   "devDependencies": {
@@ -51,10 +52,12 @@
     "husky": "^4.3.0",
     "jest": "^26.6.3",
     "jest-puppeteer": "^4.4.0",
-    "nuxt-edge": "^2.13.1-26548796.11a87d85",
+    "node-sass": "^5.0.0",
+    "nuxt-edge": "^2.14.8-26776834.e02fecdf",
     "nuxt-i18n": "^6.15.4",
     "puppeteer": "^5.5.0",
     "request": "2.88.2",
+    "sass-loader": "^10.1.0",
     "standard-version": "^9.0.0"
   }
 }