+1

+1

+1

+1, obviously!

+1

+1

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.

+1

+1 very important feature

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

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

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

+1

+1

+1

+1

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

thank you @lukeapage!

i just put up some $$ towards a bounty for this issue: https://www.bountysource.com/#issues/71925-allow-creating-a-source-map (it would be awesome if others would contribute to it, too)

@lukeapage How far have you gotten? I was thinking of taking a stab at this, based on the rough implementation you described a few months ago.

Awesome, I should have some spare time soon to dig in. :)

I don't know enough about less.js internals to contribute to an implementation, but thought I'd help out by offering a few $$ for a solution to this issue, since I'd find it extremely useful: https://www.bountysource.com/#issues/71925-allow-creating-a-source-map

I've been slammed by bugs at work this week, so I haven't made much progress other than some linting and refactoring minor functions for clarity. I may have more time this weekend.

@lukeapage
In CSS file source map link must be like this:

/*@ sourceMappingURL=theme-simple-mixin.css.map */

Note the /*@
And enable "Support for SASS" in Experiments.
Working site with source map: http://html5please.com/
Style Index: http://html5please.com/css/

Do not forget restart Chrome! (In Windows new Chrome work in background, find chrome in tray and close it.)

Sorry to mislead. /*@ and SASS support should be included for the Chrome v. <30. In Canary CSS source map work from a box.

Yes, in Canary 30.0.1569.1 all sourcemap checkboxes checked by default.

Even if you don't, this is a developer benefit. Asking someone to turn on source maps or an experimental feature for devtools support is pretty simple compared to the hoops most development environments ask of their users.

@lukeapage this is awesome stuff. Congrats and super happy to see this.

Yes as mentioned... the vocabulary in DevTools was just made agnostic.. it's "Enable CSS source maps".

It also does not require turning on experiments now.. It's out of experiments by default in Chrome 30 (currently dev channel/canary). It'll be like 10 weeks or so until this version is shipped to stable channel. (no promises, though)

@radist2s //# is also supported in v29, which is beta. This impl probably won't need the //@ reference for back-compat for v28 stable at all.

@lukeapage as for any problems with the sourcemap. i would recommend opening the devtools on the devtools. you can undock (bottom left icon (maybe long-hold)) and then cmd-shift-i again. Perhaps in that console may be details about why the map failed.

i would recommend opening the devtools on the devtools.

I verified with our engineer that this console will indeed share an exception if your sourcemap file is invalid.

Can I test this? I have chromium 28 and turned this experiments on, I got less from the "sourcemaps-wip" branch and ran a "make alpha" that gets me a less.1.4.2-alpha in the dist dir but I saw some merge with 1.5.0 so how to get 1.5.0 running? With this it not seem to work.

@lukeapage

Perhaps the link should reflect the selector currently matching on an element.

Yeah agreed. Please file something for this at crbug.com and we'll tackle that

any one who wants to try it can do this npm install -g https://github.com/less/less.js/tarball/sourcemaps-wip
and then use the --source-map option

Great progress on this @lukeapage! Haven't been able to get the browser ver. working just yet, but it's exciting to see so much effort being put in to make this happen.

+1

Using sourcemaps-wip now with some success. This is great. Thanks very much @lukeapage!

Awesome! I would add that the documentation at http://lesscss.org/ needs to reflect the changed and how to uses the source maps.

Asa side note, I also think that currently it is a little strange that at the top there is a disclaimer about changes in 1.4.1. That kind of info should probably go in a specific section of the page a little bit below so the user that is new to less.js has a better user experience when he or she reaches the page: if I am new to less, I am not really interested in knowing what changed since the last version.

I'm very close to requesting "ownership" of the main site. I feel there are a lot of UX and UI changes I could implement that would make it as inviting as possible. That low barrier to entry is crucial.

Sure everything is improvable and a new website could be cooler.

So far, I do not find major problems with lesscss.org, except that the "overview" part is not really an overview and that for somebody new to less "language" would be probably be the most interesting part after overview (if it is a good overview).

So my proposal is:

• Moving "1.4.0 We have released 1.4.0..." to "with less 1.3.3." from the top to a new section called "Changelog" at the end of the page
• The page should always mention the characteristics of the current version downloadable at the top. So remove in "Importing" and all other places the stuff relative to old versions ("In v1.3.0 - v1.3.3 ... In v1.4.0") and move that in the Changelog section.
• Moving "usage" after "language".
• Add something about source maps in "usage"
• Bonus: put for each version number in changelog a link to the documentation of that version. Unfortunately https://github.com/cloudhead/lesscss.org does not have tag for different version but I think they could be retrieved with a little work. From now on I would tag the new versions of the page.

Everything except bonus should be pretty quick and make lesscss.org look good and complete until the new site is ready

Hi Guys,
Before all the docs and the new site will be updated accordingly, how far are we from releasing 1.5.0 itself?

I am currently using npm install less_watch which is great, but it depends on lessc that relies on less 1.4.2 so I can't use the new source maps functionality in chrome canary build.
It would be great if you could publish less 1.5.0 as a beta release on node so it can be already used by other tools.

What do you think?

Ultimately I have done a npm install -g https://github.com/less/less.js/tarball/1.5.0-wip and got it upgraded however, I think I have found a bug: #1493

having this import in layout.less:

@import url('../../app/vendor/ie10mobile/ie10mobile.less');

html > body.public {
    background: red !important;
}

causses all of the subsequent definitions to be pointed to ie10mobile.less instead of layout.less as this

This seems to be caused because of the correct CSS but I guess wrong LESS syntax contained in the ie10mobile.less

@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

The generated css is good, but the source map gets broken.

@dotnetwise Brilliant bug report, thank you!

An alpha release for 1.5.0 does seem in order. @lukeapage?

@lukeapage and @evocateur Yet another bug #1492

The following less would point into the line of html>body form although the definition was explicitly for input.
However, this would work correctly when using the & operator, but it is a pain to change all of the less definitions like that

html>body form  {

    input {
        color: cyan !important;
    }

    & input {
        background: yellow !important;
    }
}

I think this can be extent to other operators supported in less, but never the less, either empty or any operators should be supported correctly by the source maps, since it is valid less code.

Another bug: #1491
Empty css generated files should not have the sourcemap comment at the end, rather they should not be generated on the disk at all.
Of course, no .map should be generated for empty files as well.

There are many candidates to such less files such as mixins, variables etc.

/*# sourceMappingURL=mixins.css.map */

