+1

👍

+1

+2

+1

+1, obviously!

+1

+1

if anyone wants to work on this

https://github.com/cloudhead/less.js/tree/import-interpolation

now has a visitor pattern implemented.

you should be able to use this to go over the nodes and grab original input information.

What you don't know is the target (css) line number.

To do that I would suggest having functions on the toCSS env object which build up the css and keep track of the current line number. You can then store that line number against the node.

After that it should be simple.

i'm not good at compiler theory (in fact i am at this course at college now) and haven't looked up less' code, but can't just write to a variable say, lineNumber and at each line break increment it? it should keep the line number state, after that it could be exposed to the function mapping the lines.

@madcampos

yes.. that is this bit of the implementation I described.

having functions on the toCSS env object which build up the css and keep track of the current line number.

you need to keep track of the line number on the env object but also store its current value against each node as you output the css, then the ast has the source and the target line numbers and a mapping can be made.

+1

lol, we're all for it, looks like we just need an adept JavaScript / LESS programmer to fix it up and do a pull request. ;-)

@duncanmcdowell Looks like you just forget to install it globally. In case you are on Ubuntu or the like as well and use chromium and followed the sandbox thing I described above, I was able to handle that in a better way now.

I also recommend using the npm install -g less@beta rather then pointing to some files on github since this works fine and will pull always the most up to date beta.

I have written up a more detailed HowTo to make this work on Ubuntu and friends. Check it out, I hope this helps somebody. http://nextgenthemes.com/2013/09/howto-get-less-sourcemaps-to-work-in-ubuntu-with-chromium/

@nextgenthemes thank you for your blogpost. it helped me getting it running with webstorm. i installed the latest less beta and have the following settings in webstorm file watcher:

For those using CodeKit.app I can recommend writing a small node.js script and using that script as the "compiler" for the 1.5 beta. That way you don't have to recompile it manually to get sourcemaps. My script seems to work for me, but it may contain bugs or needs to be adjusted for your environment.
https://gist.github.com/scarlac/6793066

... that files must be served from a web server, cannot be loaded direct from filesystem.

Btw., Chrome has "-allow-file-access-from-files" command line option so it's actually possible to test/debug your pages w/o a web server...

Even with -allow-file-access-from-files the css source maps are still not being loaded in Chrome canary 32.0.1658.2 when opening html files via file:// protocol. Javascript source map do load.

To whoever still can't figure out how to make it work, this might save few hours of debug.

If you use webserver, you should define --source-map-rootpath options to be equal to your website base path. For example, if you debug http://website.com/styles/style.css (and the less file is present at the same location, e.g. http://website.com/styles/style.less), here's how you compile command should look like:

lessc --line-numbers=all --source-map-rootpath=http://website.com --source-map=styles/style.css.map styles/style.less styles/style.css

If it still does not work, check your generated css file. At the very bottom it should have something like this:

/*# sourceMappingURL=http://website.com/styles/style.css.map */

this should be a full URL to the source map, which could be opened in chrome. It it's correct, everything should work fine. If not, keep playing with arguments.

I can confirm this with less v.1.5b3, Chrome 29 and Canary 32 (with no special command line arguments).