@soleil-se/eslint-config/rules/svelte/style.js

ESLint configuration for Sitevision apps and projects.

export default {
  'svelte/no-extra-reactive-curlies': 'warn',
  'svelte/prefer-style-directive': 'warn',
  'svelte/spaced-html-comment': 'warn',
  'svelte/html-self-closing': 'warn',
  'svelte/html-quotes': 'warn',
  'svelte/sort-attributes': [
    'warn', {
      order: [
        // `this` property.
        'this',
        // `bind:this` directive.
        'bind:this',
        // `id` attribute.
        'id',
        // `name` attribute.
        'name',
        // `label` attribute.
        'label',
        // `description` attribute.
        'description',
        // `slot` attribute.
        'slot',
        // `--style-props` (Alphabetical order within the same group.)
        { match: '/^--/u', sort: 'alphabetical' },
        // `style` attribute, and `style:` directives.
        ['style', '/^style:/u'],
        // `class` attribute.
        'class',
        // `class:` directives. (Alphabetical order within the same group.)
        { match: '/^class:/u', sort: 'alphabetical' },
        // other attributes.
        ['!/:/u', '!/^(?:this|id|name|label|description|style|class)$/u', '!/^--/u'],
        // `bind:` directives (other then `bind:this`), and `on:` directives.
        ['/^bind:/u', '!bind:this', '/^on:/u'],
        // `use:` directives. (Alphabetical order within the same group.)
        { match: '/^use:/u', sort: 'alphabetical' },
        // `transition:` directive.
        { match: '/^transition:/u', sort: 'alphabetical' },
        // `in:` directive.
        { match: '/^in:/u', sort: 'alphabetical' },
        // `out:` directive.
        { match: '/^out:/u', sort: 'alphabetical' },
        // `animate:` directive.
        { match: '/^animate:/u', sort: 'alphabetical' },
        // `let:` directives. (Alphabetical order within the same group.)
        { match: '/^let:/u', sort: 'alphabetical' },
      ],
    },
  ],
};