LESS automatic inline reload

I would also love to see live reload support on this module!

You can give this sandbox project a try. I plan to release it as a full project after I can get some more users to test :)

IMO it's a significant improvement to the "LESS Developer Mode" functionality; it only rebuilds LESS files that are edited, rather than all the LESS files. Providing a faster "live preview".

If the LESS module's developers are interested, I could integrate this functionality into the LESS module - giving an admin option to switch between "LESS Developer mode" and "LESS Developer mode - optimized", or just replacing Developer mode altogether?

There is some functionality coming down the pipe that is going to make this a little more difficult to accomplish.

Take a look when a new dev version comes out to see what I'm talking about.

I took a glance at the new caching mechanism being introduced, and I can't seem to find anything that makes this "more difficult".

The module I made watches the less files loaded on a page, and will constantly monitor them to see if they're edited while the page is loaded.

Once edited, I make a call to the LESS library to generate the CSS for the updated less file, and replace the current CSS with the update. So the filesystem looks the same to PHP/Drupal in terms of filenames, but the content is replaced with the updated code.

I can't seem to see how the new caching mechanism will in anyway affect this behavior?

LESS files are no longer static entities. They can now be changed depending on arbitrary values (per-page, per-user, etc.) on a per-theme basis.

This makes it more complicated as you need to have the same conditions present to rebuild the file.

It would be possible to make an AJAX request for the current page, scrape the style sheets and replace the current pages definitions en-whole.

There is a new demo module that provides an example of what I'm talking about.

I have this working now.

When you have less developer mode enabled it checks for recursive file mod times and reloads the compiled style in browser if there has been any changes.

New dev version soon to demonstrate.

Please check out the latest beta.

If you are still finding problems, please retag this issue with the new version as all future development for D7 will be on the 7.x-3.x branch.

I'm using 7.x-3.0-beta1 version and in my browser console I have a 404 for
POST http://localhost/drupal_path/ajax/less/watch

I'm using LESS developer mode and JQuery 1.7.1.

If you updated from a previous version, did you make sure to run update.php and/or flush the menu cache?

It's a fresh less 3.0-beta1 install... ans I did clear all caches several times.

This isn't working for me either with 3.0-beta1. I've tried uninstalling and reinstalling, and I've flushed all the caches.

My thought was that developer mode could have an option to disable the compiling of the LESS files, pass the LESS files into the untouched, and allow less.js to compile dynamically, but it appears that LiveReload doesn't work when less.js is handling the compiling.

Can you tell me what browser you're using as well as the operating system?

I'm using Mac OS Mountain Lion (10.8.2) + Google Chrome.

Ok, I tested this using a stock install of Drupal on OSX and Chrome and it was working perfectly.

My next thought is that there is a conflict with another module, so if you could try disabling contributed modules that you have enabled one at a time, we might be able to figure out where the conflict is.

I'm relabeling this issue to specify that this functionality does not depend on the Livereload module. This is due to extended functionality in how LESS files are handled in 7.x-3.0-beta1.

Also, make sure that you are testing this with 7.x-3.0-beta1 and not the 7.x-3.x-dev version. There is the possibility of broken code in the dev version.

I'm still working on trying the things you suggested, but I had a question. In order for the live CSS injection to work with this module, do I need to compile to a CSS file with LiveReload or something else? It seems like I would have to compile since LiveReload doesn't support injection from the LESS files right now. If that's the case, will this module still show live updates when including the LESS file in the theme info file? If I include the LESS file instead of the compiled CSS file, how does the module know where to look for the changes?

Hopefully that makes sense, but essentially what I am asking is which one of the following lines should I put in my .info file?:

stylesheets[all][] = less/style.less

OR

stylesheets[all][] = css/style.css

This still doesn't seem to be working with all other non-core modules disabled. I also tried disabling all my other javascript. This could still be some problem on my site, but I'm not sure what to check next.

If you're using this module you should not be having to manually compile .less files at all.

The LESS module and the automatic inline reload only works with .less files.

Following the module directions http://drupal.org/node/1807852 it would be similar to your first one:

stylesheets[all][] = less/style.less

Once you have the LESS module installed, along with the lessphp library, any included .less files should automatically be compiled.

When developer mode is enabled, your .less files should automatically reload inline (without needing a page refresh) in less than a second.

I would first make sure that you can get .less files compiling before attempting to use the automatica inline reload.

Is this working using the LiveReload javascript? I currently use the LiveReload browser plugins, but switching to the javascript in my theme file didn't seem to help.

It sounds like I have something going wrong on my end, so I might just have to try a few different things to see if I can get it working.

This does not use the LiveReload javascript, or any other part of LiveReload.

I would suggest disabling LiveReload and testing this again.

One note: LESS's automatic inline reload only looks at .less files, so if you are making changes in .css files, they will not be automatically reloaded.

I've been tinkering with this very useful looking module in Omega and I have everything working except for one annoying little thing. The auto reload works, but only intermittently. For example. If I change a line in a .less file, the browser reloads with the change automatically. But change the line again or add another line and nothing happens. I'm using the latest 3.x beta on Firefox 19, OSX 10.6.

I've run into this as well and its hard to tell why this is.

Can you check to see if this happens with files that are not part of an Omega theme?

Ok, I think I know why this is.

When the <link /> tag is replaced in the head, it will in almost every case have the exact same path as the previous. So the browser has a chance of pulling the file from cache rather than reloading from the server.

Solution is to add random query to the file URI and that should force a reload from the server.

This should be in the dev soon.

Ok, I have the file paths having a JS Math.random() call being appended when they are updated after changes on the server, so the automatic inline reload should be working consistently.

Please test this if you were experiencing this error.

Drupal.org should roll a new dev sometime tonight.

This should be resolved in 7.x-3.0.