Skip to content

Rule Proposal: vue/enforce-style-attribute #2109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mussinbenarbia opened this issue Mar 21, 2023 · 2 comments · Fixed by #2110
Closed

Rule Proposal: vue/enforce-style-attribute #2109

mussinbenarbia opened this issue Mar 21, 2023 · 2 comments · Fixed by #2110

Comments

@mussinbenarbia
Copy link
Contributor

Please describe what the rule should do:

Many projects agree on using one specific way of writing CSS. For example, using CSS Modules, strictly using Scoped CSS, or a combination of the two, which may be rare but could happen when migrating from one style to another.

This rule helps developers enforce one or either of the two attributes in SFCs.

What category should the rule belong to?

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

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

Option either: No warning as long as one attribute is specified. Does not enforce one specific style.

<!-- ✓ GOOD -->
<style scoped></style>
<style lang="scss" src="../path/to/style.scss" scoped></style>

<!-- ✓ GOOD -->
<style module></style>

<!-- ✗ BAD -->
<style></style>

Option scoped: Style tags must have the scoped attribute.

<!-- ✓ GOOD -->
<style scoped></style>
<style lang="scss" src="../path/to/style.scss" scoped></style>

<!-- ✗ BAD -->
<style module></style>
<style></style>

Option module: Style tags must have the module attribute.

<!-- ✓ GOOD -->
<style module></style>


<!-- ✗ BAD -->
<style scoped></style>
<style lang="scss" src="../path/to/style.scss" scoped></style>
<style></style>
mussinbenarbia added a commit to mussinbenarbia/eslint-plugin-vue that referenced this issue Mar 21, 2023
mussinbenarbia added a commit to mussinbenarbia/eslint-plugin-vue that referenced this issue Mar 21, 2023
@ota-meshi
Copy link
Member

Thank you for the rule proposal.
Sounds good to me.
However, I think your proposed rule is a little too strict.

Also, I have a similar rule available in another plugin.
https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/enforce-style-type.html
eslint-plugin-vue-scoped-css's rule can use arrays to allow multiple attribute types in your application. You can also force it to be plain.

I think it would be better if we changed your implementation rule to accept options similar to the eslint-plugin-vue-scoped-css's rule.
What do you think?

@mussinbenarbia
Copy link
Contributor Author

Thank you for the feedback and for linking to the other plugin! I think that makes sense. I will modify the implementation to accept the same options.

@FloEdelmann FloEdelmann linked a pull request May 16, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants