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.
I found this solution a bit smoother which I modified slightly:
// rollup.config.js
...
svelte({
...
onwarn: (warning, handler) => {
const { code, frame } = warning;
if (code === "css-unused-selector")
return;
handler(warning);
},
...
}),
...