useScopedStyles (HTML)

Language HTML

Summary

Rule available since: v2.4.5
Diagnostic Category: lint/style/useScopedStyles
This rule is recommended, meaning it is enabled by default.
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
      "style": {
5
        "useScopedStyles": "error"
6
      }
7
    }
8
  }
9
}

Description

Keep component styles scoped in Vue and Astro files.

A Vue single-file component contains its template, script, and styles in one .vue file. Its <style> blocks need the scoped attribute so their selectors apply only to that component. A <style module> block is also accepted because CSS Modules provide their own scoping.

Astro scopes component styles by default. The rule reports is:global because that directive makes the entire style block affect the page globally.

Examples

Invalid

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

code-block.vue:1:1 lint/style/useScopedStyles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This <style> block is missing the scoped attribute.
  
  > 1 │ <style>
      │ ^^^^^^^
    2 │ .foo { color: red; }
    3 │ </style>
  
  ℹ In Vue, unscoped styles become global across the entire project. This can lead to unintended side effects and maintenance challenges. Adding the scoped attribute ensures that styles are scoped to this component, preventing style leakage and conflicts.
  
  ℹ Unsafe fix: Add the scoped attribute so the styles will only apply to this component.
  
    1 │ <style·scoped>
      │       +++++++

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

code-block.astro:1:8 lint/style/useScopedStyles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This is:global directive is making the styles in this block global.
  
  > 1 │ <style is:global>
      │        ^^^^^^^^^
    2 │ .foo { color: red; }
    3 │ </style>
  
  ℹ In Astro, styles are scoped to the component by default. The is:global directive allows for global styles, but it can lead to unintended side effects and maintenance challenges.
  
  ℹ Unsafe fix: Remove the is:global directive so the styles in this block will be scoped to this component.
  
    1 │ <style·is:global>
      │        ---------

Valid

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

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