useScopedStyles

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="HTML" icon="seti:html"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.4.5` - Diagnostic Category: [`lint/nursery/useScopedStyles`](/reference/diagnostics#diagnostic-category) - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Inspired from [`vue/enforce-style-attribute`](https://eslint.vuejs.org/rules/enforce-style-attribute)

How to configure

json

{
	"linter": {
		"rules": {
			"nursery": {
				"useScopedStyles": "error"
			}
		}
	}
}

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

vue

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

astro

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

Valid

vue

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

vue

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

References:

</TabItem> </Tabs>