Run CSS file through Twig when using {% stylesheets %} tag in Twig with Symfony2

Question

I'm including CSS stylesheets in my template like so:

{% stylesheets
    "@SomeBundle/Resources/assets/css/default.css.twig"
    "@SomeBundle/Resources/assets/css/global.css.twig"
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

However I want to run these CSS files through Twig, is this in any way possible while using the {% stylesheets %} tag or does this require some other approach. I've already tried enabling a twig filter but that does not exist.

Solution 1

You could do it if you load the css as an internal stylesheet. Something like this:

{% block stylesheets %}
    {{ parent() }}
    {% include 'AcmeBundle:Bundle:mycss.css.twig' %}
{% endblock %}

And then the mycss.css.twig template would contain:

<style type="text/css">
    /* */
</style>

Solution 2

Most common things you'd want to do by processing CSS with Twig should be possible with Sass, LESS or similar, which can be applied as Assetic filters. First tutorial Google threw up was this one: http://alexandre-salome.fr/blog/Sass-Compass-Assetic-In-Ten-Minutes

Admittedly, that doesn't look like much help if you're unable to run Ruby/Node.js/whatever on the production server you're developing for, but it should be possible to create an Assetic filter based on one of the PHP ports of Sass/LESS (assuming they're any good) if that's the case.

Comments

[Not Available]

Yes this did come to mind, however you lose the benefit of having your styles in a separately cached file.