New Rule: prefer-media-query-range

[DMartens]

Rule details

Prefer using media query range syntax over using min/max-*

What type of rule is this?

Suggests an alternate way of doing something

Example code

@media (min-width: 100px) {} /* -> @media (width > 100px) */

@media (min-width: 100px) and (max-width: 200px) {} /* -> @media (100px <= width <= 200px) */

Prior Art

• stylelint

Participation

• I am willing to submit a pull request to implement this rule.

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

• The syntax is baseline available since 2023.
• The stylelint rule allows to select a preferred style (prefix (min-width: ...) or context (width > ...))

[nzakas]

Makes sense to me. 👍 Marking as accepted.

[Tanujkanti4441]

@DMartens are you working on this, or would you like me to send a PR?

[DMartens]

I am sorry I forgot to followup. The rule logic is finished except the fixer as it is hard to create a robust fixer without the access to tokens. I am going to create an issue for this, so we can discuss further.