Allow creating a source map

[lukeapage]

see sass/sass#569

and #1038

We should output source maps in the new format

[uzikilon]

+1

[gabeidx]

👍

[mrdevinmob]

+1

[matthew-dean]

+2

[madcampos]

+1

[Soviut]

+1, obviously!

[EarMaster]

+1

[aredridel]

+1

[lukeapage]

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.

[madcampos]

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.

[lukeapage]

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

[jyonker]

+1

[matthew-dean]

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. ;-)

[ivan4th]

+1 very important feature

[ChrisCinelli]

You may want to use the SourceMapGenerator here: https://github.com/mozilla/source-map

[undoZen]

I wrote a simple less middleware
https://gist.github.com/undoZen/5806774

[aredridel]

That looks awesome!

---

Aria Stewart

On June 18, 2013 at 12:13:41 PM, 安动生 (notifications@github.com) wrote:
I wrote a simple less middleware
https://gist.github.com/undoZen/5806774
—
Reply to this email directly or view it on GitHub.

[madcampos]

Thanks for the middleware, i will try this at home. Any way it gets to be
merged into less core? Or some solution like this?
Em 18/06/2013 12:25, "Aria Stewart" notifications@github.com escreveu:

That looks awesome!

---

Aria Stewart

On June 18, 2013 at 12:13:41 PM, 安动生 (notifications@github.com) wrote:
I wrote a simple less middleware https://gist.github.com/undoZen/5806774
— Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1050#issuecomment-19622929
.

[Prestaul]

+1... +2... +100... This is an incredibly important feature.

[nbroslawsky]

+1

[LostSenSS]

+1

[gaurav21r]

+1

[ptim]

+1

[lukeapage]

I'm working on this, but its a big job

[dotnetwise]

+10
Please make sure you target [V3 source maps] http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

[mrdevinmob]

Thanks for your effort, I think/ hope I speak for all of the plus ones in say that you kick ass for taking on a task that we have not been able to find a solution too. Please let us know if we can help. :)

[scarlac]

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

[denisos]

Hi all, this is beautiful, thank you!
Here's the steps I followed to get it working for my dev env:

• Chrome v30 (I have Version 30.0.1599.66 to be exact)
• I ensured that in Chrome Gears->General both these are checked: "Enable CSS source maps" and "Auto-reload generated CSS"
• I got the latest lessc 1.5 beta from node: "sudo npm install -g less@beta"
  Install worked fine (once lessc 1.5 is released then no need to do this I assume)
• I build using lessc: "lessc --line-numbers=all --source-map=main.css.map main.less >main.css"
• I reload my app and can debug the less styles. I load from localhost hitting apache to serve my html and files, I understand from previous comments that files must be served from a web server, cannot be loaded direct from filesystem.

tip: type "lessc" to --line-numbers and --source-map choices

The --source-map setting was critical for me to get it working. I set it to follow the filename of my final generated css.

[seven-phases-max]

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

[dotnetwise]

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.

[neochief]

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

[lukeapage]

@dotnetwise to get around the file system bug, there is now an option in the new beta released today to inline the sourcemap (as well as the source files) so that the whole thing is put as a data uri in the generated css file meaning you don't need any extra files.

[lukeapage]

hrmm its currently undocumented

--source-map=inline

is how to do it.

[lukeapage]

yes might be better to give its own option.. its a bit confusing having to do

--source-map=inline -source-map-inline

they are too similiar!

[dotnetwise]

So what are you going to do? Drop the first one and let only '-source-map-inline` do the right thing? (embed original css into the sourcemap itself and point the url on the resulted css to it) ?

[aredridel]

I get the wrong paths in 1.5.0-b4 when I use basepath and rootpath:

node_modules/less/bin/lessc --source-map --source-map-basepath="`pwd`"/web --source-map-rootpath=/ --strict-imports web/assets/site/css/bootstrap/bootstrap-full.less web/assets/site/css/bootstrap/bootstrap-full.css

