Add media-feature-name-value-no-unknown

[mattxwang]

What is the problem you're trying to solve?

In the discussion for #6550, @romainmenke mentioned certain types of issues involving invalid media query ranges. Their examples include:

@media (width <= 100) {} /* number is not a length */
@media (width <= 50%) {} /* percentage is not a length */
@media (min-aspect-ratio: 16px/9px) {} /* length values do not make up a ratio */

I could also see the potential for auditing queries with the wrong number or types or arguments, ex:

@media (width <= hover) /* invalid: hover is a keyword, not a length */
@media (color <= 16px)  /* invalid: color expects an integer */

/* grid is *not* a range, but just to also call out: */
@media (grid: 10)   /* invalid: grid expects a boolean (<mq-boolean>) of 1 or 0 */
@media (grid: 10px) /* invalid: grid expects a boolean (<mq-boolean>) of 1 or 0 */

I'm not sure if this is an appropriate rule for Stylelint, especially given its potential complexity.

What solution would you like to see?

• Name: media-feature-name-value-no-unknown
• Primary option: true
• Secondary options: none
• Autofixable: No
• Message: Unexpected unknown value "${value}" for media feature "${name}"
• Description: Disallow unknown values for media features.
• Section: "Avoid Errors" -> "Unknown"
• Extended description: something about valid value types for specific media features

[ybiquitous]

@mattxwang Thanks for opening the issue!

[jeddy3]

Alternatively, perhaps the rule could focus more on matching feature names and unit pairs (rather than ranges themselves).

That sounds promising. It'd be aligned with the proposed declaration-property-value-no-unknown in #6511. That relies on using a lexer with built-in syntax validation. Maybe the same exists for media feature name and value pairs.

Let's see where #6511 goes first before taking this issue further.

[romainmenke]

It would be relatively straightforward with our media query parser to check if a media query is syntactically valid or not.

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 type is unknown
   • isMediaQueryWithType(x) will be true
   • x.getMediaType() is not one of all | print | screen | tty | tv | projection | handheld | braille | embossed | aural | speech
   • e.g. @media tablet and (min-width: 800px)
3. 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))
4. 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%)
5. syntactically incorrect values are used for a specific media feature
   • isMediaFeature(x) will be true
   • requires manual validation of values and units against : https://drafts.csswg.org/mediaqueries-5/#media-descriptor-table
   • e.g. @media (width: coarse)

I think 5. is a good fit for a media-feature-name-value-no-unknown rule.

1., 2., 3. and 4. will likely require one or more other rules.

4. and 5. seem related as both become invalid because of an unexpected value but there is no way to distinguish 3. from 4..

[ybiquitous]

@romainmenke Thanks for the reminder. Your suggestion sounds great to me. 👍🏼

Could you please redraw this new rule's blueprint?

[romainmenke]

I've made some edits to the blueprints

[ybiquitous]

Thank you!

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.

[romainmenke]

I've got a first working draft of the new rule ready here : #6906 (comment)

I don't expect anyone to review this at this time, but if someone is curious or has early feedback, that is always welcome 🙇

I tried to focus only on value validation and I am ignoring all other types of errors.

Some other types of errors I thought of while writing this rule:

• (--custom-mq: 100px) : invalid because custom media must be in boolean features
• (min-width) : invalid because min- prefix can not be used in boolean features
• ...

Technically these are also errors related to values and names but I think these are more related to the general grammar. i.e. wrong location of a value or missing value.

Only when the following is true does the rule kick in:

• the media query has valid syntax
• the media feature has valid syntax
• there is a media feature name
• there is a media feature value