Weird CSS after Tree Shaking / excessive CSS

Those selectors are unfortunately a hack needed to ensure correct specificity of the style rule. The cause is most likely because you have !important qualifier for the underlying style rule.

In other words, the underlying style rule causing this is:

.saboxplugin-wrap .saboxplugin-desc p,
.saboxplugin-wrap .saboxplugin-desc { 
    color:#f4f4f4 !important; 
}

So for example, if I create a post with a Custom HTML block like the following:

<!-- wp:group {"backgroundColor":"primary"} -->
<div class="wp-block-group has-primary-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:html -->
<style>
.saboxplugin-wrap .saboxplugin-desc p { 
    color:lime !important; 
}
</style>
<div class="saboxplugin-wrap"><div class="saboxplugin-desc"><p style="color:red">Inside</p></div></div>
<!-- /wp:html --></div></div>
<!-- /wp:group -->

In the block editor it looks like this:

The non-AMP and AMP look the same:

Notice that the lime color from the style rule is overriding the inline style attribute, which is only possible in AMP with !important. However, AMP does not allow !important. See Supported CSS. For this reason, the AMP plugin rewrites the selectors for such rules to have selectors with higher specificity. Nevertheless, styles in a style attribute always override style rules (unless !important is also used), and so while AMP allows inline style attributes, we have to extract them from being inline to also be put into style rules with higher specificity.

So the CSS from the above Custom HTML block ends up getting transformed into AMP as:

Notice the dotted underlines under the repeated :not() selectors? A tooltip appears to explain why they are there (granted, this is not very discoverable):

:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .saboxplugin-wrap .saboxplugin-desc p
	{ color:lime; }

Selector generated to increase specificity for important properties so that the CSS cascade is preserved. AMP does not allow important properties.

:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-b64e6d9
	{ color:red; }

Selector generated to increase specificity so the cascade is preserved for properties moved from style attribute to CSS rules in style[amp-custom].
Class name generated during extraction of inline style to style[amp-custom].

So that is the source of those selectors. And unless AMP allows for !important.

To eliminate these :not() selectors, the way to do so is to eliminate use of !important and avoid using styles in inline style attributes.

• This reply was modified 5 years, 7 months ago by Weston Ruter.
• This reply was modified 5 years, 7 months ago by Marius L. J.. Reason: Correct code example

Thank you. We’d love a plugin review.