Incorrectly reporting duplicate declarations when using media queries

[jjenzz]

I have something similar to the following:

@media (min-width: 30em) {
  .m-label {
    display: block;
  }
}

/* because less than IE9 
 * doesn't support media queries */
.lt-ie9 .m-label {
  display: block;
}

Although they are sharing the same declaration, there is no way around that as they are only sharing it if the media query applies.

Would it make more sense for the parser to report duplicated declarations outside media queries separately from those inside media queries?

[zmoazeni]

Thank you @jjenzz that's an interesting thought. I need to chew on it a little. I welcome anyone else to add to the discussion too.

[Melindrea]

I actually just ran into that particular issue. Overall, I extend classes, but that is not possible to do into media queries, so I get an error from the following:

@media (min-width: 24em) {
/* line 81, ../../app/styles/site.scss */
  .contact {
    font-size: 36px;
    font-size: 2rem;
    margin-bottom: 0.825rem;
  }
}

.gamma, h3, .subtitle {
   font-size: 36px;
   font-size: 2rem;
   margin-bottom: 0.825rem;
 }

The particulars being that those three rules are generated as part of a vertical rhythm through typeplate, and once the screen gets wider I want to make the contact icons bigger.

[alexkilgour]

I definitely think that reporting duplicated declarations outside media queries separately from those inside media queries is a good idea. Could there be some way of displaying the media query definition in the output so you can differentiate where the declarations can be found?

[cibulka]

I very much second @howlingmad on 1) keeping duplicated declarations inside MQs but 2) marking them somehow differently in the ouput. Is there any chance you might consider to incorporate that into the plugin?

Thank you!