sveltejs
Global styles get `Unused CSS selector` error
Before You File a Bug Report Please Confirm You Have Done The Following...
- [X] I have tried restarting my IDE and the issue persists.
- [X] 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
Additional comments
The previous plugin eslint-plugin-svelte3 had the same issue, but it wasn't fixed (https://github.com/sveltejs/eslint-plugin-svelte3/issues/123)
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.
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 */`
