useScopedStyles

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>

code-block.vue:1:1 lint/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ 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/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ 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>