prefer-style-directive.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/prefer-style-directive	require style directives instead of style attribute	v0.22.0

svelte/prefer-style-directive

require style directives instead of style attribute

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule aims to replace a style attribute with the style directive.

Style directive were added in Svelte v3.46.

<script>
  /* eslint svelte/prefer-style-directive: "error" */
  let color = "red"
</script>

<!-- ✓ GOOD -->
<div style:color={color}>...</div>
<div
  style:position="absolute"
  style:top={position === "absolute" ? "20px" : null}
  style:pointer-events={pointerEvents ? null : "none"}
/>

<!-- ✗ BAD -->
<div style="color: {color};">...</div>
<div
  style="
    position: {position};
    {position === 'absolute' ? 'top: 20px;' : ''}
    {pointerEvents === false ? 'pointer-events:none;' : ''}
  "
/>

You cannot enforce this style by using prettier-plugin-svelte. That is, this rule does not conflict with prettier-plugin-svelte and can be used with prettier-plugin-svelte.

🔧 Options

Nothing.

👫 Related Rules

• svelte/prefer-class-directive

📚 Further Reading

• Svelte - Docs > style:property

🚀 Version

This rule was introduced in eslint-plugin-svelte v0.22.0

🔍 Implementation

• Rule source
• Test source