no-inline-styles.md

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

svelte/no-inline-styles

disallow attributes and directives that produce inline styles

• ❗ This rule has not been released yet.

📖 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
    }
  ]
}

📚 Further Reading

• CSP documentation

🔍 Implementation

• Rule source
• Test source