I disagree about not generating blank files. Often times when starting a project I'll create blank stubs for my less files to generate blank CSS files so that I don't get error when loading a page that points to those CSS files.

I don't really see a problem with putting the sourcemap comment in either since anyone generating a blank CSS file this way knows the tradeoff and that blank CSS file probably won't be blank for very long anyways.

If you're saying you don't want a less file containing only mixins to be compiled to CSS, you should be instructing your compiler to ignore those. In order for those libraries to be useful they need to be imported into a "master" sheet, so instruct your compiler to only compile that master less sheet.

@Soviut did you read my comment about mixins.less and variables.less ?

+1

Cant get it to work, I have 1.5.0 installed, i run lessc --source-map=style.css.map --verbose style.less style.css it looks like everything works fine.
I use chromium 28 and have sourcemaps enabled but it still points me to the css. I have no idea what is missing.

I have this line at the end of my css /*# sourceMappingURL=style.css.map */
I get a the mapfile and looking into it looks also fine, all path at the beginning are relative and right pointing to my less files that get imported.

@dotnetwise Ah thanks, its working now. Thought of newer version, but then thought it supports source-maps so it has to work with 28

I run Kubuntu and use this ppa https://launchpad.net/~saiarcot895/+archive/chromium-dev after updating I have to start chromium with this switch to have no sandbox else it wont start and complain (I guess you only need this if your hacking on chromium after shortly looking at this) chromium-browser --disable-setuid-sandbox. It's a 30+ version and so far it seem to work, but not extensively tested it.

Any luck on the above reported bugs? - or when are they planned to be fixed?

We are using less a lot in all of our projects, with the help of less_watch which scans automatically all less changes and generate the css versions every time you touch them (including a git pull on the project)

Source maps are an essential part of lessc since otherwise would be debug-less

Hi !
I'm using less-1.5.0.min.js on the dev server.
Tried this config :
less = {
env: "development", // or "production"
async: false, // load imports async
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 1000, // when in watch mode, time in ms between polls
dumpLineNumbers: "all", // "comments" or or "mediaquery" or "all"
sourceMap: true
};

But I then get a lot of errors like this :

SyntaxError: undefined is not a function
in tabs-rwd.less on line null, column 0:
1@import "variables.less"; // Modify this for custom colors, font-sizes, etc

One for each less file

Am I missing something ?

Thanks for raising this issue with chrome.
We've got an answer : using data urls
Do you wan't me to raise a new issue here ? Or is it related enough to this one ?

done
#1541

@lukeapage Another problem I can see:
The sourcemaps contains the path as:
"Content/less/mixins.less"
However in chrome 29, the browser considers that relative to the .css file, hence will attempt to download the less file from http://website.com/Content/less/Content/less/mixins.less which will obviously not be found.
So that is kind of missing a / slash at the beginning.

Another thing,
It doesn't make sense to deploy the .map and all the .less side by side in production just to be able to see/debug your less files original code.

Source maps V3 do support multiple source names and their content! Currently I can see that you haven't embedded the original less content in the .map file.
I think that should be added, this way, You can simply deploy the .min.css and .min.css.map files in production without all the hassle of .less files.
The .map files will be harmless to regular users anyway, since they won't be enabling Enable CSS Sourcemaps in their browsers. Right?

--source-map-inline did the trick, however the missing slash could only be fixed if you map your workspace in chrome

Would someone be willing to give me a step-by-step understanding of how to get this working? I have installed 1.50 by using npm install less@beta and have followed the steps nextgenthemes used here. Less creates the .css file as expected, but not the .map file. I feel as though I'm missing a critical part here when it comes to the creation of source maps.

@duncanmcdowell are you sure you are using latest beta? I am using beta2 and it works for me with with a small test using Safari 6.1 as well. I installed using npm install -g https://github.com/less/less.js/archive/v1.5.0-b2.tar.gz which worked for me. The whole -wip stuff didn't.

Thanks @scarlac. I installed beta2 on my desktop and it's now working. Hopefully it's just a matter of doing that on my laptop to make everything work.

@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

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.

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

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

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 */

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

Please see the screenshot:

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

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

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

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

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

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?

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.