Apply svelte-ignore warning comment to all files

Question

I have been getting a bunch of warnings in my console saying "Unused CSS selector" for css from other files or css that was deleted already. It may be related to https://github.com/sveltejs/sapper/issues/842, but for now I am just looking for a way to prevent the unused css selector warnings from appearing in the console.

I have tried writing comments at the top of the _layout.svelte and template.html files like this: <!-- svelte-ignore css-unused-selector --> as is done here: https://svelte.dev/docs#Comments, but it does not work. I could go through and add this to each file, but I was wondering if there is a way to make it apply to all files. Thanks.

Answer 1

I ran into this issue when I was importing a 3rd party scss library. One option is to remove this warning in the rollup.config.js file. This involves creating a custom onwarn handler. Like so:

export default {
    client: {
        ...
            svelte({
                dev,
                hydratable: true,
                emitCss: true,
                preprocess,
                // Warnings are normally passed straight to Rollup. You can
                // optionally handle them here, for example to squelch
                // warnings with a particular code
                onwarn: (warning, handler) => {
                    // e.g. don't warn on <marquee> elements, cos they're cool
                    if (warning.code === 'PLUGIN_WARNING') return;

                    // let Rollup handle all other warnings normally
                    handler(warning);
                }
            }),
            ...
    },
    ...
}

The above config just throws out the css-unsed-selector warnings all together. Full details found in the docs here: https://github.com/sveltejs/rollup-plugin-svelte#usage