Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Allow creating a source map #1050

Closed
lukeapage opened this Issue · 125 comments
@lukeapage
Owner

see sass/sass#569

and #1038

We should output source maps in the new format

@SomMeri SomMeri referenced this issue in SomMeri/less4j
Closed

Allow creating a source map #50

@matthew-dean

+2

@guilleiguaran guilleiguaran referenced this issue in sstephenson/sprockets
Merged

Source Maps #311

@Soviut

+1, obviously!

@lukeapage
Owner

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
Owner

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

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
@madcampos
@Prestaul

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

@ptim

+1

@lukeapage
Owner

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

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)

@evocateur

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

@lukeapage
Owner
@evocateur
@lukeapage
Owner

ok, pushed sourcemaps-wip

here is the spec for sourcemaps

https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit

I haven't started on the actual source map yet.. just preperation. Please ask any questions if something isn't clear, I should be able to respond quite quick...

good luck ;)

@evocateur

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

@emzo

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

@evocateur

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
Owner
@evocateur
@lukeapage
Owner

@evocateur pushed the start of some changes to not have to replace on already output css in order to get the tabbing right on the output. 7 tests fail but not because of tabs, I think there are some extra \ns.. this is needed so a node can output css and it won't be then altered later on..

@lukeapage
Owner

anyone have a link to a working example of a css sourcemap - e.g. a sass file, a map file, a css file and a html file I can just use to verify.. not sure if my setup isn't working or if its something else...

@madcampos
@SomMeri
Owner

@lukeapage https://gist.github.com/SomMeri/6038910 - I tested it with Chrome Canary.

How to make it run:

  • All gist files must be in the same directory.
  • It does not work if you open html from filesystem, you must run webserver. E.g. this works: http://localhost:8888/html.html while following does NOT work: file:///...path.../html.html

Other notes:

  • Source map contains only css classes (.box, .extended).
  • Chrome does not interpret source map correctly if "file" property in .map is either missing or incorrect. It seems redundant, but is used apparently.

