[css-conditional-5][css-nesting-1] Allow browsers with Nesting support to suppress stylesheet imports

In #8399 we discussed what's the path forward for browsers that do support CSS Nesting plus feature detection vs. those that do not.

The main issue is that browsers shipped Nesting without implementing feature detection beforehand. And without feature detection the usage of nested rules is restricted to non-essential rules if you want to avoid breaking the layout.

So @import "compiled-to-nonnested.css" not supports(selector(&)); as mentioned by @LeaVerou doesn't work.

@romainmenke noted the same saying that the following doesn't work:

@import "nested-and-small.css" supports(selector(&));
@import "not-nested-and-large.css" not supports(selector(&));

Browsers that do not support supports() fail to apply both, independently of whether they support nesting.

So in order to support those, you need to have one @import without condition (instead of not supports(). Though that means that browsers that do support support(), will then import both stylesheets. And that's not a good path forward performance-wise.

Therefore, there should be a way for those that interpret support() to suppress loading the ones without condition.

I don't have a good proposal for that at hand, unfortunately. The only way I can see is to indicate that via the stylesheet name. So e.g. if the name contains "non-nested", then ignore it.

Sebastian

Start by reading issue #8399 and the linked comments from LeaVerou and romainmenke to understand the existing discussion about CSS Nesting and conditional imports. Done means proposing and reaching agreement on a mechanism that lets browsers supporting feature detection suppress the unconditional fallback stylesheet without breaking browsers that lack supports().