Compression issues with JQuery file in YUI Compressor

Question

I am trying to minify a few files with YUI compressor. However, I seem to be getting an error on 2 lines of code, which prevents compression. The .js file for jcarouselLite contains 1 error, and my own code contains the other.

I have narrowed it down and in both occasions it looks like the the float property used in jQuery is causing this. The line is:

li.css({overflow: "hidden", float: o.vertical ? "none" : "left"}); (jcarousellite)

$("#now-playing .js-kit-rating div:first").css({width: "80px", float: "right"}).addClass("clearing"); (own code)

A working example of the error can be seen by running the jCarouselLite code through the YUI compressor, but basically the error returned is invalid property id.

Has anyone had similar issues with the YUI compressor?

Answer 1

It's not YUI per se, it's the jcarouselLite js. "float" is a reserved word. It needs to be put in quotes. EG:

li.css({overflow: "hidden", "float": o.vertical ? "none" : "left"});

Similar issue with your own code. YUI is trying its best to compile that js but will refuse/warn you of code like the one you found. IMO it's doing the right thing.

Answer 2

I've run into this issue a few times with the word "class". If you're using YUI on the server side, it should spit out the line number it's complaining about.

Here's a list of reserved words that seems pretty comprehensive.

http://mattsnider.com/languages/javascript/reserved-words-in-javascript/

Answer 3

The other answers here answer the actual problem (reserved words). But I am using YUI via BundleTransformer and it isn't outputting line numbers, so I was a little lost as to where to look.

To speed up the process of finding the keywords I went looking for another tool.

This online YUI compressor helped me find the problematic property name.