Skip to content

Global styles get Unused CSS selector error #577

Closed
@SebasF1349

Description

@SebasF1349

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.48.0

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

2.33.0

What did you do?

Configuration
module.exports = {
	root: true,
	extends: [
		'eslint:recommended',
		'plugin:@typescript-eslint/recommended',
		'plugin:svelte/recommended',
		'plugin:svelte/prettier',
		'prettier'
	],
	parser: '@typescript-eslint/parser',
	plugins: ['@typescript-eslint'],
	ignorePatterns: ['*.cjs', '/src-tauri/target', '*.config*', '/build', '*.json'],
	overrides: [
		{
			files: ['*.svelte'],
			parser: 'svelte-eslint-parser',
			// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
			parserOptions: {
				parser: '@typescript-eslint/parser'
			}
		}
	],
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2020,
		project: 'tsconfig.json',
		extraFileExtensions: ['.svelte']
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	}
};

Eslint complains when using global styles with <style global> (Unused CSS selector "input"(css-unused-selector) (svelte/valid-compile))

<style global>
  input {
		@apply bg-surface-50-900-token h-full overflow-hidden;
	}
</style>

Using :global(input) instead doesn't error, which should be the same.

What did you expect to happen?

No warning/error

What actually happened?

Unused CSS selector "input"(css-unused-selector) (svelte/valid-compile)

Link to GitHub Repo with Minimal Reproducible Example

https://sveltejs.github.io/eslint-plugin-svelte/playground/#eJw9jcEOgjAQRH9l7X0jFw8qIf6FFy6lLNC4dhu6xRDCv0s9eHt5k5nZjJOezM3UJ0R4Ejt5E6gAJfZBMXIefcC0ECsBYtOGOrnZRy10/mPRujLByNJZPgyADzErbEeorT5sjLxCN2LK82Ad4aXCa1WhyosCTDhkZpCF5oHlg5Pvewr30t1/R2W8MfsXNqk+ZQ==

Additional comments

The previous plugin eslint-plugin-svelte3 had the same issue, but it wasn't fixed (sveltejs/eslint-plugin-svelte3#123)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions