Ticket #2527991 (checkedin defect)

Reporter


tateman
Opened: 08/10/09
Last modified: 02/9/11
Status: checkedin
Type: defect

Owner


Adam Moore
Target Release:
Priority: P3 (normal)
Summary: YUI Compressor hoses @media type and declarations
Description:

@media screen and (min-width: 800px) {

  1. nav { background-color: #fc0; }

}

Basically, removes the space after and and the @media doesn't work at all.

@media min-width: 800px {

}

works fine though!

Type: defect Observed in Version: 2.4.2
Component: YUICompressor Severity: S3 (normal)
Assigned To: Adam Moore Target Release:
Location: Priority: P3 (normal)
Tags: Relates To:
Browsers: All
URL:
Test Information:

Change History

George

YUI Developer

Posted: 09/23/09

Isaac Z. Schlueter

YUI Contributor

Posted: 09/23/09
  • milestone changed to 2.NEXT
  • priority changed to P3 (normal)
  • status changed from assigned to checkedin

Fixed in my GH branch, and on build. Should be included in next build.

Isaac Z. Schlueter

YUI Contributor

Posted: 09/24/09

Ticket #2192072 was marked as a duplicate of this ticket.

Isaac Z. Schlueter

YUI Contributor

Posted: 09/24/09

Ticket #1938329 was marked as a duplicate of this ticket.

Christian Steinert

Posted: 09/27/09
  • status changed from checkedin to reopened

It seems that even with the fix, (github pull from today) the problem will partially persist: if several media queries appear together, separated by a comma then only the last one will be treated correctly.

For example
@media only all and (max-width:50em), only all and (max-device-width:800px), only all and (max-width:780px) {
...
}

will be changed to:
@media only all and(max-width:50em),only all and(max-device-width:800px),only all and (max-width:780px){...}

that is - only for the last media query, the space after the "and" seems to be retained as needed.

Isaac Z. Schlueter

YUI Contributor

Posted: 09/27/09

Thanks for the test case. It looks like we're going to have to be a bit more careful in handling this form, at the expense of perhaps providing a bit less optimization.

Christian: Can you please pull from http://github.com/isaacs/yuicompressor and see if that resolves your issue? If so, I'll push this upstream.

Christian Steinert

Posted: 09/27/09

Wow - that was fast, thanks a lot.
With your branch, everything works as expected. I could also not see any unepected breakage elsewhere, so yes - pushing should be fine.
__
off topic: it's great that you now are also removing the last semicolon in each declaration block. I had added this as a post-processing step after calling the compressor, but like this it's of course much nicer :)

Christian Steinert

Posted: 09/27/09

P.S. the changed code looks good to me, too - took a look at https://developer.mozilla.org/En/CSS/Media_queries#Pseudo-BNF_%28for_those_of_you_that_like_that_kind_of_thing%29 and if the documentation there is correct then your change should take care of everything.

Also, I don't expect that there will be any false positives for band(

Theoretically you could of course use something like a look-behind expression for "@media[^{]*" to ensure the scope of the and's that you manupulate to make things totally water-proof but I think that is both too expensive and overkill.

Isaac Z. Schlueter

YUI Contributor

Posted: 11/4/09
  • status changed from reopened to checkedin

George

YUI Developer

Posted: 02/2/10
  • milestone changed from 2.NEXT to 2.4.3

George

YUI Developer

Posted: 02/2/10
  • resolution changed to fixed

Nicolas

Posted: 05/10/10

Hi everybody. I'm french, so sorry if my english is not very correct.
I've just registered to tell you that this issue is not fixed yet for webkit CSS hack.

Works before YUI compressing:
@media screen and (-webkit-min-device-pixel-ratio:0) {
CSS rule{
}
}

Don't work for YUI compressing:
@media screen and/*!YUI-Compresser */(-webkit-min-device-pixel-ratio:0) {
CSS rule{
}
}@media screen and/*! */ /*! */(-webkit-min-device-pixel-ratio:0) {
CSS rule{
}
}

and last:
@media -webkit-min-device-pixel-ratio:0 {
CSS rule{
}
}

What can I do for using webkit CSS hack ?

George

YUI Developer

Posted: 05/11/10
  • milestone changed from 2.4.3
  • owner changed from Isaac Z. Schlueter to Adam Moore
  • resolution changed from fixed
  • status changed from reopened to assigned

status changed to reopened based on comment above.

Stoyan Stefanov

YUI Developer

Posted: 05/15/10
  • status changed from assigned to checkedin

All the test cases from Nicholas work as expected


@media screen and/*!YUI-Compresser */(-webkit-min-device-pixel-ratio:0) {
a{
b: 1;
}
}

@media screen and/*! */ /*! */(-webkit-min-device-pixel-ratio:0) {
a{
b: 1;
}
}

@media -webkit-min-device-pixel-ratio:0 {
a{
b: 1;
}
}

becomes (minus the new lines)

@media screen and/*YUI-Compresser */(-webkit-min-device-pixel-ratio:0){a{b:1}}
@media screen and/* *//* */(-webkit-min-device-pixel-ratio:0){a{b:1}}
@media -webkit-min-device-pixel-ratio:0{a{b:1}}

Craig Russell

Posted: 02/9/11

While waiting for this fix to be released, you could pipe through sed to fix.

java -jar yuicompressor-2.4.2.jar style.css | sed 's/and/and /g' >> style.min.css