Add allow-important for style[amp-runtime] on a transformed document

[schlessera]

Description

The issue we're currently seeing with the PHP AMP Toolbox (ampproject/amp-toolbox-php#496) is that the SSR-produced version of the page includes !important tags in the <style amp-runtime> element, as they are coming from the amp-runtime.css and from extensions like amp-ad.

This currently would mean that SSR is not a viable option, as it includes inlining the CSS that makes up the AMP runtime and the extensions. If that cannot be done, the whole approach of SSR is without value.

So, in that regard, the !important tag would need to be supported within the <style amp-runtime> element on a transformed document as well. If not, any try at doing SSR will lead to validation errors in the Google Search Console.

Alternatives Considered

We couldn't come up with a viable alternative so far. Here's what we considered:

• removal of the !important tags before inlining would break the layout
• not inlining breaks/invalidates SSR

Additional Context

SSR applies the transformations that the AMP Cache would do, but does them on the origin server. As such, SSR moves these transformations from _after the validation to _before the validation. Therefore, validation needs to be able to take SSR transformations into account. This includes applying whatever CSS AMP would apply via the runtime without SSR, and that includes the !important tag.

[erwinmombay]

this seems like a reasonable ask to keep on having the viability of SSR'ing on Origin. @schlessera how does an extension like amp-ad play into this btw? does that trigger additional css to be inserted into style[amp-runtime] ?

cc @jridgewell for visibility

[jridgewell]

SGTM

[schlessera]

@erwinmombay Yes, an extension like amp-ad comes with its own CSS to be included. In the particular case of amp-ad, this also includes the !important modifier (see https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad/0.1/amp-ad.css).

[erwinmombay]

@schlessera gotcha. i just want to make sure that it is not inserted into its own <style amp-extension="amp-ad"> element or if its in <style amp-runtime>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.