How to tell when less is done processing ?

[agersant]

Hi.

I'm working with jQuery and I'm used to running javascript code as soon as the DOM is ready. The funny bit is that my js is performing operations which involve reading some DOM elements' css attributes. However, it turns out the js may or may not run after Less has done his job.
The consequence is that oftentimes, my js will read values before they are set - thus leading to unexpected behaviors.

My question is simple : is there a way (event, flag...anything) to tell when the less processing is complete and execute JS code after ?

[ttfkam]

Sounds like a good idea.

[harobed]

Good idea !

[rulatir]

Upvoted!

[rulatir]

This is really, really, really BADLY needed in order to be able to avoid FOUC!

[lukeapage]

it is not recommended to run less.js in the browser in production.

for development set a timeout for x milliseconds.. wouldnt that be good enough?

[rulatir]

it is not recommended to run less.js in the browser in production.

Why not, and what is recommended instead if one does rely on
javascript()? Also, isn't the unavailability of processing completion
notification one of the reasons why it is not recommended,
circular-logically?

Szczepan Hołyszewski

[lukeapage]

Its not recommended because its bad for performance and only runs correctly on a small set of (modern) browsers. You are right that there are also several bugs that make it more difficult.

Instead, compile the less before hand in node - This support javascript - unless you are accessing variables on the page? In which case it depends on your serverside setup and what variables you use, but it might be better to try and move that serverside.

There are cases where it makes sense to use less.js browser side - for instance in a theme editor where a admin user is editing things on the fly.. but then for more generic users it would be better to compile and cache serverside.

So it does depend on your situation and I'm not saying this feature request will never get added, just that it is low priority.

[velosipedist]

Why not to just add stylesheet node DOM event firing& It is very easy to implement and will not hit the performance.

But it wil allow to catch stylesheet refreshing (especially important in watch mode) for any purposes.

For example, i'm writing ajax-based Less stylesheets updater, cause im'not able to install Node.js on hosting.
Just want to have ability to update stylesheet changes without any offline compilers, right with latest less.js version.

[roelvanduijnhoven]

My use-case IS an theme editor, and so I would find this highly useful!

[lukeapage]

@roelvanduijnhoven happy to accept pull requests

[roelvanduijnhoven]

Maybe I will look into this.

The way I fix this at the moment is to poll every few miliseconds until a specific css style has been loaded on a DOM element. Although this works in practise this is 1) a nasty hack and 2) can break in theory because not all styles could have been loaded at that moment in time.

[cphill02]

It would be very nice and pretty standard to have a callback function for after LESS is done processing.

[lukeapage]

I agree. That is why it is labeled ReadyForImplementation and has a milestone of the next release.. it is just waiting for someone to implement..

[akashivskyy]

👍