8000 Global styles get `Unused CSS selector` error · Issue #577 · sveltejs/eslint-plugin-svelte · GitHub
[go: up one dir, main page]
Skip to content

Global styles get Unused CSS selector error #577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
2 tasks done
SebasF1349 opened this issue Aug 31, 2023 · 3 comments · Fixed by #990
Closed
2 tasks done

Global styles get Unused CSS selector error #577

SebasF1349 opened this issue Aug 31, 2023 · 3 comments · Fixed by #990
Labels
bug Something isn't working
Milestone
v3

Comments

@SebasF1349
Copy link

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)
@ota-meshi
Copy link
Member

Thank you for posting this issue.
I checked the PR to eslint-plugin-svelte3, but it seems to just ignore the global attribute. Since svelte-preprocess also seems to support things like :local(), I think the D1A4 rule should be able to check for that.

@ota-meshi ota-meshi added the bug Something isn't working label Sep 4, 2023
@AlbertMarashi
Copy link

Also got this issue

@ConnorDY
Copy link

I have the same issues.

Is there any way to disable specifically css-unused-selector in the meantime?

The following works but disables more rules than I'd like:

/* eslint-disable svelte/valid-compile */`

@baseballyama baseballyama added this to the v3 milestone Jan 3, 2025
@baseballyama baseballyama mentioned this issue Jan 3, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
v3
Development

Successfully merging a pull request may close this issue.

fix: ignore css_unused_selector error if style is global sveltejs/eslint-plugin-svelte
5 participants
@ConnorDY @ota-meshi @AlbertMarashi @baseballyama @SebasF1349
0