Reduce length of specificity-hacked CSS selectors

[westonruter]

Summary

I realized that we can compress the size of our CSS specificity hacks quite a bit by eliminating the redundant :not() pseudo selectors. So instead of :not(#_):not(#_):not(#_) we can refactor this to be the equivalent specificity :not(#_#_#_).

Additionally, instead of adding a :root ancestor selector, we can instead just appending the the :not() to the original selector. Lastly, the prefix of .amp-wp- can be reduced down to just .amp. This is kept as-is for now to prevent any unintentional regressions.

Given this example HTML from #1313:

<style>
p#para {
    color: red !important;
    font-weight: normal !important;
    text-decoration: underline;
}
</style>
<p id="para" style="color: green !important; font-weight: bold; text-decoration: overline;">I should still be green, not bold, and overlined!</p>

Before this would have resulted in the following which is 422 bytes after minification:

p#para {
	text-decoration: underline
}

:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) p#para {
	color: red;
	font-weight: normal
}

:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-27ad0ad {
	font-weight: bold;
	text-decoration: overline
}

:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-27ad0ad {
	color: green
}

With the changes in this PR, the same CSS is reduced to 235 bytes after minification:

p#para {
	text-decoration: underline
}

p#para:not(#_#_#_#_#_#_#_#_#_) {
	color: red;
	font-weight: normal
}

.amp-wp-27ad0ad:not(#_#_#_#_#_) {
	font-weight: bold;
	text-decoration: overline
}

.amp-wp-27ad0ad:not(#_#_#_#_#_#_#_#_#_#_#_#_#_#_#_#_#_) {
	color: green
}

This is a ~44% reduction in the resulting CSS.

This also fixes issues with amp-next-page for CSS selectors that are targeting elements in shadow DOM. Fixes #6909.

This also adds a tooltip to the :not(#_…) pesudo-class selectors in the stylesheets metabox:

Checklist

• Esure specificities are maintained.
• My code is tested and passes existing tests.
• My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

[westonruter]

The lack of :root has one unintended effect, which may or may not be a problem. Using the Specificity Calculator, I can see the new selector without :root has one fewer pseudo-class for its specificity:

I don't think this is a problem because the specificity from the IDs has much greater impact. But it's something to be aware of when testing.

[github-actions]

Plugin builds for 70fcaeb are ready 🛎️!

• Download development build
• Download production build

[westonruter]

@swissspidy Asking for your review as I know Web Stories uses a lot of inline styles which could be impacted by this, although perhaps not due to GoogleForCreators/web-stories-wp#6783.

[swissspidy]

@westonruter sorry for the late reply. Correct, I could not see a difference for Web Stories because of GoogleForCreators/web-stories-wp#6783

[delawski]

This looks good to me. The savings in stylesheet sizes are amazing!

I was a bit concerned if it is okay to have selectors targeting elements having multiple ID attributes. However, according to the W3C docs, it is valid:

If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. Such a situation could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and namespace-specific knowledge.

One potential issue I noticed is that the new selector is not supported in IE11:

Chrome to the left, IE11 to the right (via BrowserStack)

The Custom HTML block content is:

<p style="color:red!important;">This is red !important text</p>
<p class="test-1">This is red text from inline stylesheet using :not(#_#_#_) method</p>
<p class="test-2">This is red text from inline stylesheet using :not(#_):not(#_):not(#_) method</p>
<style>
.test-1:not(#_#_#_) { color: red; }
.test-2:not(#_):not(#_):not(#_) { color: red; }
</style>

Since, as of WordPress 5.8, IE11 is no longer supported and also since AMP is meant primarily for mobile devices, I wouldn't regard this as a show-stopper.

[westonruter]

One potential issue I noticed is that the new selector is not supported in IE11:

Good find! And good to know. I agree that it isn't a show-stopper.

[dhaval-parekh]

✅ QA Passed.

After adding HTML markup given description in post content. it reduced the length of CSS and does not use the :root. With new changes style of the web page are consistent with the non AMP page. ( Tested with Twenty twenty one theme )