YUI Compressor and CSS content?

Question

I have a stylesheet with the following code:

.author-name:before {
 content:"by: ";
}

When I run this through YUI Compressor, I get:

.author-name:before{content:"by:"}

This is a problem because it wipes out intended whitespace. I thought using the YUI Compressor special comments, like this:

.author-name:before {
  /*!YUI-Compressor */content: "by: ";
}

... might help, but it seems not to. Additionally, the comments themselves got wiped out. My impression based on the was that comments in JavaScript that start with /*! get preserved, but that's not actually happening.

Short of post-processing my build process to unminify, is there a way to do this? We're currently using version 2.3.5 of YUI compressor, and running with the flags --charset utf8 -v -o

So my question, in short, is, is there a way to get YUI Compressor to respect spaces in content: values, or a way to add CSS comments before and after a block I don't want minified?

Answer 1

As a workaround, try using unicode entity instead of space character itself:

.author-name:before {content: "by:\00A0"; }

\00A0 in particular is non-breaking space.

Answer 2

I tried your css using version 2.3.4 and 2.4.6 and both preserve the space inside the string. So it's either a very specific bug (can't find anything in the bug tracker) or something else is going wrong. Are you sure it's a ascii space character and regular apostrophes (not the Windows smart ones or something)?

When I run a test on the same css replacing ascii quotes with unicode character 201C, a left double quotation mark, the space is removed. The reason is quite simple: the parser doesn't recognize it as a string and therefor it strips white space.

You might want to try the latest version from here http://yuilibrary.com/download/yuicompressor/ anyway. In case your current version is installed using some package manager: just extract the .jar file from the archives 'build' folder.

Answer 3

You might add a margin to the content:

.author-name:before {
    content: "by:";
    margin: 0 .35em 0 0;
}