Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Media query and newline character after @media #66

Closed
mhulse opened this Issue · 7 comments

2 participants

@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
Collaborator

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. :+1:

Thanks again!

@GoalSmashers
Collaborator

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

@GoalSmashers
Collaborator

@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
Collaborator

There were no reasons to wait! Happy minifying!

Cheers,
Jakub

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.