2

I have a straightforward question. How do you create a custom lint rule with scss which can move media queries outside of classes?

For example, the following is a VALID:

.class-name {
    background-color: green;
}

@media only screen and (max-width: 600px) {
  .class-name {
    background-color: lightblue;
  }
}

while following should throw an error

.class-name {
    background-color: green;

    @media only screen and (max-width: 600px) {  
        background-color: light-blue;
    }
}
dtandon
  • 108
  • 5
  • Does it matter - after all your compiler will probably move it anyway. Also, I would have thought the second version would be better from a maintainability standpoint as you have the media query with the selector instead of out of it, which may cause it to move if you add more selectors in between – Pete Oct 24 '22 at 10:45
  • hahaha, I did a search and I found a plugin that does enforce media queries nesting https://github.com/csstools/stylelint-use-nesting - everyone seems to think opposite to you about where they should be. You could use the above plugin and see if you can reverse the rule to create your own custom plugin – Pete Oct 24 '22 at 11:03
  • I understand the reasoning for reversing the role. The problem we are trying to solve here is decoupling the app's design for mobile, tablet and desktop. Different frontend devs can handle different pieces of code independently – dtandon Oct 24 '22 at 11:28

0 Answers0