ruilisi/css-checker

"Duplicated Classes" check includes media query CSS rules

kory-northrop opened this issue · 1 comments

kory-northrop commented

I don't know if this is a bug or a feature, but I notice that the "Duplicate Classes" check will report content that is included in media queries. Below is an example of an instance where css-checker flagged duplicate class content.

.classroom-callout__courses {
  margin-left: 15px;
}
@media only screen and (min-width: 576px) {
    .mr-sm-3, .mx-sm-3 {
        margin-left: 15px;
    }
}
@media only screen and (min-width: 768px) {
    .mr-md-3, .mx-md-3 {
        margin-left: 15px;
    }
}

I'm not sure if there's a way to resolve this where the compiled CSS code both passes the duplicate class check and is also valid CSS. As far as I know there's no way to combine a media query with a regular CSS selector to make one rule.

/* Not valid CSS */
@media screen and (max-width: 768px), .classroom-callout__courses {
    margin-left: 15px;
}

Am I missing something obvious here?

zhcalvin commented

This will be a new feature in the following versions of css-checker. Thanks for reporting.

  • 👍1