Stylelint: Create a rule, that can disallow add nested media queries

Question

I wanna create a rule, which should block nested media queries. For example, this SCSS should be blocked:

.example-class {
    max-width: 350px;
    @media screen and (max-width: 768px) {
         margin: auto;
    }
}

Answer 1

You can write a stylelint plugin to disallowed nested at-media rules.

The plugin would walk all the at-media rules in a source and check that their parent is the root node. You can use the PostCSS walkAtRules() to do this, e.g.:

root.walkAtRules('media', atRule => {
  if (atRule.parent.type !== "root") {
    stylelint.utils.report({ /* .. */ });
  }
})