How to disable Svelte warning "Unused CSS selector"

Question

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.

Answer 1

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);
    },
    ...
}),
...

Answer 2

I use a simple explicit ignore mechanism:

First, define the warning key and a regex to capture the meat of the ignore message. Then, loop over ignore patterns and match at least one.

// rollup.config.js
...
const warnIgnores = {
  'css-unused-selector': {
    capture: /.*"(.*)"$/,
    ignore: [
      /^\.p\d+/,
      /^\.sm\d+/,
      /^\.md\d+/,
      /^\.lg\d+/,
      /^\.xg\d+/,
      /^\.all\d+/,
      /^\.row(::after)?/
    ]
  }
}
...
svelte({
  ...
  // Explicitely ignore warnings
  onwarn: (warning, handler) => {
    const { message, code } = warning;
    const patterns = warnIgnores[code];
    if (patterns != undefined) {
      /* Find the meat. */
      const meat = message.match(patterns.capture);
      if (meat != null) {
        for (var i = 0; i < patterns.ignore.length; i++) {
          if (meat[1].match(patterns.ignore[i]) != null) {
            return;
          }
        }
      }
    }
    handler(warning);
  },
  ...
});

Explicit is better than implicit!

Answer 3

There doesn't seem to be any possibility to turn off this warning in a proper way. However, there is a workaround.

In node_modules/svelte/compiler.js, remove line 24842 or put it in comments:

this.stylesheet.warn_on_unused_selectors(this);

You will have to do this again when you update or reinstall svelte.