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

Stéphane Klein avatarStéphane Klein created an issue

Hi,

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 ?

Regards, Stephane

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

    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. Stéphane Klein

    Important note : less.js is a client side script. It is the browser that convert ".less" to ".css".

    It isn't important that .less aren't fanstatic resource.

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

  7. Stéphane Klein

    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 :

    <head>
        <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 }
    </head>
    

    It's work with success.

  8. Jan-Jaap Driessen

    Looks like it is time fanstatic gains pluggable renderers! There have been some ideas about this. I'll see if I can come up with something; I'll keep you up to date.

  9. Log in to comment
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.