Investigate AMP Validation Errors for Improved/Frosted Glass Promo Features

[Harvey Peachey]

Describe the bug
When enabling AMP to allow rendering of the new Improved Promo/Frosted Glass component in CpsFeaturesAnalysis, assets are failing our AMP validation tests. We need to investigate if this is easily rectifiable.

To Reproduce
Steps to reproduce the behaviour:

1. Remove the AMP checks within the switch statement for in CpsFeaturesAnalysis AMP here and here
2. Run the AMP validation script yarn amp:validate, or visit this asset or asset whilst having the AMP Validator Extensions installed
3. See the below error:

/russian/features-54391793
FAIL
line 1, col 622[8](https://github.com/bbc/simorgh/runs/5736922349?check_suite_focus=true#step:8:8): The author stylesheet specified in tag 'style amp-custom' is too long - document contains 7[9](https://github.com/bbc/simorgh/runs/5736922349?check_suite_focus=true#step:8:9)141 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)


/russian/news-5504[11](https://github.com/bbc/simorgh/runs/5736922349?check_suite_focus=true#step:8:11)60
FAIL
line 1, col 5935: The author stylesheet specified in tag 'style amp-custom' is too long - document contains 83595 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)

Expected behaviour
AMP Validation to pass

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Testing notes

• This bug fix is expected to need manual testing.

Checklist

• (BBC contributors only) This issue follows the repository use guidelines

Additional context
Add any other context about the problem here.

[Aaron Moore]

Had a bit of a look at this, currently this is how AMP will render the 'improved promos'. It renders a black background where the image for the frosted glass area should be, this is due to the hook thats used to generate the real background colour not being able to run on AMP:

We can conditionally render the background image for the frosted glass area for canonical only, which trims down the style sheet size a good bit, but not always enough to pass AMP Validation:

We also pass in a prop to the <ImageWithPlaceholder /> component called darkMode. This is always set to true, which shows a dark version of the BBC blocks placeholder image before the actual image loads in. Strangely, setting this to false on AMP reduces the stylesheet size enough to pass AMP Validation (if used with the above conditional rendering of the frosted glass background).

These "fixes" seem to be teetering on the edge of the maximum allowed stylesheet size though, so I'm not confident that it will fix the issue forever. There aren't many other styles that can be removed from what I can see, in reality more will need to be added to support the component rendering on the 'tablet' breakpoint which is currently pending designs.