[scss] Display a wrong selector preview when using sibling combinators in SCSS, Less

[otomad]

Type: Bug

When using both style nesting and sibling combinators (+ and ~) in SCSS or Less, VSCode will display a wrong selector preview. I've determined that this error also occurs when no extensions are running.

For example, if writing a stylesheet like this:

.foo + .bar {
    .baz & {
        color: red;
    }
}

VSCode will display a wrong selector preview like this:

<element class="foo">
<element class="baz">
  …
    <element class="bar">

Expect this:

<element class="baz">
  …
    <element class="foo">
    <element class="bar">

Same when using ~:

Expect this:

<element class="baz">
  …
    <element class="foo">
    ⋮
    <element class="bar">

---

VS Code version: Code 1.74.2 (e8a3071, 2022-12-20T10:29:14.590Z)
OS version: Windows_NT x64 10.0.22621
Modes:
Sandboxed: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz (8 x 2112)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off 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_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	11.80GB (2.37GB free)
Process Argv	--crash-reporter-id 76088c10-0186-42e8-9434-fc9aba83ae2a
Screen Reader	no
VM	0%

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
vscccc:30610679
pyindex848:30577860
nodejswelcome1:30587005
2e4cg342:30602488
gswce1:30612156
3d0df643:30613357
f6dab269:30613381
fim-prod:30623723
vscsbc:30628655

[mriiad]

@aeschli Can I try to fix this please ?

[aeschli]

@mriiad Yes, you are welcome. The code is in https://github.com/microsoft/vscode-css-languageservice/blob/main/src/services/selectorPrinting.ts there are also tests in https://github.com/microsoft/vscode-css-languageservice/blob/main/src/test/css/selectorPrinting.test.ts

[mriiad]

@aeschli thanks for the reply, should I create a PR ?