Symfony2 cssrewrite filter's image paths are way off

Question

I'm trying to get Symfony2 to work with jQuery UI. I've gotten the JavaScript portion of it working just fine but I'm having trouble getting the images to work.

One thing I read in the Assetic docs is that the cssrewrite filter can take the image paths in CSS files and update them so the paths point to the right places. This looked like exactly what I needed, so I enabled cssrewrite. Here's how cssrewrite changed my paths:

// original
images/ui-icons_222222_256x240.png

// using cssrewrite
../../../app/Resources/public/css/themes/base/images/ui-icons_222222_256x240.png

The first path is no good. The cssrewrite path at least points to the correct path in the filesystem, but relative to my webroot, the cssrewrite path is WAY off. Obviously my app directory is not public.

How do I get the cssrewrite filter to change my paths to something that will actually work?

Here's my stylesheet inclusion. (And yes, I know that the way I'm individually including all these CSS files is dumb, but I'm not worried about that right now.)

    {% stylesheets
        '../app/Resources/public/css/*'
        '../app/Resources/public/css/themes/base/jquery.ui.accordion.css'
        '../app/Resources/public/css/themes/base/jquery.ui.all.css'
        '../app/Resources/public/css/themes/base/jquery.ui.autocomplete.css'
        '../app/Resources/public/css/themes/base/jquery.ui.base.css'
        '../app/Resources/public/css/themes/base/jquery.ui.button.css'
        '../app/Resources/public/css/themes/base/jquery.ui.core.css'
        '../app/Resources/public/css/themes/base/jquery.ui.datepicker.css'
        '../app/Resources/public/css/themes/base/jquery.ui.dialog.css'
        '../app/Resources/public/css/themes/base/jquery.ui.progressbar.css'
        '../app/Resources/public/css/themes/base/jquery.ui.resizable.css'
        '../app/Resources/public/css/themes/base/jquery.ui.selectable.css'
        '../app/Resources/public/css/themes/base/jquery.ui.slider.css'
        '../app/Resources/public/css/themes/base/jquery.ui.tabs.css'
        '../app/Resources/public/css/themes/base/jquery.ui.theme.css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

Answer 1

There are some known problems with the CssRewrite filter. For what I know, it does not work properly by using the @BundleName notation and a workaround seems to be linking the CSS files by using the bundles/bundle_name path.

Thus your code should be something like this:

{% stylesheets filter='cssrewrite' 
        'bundles/<your_bundle_name>/css/*'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.accordion.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.all.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.autocomplete.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.base.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.button.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.resizable.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.selectable.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.slider.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.tabs.css'
        'bundles/<your_bundle_name>/css/themes/base/jquery.ui.theme.css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

Where <your_bundle_name> is obviously the name of the bundle you are working on.

EDIT: remember to give the php app/console assets:install --symlink web command, in order to symbolically link your assets into the web directory.