How to use Stylelint to prevent use of "max-width" in media queries

Question

I'd like to warn/error when using max-width in media queries and encourage a mobile-first approach with min-width.

Can I warn/error on...

@media (max-width: 50em) {
  padding: 1rem;
}

But allow...

@media (min-width: 50em) {
  padding: 1rem;
}

Answer 1

The media-feature-name-disallowed-list and media-feature-name-allowed-list rules can now be used in the latest stylelint:

"media-feature-name-disallowed-list": [
  "^max-width",
    {
      "message": "Use min-width for a mobile-first approach (media-feature-name-disallowed-list)",
    },
  ],
},