Search code examples
cssuglifycss

When applying the uglifycss to my css, all my @media and @font-face declarations are lost

I use the following block in my base twig template, to create the compressed css files:

{% stylesheets  output='bundles/myBundle/compressed/compressed.css'
                filter='uglifycss'
                filter='cssrewrite'
                'bundles/myBundle/stylesheets/app.css'
                'bundles/myBundle/stylesheets/tablet.css'
                'bundles/myBundle/stylesheets/phone.css'
%}
        <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Until a few weeks (and an upgrade to ubuntu 15.04) ago, this worked fine to dump all my css files properly.

Now, my @media and my @font-family parts are gone from the compiled/compressed css.

If I only apply the cssrewrite filter and not the uglifycss filter the @media and @font-face parts are there, just as expected.

I use: uglifycss@0.0.15, Symfony v2.6.8, symfony/assetic v2.6.1

Does anyone know what might be going wrong here?

Thanx for your help! Dominik

Edit: I was able to pin it down a bit more. Symfony executes the following command, to uglify the css. 

/usr/bin/nodejs /usr/local/bin/uglifycss /path/to/my/app.css

executing the same command on the bash command-line also causes the same missbehaviour. So it's not a Symfony or assetic problem, but seems to be an uglifycss problem.

Any ideas?

Cheers, Dominik

Solution

  • Further debugging revealed that a css comment was the issue.

    According to http://www.w3.org/TR/CSS21/syndata.html#comments a comment like this:

    /*/////////////////////////////////*/
/* some comment                    */
/*/////////////////////////////////*/

    But it turns out that uglifycss 0.0.15 has problems with a comment ending with '/*/'.

    Adding a space between the last '/' and the '*/' solved my problem. 

    /*//////////////////////////////// */
/* some comment                    */
/*//////////////////////////////// */

    I also opened an issue on github. https://github.com/fmarcia/UglifyCSS/issues/33

    Cheers, Dominik