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