Stylelint: Consider ignoring `@media` when parsing max-nesting rule

[mikeselander]

Currently, we have a max-nesting rule that is very strict at only allowing 2 levels of nesting with scss, with the exception of blockless-at-rules. I think it might be beneficial to loosen this just a bit for @media rules by adding "ignoreAtRules": ["media"] to the general rule in Stylelint.

Stylelint currently already ignores @media at the first level in a nesting pattern when parsing for nesting depth, but it does not ignore @media when it resides down the chain. If we make the proposed change, @media levels will not affect the nesting depth evaluation, and we still shouldn't end up with too-specific of selectors.

Thoughts?

cc @peterwilsoncc @sambulance @goldenapples @rmccue @joemcgill @kirstyburgoine

[peterwilsoncc]

Is it possible to ignore @media when calculating the depth while including items within it?

I don't want to allow:

body {
  @media ( min-width: 1em ) {
    .nesting {
      .all {
        .the {
          .way {
             down: 🙁;
          }
        }
      }
    }
  }
}

[mikeselander]

Hhhmmm that might be a problem, yes. I mis-read that rule originally but testing it more it does seem to ignore anything under the media query and not just the level the media query is at.