Broken MQ mixin

[pepelsbey]

@mixin breakpoint($point) {
    @if $point == 2x {
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min-moz-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5) { @content; }
    }
}

[MarioRicalde]

Definitely an issue. I'm thinking if keeping error highlighting is worthwhile…

@stephenway

[pepelsbey]

I would rather turn it off. If you're using Zen Coding kind of snippets (Emmet, Hayaku or your own snippets) it's a nightmare. Every time you type a snippet to expand it's an error before tab is pressed:

[stephenway]

I agree, the limits are pushed out so far with @media. But it's important to give the user feedback if they do type something incorrect. I'll look into @media again with this example.

[pepelsbey]

More examples. There are two problems here, caused by new line between @media and starting bracket {

1. Single @media is not highlighted
2. Nested @media is highlighted as error

I hope it would help.

@media (max-width:500px), (min-width:500px) {
    @media (max-width:500px), (min-width:500px) {

        }
    }

@media (max-width:500px), (min-width:500px) {
    @media  (max-width:500px),
            (min-width:500px) {
        p { color:red; }
        }
    }

@media  (max-width:500px),
        (min-width:500px) {
    p { color:red; }
    }

[stephenway]

So many medias! I've changed it up a bit so that it won't annoy you with the error highlighting, but there are so many different use cases, I will probably spend some more time on this later, maybe extend the whole dict more?

[pepelsbey]

Since you're on MQ now: expression max-width:915px, nested declaration color:red and next selector mark are not highlighted:

p {
    @media (max-width:915px) {
        color:red;
        }
    mark {
        color:red;
        }
    mark {
        color:red;
        }
    }

[sethwhitaker]

Im having the same situation as above. Every media query now makes all rules after it to alternate between being highlighted and not.

[superbland]

Same as above, I'm noticing that all syntax highlighting is broken until the first '{' opening brace in each query.

[stephenway]

Yea I'm going to revert my last change, sorry guys.

[tompave]

Same issue here. I'd say it affects any syntax token after the and keyword inside a @media statement. It's happening to me with selectors, css rules and part of the @media line.

[chinghanho]

+1