SonarCloud is complaining about Vue selector :deep

Hello! I have a Vue component using :deep selector. And SonarCloud is complaining with the next message:

Unexpected unknown pseudo-class selector “:deep”

Code to reproduce the error:

<style lang="postcss" scoped>
.CommTextMessage__content {
  & :deep(a) {
    @apply break-all underline font-semibold hover:opacity-80 transition-all duration-200;

This directive is a Vue SFC thing: SFC CSS Features | Vue.js


Hi @jamesalways
Welcome, and thank you for your feedback.
As suggested, we decided that the :deep pseudo-class should be ignored by default. I created an issue to improve this.



Hi, I see this issue was completed on GitHub. However my project is still running into it.
We are using the default Sonar way built-in quality profile for CSS. But it does not seem to have te :deep selector class excluded.

What are your thoughts on this?