Web-stories-wp: Broken gradients when using the AMP plugin

[swissspidy]

Bug Description

After some very helpful feedback from Brodie Clark I've found that the AMP plugin is causing issues with gradients.

Here's what I found out when testing with a linear gradient:

The Web Stories plugin adds a <div class="page-fullbleed-area"> element which is a child of <amp-story-grid-layer>. The gradient is added as inline style to that element.

It will look like this like this:

    background-color: white;
    background-image: linear-gradient(0turn, #fcfcfc 0.43%, #fd174e 100%);

The AMP plugin extracts that inline style, gives the div a new class(e.g. amp-wp-c307781) and adds CSS like :root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c307781{...} to the <style amp-custom=> style. So far so good.

The problem:

The CSS looks as follows (formatted for readability):

:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c307781 {
    background-color: white;
    background-image: linear-gradient(0 turn,#fcfcfc .43%,#fd174e 100%);
}

Notice how 0turn became 0 turn.

This makes the background-image declaration now invalid CSS.

Note:

This seems to apply only to linear gradients.

Radial gradients work fine, as the CSS looks like background-image:radial-gradient(#fcfcfc 0.43%, #fd174e 100%) and the AMP plugin does not break it.

Expected Behaviour

Gradients should work just fine when the AMP plugin is active.

Steps to Reproduce

1. Activate AMP plugin
2. Create a new story
3. Add a gradient to the page
4. Save story and view it on the frontend

Screenshots

Expectation:

vs. reality:

Additional Context

• Plugin Version: 1.0.0-rc.1 + AMP plugin 2.0.2
• Operating System: macOS
• Browser: Chrome 85

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

Implementation Brief

[swissspidy]

Known issue in the AMP plugin: https://github.com/ampproject/amp-wp/issues/4604
Upstream PR: https://github.com/sabberworm/PHP-CSS-Parser/pull/193

cc @westonruter

[westonruter]

We'll try to get this patched for v2.0.2 as well.

[westonruter]

AMP plugin v2.0.2 has been release, so this issue is fixed. See screenshots of before/after: https://github.com/ampproject/amp-wp/pull/5392#issuecomment-694539428.