Callback when client side less screen is ready

[markrogers123]

Using client side less, it takes several seconds to render a twitter bootstrap screen.

While less is creating the css, the browser shows unstyled html.

(I use client side less so users can change less options at runtime.)

Is there a js callback or other feature which will let me hide the screen and unhide it when less has finished creating the css (equivalent of document.ready).

If not, can the facility be added?

[lukeapage]

okay,

1. you really really should be compiling your less serverside unless you have a very good reason.. then you get it to 0 seconds ;)
2. we have had requests before but it has never been done. you could submit a pull request, I'd suggest
   adding code here

https://github.com/less/less.js/blob/master/lib/less/browser.js#L673

such that once all requests have come back, it calls less.stylesLoadedCallback if that exists.

[codler]

I would like to have a callback also so I know when to run a css prefixer library like https://github.com/codler/jQuery-Css3-Finalize

[seven-phases-max]

@codler Probably that's what #1835 is about. It's already in v1.7.0.

[codler]

aha nice, thanks! How do I use it? Is it less.postProcessCSS = function() {}? I dont see it in the documentation.

[seven-phases-max]

Is it less.postProcessCSS = function() {} ?

By the code it looks like the function should accept CSS styles and return processed styles as a string.

[codler]

Here is the code I use

less = {
    postProcessor: function(css) {
        var processedCSS = css;
        if ($.cssFinalize) {
            $('<textarea>').val(css).cssFinalize({
                'append' : false,
                'callback': function(css) {
                    processedCSS += $.cssFinalize.cssObjToText(css);
                }
            });
        }
        return processedCSS;
    }
};```

[levithomason]

This is fixed in PR #2226. Current state of the PR allows you to recognize when less has finished processing via a promise:

less.hasFinished.then(
    function() {
        // code to run after less has finished
    }
)

This also works with less.refresh() and less.modifyVars().

[TWiStErRob]

hasFinished from #2226 has been renamed to pageLoadFinished in 8b42ae3

I managed to achieve this in my dev env with Less 2.5.3:

<style type="text/css" id="prevent-fouc">
    body {
        display: none !important;
    }
</style>
<script type="text/javascript">
    less = {
        env: "development",
        async: true
    }
</script>
<!-- include styles and less -->
<script type="text/javascript">
    less.pageLoadFinished.then(function() {
        $('#prevent-fouc').remove();
    });
</script>

Disclaimer: I support not making the user's browser compile the whole Bootstrap or any other CSS framework, it's a horrible idea: just think mobile phones have limited capacity.

[seven-phases-max]

Closing as added in v2.0.0.