Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Duplicated Classes" check includes media query CSS rules #9

Open
kory-northrop opened this issue Apr 12, 2022 · 1 comment
Open

"Duplicated Classes" check includes media query CSS rules #9

kory-northrop opened this issue Apr 12, 2022 · 1 comment
Assignees
Labels

Comments

@kory-northrop
Copy link

kory-northrop commented Apr 12, 2022

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 zhcalvin self-assigned this Apr 15, 2022
@zhcalvin
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants