Skip to main content

no-unknown-custom-media

Disallow unknown custom media queries.

@custom-media --sm (min-width: 40rem);
/**             ↑
*   This custom media query name */

@media (--sm) {}
/**      ↑
*   And this one */

Use this rule to avoid custom media queries that match no @custom-media rule. Browsers can't evaluate them, so their @media blocks never apply.

This rule considers custom media queries defined within the same source or within the files specified in the referenceFiles configuration property to be known.

This rule supports 1 message argument: the unknown custom media name.

Options​

true​

{
  "no-unknown-custom-media": true
}

The following patterns are considered problems:

@media (--sm) {}

@media (--sm), (max-height: 40rem) {}

The following patterns are not considered problems:

@custom-media --sm (min-width: 40rem);

@media (--sm), (max-height: 40rem) {}
note

The @custom-media name can be used before its declaration

@media (--lg) {}

@custom-media --lg (min-width: 60rem);