# svelte/no-inline-styles

disallow attributes and directives that produce inline styles

# 📖 Rule Details

This rule reports all attributes and directives that would compile to inline styles. This is mainly useful when adding Content Security Policy to your app, as having inline styles requires the style-src: 'unsafe-inline' directive, which is generally discouraged and unsafe.

<script>
  /* eslint svelte/no-inline-styles: "error" */

  import { fade } from 'svelte/transition';

  export let classTwo;
  export let blockDisplay;
</script>

<!-- ✓ GOOD -->
<span class="one">Hello World!</span>

<span class:two={classTwo}>Hello World!</span>

<!-- ✗ BAD -->
<span 
Found disallowed style attribute. (svelte/no-inline-styles)
style="display: block;">Hello World!</span>

<span 
Found disallowed style directive. (svelte/no-inline-styles)
style:display={blockDisplay ? 'block' : 'inline'}>Hello World!</span>

<span transition:fade>Hello World!</span>

# 🔧 Options

{
  "svelte/no-inline-styles": [
    "error",
    {
      "allowTransitions": true
    }
  ]
}
  • allowTransitions … Some svelte transitions (including the built-in ones in Svelte 4 and older) use inline styles. This option allows transitions to be used. Default true.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v2.35.0

# 🔍 Implementation