Eslint-plugin-vue: Rule proposal: `require-scoped-style-tag`

[crcatala]

Please describe what the rule should do:

This rule warns when a <style> tag in SFC does not have the scoped attribute.

What category of rule is this? (place an "X" next to just one item)

[X] Enforces code style
[ ] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

[Bad] When rule enabled, the following will give a warning:

<template>
  <div class="card">Hello</div>
</template>

<style>
.card {
  background-color: #FFFFFF;
}
</style>

[Good] When rule enabled, the following will NOT give a warning:

<template>
  <div class="card">Hello</div>
</template>

<style scoped>
.card {
  background-color: #FFFFFF;
}
</style>

Why should this rule be included

When in large team of devs, some common css selectors might be used in multiple components and have unintended conflicts. This dev would have to explicitly disable rule if there's a scenario that absolutely needs an unscoped style definition.

[michalsnik]

Hey @crcatala Thanks for posting this proposal :)

What if the team uses css modules instead? How would you name this rule then?
Or do you see it as two separate rules?

[michalsnik]

Unfortunately this rule is not possible to implement atm., because of the vue-eslint-parser that doesn't parse other tags than <template>. And it won't change anytime soon

[simllll]

Also looking for something like this, any known workarounds?

[ota-meshi]

Hi.
I created this rule with another ESLint plugin.
https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-scoped.html

[smoonsf]

Hi.
I created this rule with another ESLint plugin.
https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-scoped.html

This is exactly what i looking for!
Thanks you so much! :D