As you can see from the output CSS tab, the :root.theme-dark .logo selector compiles to :root.theme-dark .logo[data-v-7ba5bd90]. In other words, only .logo is scoped. theme-dark may be a class used globally.
While this is true in general, I might recommend against fixing this in general, since I suspect most people using this rule would prefer to be warned about unused classes, even if they aren't necessarily scoped. Instead, I would recommend just fixing it when the class is on a common selector which cannot appear inside a component, such as :root or body. In these cases, it's clearly intentional that the class be unused in the component, since the selector can't possibly apply to anything within the component.
You could also argue this shouldn't be fixed at all since it's clearer and more future-proof to simply wrap the parent selector in :global. But as long as vuejs/core#12404 is an issue, that actually doesn't work. Though I'd be satisfied with the decision to wait for that issue to be resolved rather than hard-code exceptions for certain selectors here when Vue itself doesn't.
Minimal reproduction: https://play.vuejs.org/#eNp9UT1PwzAQ/SuWJ5BK0gqmEJAAdYABEDB6CcnVcevYlu/SFlX975xTWjpU3Xzvw++dvZEPIWTLHmQhS4Iu2IrgXjkhStNpUdsK8U5J67VXUmCsecjTlOFSM7IyDbWMTcZjnnJ2lvnRNTwi/VgQWPsADSNZMotNSpgZSxAL8R2NbskB4sX48la5bfIV0XvKqIUOrpoqLsR54+TPWOZDHgfJkSROdTOjszl6xwsOZiVr3wVjIb4FMt6hksXu2sRV1vrVy4BR7GG0x+sW6sUJfI7rhCn5HgEhLkHJA0dV1EA7evr5Cms+H8jON71l9RnyA9DbPnXcyR5713DtI93Q9rkLPpJx+gunawKH+6VS0aTcDnol+Zefzqz+X/c6uxl8/KJy+wsTxrVP
As you can see from the output CSS tab, the
:root.theme-dark .logo
selector compiles to:root.theme-dark .logo[data-v-7ba5bd90]
. In other words, only.logo
is scoped.theme-dark
may be a class used globally.While this is true in general, I might recommend against fixing this in general, since I suspect most people using this rule would prefer to be warned about unused classes, even if they aren't necessarily scoped. Instead, I would recommend just fixing it when the class is on a common selector which cannot appear inside a component, such as
:root
orbody
. In these cases, it's clearly intentional that the class be unused in the component, since the selector can't possibly apply to anything within the component.You could also argue this shouldn't be fixed at all since it's clearer and more future-proof to simply wrap the parent selector in
:global
. But as long as vuejs/core#12404 is an issue, that actually doesn't work. Though I'd be satisfied with the decision to wait for that issue to be resolved rather than hard-code exceptions for certain selectors here when Vue itself doesn't.