useScopedStyles

Ce contenu n’est pas encore disponible dans votre langue.

HTML

Summary

Rule available since: v2.4.5
Diagnostic Category: lint/nursery/useScopedStyles
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/enforce-style-attribute

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useScopedStyles": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that <style> blocks in Vue SFCs have the scoped attribute and that <style> blocks in Astro components do not have the is:global directive.

Vue’s scoped attribute automatically scopes CSS to the component, preventing style leakage and conflicts. Astro’s is:global attribute allows for global styles, but without it, styles are scoped to the component by default.

Style blocks with the module attribute are exempt, as CSS Modules is an alternative scoping mechanism.

Examples

Invalid

1
<style>
2
.foo { color: red; }
3
</style>

1
<style is:global>
2
.foo { color: red; }
3
</style>

Valid

1
<style scoped>
2
.foo { color: red; }
3
</style>

1
<style module>
2
.foo { color: red; }
3
</style>