Skip to content
This repository

CssRewrite goes through app_dev.php in Symfony #53

Open
beberlei opened this Issue May 16, 2011 · 57 comments
Benjamin Eberlei

Using symfony2 and a cssrewrite to fix all @import they now go through app_dev.php/path/to/import/file.css which leads to 404 errors from the symfony kernel.

Kris Wallsmith
Owner

Can you provide more details about how you're using Assetic and what you expect it to do?

Also, can you debug to see if the target path in the CssRewriteFilter includes _controller/?

Benjamin Eberlei

I am using the following twig commands:

{% stylesheets 'bundles/hwsplatform/lsl/css/layout_3col_fixed.css'
               'bundles/hwsplatform/lsl/css/stylesheet_168fd464f0.css'
               'bundles/hwsplatform/lsl/css/fix_glossary_definitions.css'
               'bundles/hwsplatform/lsl/css/lsl.css'
               'bundles/hwsplatform/aristo/jquery-ui-1.8.7.custom.css'
               output='css' filter='cssrewrite'
               %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

In dev mode this becomes (and so on):

<link href="/eberlei/wsnetbeans/lsl-ff-db/trunk/web/app_dev.php/css_layout_3col_fixed_1.css" type="text/css" rel="stylesheet" />

Now this first stylesheet uses @import that now are linked to:

http://devel/eberlei/wsnetbeans/lsl-ff-db/trunk/web/app_dev.php/bundles/hwsplatform/lsl/css/main/base.css

Assetic config is:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

In CssRewriteFilter the following $targetPath is passed for the stylesheet with the @import

css_layout_3col_fixed_1.css

$sourcePath is: bundles/hwsplatform/lsl/css/layout_3col_fixed.css

Benjamin Eberlei

Ok, same happens for image rewrites of course. Which 404s them aswell.

Kris Wallsmith
Owner

I just noticed you're misusing the output attribute in the Twig tag. Early on, css was expanded to css/*.css but I've since removed that. You should set that to the asset's target path, i.e. css/packed/main.css.

Kris Wallsmith
Owner

Did you see my note about the output attribute? Does fixing that make any difference?

Tim Christmann
DTown commented July 11, 2011

Hi Kris,
I have the problem that the cssrewrite doesn't seem to work out well if I use the @..Bundle notation like
{% stylesheets '@BattlFrontendBundle/Resources/public/css/basic.css' ...
then he produces something like this
"../../Resources/bundles/battlfrontend/images/layout/nav_line.png"
in the original css file its this "url(../images/layout/search.png)"
I'm not using the output attribute here.

If I use this notation
{% stylesheets 'bundles/battlfrontend/css/basic.css' ...
it's working for the dev mode, but not for the normal mode.
../../bundles/battlfrontend/images/layout/nav_line.png
This path is generated for both.

Config settings for assetics are the same for dev&normal:

assetic:
debug: %kernel.debug%
use_controller: false
filters:
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar"
yui_js:
jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar"
cssrewrite: ~

Kris Wallsmith
Owner
Luciano Mammino

@kriswallsmith can you provide a simple example that shows ho to handle the assest in one load path?

Pierre

@Imammino:

Here is the example of the Kriswallsmith comment:

My bundle is nammed LbpCoreBundle. My assets are in Lbp\CoreBundle\Resources\public

Everytime I change something I do a "assets:install web" command.

This is in the twig layout:
{% stylesheets 'bundles/lbpcore/css/*' filter='cssrewrite' %}{% endstylesheets %}

And in my css looks like :
background:url(../images/corner.png) etc...

It works for me.

Luciano Mammino

Yes, i ended up with the same solution after a while!
Anyway, Thanks a lot @pierre-b

Ardian Yuli Setyanto

You can using this command to avoid hard copy,
so you don't have to run assets:install web command everytime you make some changes in your asset

php app/console assets:install --symlink web
Luciano Mammino

@ardianys beware that every time you update your bundles with php bin/vendors update it will remove all your symlinks and replaces them with a raw copy of your bundles web folder. So you have to tear down the raw copies and run php app/console assets:install --symlink web again...

Ardian Yuli Setyanto

Thanks for your info. I didn't know detailed behaviour of this command.

Regards.

Luciano Mammino

@ardianys, never mind ;)
Have a nice weekend!

diegosainz

Hi all,

We have the same problem and solve it the same way as suggested here (reference the files on web/bundles, installing the assets and then compiling). But it is very uncomfortable when you are working on resources (or you have the option to work directly on the published web/bundles resources with the --watch assetic option, but then if you forget to copy your changes to Bundle/Resources you may overwrite them) so I put together a command that automatically listens for any changes on every Bundle/Resources, updates the asset in web/bundles and dumps the assetic file:

https://gist.github.com/1378305

To use it install the command in any bundle you want and run

console tracpoint:assets --watch

Regards,

Diego
sperantus.com

Christophe Coevoet
Collaborator

@diegosainz The assets:install command has a --symlink option doing a symlink instead of a copy for the assets

diegosainz

@stof:Yes, that's a better solution, unfortunately for us we are developing on windows and symlink option is not supported :(

Miha Vrhovnik

AFAIK windows Vista + supports hardlinks... and afair PHP too.

Christophe Coevoet
Collaborator

@diegosainz On windows, you need to run the script as administrator or to disable some of the checks (on 7 only as Vista does not allow disabling them) to be able to use the --symlink option.

diegosainz

@stof I wasnt aware of that, Thank you!

carignanboy1

So when I use the relative path for CSS images (../images/[...]), the CSS gets rewritten, as it should.
(../../Resources/public/images/[...])
But the images don't show up.

When I use the full path (/bundles/planbgofone/images/[...]), the CSS does not get rewritten but the images show.

Does this have something to do with the "dev" environment versus prod?

Christophe Coevoet
Collaborator

the CssRewrite filter does not work when using the @MyBundle syntax in AsseticBundle to reference the assets. This is a known limitation.

Michael Rodríguez Torrent / Miquel Rodríguez Telep

@stof is there a bug report for this in AsseticBundle? I can't seem to find it

Zoltan Toth-Czifra

Woah, this looks a little bit too complex. Is there any proposal for fixing this?

talpan

what's the progress on this, is there any eta?
I would really like a real solution, this stuff is just annoying :/.

Of course, very thankful for your support.

Petit Yoann

I always use this without cssrewrite and the --symlink option.:

background-image: url("/bundles/mybundle/images/bg.png");
ahundiak

This fix for cssrewrite is to not use cssrewrite. Nor should you add bundle paths to your css. Instead, use output as follows:

   {% stylesheets 
        output="bundles/zaysoarbiter/css/forms2.css"
        '@ZaysoArbiterBundle/Resources/scss/forms2.scss'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" media="all" />
    {% endstylesheets %}

This works in development mode because the whole 'bundles/...' is still just a virtual name. For production mode, use the asset:install and the assetic:dump to copy everything to your web directory. Relative paths in css will now work fine without any rewriting.

Christophe Coevoet
Collaborator

the other way to fix it is to use the cssembed filter to embed the images in the CSS file directly.

pumppi

Is there any example for the ccsembed filter?

Jannik Zschiesche

I have a similiar problem: all request, going through app_dev.php/bundles produce a NotFoundHttpException. Without app_dev.php everything is working without errors. Is this related?

Emanuele Gaspari

maybe this little workaruond could be interested to someone:

{% javascripts
    [...]
    [...]
    [...]
%}
    <script src="{{ asset_url | replace({'/app_dev.php': ''}) }}"></script>
{% endjavascripts %}

javascripts are loaded in app.php and app_dev.php.

obviously a regex instead of /app_dev.php would be better

Christophe Coevoet
Collaborator
stof commented April 02, 2012

@inmarelibero this should not be necessary at all. I guess you are mixing things between code using use_controller: true and code using use_controller: false. When using the controller, it is expected to go through the front controller. And when you don't use the controller, AsseticBundle does not add /app_dev.php AFAICT

Emanuele Gaspari

@stof yes you're right, use_controller was already et to false but I messed up with the cache

Giulio De Donato
liuggio commented May 16, 2012

Hi all,
is there a solution for us, that we use assetic on the cloud?
we have 2 problem now the first is that the path into the css is not aligned (but there's a workaround),
the other is that the icons on the css are not pushed to the cloud because they are not under image assetic,
do you have any idea how to solve the second?

thanks

Raul E Rangel
ismell commented June 05, 2012

Honestly.... over a year and still no fix ?

Bertrand Zuchuat

I have the same problem mentioned by inmarelibero. In my config, i have use_controller: false but in url, the controller is present.

I use the last asseticBundle and libs with Symfony 2.1

Benjamin Dulau

Any plan about fixing this properly ? The only workaround is not enough because it means that we need to always expose any asset in the public directory (so any css, but also any less/sass ...etc. file).

What about simply allow the developer to specify a rewrite base_path in the filter configuration ? So he could still use the "@MyBundle/..." syntax and keep control on the rewrite behaviour.

Any change?

caramba1337

whats about a fix?

Josef van Niekerk

No fix yet?

triple1

no :(

caramba1337
Adam Smith

I, too, would love to see this solved. We're interested in having our assets live in root, so web/assets/. This can nearly be achieved with Assetic, with the exception of images that live in src/bundlename/Resources/public/ and are referenced in the CSS.

Running assets:install always copies to the web/bundle/bundlename/assets/ location, so the relative paths in the CSS of course will not point to those images. We want to be able to programmatically control where these images are copied to.

caramba1337

What is with a fix?

pofuk

Hi. I tried fixing this by writing custom twig filter that compiles css.twig files using twig.

This would be service and
<service id="sampo.assetic.twig_filter" class="%sampo.assetic.twig_filter.class%">
<tag name="assetic.filter" alias="twig_filter"></tag>
<call method="setAsseticExtension">
<argument type="service" id="assetic.twig_extension"></argument>

</call>
<call method="setAssetFactory">
<argument type="service" id="assetic.asset_factory"></argument>

</call>
<call method="setLoader">
<argument type="service" id="twig.loader"></argument>

</call>
<call method="setTwigEnviroment">
<argument type="service" id="twig"></argument>

</call>
</service>

public function filterDump(AssetInterface $asset) {
$content = $asset->getContent();

    $sourceBase = $asset->getSourceRoot();
    $sourcePath = $asset->getSourcePath();
    $targetPath = $asset->getTargetPath();

    $this->fileSystemLoader->addPath($sourceBase);


    $this->twigEnviroment->setLoader($this->fileSystemLoader);

    $asseticExtension = new AsseticExtension($this->assetFactory);

    $this->twigEnviroment->addExtension($this->asseticExtension);

    $twigTemplate = $this->twigEnviroment->loadTemplate($sourcePath);

    $asset->setContent($twigTemplate->render(array()));
}

Problem I encountered was that Assetic won't add files to cache when requesting css file and throws exception:

[exception] 500 | Internal Server Error | Twig_Error_Runtime
[message] An exception has been thrown during the rendering of a template ("Route "_assetic_eda3096_0" does not exist.") in "Resources/public/css/test.css.twig" at line 5.
[1] Twig_Error_Runtime: An exception has been thrown during the rendering of a template ("Route "_assetic_eda3096_0" does not exist.") in "Resources/public/css/test.css.twig" at line 5.

Thing works if I add images that are referenced in some other files that is being rendered on page request.

If anybody has idea how to make assetic work on requesting css file problem would be solved and I could write
.hm {
{% image '@AdminBundle/Resources/public/images/logo.png'%}
url('{{ asset_url }}');

{% endimage %}

}

in css.twig and render it like this:
{% stylesheets '@AdminBundle/Resources/public/css/test.css.twig' filter='twig_filter'%}


{% endstylesheets %}

EDIT:
Fixed. I just put folder css with css.twig files inside views folder, Symfony\Bundle\FrameworkBundle\Templating\TemplateReference class, and couple of other classes don't allow twig templates outside views folder, which is ok I gues. So using my custom twig_filter instead of cssrewrite, and writing my css files with assetic and twig works.

Alessandro Tagliapietra

It would be nice to implement a filter or similar that handles the css image references like {% image %} objects so we can also add image filters to those objects. Can it be a nice idea?

pofuk

I work in symfony

A implemented twig_filter explained above. It work. I just need to link public/css to views/css for it to get cached, I just hide it in Eclipse so and work with as it is in public/css. So all my images, css and js related to that Bundle can stay in that bundle, no need to install assets.

I just make my .css file .css.twig, and user assetic for images as in any other template.

It would be nice to be able to specify in Symfony that there a .twig files in some other folders so no linking would be needed.

Alessandro Tagliapietra

@pofuk what if you want to add some assetic specific filters to the twig rendered template?

pofuk

@alex88 Don't undestand your question.
I use my twig_filter as normal assetic filter. And user assetic as extension to twig.

Alessandro Tagliapietra

@pofuk I think that if you do an assetic filter that doesn't asks the user to insert twig's {% image %} inside the css it would be perfect.
Maybe parsing the css and inserting {% image %} directly within the filter and then rendering the twig tag can be enough.

Alessandro Tagliapietra

It depends when the 1.1 version comes out, but I don't think that early :)

Kevin Major

It's frustrating that there's no fix for this, especially since using the bundle name is what's used all throughout the official Symfony documentation! Ridiculous.

gremo

@KevinM1 totally agree. We need a fix... soon.

Alessandro Tagliapietra

So 1.1 is nearly out, but no fix for this yet? C'mon guys!

Olivier Scherler oscherler referenced this issue in symfony/symfony-docs February 21, 2013
Closed

Assetic fixes #1991

Johnny Robeson

@kriswallsmith : is this gonna be scheduled for 1.2?

Kris Wallsmith
Owner
gremo gremo referenced this issue in symfony/symfony August 12, 2012
Closed

Bug cannot load resource ".". #5244

Alessandro Tagliapietra
alex88 commented June 25, 2013

I think that there should be a filter that creates new assets on each url() it finds inside css and so, so it gets managed by assetic and dumped/referenced together with the others

Vincent Mazenod mazenovi referenced this issue from a commit in mazenovi/AdmingeneratorGeneratorBundle May 09, 2013
loostro Reverting changes from fb8497f
It seems cssrewrite filter is not working properly with @FooBarBundle notation which is a [known limitation](kriswallsmith/assetic#53). Since useing diffrent notations for `{% javascripts %}` and `{% stylesheets %}` tags unnecessary complicates things I'm reverting to previous notation.
3bf546b
Jorge Romeo JRomeoSalazar referenced this issue in Sylius/Sylius March 19, 2014
Closed

Assetic, CSS and images #1231

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.