SCSS syntax highlighting partially breaking intermittently

[udyux]

Type: Bug

The syntax highlighting in scss files will suddenly break for a small portion of the file while I am working in it.

This is the expected highlighting:

This is when the issue occurs:

The two solutions I've found that fix it are:

• closing and opening the file
• commenting and uncommenting the affected code

This has been a recurring issue for me for about a year, I figured I'd wait it out to see if it would stop happening in an update.

Unfortunately I still haven't managed to determine the exact circumstances under which the problem occurs:

Sometimes it happens when I scroll through the file. Other times while I'm editing, regardless of the type of editing I'm doing (eg. adding new code blocks or properties, editing existing properties, pasting code, etc.).

Sometimes it will be further up in the file, sometimes further down, and it only happens occasionally (appears to be random). I don't remember it happening to the code directly around where I'm working.

VS Code version: Code 1.87.1 (1e790d77f81672c49be070e04474901747115651, 2024-03-06T00:22:39.156Z) OS version: Darwin arm64 23.2.0 Modes:

System Info

|Item|Value| |---|---| |CPUs|Apple M1 Pro (8 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|6, 5, 5| |Memory (System)|16.00GB (0.11GB free)| |Process Argv|--crash-reporter-id c69f3ecc-4eef-4b9a-a984-f59297cd4b59| |Screen Reader|no| |VM|0%|

Extensions (32)

Extension|Author (truncated)|Version ---|---|--- project-manager|ale|12.7.0 htmltagwrap|bra|1.0.0 vscode-toggle-quotes|Bri|0.3.6 npm-intellisense|chr|1.4.5 path-intellisense|chr|2.8.5 vscode-eslint|dba|2.4.4 gitlens|eam|14.9.0 vscode-html-css|ecm|2.0.9 EditorConfig|Edi|0.16.4 prettier-vscode|esb|10.4.0 auto-close-tag|for|0.5.15 auto-rename-tag|for|0.1.10 macros|ged|1.2.1 copilot|Git|1.175.0 copilot-chat|Git|0.13.1 vscode-github-actions|git|0.26.2 svg|joc|1.5.3 dotenv|mik|1.0.1 vscode-docker|ms-|1.29.0 csharp|ms-|2.22.5 vscode-dotnet-runtime|ms-|2.0.3 remote-containers|ms-|0.348.0 atom-keybindings|ms-|3.3.0 live-server|ms-|0.4.13 vsliveshare|ms-|1.0.5918 vetur|oct|0.37.3 nested-comments|phi|4.0.1 vscode-yaml|red|1.14.0 vscode-scss-formatter|sib|3.0.0 vscode-fileutils|sle|3.10.3 vscode-task-buttons|spe|1.1.3 vscode-stylelint|sty|1.3.0 (2 theme extensions excluded)

A/B Experiments

``` vsliv368cf:30146710 vspor879:30202332 vspor708:30202333 vspor363:30204092 vscoreces:30445986 vscod805:30301674 binariesv615:30325510 vsaa593:30376534 py29gd2263:30899288 c4g48928:30535728 azure-dev_surveyone:30548225 a9j8j154:30646983 962ge761:30959799 pythongtdpath:30769146 welcomedialog:30910333 pythonidxpt:30866567 pythonnoceb:30805159 asynctok:30898717 pythontestfixt:30902429 pythonregdiag2:30936856 pyreplss1:30897532 pythonmypyd1:30879173 pythoncet0:30885854 h48ei257:30998030 pythontbext0:30879054 accentitlementsc:30995553 dsvsc016:30899300 dsvsc017:30899301 dsvsc018:30899302 cppperfnew:30979542 d34g3935:30971562 fegfb526:30981948 bg6jg535:30979843 ccp2r3:30993541 dsvsc020:30976470 pythonait:30996668 7ghi1836:30988842 dsvsc021:30996838 g1icg217:30999571 ```

[VSCodeTriageBot]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.87.2. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[RedCMD]

all files? or only certain css docs

[F1] => Inspect TextMate Tokens

are you able to send a file?

[udyux]

Only noticed it in SCSS syntax documents, but its hard to say if CSS or others are affected as I dont work with them.

Yeah, I could send a file. I would imagine it would be helpful if it didn't have any external dependancies (variables, mixins, etc)?

I'll just add that it happens in different project directories, any SCSS file really.

Do you want me to inspect the TextMate tokens while the issue is happening?

Under the expected highlighting I have this:	Property	Value
language	scss
standard token type	Other
textmate scopes	punctuation.separator.delimiter.scss, meta.property-value.scss, meta.property-list.scss, meta.property-list.scss, source.css.scss
foreground	No theme selector

[udyux]

It just started doing it again as I wrote that. Here is the inspector on the portion that has no highlighting. I have the cursor placed on a property name.

Property	Value
language	scss
standard token type	Other
textmate scopes	support.type.property-name.css, meta.property-name.scss, meta.property-list.scss, meta.property-list.scss, meta.property-list.scss, source.css.scss
foreground	support.type.property-name, { "foreground": "#8FA1B3" }

After fixing the issue, the output of the debug is exactly the same.

I also noticed that if i scroll that part of the code out of the viewport, when I scroll it back in I can see the correct highlighting momentarily before the text goes all white again. Kind of feels like a rendering issue.

[aeschli]

Other files don't impact the syntax highlighting of a document. So if we can nail it down to a particular content and change that would be very useful. Also, just to be sure, please run with extensions disabled, to make sure this is not caused by other extensions.

[udyux]

If it helps at all, I noticed only a few moments ago the same scrolling behaviour. A part of the code went white as I scrolled (no edits were made). As I continued scrolling down, I could see the correct syntax highlighting for a brief moment before that code also went white.

If I scrolled down fast enough, it would stop "spreading". But as soon as I went back up to where the highlighting had been lost, it started to "spread" downwards again.

Its odd, I don't think I've seen it do that before (guess its acting up now that I reported it 😂).

I'll try without extensions later.

[RedCMD]

could you provide a sample file please?

I would imagine it would be helpful if it didn't have any external dependencies

syntax highlighting is limited to within each document so anything external has no effect

were you able to confirm that no extensions are causing the problem?