Ability to disable warnings like css-unused-selector

[livehtml]

Describe the problem

With Rollup we can use onwarn event, modify it to exclude specific warnings. But how to do it in SvelteKit?

Describe the proposed solution

Option in svelte.config.js to ignore specific warnings.
Or (best): allow comments like "svelte-ignore css-unused-selector" inside corresponding style files/blocks, not only at the html markup level.

Importance

would make my life easier

[dummdidumm]

If I'm not mistaken it should be enough to place that onwarn function you know from Rollup within your svelte.config.js like
export default { onwarn: ..., ...otherstuff } . @dominikg might know more, AFAIK the property is picked up by vite-plugin-svelte which prints these warnings.

[dominikg]

you should be able to define a custom warning handler in svelte.config.js. it works similar to rollup-plugin-svelte

https://github.com/sveltejs/vite-plugin-svelte/blob/066be0c591dec3448e9db12ddff74f5d150a99eb/packages/vite-plugin-svelte/src/utils/options.ts#L299

[livehtml]

Thanks @dominikg , @dummdidumm

I didn’t catch exactly where I can put this onwarn in the svelte.config.js.

In paths:
config.onwarn,
config.kit.onwarn
thrown an error like "Unexpected option config.onwarn"

In the config.kit.vite it's ok, no errors, but nothing works also:

vite: () => ({
            logLevel: "info",
            onwarn: (warning, handler) => {
                console.log('111');
                const { code, frame } = warning;
                if (code === "css-unused-selector")
                    return;

                handler(warning);
            }
})

[dominikg]

it should be in the root, a sibling of kit

[bluwy]

Looks like kit defines custom validation for the svelte config, which is blocking usages of onwarn and any other vite-plugin-svelte's options. I think kit should allow any unknown keys though, or only validate the kit option.

[livehtml]

@dominikg
don't work, error happens: Unexpected option config.onwarn

Full svelte.config.js:

import preprocess from 'svelte-preprocess';
import adapterNode from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess({
        sass: {
            includePaths: ["./src/styles", "./sources/src/styles", "./src/lib", "./sources/src/lib"],
            prependData: `@import '_prepend.sass'`,
            renderSync: true
        }
    }),
    kit: {
        target: '#app',
        adapter: adapterNode({
            out: './../build-node-serve',
            esbuild(defaultOptions) {
                return {
                    ...defaultOptions,
                    outfile: './../build-node-serve/index.mjs',
                    external: [],
                };
            }
        }),
        vite: () => ({
            logLevel: "info",
            plugins: [
                // imagetools(),
            ]
        })
    },
    onwarn: (warning, handler) => {
        console.log('111');
        const { code, frame } = warning;
        if (code === "css-unused-selector")
            return;

        handler(warning);
    }
};

export default config;

[dominikg]

Bluwy already posted the reason for this. sveltekit's config validation currently doesn't allow extra options to be set. So right now this is not supported.

[Mlocik97]

is it not possible to change rollup config through config.kit.vite.build.rollupOptions.onwarn ? I though this option is exposed and even documented. @dominikg

[dominikg]

The option should be better documented on vite-plugin-svelte and we need to figure out how multiple projects in the svelte universe share the same svelte.config.js

@Mlocik97 that option doesn't work on dev obviously and also not on build as vite-plugin-svelte used its own custom logging instead of this.warn and so the svelte compiler warnings would not reach the custom rollup warning handler.

[ignatiusmb]

Config properties defined at the top-level should not throw anymore in .156 and above, thanks @bluwy!

[Madd0g]

Was the ability to pass onwarn specifically fixed too?

I tried putting it in svelte.config.js (in the root), I tried putting it in vite.config.mjs as a sibling of kit, neither worked.

EDIT: I also tried passing it to the SK vite plugin, but according to the code - it's impossible to pass options to @sveltejs/vite-plugin-svelte directly from the kit plugin - https://github.com/sveltejs/kit/blob/master/packages/kit/src/exports/vite/index.js#L62