# 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 style="display: block;">Hello World!</span>

<span style:display={blockDisplay ? 'block' : 'inline'}>Hello World!</span>

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

# 🔧 Options

{
  "svelte/no-inline-styles": [
    "error",
    {
      "allowTransitions": false
    }
  ]
}
  • allowTransitions … Most svelte transitions (including the built-in ones) use inline styles. However, it is theoretically possible to only use transitions that don’t (see this issue about removing inline styles from built-in transitions). This option allows transitions to be used in such cases. Default false.

# 📚 Further Reading

# 🚀 Version

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

# 🔍 Implementation