This yields a web/assets/site/css/bootstrap/bootstrap-full.css.map, and in the web/assets/site/css/bootstrap/bootstrap.full.css, the last line reads /*# sourceMappingURL=/bootstrap-full.css.map */

It should read /*# sourceMappingURL=/assets/site/css/bootstrap/bootstrap-full.css.map */

[pgasiorowski]

Greetings. In 1.5.0-b4 while changing styles from debugger the mapping is lost. Is this correct behavior?

Please see the screenshot:

[scarlac]

@WooDzu it's a Chrome bug. Safari 6.1 does not have this glitch.

[madcampos]

@WooDzu fire a bug to chrome if there is none, this two might be of intrest:
https://code.google.com/p/chromium/issues/detail?id=266416&q=sourcemap&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
https://code.google.com/p/chromium/issues/detail?id=273384&q=sourcemap&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

or you can search for something diferent:
https://code.google.com/p/chromium/issues/list

Marco Aurélio D. Campos
Instituto de Computação - UFMT

2013/10/12 Seph Soliman notifications@github.com

@WooDzu https://github.com/WooDzu it's a Chrome bug. Safari 6.1 does
not have this glitch.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1050#issuecomment-26195647
.

[pgasiorowski]

Thanks @scarlac and @madcampos I decided to fire a separate ticket for this as the other 2 are not directly related to the issue. Reference: https://code.google.com/p/chromium/issues/detail?id=307146

[umaar]

Demo page: http://umaar.github.io/bootstrap-source-map-example/ (and animation)

[blittle]

I am super excited about source map support! One thing that would be really nice to support is a way to drop directories from the file path prefixes within the sourcemaps. This is supported in uglifyjs sourcemaps and is very useful: https://github.com/gruntjs/grunt-contrib-uglify#sourcemapprefix

[mquandalle]

Is there a way to get the sourcemap from the node/npm module in javascript?

[robdodson]

Should the source map live with the compiled CSS or with the LESS files? All of the examples I've seen have the generated CSS, LESS and index.html all in the same dir. I think many people often have a separate folder for LESS and CSS. Something like this:

css/
  index.css
less/
  index.less
  foo.less
  bar.less
index.html

If I want my map file to live in css/ I have to use a bunch of settings to iron it all out.

lessc less/index.less > css/index.css \
--source-map css/index.css \
--source-map-rootpath=../less \
--source-map-url=index.css.map

That makes me feel like maybe I'm going against the grain. Is there a best practice around where these things should live?

[madcampos]

i think it should go where it fits your code/management style. for me it
would be in the map folder inside the public directory of my app (my less
files are not in the public directory of the app, it's elsewere).

Marco Aurélio D. Campos
Instituto de Computação - UFMT

2013/11/21 Rob Dodson notifications@github.com

Should the source map live with the compiled CSS or with the LESS files?
All of the examples I've seen have the generated CSS, LESS and index.html
all in the same dir. I think many people often have a separate folder for
LESS and CSS. Something like this:

css/
index.css
less/
index.less
foo.less
bar.less
index.html

If I want my map file to live in css/ I have to use a bunch of settings
to iron it all out.

lessc less/index.less > css/index.css
--source-map css/index.css
--source-map-rootpath=../less
--source-map-url=index.css.map

That makes me feel like maybe I'm going against the grain. Is there a best
practice around where these things should live?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1050#issuecomment-29043445
.

[aBrookland]

I've got the source map working using node.js/grunt but I've found that if I nest an import inside a rule, then all rules inside the imported file are reported as being at the file and line number of the nesting rule.

So if file1.less contains:

.class1 {
    @import 'file2.less';
}

and file2.less contains:

.class2 {
    color: red;
}

And HTML like:

<div class="class1">
    <span class="class2">Some text</span>
</div>

Then when inspecting the span it shows up as being line 1 of file1.less not line 1 of file2.less.

[vdegenne]

_{Grunt, all the best ~!}