cascade layers : use only simple selectors

[romainmenke]

Older browsers don't have support for compound selectors in :not().
I incorrectly assumed that non-complex selectors were ok.

CI will fail because I haven't updated preset-env tests.
Will do so after : #386

[Antonio-Laguna]

LGTM!

[yisibl]

Do you know exactly which browser versions don't support :not(#a#a)?

[romainmenke]

This shipped at the same time as :is() : https://developer.mozilla.org/en-US/docs/Web/CSS/:is#browser_compatibility

I don't have a reference to back this up, I tested this when I made this change.

[yisibl]

So can we output :not(#a#a) for browsers that support compound selectors? This would be shorter and keep the Specificity intact.

If you agree, I can submit a PR for this.

[romainmenke]

We don't have a way to conditionally output :not(#a#a), adding this is not trivial but possible.

We have a similar mechanic for area[href] in postcss-pseudo-class-any-link.
https://github.com/csstools/postcss-plugins/blob/postcss-preset-env--v8/plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.mjs#L32-L46

postcss-preset-env has code to set the correct plugin options for certain browsers.

---

Required work for this change

• MDN must include data for complex/compound selectors in :not()
• cssdb must be updated to track this new sub feature of :not()
• postcss-presete-env must set the correct plugin options based on browserslist and the new additions in cssdb
• postcss-cascade-layers must be updated with a new plugin option to toggle this behavior

---

It would be best to start this work from the postcss-preset-env--v8 branch : https://github.com/csstools/postcss-plugins/tree/postcss-preset-env--v8. We are unlikely to ship large additions in the current version