media-query-no-invalid.md

Pattern: Invalid media query

Issue: -

Description

Disallows invalid media queries.

Media queries must be grammatically valid according to the Media Queries Level 5 specification.

Examples

The following patterns are considered violations:

@media screen and (color), projection and (color) {}

@media screen and (color)
, projection and (color) {}

The following patterns are not considered violations:

@media screen and (color),
projection and (color) {}

@media screen and (color)
,
projection and (color) {}

The following patterns are considered violations:

@media screen and (color)
, projection and (color) {}

The following patterns are not considered violations:

@media screen and (color), projection and (color) {}

@media screen and (color),
projection and (color) {}

@media screen and (color)
,
projection and (color) {}

"never-multi-line"

There must never be a white after the commas in multi-line media query lists.

The following patterns are considered violations:

@media not(min-width: 300px) {}

@media (width == 100px) {}

@media (color) and (hover) or (width) {}

The following patterns are not considered violations:

@media not (min-width: 300px) {}

@media (width = 100px) {}

@media ((color) and (hover)) or (width) {}

Further Reading

• stylelint - media-query-no-invalid