Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Allow creating a source map #1050

Closed
lukeapage opened this Issue Nov 28, 2012 · 125 comments

Comments

Projects
None yet
Owner

lukeapage commented Nov 28, 2012

see nex3/sass#569

and #1038

We should output source maps in the new format

@SomMeri SomMeri referenced this issue in SomMeri/less4j Dec 2, 2012

Closed

Allow creating a source map #50

+1

Owner

matthew-dean commented Jan 18, 2013

+2

@guilleiguaran guilleiguaran referenced this issue in sstephenson/sprockets Feb 5, 2013

Merged

Source Maps #311

+1

Soviut commented Feb 16, 2013

+1, obviously!

+1

+1

Owner

lukeapage commented Feb 27, 2013

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.

Owner

lukeapage commented Feb 27, 2013

@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 commented May 22, 2013

+1

Owner

matthew-dean commented Jun 4, 2013

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 commented Jun 7, 2013

+1 very important feature

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

undoZen commented Jun 18, 2013

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

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.

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/cloudhead/less.js/issues/1050#issuecomment-19622929
.

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

+1

+1

ptim commented Jun 27, 2013

+1

Owner

lukeapage commented Jul 4, 2013

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

adaptabi commented Jul 4, 2013

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

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

retlehs commented Jul 4, 2013

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)

Contributor

evocateur commented Jul 5, 2013

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

Owner

lukeapage commented Jul 5, 2013

I decided to Abstract out from toCSS into a visitor all the the ruleset
flattening and special logic.. then I think I can have a visitor that just
asks nodes their source and how many lines / characters they take up. I
will push what I've done to a branch if you want to have a look.. I might
not have more time for a week or so (hard to predict)

Contributor

evocateur commented Jul 5, 2013

That would be great, thanks!

On Jul 5, 2013, at 11:13 AM, Luke Page wrote:

I decided to Abstract out from toCSS into a visitor all the the ruleset
flattening and special logic.. then I think I can have a visitor that just
asks nodes their source and how many lines / characters they take up. I
will push what I've done to a branch if you want to have a look.. I might
not have more time for a week or so (hard to predict)

Reply to this email directly or view it on GitHub.

Owner

lukeapage commented Jul 5, 2013

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

Contributor

evocateur commented Jul 5, 2013

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

Contributor

jonschlinkert commented Jul 5, 2013

👍

emzo commented Jul 11, 2013

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

Contributor

evocateur commented Jul 11, 2013

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.

Owner

lukeapage commented Jul 11, 2013

Ok, I pushed some more changes tonight.. hopefully it makes it clear what
I'm aiming for.. toCSS replaced by genCSS which is passed an object each
node calls to add text. The next refactoring now most of the logic happens
before toCSS is to alter toCSS to never alter its nodes css, but instead
alter env so that the right css is output first time.

I've also added a dependency on source-map for now as it can be easily
packged as well as used by node.

After genCSS is used by all the nodes we just need an object that can use
sourcemap to create a sourcemap as well as an output file.

I might do some more tomorrow.. keep a branch public on github if you do
anything else and I will cherry pick it.

Contributor

evocateur commented Jul 11, 2013

Thanks!

On Jul 11, 2013, at 3:17 PM, Luke Page wrote:

Ok, I pushed some more changes tonight.. hopefully it makes it clear what
I'm aiming for.. toCSS replaced by genCSS which is passed an object each
node calls to add text. The next refactoring now most of the logic happens
before toCSS is to alter toCSS to never alter its nodes css, but instead
alter env so that the right css is output first time.

I've also added a dependency on source-map for now as it can be easily
packged as well as used by node.

After genCSS is used by all the nodes we just need an object that can use
sourcemap to create a sourcemap as well as an output file.

I might do some more tomorrow.. keep a branch public on github if you do
anything else and I will cherry pick it.

Reply to this email directly or view it on GitHub.

Owner

lukeapage commented Jul 13, 2013

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

mstuart commented Jul 17, 2013

👍

Owner

lukeapage commented Jul 19, 2013

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

I think the exemple in the html5 rocks article could show you a working
source map... i saw a few in blogs from some developers but don't remember
exactly what blogs was that... sorry.
Em 19/07/2013 05:30, "Luke Page" notifications@github.com escreveu:

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


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

Owner

SomMeri commented Jul 19, 2013

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

Owner

SomMeri commented Jul 19, 2013

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

Owner

lukeapage commented Jul 19, 2013

I can't get your example to work.. chrome canary v30, source maps on, on a
web server, copied from the gist... :S

I wish chrome would log issues with the source map.. it would make it alot
easier to work out why it wasn't loading it.

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

Owner

SomMeri commented Jul 19, 2013

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.

Owner

lukeapage commented Jul 19, 2013

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

Owner

lukeapage commented Jul 19, 2013

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)

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

Owner

lukeapage commented Jul 19, 2013

I have canary and needed the option switched on.. are you saying it will be
on by default soon?

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

Owner

lukeapage commented Jul 20, 2013

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 commented Jul 20, 2013

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 Jul 20, 2013

Closed

Source Mapping in Chrome #60

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

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

Owner

lukeapage commented Aug 15, 2013

@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

Owner

lukeapage commented Aug 15, 2013

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 commented Aug 16, 2013

+1

@silentrob silentrob referenced this issue in sintaxi/harp Aug 21, 2013

Open

Provide source maps where available #74

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.

You have to use Chrome 30+ or at best canary build
On Aug 23, 2013 9:07 PM, "nextgenthemes" notifications@github.com wrote:

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.


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

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

adaptabi commented Sep 4, 2013

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

Owner

lukeapage commented Sep 4, 2013

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?

adaptabi commented Sep 4, 2013

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 👇

jadus commented Sep 5, 2013

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 ?

Owner

lukeapage commented Sep 5, 2013

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 commented Sep 9, 2013

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 ?

Owner

lukeapage commented Sep 9, 2013

You could raise a new one.. stops me forgetting.

jadus commented Sep 11, 2013

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?

Owner

lukeapage commented Sep 11, 2013

I added an option for putting less into the map. Run lessc with no args to
see options.

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

scarlac commented Sep 13, 2013

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

Owner

lukeapage commented Sep 14, 2013

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.

Owner

lukeapage commented Sep 14, 2013

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

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

scarlac commented Oct 2, 2013

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 commented Oct 2, 2013

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.

Owner

seven-phases-max commented Oct 2, 2013

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

adaptabi commented Oct 3, 2013

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 commented Oct 3, 2013

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

Owner

lukeapage commented Oct 4, 2013

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

Owner

lukeapage commented Oct 4, 2013

hrmm its currently undocumented

--source-map=inline

is how to do it.

Owner

lukeapage commented Oct 4, 2013

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!

adaptabi commented Oct 4, 2013

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

WooDzu commented Oct 12, 2013

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 commented Oct 12, 2013

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

@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/less/less.js/issues/1050#issuecomment-26195647
.

WooDzu commented Oct 14, 2013

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 commented Oct 23, 2013

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 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/less/less.js/issues/1050#issuecomment-29043445
.

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.

Grunt, all the best ~!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment