Create sourcemaps for sass files

[dpashkevich]

And possibly for other CSS preprocessor syntaxes.

[dpashkevich]

We probably need to copy the styles to tmp/styles and configure grunt-sass accordingly

[stefanpenner]

@dpashkevich do you have extra bandwidth to help out on this?

[stefanpenner]

i think the feature sounds great

[dpashkevich]

Trying right now, I'm still wrapping my head around the kit but this one looks simple

[stefanpenner]

@dpashkevich wicked thanks!

[dpashkevich]

Need some advice here. I'm looking at the source maps for JS and they simply embed the original sources (after es6 transpilation though) inside themselves under sourcesContent. This saves us from the headache of resolving the paths and exposing the source files via HTTP, BUT! This way, you can't edit the original files from the DevTools (well you can, but edits would not be persisted).

While that may be less critical for JS, I think we should take a different approach for styles, so we can live edit them in the browser and have the changes persist (I do that all the time with vanilla CSS). Off the top of my head, I don't see an easy solution for EAK as it does a lot of copying in its build process.

But anyway, sourcesContent is not yet supported in libsass (sass/libsass#212) so the best we can do at the moment is copy the original SASS/LESS/Stylus files inside /tmp/result/ so the browser can fetch them.

[dpashkevich]

PS I didn't report that the sourceMap file actually does gets generated if we add the appropriate options to grunt-sass:

options: {
      sourceComments: 'map',
      sourceMap: 'tmp/result/assets/app.css.map'
    }

But the browser needs to be able to fetch the original files

[dpashkevich]

Note to self: don't forget to make autoprefixer re-generate whatever sourcemap's there to the final version

[stefanpenner]

closing in favour of PR