Skip to content

README.md

Latest commit

 

History

History
112 lines (87 loc) · 2.9 KB

README.md

File metadata and controls

112 lines (87 loc) · 2.9 KB
Raw

No Unreachable Media Conditions

Disallow media queries that contain logically contradictory conditions — combinations of feature constraints that can never all be satisfied at the same time.

@media (min-width: 1000px) and (max-width: 500px) {}
/*                ↑                          ↑
*                 These conditions can never both be true */

This catches dead code introduced by copy-paste errors or misconfigured breakpoints. Both the legacy min-width/max-width syntax and the modern range syntax (width > X) are supported, for any numeric media feature including logical properties, pixel ratios, and dimensions. @import rules with media conditions are also checked.

Options

true

The following patterns are considered violations:

/* min-width exceeds max-width */
@media (min-width: 1000px) and (max-width: 500px) {}
/* media type does not affect the width contradiction */
@media screen and (min-width: 1020px) and (max-width: 739px) {}
/* range syntax: equal exclusive bounds */
@media (width > 1000px) and (width < 1000px) {}
/* range syntax: impossible range */
@media (width >= 1000px) and (width <= 500px) {}
/* double-sided range conflicts with separate min-width */
@media (500px <= width <= 800px) and (min-width: 1000px) {}
/* logical property: inline-size */
@media (min-inline-size: 1000px) and (max-inline-size: 400px) {}
/* device-pixel-ratio */
@media (min-resolution: 3dppx) and (max-resolution: 1dppx) {}
/* height */
@media (min-height: 800px) and (max-height: 400px) {}
/* @import with contradictory media condition */
@import url(narrow.css) (400px <= width <= 200px);

The following patterns are not considered violations:

/* valid min/max range */
@media (min-width: 100px) and (max-width: 1000px) {}
/* comma-separated queries are independent */
@media (min-width: 1000px), (max-width: 500px) {}
/* different features are not compared */
@media (min-width: 1000px) and (max-height: 500px) {}
/* queries with `not` are skipped to avoid false positives */
@media not screen {}
/* valid @import media condition */
@import url(wide.css) (min-width: 600px) and (max-width: 1200px);

Credits

Idea for this rule came from @andydavies via Bluesky

Prior art