Compatibility with Chrome's Sass support #1038
Conversation
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
| 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'; |
There was a problem hiding this comment.
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
|
In CSS leading digits must be escaped as Unicode code point, so |
|
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. |
|
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? |
|
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. |
|
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. |
|
this is pulled and a raised a new feature for v3 sourcemaps. also fixed tests as they no longer passed on windows. |
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-infooutput 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 …
file://URL