less.js (lesscss) need to be injected at the bottom of <head> section (after all .less styles files)

Issue #58 new
Stéphane Klein
created an issue


I try to use fanstatic with lesscss (http://lesscss.org/) JS library.

less.js file need to be loaded just after all ".less" files.

When I use fanstatic, my less.js is injected at top of my <head> section.

How can I inject "less.js" at the bottom of <head> section ?

I don't tested if "less.js" bottom page loading is good or bad practice (in lesscss context).

| What are your ideas about this issue ? | I need to append a new feature in fanstatic : option to inject resource at bottom of head section ?


Comments (14)

  1. Jan-Jaap Driessen

    I've been working on compile Resources in the 'compilers-n-compressors' branch of fanstatic. It's on my todo list to add the lesscss compiler (based on the node.js command line). The branch needs some reviewing, I don't expect a release very soon.

    For now, you can register a custom inclusion render for the less resources and render them above the other resources:

    def render_less(url):
        return '<link rel="stylesheet/less" type="text/css" href="%s">' % url
    from fanstatic import register_inclusion_renderer
    register_inclusion_renderer('.less', render_less, -1)

    Warning: this is untested code, a hack and may not work in future versions.

  2. Stéphane Klein reporter

    Thanks for your tip but it isn't exactly my question.

    Currently I have some .less file whose aren't fanstatic resources. There are some simple "static" files in my pylons projects.

    Now I would like inject less.js load after this styles.

    My explanation is better here ?

  3. faassen

    We have several issues here. Stephane's .less resources aren't fanstatic resources. do we support this?

    One configuration option would be to tell the system to include resources at the bottom of the <head> section, instead of at the top. This would work for the current use case, where the .less resources aren't marked up with Fanstatic (why not?).

    But what we really want is supporting less.js properly. Apparently if you want to include a .less resource you want "less.js" to follow *below* all .less resources you included. How would we express this with Fanstatic? Perhaps we can define that for the .less extension we want to insert another resource at the end of the inclusions (or just below the last one).

  4. Jan-Jaap Driessen

    Another hack is to monkeypatch the NeededResources::render_into_html method to replace the closing head element instead of the opening element in order to render the less.js after the links to the .less files.

    On a more serious note, Stephane would not have this issue if the less resources in the page where fanstatic Resources. I don't want to even think about parsing the html and finding out which resources are already present and using this information to inject other fanstatic resources, such as less.js in this case.

    On another note: LessCSS doesn't work without javascript support, so I would opt for the nodejs compiler if I were to use LessCSS. I just implemented the LessCSS in the compilers-n-branches branch (1). Still won't work if you don't define your .less files as Resource instances though.

    1) https://bitbucket.org/fanstatic/fanstatic/changeset/3499c24bf272

  5. faassen

    I think we should make the use case clear, as I think I did on the mailing list.

    We want to support browser-side less.js and more generally, in-browser compilation strategies. I think we could extend our compiler abstraction to make it include in-browser compilers.

    I agree that often a server-side compiler is useful, but I think the general use case of client-side compilation is one we need to talk.

  6. Stéphane Klein reporter

    I found a tip :

    in my Pylons helper, I've append this function :

    from js.lesscss import lesscss as __lesscss
    from fanstatic import get_needed as __get_needed
    def lesscss():
        return __lesscss.render(__get_needed().library_url(__lesscss.library))

    In my template, I've this :

        <link rel="stylesheet/less" href="${h.url('/css/main.less')}" type="text/css">
        <link rel="stylesheet/less" href="${h.url('/css/form.less')}" type="text/css">
        ${h.lesscss() |n }

    It's work with success.

  7. Log in to comment