Skip to content
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.

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

Global styles get Unused CSS selector error #577

Open
2 tasks done
SebasF1349 opened this issue Aug 31, 2023 · 3 comments
Open
2 tasks done

Global styles get Unused CSS selector error #577

SebasF1349 opened this issue Aug 31, 2023 · 3 comments
Labels
bug Something isn't working

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 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 */`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants