Media query and newline character after @media

[mhulse]

Hi,

This is not so much a bug, but more of an FYI to anyone else in the same boat.

Take this media query for example:

@media
only screen and (max-width: 1319px) and (min--moz-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (-moz-min-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (-o-min-device-pixel-ratio: 3/2),
only screen and (max-width: 1319px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (min-resolution: 1.5dppx) { ... }

When minified (using Grunt's mincss task) the @media and only get mushed together:

@mediaonly ...

When I put the media query on the same line:

@media only screen and (max-width: 1319px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (-moz-min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (-o-min-device-pixel-ratio: 3/2), only screen and (max-width: 1319px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (min-resolution: 1.5dppx) { ... }

The media query minifies without any problems.

Speaking strictly in terms of CSS, I'm not sure if it's syntactically incorrect to put the only on a newline after the @media, so that's why I figure this is not a bug ... It's easy enough to add a space after the @media or put the MQ all on one line.

Just thought this info might help someone and/or the clean-css crew would like to know?

Not sure if I should keep this issue open or closed. Feel free to close it if you think this is not a bug (or, I'll come back by in a week to close it myself).

Keep up the excellent work!

Thanks!
Micky

[mhulse]

Update: It looks like just simply adding a single space after the @media also does the trick (I kinda like having each MQ on a newline for readabilities sake).

[GoalSmashers]

Thanks @mhulse for reporting this. If your CSS renders correctly (and I assume it does) when there's a newline after @media then it's a bug in clean-css since certain syntax leads to broken minified CSS. We'll fix it with 0.10.1!

[mhulse]

@GoalSmashers Cool! Thanks for getting back to me so quickly! I really appreciate it.

From what I have tested, the (unminified) MQ works without a space after the @media (other than when using respond.js, which I think also doesn't like the immediate newline and no space ... though, at this point, that's just a theory).

I'll do some more tests and let you know if I discover anything different. For now, adding that space after @mdeia did the trick. 👍

Thanks again!

[GoalSmashers]

Sure, no problem! Let us know how does it behave. We'll fix it anyway!

[GoalSmashers]

@mhulse - it has been fixed in 0.10.1 which has just landed in npm repository.

[mhulse]

Whoa! That was quick!!! Thanks so much for the fix @GoalSmashers, I really appreciate it!!! I owe you one. :)

Also, thanks for the awesome code!

Have a great day.

Cheers,
Micky

[GoalSmashers]

There were no reasons to wait! Happy minifying!

Cheers,
Jakub