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 (1e790d7, 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?