Linting media queries

[amorriscode]

Howdy!

We've been using Vanilla Extract successfully in production for a while now. Today we hit a little snag.

We wrote an invalid media query and it wasn't caught by the linter. In the end, this meant a CSS file was generated that had invalid syntax.

When using an online CSS validator, this is what we noticed:

If you write a media query like this, you can recreate the issue:

"@media": {
  "(max-width: 320px": { ... }
}

So it's clear that the strings aren't being linted. This might not even be a Vanilla Extract issue (there was a post on CSSType about media queries). Do you have any ideas on how something like this could be avoided? Is this a config issue on our end?

[mattcompiles]

You're right in that there's currently no validation for queries. Definitely open to adding this though.