CssRewrite goes through app_dev.php in Symfony #53

Open
beberlei opened this Issue May 16, 2011 · 73 comments

Projects

None yet
@beberlei

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.

@kriswallsmith
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/?

@beberlei

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

@beberlei

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

@kriswallsmith
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.

@kriswallsmith
Owner

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

@DTown
DTown commented Jul 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: ~

@kriswallsmith
Owner

This is a known limitation of the Symfony integration that will be addressed in Assetic 1.1 when we add support for asset dependencies. The easiest solution is to keep everything in one load path, i.e. all CSS files in web/. You can also keep these assets in your bundle’s Resources/public/ directory and install them to web/ using the assets:install command. Either way, avoid using the @MyBundle notation to include stylesheets that reference images when defining your Assetic assets.

On Monday, July 11, 2011 at 10:11 AM, DTown wrote:

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: ~

Reply to this email directly or view it on GitHub:
#53 (comment)

@lmammino

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

@pierre-b

@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.

@lmammino

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

@ardianys

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
@lmammino

@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...

@ardianys

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

Regards.

@lmammino

@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

@stof
Collaborator
stof commented Nov 19, 2011

@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 :(

@mvrhov
mvrhov commented Nov 20, 2011

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

@stof
Collaborator
stof commented Nov 20, 2011

@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!

@alexismo
alexismo commented Dec 1, 2011

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?

@stof
Collaborator
stof commented Dec 1, 2011

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

@mrtorrent

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

@tcz
tcz commented Dec 19, 2011

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

@talpan
talpan commented Jan 19, 2012

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.

@Abhoryo
Abhoryo commented Jan 21, 2012

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

background-image: url("/bundles/mybundle/images/bg.png");
@ahundiak
ahundiak commented Feb 1, 2012

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.

@stof
Collaborator
stof commented Feb 1, 2012

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

@pumppi
pumppi commented Feb 2, 2012

Is there any example for the ccsembed filter?

@apfelbox
apfelbox commented Mar 5, 2012

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?

@inmarelibero

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

@stof
Collaborator
stof commented Apr 2, 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

@inmarelibero

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

@liuggio
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

@ismell
ismell commented Jun 6, 2012

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

@Garfield-fr

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

@benjamindulau

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.

@chetzof
chetzof commented Aug 17, 2012

Any change?

@soerenmartius

whats about a fix?

@sparkbuzz

No fix yet?

@triple1
triple1 commented Aug 22, 2012

no :(

@soerenmartius

nothing changed yet
Am 22.08.2012 um 22:25 schrieb triple1 notifications@github.com:

no :(


Reply to this email directly or view it on GitHub.

Beste Grüße
Sören Martius


Dreiecksplatz 6
24103 Kiel

Mobil.: +49 0151 407 669 46
Xing.: https://www.xing.com/profile/Soeren_Martius
Skype: aicarambaa

@tranzfuse

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.

@soerenmartius

What is with a fix?

@pofuk
pofuk commented Nov 27, 2012

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.

@alex88
alex88 commented Dec 5, 2012

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
pofuk commented Dec 5, 2012

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.

@alex88
alex88 commented Dec 5, 2012

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

@pofuk
pofuk commented Dec 5, 2012

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

@alex88
alex88 commented Dec 5, 2012

@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.

@alex88
alex88 commented Dec 5, 2012

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

@MPLLC
MPLLC commented Dec 9, 2012

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
gremo commented Dec 17, 2012

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

@alex88
alex88 commented Jan 28, 2013

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

@oscherler oscherler referenced this issue in symfony/symfony-docs Feb 21, 2013
Closed

Assetic fixes #1991

@jrobeson

@kriswallsmith : is this gonna be scheduled for 1.2?

@kriswallsmith
Owner

I'm AFK. Do we have a failing test case yet?

On Thursday, June 13, 2013 at 10:26 PM, Johnny Robeson wrote:

@kriswallsmith (https://github.com/kriswallsmith) : is this gonna be scheduled for 1.2?


Reply to this email directly or view it on GitHub (#53 (comment)).

@gremo gremo referenced this issue in symfony/symfony Aug 12, 2012
Closed

Bug cannot load resource ".". #5244

@alex88
alex88 commented Jun 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

@kitingChris

This issue is now open for 3 years....
How about finally fixing this?
For my project due to serving static files not on the same server I need a fix for this problem...
I need to use the @bundles notation projectwide.

@JHGitty
JHGitty commented Sep 28, 2014

+1 ; any updates?

@cassianotartari

Looking for a solution too. I'm trying to work with AWS - EC2 and S3 for assets without success

@ghost
ghost commented Oct 7, 2014

+1 Please fix this soon! This is extremely hindering any sort of streamlined development!

@smilesrg
smilesrg commented Nov 5, 2014

+1 for this fix. But everyone can use FkrCssURLRewriteBundle for fixing this issue

@JHGitty
JHGitty commented Nov 27, 2014

We need an official solution which we could put into the official symfony2 documentation!

@rimouesleti

Same problem here with Symfony 2.6

@n1c01a5
n1c01a5 commented Apr 7, 2015

Same problem.

@clubdesarrolladores

+1 same problem, please fix this soon

@JHGitty
JHGitty commented May 20, 2015

I think there will be never a fix for this. The Best Practice currently is to use css files in the web directory (I prefer web/css or web/bundles/app/css).

See this warning in the Symfony2 Book: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

You should do:

    {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}

You should NOT do:

    {% stylesheets '@AppBundle/Resources/public/css/*' filter='cssrewrite' %}
@drAlberT
drAlberT commented Jun 5, 2015

I can't see any "best practice" sentence on the doc .. simply it makes us aware of the issue

+1 for taking this issue on a solution

@JHGitty
JHGitty commented Jun 5, 2015

Here is the Best Practice to store the css files in the web directory:
http://symfony.com/doc/current/best_practices/web-assets.html

@drAlberT
drAlberT commented Jun 8, 2015

@JHGitty yep I see, but this is a bp for application .. if I have a bundle to redistribute or reuse I need to have my assets bundled together with the code who uses them

So I agree to avoid misuse of bundled-assets, but they are a tool that has its own field of application and can't be ignored or labeled as "poor practice" always IMHO

However, I think assets should be treated all the same way ... so there should be no difference in the use of css, js or images .. I agree to use {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}, but we should do the same with JS and images then :)

@stphane
stphane commented Mar 21, 2016

app_dev is driving me crazy with a web/fonts/... issue !
Giving this stylesheet snippet:

            {% stylesheets
                filter="node_scss,uglifycss"
                output="dist/main.css"
                '../app/Resources/public/scss/main.scss'
            %}
                <link rel="stylesheet" href="{{ asset_url }}">
            {% endstylesheets %}

The resulting css "/app_dev.php/dist/main_main_1.css" file points to some bootstrap glyphicons fonts referenced with "/fonts/bootstrap/glyphi..." okey so I copied this fonts directory to /web.

I then expected the browser to search for those files inside "/app_dev.php/fonts/bootstrap/glyph…", this is what is done but a 404 is served instead by the dev controller 😠 !
If I hit the url directly from vhost root "/fonts/bootstrap/glyph…", the file is correctly served by NGINX.

Is there a way to make app_dev resolve the /fonts path nicely (I mean in a clean way) ?
Could someone please help me handling this ?
Thank you !

@ReneMuetti

This is a design bug. Since you do not work through a config switch, but with
different scripts that is an unavoidable consequence.

I had the same problem. The support was unfortunately no help. Also sont there
are no viable solutions. I therefore once assembled a "solution":
the page-template (base.html.twig)

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="de"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="de"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="de"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="de"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        {{ include('AppBundle:default:scss.html.twig') }}
....

then the CSS file (scss.html.twig)

{% if app.environment == 'dev' %}
    {% stylesheets filter="scssphp" output="css/app_dev.css" debug=true
        "assets/scss/global-dev.scss"
        "assets/css/*.css"
    %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" media="screen">
    {% endstylesheets %}
{% else %}
    {% stylesheets filter="scssphp" output="css/app_prod.css" debug=true
        "assets/scss/global-prod.scss"
        "assets/css/*.css"
    %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" media="screen">
    {% endstylesheets %}
{% endif %}

then generate 2 different scss:
one contains the paths for productive operation ( '../fonts/' ) and the other,
the paths for the DEV mode ( '../../fonts/' ).

Another solution I have not found. The Simple tile cause must be resolved by the
development team. Both app*.php together are placed and the DEV mode must be
regulated through a config option.

@stphane
stphane commented Mar 30, 2016

@ReneMuetti Thank you very much for sharing !
In the meantime, I ended up turning use_controller switch to false inside the configuration file and I now use assetic's watcher in dev environment.
I didn't think of wrapping Assetic tags between conditions since Assetic does not interpret twig files but only parses them in order to process stylesteets and javascripts tags. Actually it does make sense ! I will definitely concider your «solution» for futur projects.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment