Is there a version of YUI Compressor that deals correctly with media queries?

Question

YUI Compressor has a known bug where some media queries, including those used to serve styles to iOS and Android devices (e.g. @media screen and (max-device-width: 480px) {...}), are broken when compressed, because the space between the and and the opening brace is removed.

• http://yuilibrary.com/projects/yuicompressor/ticket/2527991

The latest version available for download from the homepage (2.4.2) still has this issue.

• http://yuilibrary.com/downloads/#yuicompressor

Is there an updated version available where this issue is fixed?

Answer 1

If you have to get this working in 2.4.2, use the preserve comments hack (normally used for copyright messages).

@media screen and/*!YUI-Compressor */(max-device-width: 480px) {...}

Answer 2

Yes — this issue is fixed in 2.4.4, which is downloadable from YUI Compressor’s git project:

• https://github.com/yui/yuicompressor/archives/yuicompressor-33

This version seems to work, at least on Mac OS X 10.6.4.

Instructions:

1. Download the zipped source from the page above, and unzip it.
2. In the Terminal, change into the unzipped source folder.
3. Type ant and hit return. This will create a folder called build, and put the built jar file in it. The built jar file is called yuicompressor-2.4.5pre.jar
4. Change into the build folder, and run chmod +x yuicompressor-2.4.5pre.jar to make the jar file executable.
5. Optionally, move the jar file into /usr/local/bin/
6. Optionally, create an alias in your .profile file to make it easier to run, e.g. alias yuic="java -jar /usr/local/bin/yuicompressor-2.4.5pre.jar"