SonarCloud is complaining about Vue selector :deep

Clean Code Report False-positive / False-negative...
,
1

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;
  }
}
</style>

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

Thanks!

4

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.

Regards,
François

6

thanks!!

7

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.
image

What are your thoughts on this?