media-feature-name-unit-allowed-list

Specify a list of allowed name and unit pairs within media features.

@media (width: 50em) {}
/**     ↑         ↑
 * This media feature name and these units */

Use this rule to enforce a subset of units for a media feature as a convention. For example, allow only em for width, so that breakpoints scale with your users' settings, as relative units in media queries are based on the initial font size.

This rule supports 2 message arguments: the disallowed unit and the media feature name.

Options

Array<string>

{ "media-feature-name": ["array", "of", "units"] }

You can specify a regex for a media feature name, such as { "/height$/": [] }.

Given:

{
  "media-feature-name-unit-allowed-list": {
    "width": "em",
    "/height/": ["em", "rem"]
  }
}

The following patterns are considered problems:

@media (width: 50rem) {}

@media (height: 1000px) {}

@media (min-height: 1000px) {}

@media (height <= 1000px) {}

The following patterns are not considered problems:

@media (width: 50em) {}

@media (width <= 50em) {}

@media (height: 50em) {}

@media (min-height: 50rem) {}