implement supports conditions

[romainmenke]

supersedes : #532
fixes : #529

---

The core issue is how multiple statements are combined.

The previous implementation tried to squash media queries and layer conditions.

• layer(foo) screen
• layer(bar) (min-width: 1000px)

becomes :

@media screen and (min-width: 1000px) {
  @layer foo.bar {}
}

In this example the foo layer is only defined when the media is screen and has a width of 1000px. While it should actually be defined even when the media is screen and smaller.

• screen
• not print

becomes :

@media screen and not print {}

In this example the media query becomes invalid because and can not be used to combine screen and not print

---

The implementation for this feature was also fairly complex.

Adding supports into this would have made the implementation very unwieldy and it would have increased the chance that users experience bugs.

---

The correct way to combine is actually much simpler.

• layer(foo) screen
• layer(bar) (min-width: 1000px)

becomes :

@media screen {
  @layer foo {
    @media (min-width: 1000px) {
      @layer foo.bar {}
    }
  }
}

• screen
• not print

becomes :

@media screen {
  @media not print {}
}

---

By using nested statements we ensure that the order of declaration is respected and that no invalid statements are produced.

At this point it also becomes trivial to add support for supports conditions.

---

This method does break one aspect.

@import statements can not be nested syntactically in CSS.
They must appear first at the root of the AST.

valid :

@imports "http://something-external.com" screen;

invalid :

@media screen {
  @imports "http://something-external.com";
}

To restore support for this we can use nested stylesheets.
@import statement urls can be base64 encoded data urls.
This doesn't actually have to be base64 encoded, but encoding makes it less prone to errors.

Without encoding it looks like this :

@import url("data:text/css,@imports url('http://something-external.com') not print;") screen;

• import this : @imports url('http://something-external.com') not print;
• apply a screen media condition

This technique was first thought of by the maintainer of esbuild while fixing issues brought to light by https://github.com/romainmenke/css-import-tests

---

This implementation change fixes a lot of subtle bugs and as far as I can tell the output is almost always smaller.

It also eliminates some complexity for users.
They no longer need to define things like nameLayer for anonymous layers to work correctly. The issue for which we introduced that option no longer exists in this implementation.

So I think this is a pure win :)

[RyanZim]

Just to clarify, base64 encoding is only used for external URL imports, right?

A few questions below as well; otherwise, looks good.

[romainmenke]

Thank you for the review 🙇

Just to clarify, base64 encoding is only used for external URL imports, right?

Yes.
Only when an import can not be inlined and conditions or cascade layers need to be applied.

[RyanZim]

Thanks a lot! Ready to publish as v16?

[RyanZim]

I think I'll wait until after the New Year to publish, just in case something goes wrong.

[RyanZim]

025f27a 🎉

[romainmenke]

Awesome! thank you so much for all the careful reviews 🙇