1546063 - Syntax highlighting for SCSS sources

Status: NEW

(DevTools :: Style Editor, defect, P3)

Description

[Florens Verschelde :fvsch]

Attachment: Screenshot: current highlighting of SCSS file in Style Editor

When a sourcemap includes an original SCSS source, it's highlighted using CSS rules, which doesn't work well for Sass-specific features such as line comments.

CodeMirror does seem to have SCSS and Less modes:
https://codemirror.net/mode/css/scss.html
https://codemirror.net/mode/css/less.html

I would not support the indent-based Sass syntax since it's fell out of fashion, unless it's a quick win with virtually no maintenance burden?
https://codemirror.net/mode/sass/index.html

And if we could get the correct syntax highlighting in both Style Editor and Debugger (where SCSS sources may show up in Sources as part of some webpack builds, in my experience), that would be great!

Looked for existing DevTools bugs for SCSS and Sass, but found nothing related to syntax highlighting:

• scss
• sass