feat: add option to control inline styles

nuxt-community · Dec 27, 2020 · 4c3e2d5 · 4c3e2d5
1 parent fdad34b
commit 4c3e2d5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/docs/api/options.md b/docs/api/options.md
@@ -6,7 +6,8 @@ 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     | `undefined` | `false` or Path to CSS style | Custom styles for AMP pages, eg. `~/assets/style/amp-custom.css`. By setting this option to `false`, the module will not remove inline styles, instead it will try to merge all inline styles into a single style tag.|
+| css     | `undefined` | Path to CSS style | Custom styles for AMP pages, eg. `~/assets/style/amp-custom.css`. |
+| removeInlineStyles | `true` | By setting this option to `false`, the module will not remove inline styles, instead it will try to merge all inline styles into a single style tag. |
 |  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 ) |

diff --git a/lib/module.js b/lib/module.js
@@ -21,6 +21,7 @@ module.exports = function (moduleOptions) {
   const options = {
     cdnBase: undefined,
     css: undefined,
+    removeInlineStyles: true,
     origin: '',
     cssLoader: '',
     mode: 'hybrid',
@@ -160,21 +161,26 @@ function registerRendererHook (options) {
     params.HEAD = params.HEAD
       .replace(scriptPattern, v => (v.includes('custom-element') || v.includes('application/ld+json')) ? v : '')
 
-    if (options.css !== false) {
+    if (options.removeInlineStyles) {
       /**
        * Remove inline styles
        */
       params.HEAD = params.HEAD
-        .replace(/<style[^>]*>[.\S\s]*?<\/style>/g, '')
-    } else {
-      /**
-       * Merge inline styles
-       */
-      params.HEAD = params.HEAD.replace(/<\/style>\S*<style [^>]*>/g, '')
-        .replace(/<style/, '<style amp-custom')
-        .replace('@charset "UTF-8";', '')
+        .replace(/<style[^>]*>[.\S\s]*?<\/style>/g, v => v.includes('amp-custom') ? v : '')
     }
 
+    /**
+     * Merge inline styles
+     */
+    params.HEAD = params.HEAD.replace(/<\/style>[\S\s]*<style[^>]*>/g, '')
+
+    /**
+     * Mark styles as `amp-custom`
+     */
+    params.HEAD = params.HEAD
+      .replace(/<style/, '<style amp-custom')
+      .replace('@charset "UTF-8";', '')
+
     /**
      * Remove external styles
      */

diff --git a/templates/plugin.js b/templates/plugin.js
@@ -14,6 +14,6 @@ export default async function (ctx, inject) {
   }
   <% if (options.css) { %>if (ctx.$isAMP) {
     const cssText = await import('!!raw-loader<%= options.cssLoader %>!<%= options.css %>').then(m => m.default || m)
-    ctx.app.head.style.push({ cssText, type: 'text/css', 'amp-custom': '' })
+    ctx.app.head.style.push({ cssText, type: 'text/css', hid: 'amp-custom' })
   }<% } %>
 }