Skip to content

Files

Latest commit

 

History

History
55 lines (38 loc) · 1.43 KB

prefer-style-directive.md

File metadata and controls

55 lines (38 loc) · 1.43 KB

Pattern: Missing use of style directive

Issue: -

Description

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.

📚 Further Reading

🚀 Version

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

🔍 Implementation