# 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="
Can use style directives instead. (svelte/prefer-style-directive)
color: {color};">...</div>
<div
  style="
    
Can use style directives instead. (svelte/prefer-style-directive)
position: {position};
    {
Can use style directives instead. (svelte/prefer-style-directive)
position === 'absolute' ? 'top: 20px;' : ''}
    {
Can use style directives instead. (svelte/prefer-style-directive)
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.

# 📚 Further Reading

# 🚀 Version

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

# 🔍 Implementation