[🐛] bug: error in rule media-query-no-invalid

[TheElegantCoding]

i have this mixin with breakpoints

@mixin responsive($breakpoint)
{
    @media screen and (min-width: $breakpoint)
    {
      @content;
    }
}

i get this error Unexpected invalid media query "(min-width: $breakpoint)" (media-query-no-invalid), the variables should be allowed to be here, i have to make a validation for this or it is a not considered case?

Maybe this is related to #953

[kristerkari]

Thanks!

The media-query-no-invalid rule is not part of the stylelint-scss library. It's part of the standard stylelint package: https://github.com/stylelint/stylelint/tree/main/lib/rules/media-query-no-invalid.

In general the rules in the stylelint package are meant to be used with standard CSS, not with CSS preprocessors like Sass.

If you look at the readme for the rule, it states:

This rule is only appropriate for CSS. You should not turn it on for CSS-like languages, such as Sass or Less, as they have their own syntaxes.

Currently there is no corresponding rule in the stylelint-scss library.

[TheElegantCoding]

sorry i didn't verify that the rule isn't in stylelint-scss so i guess i have to disable this in SCSS i don't know ig it is a possibility to make this as a feature for stylelint-scss

[kristerkari]

i don't know ig it is a possibility to make this as a feature for stylelint-scss

I don't have anything against implemeting new rules here, but I also don't want to just re-implement most of the rules in the stylelint repo as duplicates here just to add SCSS support for the rule.

I haven't yet found a good solution for that problem. Maybe there would be a need for a new library that would extend the existing stylelint rules with support for SCSS.

[TheElegantCoding]

Well this is indeed part of the stylelint library, but this rule also gives an error with a scss variable, i think a library just for one rule is too much, not all rules have to be re-implement, but this is a case that maybe fit in a special case, i just put the rule off as a temporary solution