Compatibility with Chrome's Sass support #1038

Closed
wants to merge 2 commits into
from

Projects

None yet

4 participants

@fgnass
fgnass commented Nov 14, 2012

Chrome DevTools now have experimental support for Sass-style line-number annotations but they are a little picky about the exact formatting.

This pull-request modifies the -sass-debug-info output to 100% match the syntax emitted by Sass itself which effectively gives us source-mapping for .less files in Chrome.

In order to be picked up by Chrome …

  1. the filename must be a file:// URL
  2. the path must be escaped rather than quoted

screenshot

fgnass added some commits Nov 14, 2012
@fgnass fgnass Make sass-debug-info compatible with DevTools
In order to make the debug info compatible with
Chrome's built-in experimental Sass support:

1) The filename must be a file:// URL
2) The path must be escaped rather than quoted
02374d5
@fgnass fgnass Test for escaped paths a5c96a4
@lukeapage lukeapage commented on the diff Nov 15, 2012
lib/less/tree.js
@@ -23,7 +23,9 @@ tree.debugInfo.asComment = function(ctx) {
};
tree.debugInfo.asMediaQuery = function(ctx) {
- return '@media -sass-debug-info{filename{font-family:"' + ctx.debugInfo.fileName + '";}line{font-family:"' + ctx.debugInfo.lineNumber + '";}}\n';
+ return '@media -sass-debug-info{filename{font-family:' +
+ ('file://' + ctx.debugInfo.fileName).replace(/[\/:.]/g, '\\$&') +
+ '}line{font-family:\\00003' + ctx.debugInfo.lineNumber + '}}\n';
@lukeapage
lukeapage Nov 15, 2012 Less member

not sure about the font-family having 3 on it...

Also not sure about the escape.

https://github.com/nex3/sass/blob/master/lib/sass/tree/visitors/to_css.rb#L210

If you know ruby I am pretty sure the answer is here...

https://github.com/nex3/sass/blob/master/lib/sass/scss/rx.rb#L13

@fgnass
fgnass commented Nov 15, 2012

In CSS leading digits must be escaped as Unicode code point, so 1 which is U+0031 becomes \000031.

@paulirish

just to assuage any concerns..

There is generalized support in Chrome DevTools for v3 sourcemaps for CSS. This allows for mapping back to the original mixin/variable/expression for any given aspect of the compiled CSS.

This line-number mapping was a short-term solution to explore the idea and get feedback from users on how to deliver this feature.

The long term solution is that less.js generates v3 sourcemaps and get the full benefit of line/prop/value mapping with devtools UI support. I talked about this on eps 2 and 3 of The Breakpoint if anyone wants to hear more about it.

@matthew-dean
Member

Thanks @paulirish! I had asked Paul on Twitter if there were was a "more generic" way to support pre-processed CSS so that we didn't have to emulate SASS. Apparently, there is. Can someone look into the v3 sourcemaps so that we can possibly migrate LESS to a more generic syntax?

@fgnass
fgnass commented Nov 21, 2012

With the Mozilla source-map module generating a source-map is pretty easy. The problem is that in tree.debugInfo we currently only know the original location but not the generated one. To make this work we would probably have to refactor the toCSS method, but I don't really know the less codebase well enough to say if this would indeed be the best place.

@lukeapage
Member

I think it needs some heavy refactoring. Maybe splitting the toCSS visit of the nodes into a generateCSS visit and then a visitor that can add inline debugging, then one that can generate source maps, then one that outputs the css. It would be nice to change to a visitor pattern to do these so the stages can be easily plugged in.

I suggest pulling this for now and starting work on the refactoring so that source maps might be possible eventually.

@lukeapage
Member

this is pulled and a raised a new feature for v3 sourcemaps. also fixed tests as they no longer passed on windows.

@lukeapage lukeapage closed this Nov 28, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment