no-inline-styles.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/no-inline-styles	disallow attributes and directives that produce inline styles	v2.35.0

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": 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

• CSP documentation

🚀 Version

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

🔍 Implementation

• Rule source
• Test source