future-architect / eslint-plugin-vue-scoped-css

ESLint plugin for Scoped CSS in Vue.js
https://future-architect.github.io/eslint-plugin-vue-scoped-css/
MIT License
98 stars 10 forks source link

False positive for classes in parent selectors (`vue-scoped-css/require-selector-used-inside`) #377

Closed GrantGryczan closed 3 hours ago

GrantGryczan commented 4 hours ago

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

ota-meshi commented 3 hours ago

If you don't like false positives for parent selectors, use no-unused-selector rule instead.

https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-selector.html

https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-selector-used-inside.html