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

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

1 Like


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?


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


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

1 Like

Hello Christoph,

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

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,

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.