Add media-query-no-invalid

[romainmenke]

What is the problem you're trying to solve?

I want to warn on invalid media queries.

see : #6560 (comment)

Types of errors :

1. the @media params are not even remotely similar to a media query
   • isMediaQueryInvalid(x) will be true
   • e.g. @media @foo {}
2. the parenthesis and combinators are incorrect
   • isGeneralEnclosed(x) will be true
   • e.g. @media ((min-width: 300px) and (hover: hover) or (aspect-ratio: 1 / 1))
3. syntactically incorrect values are used for media queries in general
   • isGeneralEnclosed(x) will be true
   • e.g. @media (min-width: var(--foo))
   • e.g. @media (min-width: 50%)

What solution would you like to see?

A new rule :

• Name: media-query-no-invalid
• Primary option: true
• Secondary options: none
• Autofixable: No
• Message: Unexpected invalid media query "${query}"
• Description: Disallow invalid media queries.
• Section: "Avoid Errors" -> "Invalid"
• Extended description: something about invalid media queries

[ybiquitous]

@romainmenke Thanks for opening the issue. That sounds great to me. 👍🏼

Let's wait for the feedback. If nobody objects, then let's mark it as ready.

[ybiquitous]

Since there are no objections, I've labeled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to add a new rule in the Developer guide.