How to disable Svelte warning "Unused CSS selector"
The approach of my graphic designer for formatting our Svelte application is having a systematic set of classes in LESS, importing the appropriate LESS file in the component or page, and then applying those classes wherever he needs them. As a result we have an abundant amount of unused classes, which we might use at a later point. The great thing about Svelte is that unused CSS is not compiled, so all those (yet) redundant classes are not in the way anyway. However, whenever we compile, we get a big list of warnings: "Unused CSS selector". This is a major nuisance, because it makes it harder to notice when an actual error is created. Plus it just looks ugly. I checked the documentation and there is a way to suppress warnings, but that only works for the HTML part. Is there any way of getting rid of these warnings? Note that we use Svelte Preprocess.
Updated solution compatible with Svelte 5 and SvelteKit 2 for suppress css-unused-selector and a11y-invalid-attribute. Only need to edit svelte.config.js Note: one of the previous anwser uses css-unused-selector (with adash) which no longer appears to work. The correct option name is css_unused_selector (with an underscore). // svelte.config.js import adapter from '@sveltejs/adapter-auto'; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { adapter: adapter() }, onwarn: (warning, handler) => { const { code, frame } = warning; // console.log(code); // <= uncomment to check other warnings if (code === "css_unused_selector") return; if (code === "a11y_invalid_attribute") return; handler(warning); } }; export default config;
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/881e58fa10158639887c5472a8dc5e6a453ad4885cd1644988b3babc342427a1