🐛 Fixed AMP validation warning from accent color style tag (#12771)

closes https://github.com/TryGhost/Ghost/issues/12770

AMP pages can't contain bare `<style>` tags, they need to have an attribute like `<style amp-custom>` and there can only be a single `<style amp-custom>` tag in the output.

- removed accent color style tag output from `{{ghost_head}}` (aliased as `{{amp_ghost_head}}`) when in an AMP context
- added a new `{{amp_style}}` helper that can be used to inject styles into the AMP template
  - outputs `:root {--ghost-accent-color: #abc123}` style if an accent color is set

core/frontend/apps/amp/lib/helpers/amp_style.js

@@ -0,0 +1,8 @@
+const {SafeString, escapeExpression} = require('../../../../services/proxy');
+
+module.exports = function amp_style(options) { // eslint-disable-line camelcase
+    if (options.data.site.accent_color) {
+        const accentColor = escapeExpression(options.data.site.accent_color);
+        return new SafeString(`:root {--ghost-accent-color: ${accentColor};}`);
+    }
+};

core/frontend/apps/amp/lib/helpers/index.js

@@ -10,6 +10,9 @@ function registerAmpHelpers(ghost) {
 
     // we use the {{ghost_head}} helper, but call it {{amp_ghost_head}}, so it's consistent
     ghost.helpers.registerAsync('amp_ghost_head', ghostHead);
+
+    // additional injected styles for use inside the single <style amp-custom> tag
+    ghost.helpers.register('amp_style', require('./amp_style'));
 }
 
 module.exports = registerAmpHelpers;

core/frontend/apps/amp/lib/views/amp.hbs

@@ -565,6 +565,8 @@
             font-size: 1.7rem;
         }
     }
+
+    {{amp_style}}
     </style>
 
     {{!-- AMP Boilerplate --}}

core/frontend/helpers/ghost_head.js

@@ -193,7 +193,8 @@ module.exports = function ghost_head(options) { // eslint-disable-line camelcase
                 }
             }
 
-            if (options.data.site.accent_color) {
+            // AMP template has style injected directly because there can only be one <style amp-custom> tag
+            if (options.data.site.accent_color && !_.includes(context, 'amp')) {
                 const accentColor = escapeExpression(options.data.site.accent_color);
                 const styleTag = `<style>:root {--ghost-accent-color: ${accentColor};}</style>`;
                 const existingScriptIndex = _.findLastIndex(head, str => str.match(/<\/(style|script)>/));

test/frontend-acceptance/default_routes_spec.js

@@ -205,6 +205,10 @@ describe('Default Frontend routing', function () {
             $('body.amp-template').length.should.equal(1);
             $('article.post').length.should.equal(1);
 
+            $('style[amp-custom]').length.should.equal(1);
+
+            res.text.should.containEql(':root {--ghost-accent-color: #FF1A75;}');
+
             doEnd(res);
         });
 

test/unit/helpers/ghost_head_spec.js

@@ -1657,5 +1657,31 @@ describe('{{ghost_head}} helper', function () {
                 done();
             }).catch(done);
         });
+
+        it('does not include style tag in AMP context', function (done) {
+            const renderObject = {
+                post: posts[1]
+            };
+
+            const templateOptions = {
+                site: {
+                    accent_color: '#123456'
+                }
+            };
+
+            helpers.ghost_head(testUtils.createHbsResponse({
+                templateOptions,
+                renderObject: renderObject,
+                locals: {
+                    relativeUrl: '/post/',
+                    context: ['post', 'amp'],
+                    safeVersion: '0.3'
+                }
+            })).then(function (rendered) {
+                should.exist(rendered);
+                rendered.string.should.not.containEql('--ghost-accent-color');
+                done();
+            }).catch(done);
+        });
     });
 });