Dynamic CSS/Javascript in Twig using Silex/SilexExtensions and Assetic

Question

What I want to do: Get CSS properties from a database and dump it into a less file. Then apply a less/yui compress-filter on it and dump the output in my twig template.

---

Let me just come to the point right away:

I have a PHP web application using Silex and Twig as template engine. In order to process and minify the css/js files I'm trying to use Assetic and the Silex-Twig/Assetic-Extensions.

I have registered the silex extensions and set the filters I want to use. Now I have no clue whatsoever on how to dump the files inside my twig template. Google Search keeps me in the dark. Since the properties in the lessfile can change per request I think there is no way of a static delivery of the files.

This is my implementation of the silex extensions:

$oApp = new Silex\Application();

//$oApp['autoloader']->registerNamespace('Assetic', DIR_VENDOR.'/assetic/src');
//$oApp['autoloader']->registerNamespace('SilexExtension', DIR_VENDOR.'/silex-extension/src');
//$oApp['autoloader']->registerNamespace('Twig', DIR_VENDOR.'/twig/lib');

$oApp->register(
    new Silex\Provider\TwigServiceProvider(), array(
        'twig.path' => DIR_ROOT.'/src/templates',
        'twig.class_path' => DIR_VENDOR.'/twig/lib',
    ),
    new SilexExtension\AsseticExtension(), array(
        'assetic.class_path' => DIR_VENDOR.'/assetic/src',
        'assetic.path_to_web' => DIR_ASSETS,
        'assetic.options' => array(
            'debug' => false,
            'formulae_cache_dir' => DIR_TMP.'/Assetic/cache',
            'twig_support' => true
        ),
        'assetic.filters' => $oApp->protect(function($fm) {
            $fm->set('yui_css', new Assetic\Filter\Yui\CssCompressorFilter(
                DIR_YUI.'/yuicompressor-2.4.7.jar'
            ));
            $fm->set('yui_js', new Assetic\Filter\Yui\JsCompressorFilter(
                DIR_YUI.'/yuicompressor-2.4.7.jar'
            ));
            $fm->set('googlecc_js', new Assetic\Filter\GoogleClosure\CompilerJarFilter(
                DIR_GOOGLE_CC.'/compiler.jar'
            ));
        }),
        'assetic.assets' => $oApp->protect(function($am, $fm) {
            $am>-set('styles', new Assetic\Asset\AssetCache(
                new Assetic\Asset\GlobAsset(
                    __DIR__ . '/resources/css/*.css',
                    array($fm->get('yui_css'))
                ),
                new Assetic\Cache\FilesystemCache(DIR_TMP.'/Assetic/cache')
            ));
            $am->get('styles')->setTargetPath(DIR_ASSETS.'/css/styles.css');
        })
    )
);

Since the CSS files are being processed through a less filter (variable values should come from a database) I need to save/cache the output file. I think what I need is a LazyAssetManager in conjunction with a AssetWriter that writes the output.css to a cache directory? But I am really struggling hard to get the right include syntax from within my twig templates. The following implementation does not seem to work:

{% stylesheets 'path/to/my/css' 'another/path/to/my/css' filter='yui_css' output='path/to/output/directory/styles.css' %}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}

I'm thankful for every posting regarding my concern.

Eyebrow

Is there any specific reason you're tied to your current setup? ..using Twig and Silex that is? – Scaramouch

I'd say you're probably a pioneer in this area, junior -- I searched long and hard for a useful solution before dumping Assetic and going with an in-house solution. The Symfony mailing list may actually be more useful for finding a solution. – Palais

@smftre Basically we needed a slim framework and wanted to try out a new template engine over Smarty 2.x. We definately wan'T to stick with that pair. – Eyebrow

Answer 1

Since (you mention) the properties in the less file can change per request, I think you're missusing assetic (and maybe even less). It sounds like you're trying to use assetic as a less preprocessor, which it's not + there's little reason to cache the result (this depends on how often they will actually differ per request).

You don't get into much detail about what you want to achieve, but I tuess it's something like a theming engine, where users can change their color scheme (and other appearance variables). If this is the case, I think you should put the bulk of your CSS/less files in one template, common for all requests, and then have a route in your silex app to deliver the theme-specific css with variables from the DB.

Since they can be different per request, I don't think there's a reason to add less preprocessing overhead on the server for each request, so you should output straight CSS. At most, you could let the client process the .less files, if you're comfortable with that.

Cleareyed