When using the Less filter, there's no way to combine CSS and Less in a bundle

[bradwright]

Given this Bundle code:

less_css = Bundle(
    'css/base.less',
    filters='less')

css = Bundle(
    'css/reset.css',
    less_css,
    output='css/main.%(version)s.css')

environment.register('css_main', css)

and this template:

{% assets "css_main" %}
    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
{% endassets %}

I can't combine my Less file and my CSS file in a final file as it won't work in development (due to not having rel="stylesheet/less" in the file).

[sciyoshi]

See the CSS compiler documentation page - your first bundle should include debug=False and an output file for it to work in debug mode as well.

[bradwright]

If it has an output file I can't really debug errors - the files should be separate to debug them correctly.

Anyway I did this as a temporary workaround:

{% assets "css_main" %}
    <link rel="stylesheet{% if ASSET_URL.endswith('.less') %}/less{% endif %}" type="text/css" href="{{ ASSET_URL }}">
{% endassets %}

[miracle2k]

I see, so in development mode, you would like the use the ability to compile less browser-side, but for production, you want to precompile it on the server.

Your workaround seem very much correct, because as far as I can see, any "proper" solution to this would essentially be for the assets tag to provide some sort of {{REL}} variable that can be used at this point. And the code behind the REL variable could at most do what you are doing: looking at the file extension.

I'm not convinced that some kind of big architecture, with hooks for filters and the like, is warranted here. What I would suggest is supporting arbitrary values that can be passed along, something I've wanted to add for a while:

less_css = Bundle(
    'css/base.less',
    filters='less', 
    opts={'rel': 'stylesheet/less'})

which let's you write your template like this:

 <link rel="{{ rel or "stylesheet/less" }}" type="text/css" href="{{ ASSET_URL }}">

And could be used for things like media='print':

Bundle('css/print.css', opts={'media': 'print'})

[bradwright]

That looks like a good solution. My other idea was to subclass Bundle, so like:

CssBundle(Bundle):
LessBundle(Bundle):

etc, which has its own render thing. Then you'd just do:

{{ ASSET_RENDER }}

or similar.

[miracle2k]

Type-aware Bundles are planned, in #12. It's a bigger untertaking though.

[miracle2k]

This is actually related to #60 as well, which would configure filters like less to always run. Clearly, at least for less, there are cases where you might not want the compilation to happen.