Vue 3 deep selector raising unexpected unknown pseudo-class selector Bug

[distor-sil3nt (Christoph Papczyk)]

This issue has been already reported here but has not been solved / followed up on due to a lack of a reproduction case:
BUG: false positive invalid pseudo-class selector in .vue files

However, I keep getting this false positive feedback in the MS Azure Build Step for Sonarqube reporting:

Reproducible example here: vue3-example/App.vue at main · distor-sil3nt/vue3-example · GitHub

[ganncamp (G Ann Campbell)]

Hi,

Welcome to the community and thanks for the reproducer!

Unfortunately, my searches are indicating that deep isn’t a valid pseudo-class selector. Can you point me to something that says it is?

 
Ann

[distor-sil3nt (Christoph Papczyk)]

Hi,
The deep selector in Vue 3 is a valid css selector. It is used to apply styles to child elements in a scoped style context: SFC CSS Features | Vue.js

[linkurzweg (Lin)]

@ganncamp Any news on this? Our pull requests are plastered with those false positive errors about the :deep selector…

[Yassin (Yassin Kammoun)]

Hello Christoph,

Welcome to the Sonar community, and sorry for the long delay in answering you

As you can see below, the rule supports a property allowing you to configure the analyzer so that it considers additional class selectors as valid:

In your case, you can just add the Vue.js 3’s :deep selector in the list of pseudo-classes. You will need to configure this change in your quality profile.

Hope this helps,
Yassin