Media Queries Bug

Dec 2, 2011 at 8:38 AM

Hi,

The version of YUI Compressor being used in YUI Compressor for .Net has a bug where an inline media query like:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {}

will be minified to:

@media only screen and(-webkit-min-device-pixel-ratio: 1.5){}

Notice the missing space between "and" and "(".

This causes the query to be ignored.

There are newer releases of YUI Compressor that should have fixed this. Could you please update YUI Compressor for .Net to use these newer versions?

Dec 20, 2011 at 8:34 PM

Hi permagnus,

Not sure if you have found a workaround yet.  

If not, you can add /*!YUI-Compressor */ between "and" and "(" to get around the issue for now.  

Example: @media only screen and /*! YUI-Compressor */ (-webkit-min-device-pixel-ratio: 1.5) { }

I have submitted an issue back in Nov, and hopefully this will be fixed in the next release.

Anyway, hope this workaround can help anyone who is facing this similar issue.

Cheers,

Allan

Dec 20, 2011 at 8:35 PM

Thanks! I will try that!

Coordinator
Jan 26, 2012 at 6:11 PM

Fixed for the next release: http://yuicompressor.codeplex.com/SourceControl/changeset/changes/74380

but note that it is only an issue using the MichaelAsh compressor, not with the standard YUI Compressor

Jan 27, 2012 at 6:28 AM

I have this issue with the YUI Compressor...

Coordinator
Jan 27, 2012 at 6:53 AM

Which version of YUICompressor are you using?

Can you post an example of the exact call you make to YUICompressor?

thanks

Jan 27, 2012 at 8:17 AM

I use this via combres and my combres looks like this: 

<cssMinifiers>

<minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres">

<param name="CssCompressionType" type="string" value="StockYuiCompressor" />

<param name="ColumnWidth" type="int" value="-1" />

</minifier>

</cssMinifiers>

Maybe the bug may be in house combres use the stock YUI compressor?

Coordinator
Jan 27, 2012 at 8:52 AM

You'd have to check what version of YUICompressor is being used by the version of Combres you are using.

Using the latest code, this test passes:

        [TestMethod]
        public void permagnus()
        {
            string css = "@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { color: blue}";
            string compressedCss = CssCompressor.Compress(css, -1CssCompressionType.StockYuiCompressor, false);
            Assert.AreEqual("@media only screen and (-webkit-min-device-pixel-ratio:1.5){color:blue}", compressedCss);
        }

And you can see the space between "and" and "(".  Note that I had to put something between the {} (color: blue) as otherwise YUICompressor will return an empty string, since the entire rule is empty and therefore a waste of space ;).

We should be doing a point release soon, so after that, perhaps you should nudge Combres to update to the latest package version...or indeed just download the current set of sources and build that.

cheers

Coordinator
Jan 27, 2012 at 10:25 AM

@permagnus: also, are you using the .NET 2.0 version? Did u use this via NuGet? or via the manual downloads on CodePlex?

Jan 27, 2012 at 12:40 PM

Hi, Sorry about a misstake on my side here. I hade som missmatch in my references. I thought I was using combres from nuget but I was actually using a .net 2.0 binary.

I have found a bug in combres regarding request headers so I will have to fix the bug and recompile it from scratch. I will try the latest version of yui compressor at the same time and it will probably fix the problem.

Here is some more info about the combres encoding bug: http://combres.codeplex.com/workitem/7670