New Rule: prefer-media-query-range

Open
#442 3 comments 0 reactions 1 assignee View on GitHub

@DMartens is already working on this.

Since May 4, 2026.

Assessment

This issue has not been assessed yet.

Description

accepted feature
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
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 > ...))
Dominant language
JavaScript
Stars
308
Forks
44
Avg merge
2d 6h
Merged PRs (30d)
18

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from eslint/css

All issues in eslint/css

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.