How to test it:

  • Open developers tools in Chrome.
  • Go to elements tab and highlight <div class='box'>
  • Matched CSS Rules shows following theme-simple-mixin.less:6 next to .box, .extended { selector.

I'm just doing the same for less4j :).

@SomMeri
Owner

Btw, if anything is wrong with the source map, chrome tends to behave unpredictably. It may even look like the map not found.

@lukeapage
Owner
@radist2s

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

@SomMeri
Owner

I have chrome Version 30.0.1569.1 canary SyzyASan.

Both /*@ and /*# seem to be working for me, but it takes more then 12 seconds after page refresh until chrome loads and applies source map (in both cases). The live site linked by @radist2s seem to quite fast on the other hand.

@lukeapage
Owner

/*@ is the old format and was changed to /*# because of ie conditional comments...

@lukeapage
Owner

Ok, I didn't realise you had to enabled experimental sass support in order for it to understand css sourcemaps?! not to mention less, but what about just css compression.. surely it shouldn't be called sass support?

Here is a picture of my very first test output from less working :)

less-working

Just need some more tests (and probably bug fixes)

@radist2s

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

@lukeapage
Owner
@radist2s

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

@lukeapage
Owner

just updated to a new chrome 30.0.1569.3 canary build and I see it now.. sorry for all the bother. very nice.. we might even get 1.5.0 released in beta before chrome 30 gets to stable.. with any luck..

@Soviut

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 lukeapage referenced this issue in gruntjs/grunt-contrib-less
Closed

Source Mapping in Chrome #60

@paulirish

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

@paulirish

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.

@lukeapage
Owner
@nextgenthemes

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
Owner

@nextgenthemes I haven't tried to get the browser version working yet.. would need to include in the mozilla source-maps library I used.

any one who wants to try it can do this

npm install -g https://github.com/less/less.js/tarball/sourcemaps-wip

(or not global)

and then use the --source-map option

You may have to edit the resultant sourcemap paths at the moment to get it to work, but I'm working on that.

@paulirish

@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

@addyosmani

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.

@noahcollins

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

@lukeapage
Owner

I've now fixed the final bugs and merged this work to the 1.5.0-wip branch. This was the last feature before 1.5.0 so I want to fix a couple of other issues (phantomjs tests not working, an extend bug) and then I'll release as a "beta" (technically alpha)

@lukeapage lukeapage closed this
@jonschlinkert

:+1: fantastic progress! nice work @lukeapage!

@ChrisCinelli

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.

@Soviut
@lukeapage
Owner
@jonschlinkert

@lukeapage yes, and this just kicked me in the ass to get it done. In fact, this was the initial reason I created assemble. In any case I have a ton of great new stuff to push up, and anyone interested should follow the less-docs repo until we get the new site launched. There will be something pushed up by this weekend! my first goal will be to just get a basic scaffold up so we can get some dialog going around usability and take it from there.

@jonschlinkert jonschlinkert referenced this issue in less/less-docs
Open

sourcemaps #7

@jonschlinkert

@lukeapage, @Soviut, @ChrisCinelli, @paulirish, @addyosmani, and anyone else

We have some great representation of different viewpoints on this page, so any thoughts/suggestions from about what users should know about this feature (from your different perspectives), please add them over here less/less-docs#7 and I'll be sure to get it all organized and pushed up to the new site. thanks!

@Soviut

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.

@jonschlinkert

Thanks @Soviut you're welcome to help, please continue this over here: https://github.com/less/less-docs/

@ChrisCinelli

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

@jonschlinkert jonschlinkert referenced this issue in less/less-docs
Open

getting started and general goals #1

5 of 7 tasks complete
@jonschlinkert

thanks a lot @ChrisCinelli, that's great feedback. I copied it over to less/less-docs#1 where I'll be tracking progress on docs.

@dotnetwise

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?

@dotnetwise

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
viewportbug

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.

@evocateur

@dotnetwise Brilliant bug report, thank you!

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

@dotnetwise

@lukeapage and @evocateur Yet another bug #1492 :cactus:

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;
    }
}

line bug

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.

@dotnetwise

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

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.

@dotnetwise

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

@lukeapage
Owner

@dotnetwise thanks for the bug reports, they are really detailed and useful. I will hopefully get to them soon.

As for creating a beta of 1.5.0 I wanted to do that as soon as 1.5.0 is feature frozen..

which means fixing these 3
https://github.com/less/less.js/issues?labels=Feature+Request&milestone=5&page=1&state=open

@lukeapage
Owner

p.s. I might even call it an alpha.. but then with 1.4.0 it was hard enough trying to get people to use the beta before we released.

@jbest84

+1

@silentrob silentrob referenced this issue in sintaxi/harp
Open

Provide source maps where available #74

@nextgenthemes

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

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

@dotnetwise

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

@lukeapage
Owner

Hi @dotnetwise I have been working on more important bugs and yesterday released a 1.5 beta to npm (so npm install less@beta will give you 1.5).
I don't think they will be hard to fix, but I haven't got round to it. Those bugs and moving to grunt are next on my agenda, so they should be done soon. apart from small pull requests I'm the only one working on core functionality unfortunately. Given your name - how do you use less out of interest?

@dotnetwise

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) :+1:

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

@jadus

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 ?

@lukeapage
Owner

I haven't tested sourcemaps browser side. The reason is that the generated css file points at the sourcemap file - what is it meant to point to if it has been generated by the page?

I raised this issue with chrome http://code.google.com/p/chromium/issues/detail?id=285786 feel free to help out.

If it is an issue with 1.5.0 unrelated to sourcemaps please raise a new issue for it.

@jadus

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 ?

@lukeapage
Owner
@jadus

done
#1541

@dotnetwise

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

@lukeapage
Owner
@dotnetwise

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

@duncanmcdowell

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.

@scarlac

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

@duncanmcdowell

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.

@lukeapage
Owner

the wip branch is now removed and it is in npm so npm install less@beta or npm install less@1.5 should work for you. I plan to write some documentation on the site next week.

@lukeapage
Owner

@dotnetwise what what your sourcemap-rootpath? you can use that to set the path each of your source files is at. so if it isn't set and you just need a slash, set the option to slash and you should get the right output.

@nextgenthemes

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

@supernodegree

@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:
bildschirmfoto 2013-09-24 um 17 18 06

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

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

hrmm its currently undocumented

--source-map=inline

is how to do it.

@lukeapage
Owner

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

@WooDzu

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

Please see the screenshot:
less js-sourcemap

@scarlac

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

@madcampos
@WooDzu

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

@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
@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 ~!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.