Skip to content

svelte/prefer-style-directive mangles code when attempting to fix more than one instance #651

Closed
@thenbe

Description

@thenbe

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

8.55.0

What version of eslint-plugin-svelte are you using?

2.35.1

What did you do?

Configuration
/** @type { import("eslint").Linter.FlatConfig } */
module.exports = {
	root: true,
	extends: [
		'eslint:recommended',
		'plugin:@typescript-eslint/recommended',
		'plugin:svelte/recommended'
	],
	parser: '@typescript-eslint/parser',
	plugins: ['@typescript-eslint'],
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2020,
		extraFileExtensions: ['.svelte']
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	},
	overrides: [
		{
			files: ['*.svelte'],
			parser: 'svelte-eslint-parser',
			parserOptions: {
				parser: '@typescript-eslint/parser',
			},
		},
	],
	rules: {
		'svelte/prefer-style-directive': 'error',
	},
}
<div style='display:block; position:relative;'>
  foo
</div>
output-2.mp4

Repro

  1. Start with the vanilla eslint config that is created by npm create svelte@latest my-app
  2. Enable rule svelte/prefer-style-directive
  3. Create a svelte file with the provided snippet.
  4. Observe that file can be auto-fixed through the cli by running pnpm eslint --fix file.svelte
  5. Observe that file can be auto-fixed in the IDE by individually selecting all instance of fix this svelte/prefer-style-directive problem
  6. .
    a. EXPECTED: Observe that file can be auto-fixed in the IDE by selecting fix all svelte/prefer-style-directive problems
    b. ACTUAL: Observe that file can NOT be auto-fixed in the IDE by selecting fix all svelte/prefer-style-directive problems

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/thenbe/repro-svelte-eslint-style

Additional comments

Issue happens in both vscode and neovim.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions