DIsable css "css-unused-selector" warning

[DayBr3ak]

I'm not sure how unused rules are treated., but according to sveltejs/svelte#729 it's removed?

My problem is I'm using scss and a lot of things get imported, so a lot of unused rules appear as a side effect. Is there no way to disabled those css-unused-selector warnings? Thanks

[antony]

This would be a great feature - if you're using a third-party library, you get thousands upon thousands of warning every time the application hot-reloads.

[tborychowski]

👍
I'm using <svelte:self /> for a tree structure and would like to indent every level of the tree.
When trying sth. like ul ul {} - I get this warning and the "unused css" gets removed.

[antony]

@tborychowski ul ul isn't semantically valid. It should be ul li ul

[tborychowski]

@antony haha! you're joking right?

[antony]

@tborychowski no, just don't have my brain switched on! I was thinking about the html structure instead of the css rules :)

Yeah, it makes sense that <svelte:self> should be able to detect a recursive rule like that.

[Conduitry]

This issue seems to be about multiple things now.

There is already a way to suppress css-unused-selector warnings, and indeed a way to suppress any warning or to have completely custom handling for warnings. See the onwarn option to the compiler, which can be passed via the loader as with other compiler options.

There is a way to prevent Svelte's automatic scoping and removal of a selector, and that's with :global(...).

I'm not sure how much would be involved in getting the compiler to recognize that <svelte:self/> might result in additional rules being used. That should be discussed in a separate new ticket in the Svelte repo.

I'm going to close this, since the original question ('how can I disable this warning?') already has an answer.

[Zerowalker]

Hate to open this, but i really don't get where i am supposed to set this onwarn option.

[antony]

@Zerowalker https://github.com/sveltejs/sapper-template/blob/master/rollup.config.js#L14

[Conduitry]

onwarn would be inside the options object that's alongside loader: 'svelte-loader'.

It's mentioned in the Rollup plugin readme here - and its usage is the same in this loader - but it should probably be added to this readme as well.

[Egnus]

By overriding my webpack.config.js I just get that "onwarn" is not a option property, and as far as I can see in the code it is true and there is not handler for this option.
What I added:

config.module.rules[svelteIndex].options.onwarn = (warning, onwarn) =>
        warning.code === 'Unused CSS selector' || onwarn(warning);

The loader seems not to load onwarn function in Svelte >= 3.0 or that is my believe from the code https://github.com/sveltejs/svelte-loader/blob/master/index.js#L124

Any idea how it should work? or is really missing?

[Conduitry]

Yeah it turned out there was a bug here, which I've opened #105 for.

[Egnus]

Thank you @Conduitry, temporally I added your changes in my local instance and it works as expected. Thank you so much. very easy and yet useful update.

[CanRau]

Just for the record, the code snippet by @Egnus (#67 (comment)) should be either

config.module.rules[svelteIndex].options.onwarn = (warning, onwarn) =>
        warning.message === 'Unused CSS selector' || onwarn(warning);
                ^ message instead of code

or

config.module.rules[svelteIndex].options.onwarn = (warning, onwarn) =>
        warning.code === 'css-unused-selector' || onwarn(warning);
                             ^ or this selector

[mikepeiman]

If it's helpful to anyone, I tired of the "Unused CSS selector" warnings and, following the links in this thread, found a small change was required. The following code silences these warnings - within rollup.config.js, in the client object place this code:

onwarn: (warning, handler) => { if (warning == '(svelte plugin) Unused CSS selector') return; handler(warning) }

[janzheng]

I had to slightly modify the examples here since I'm ignore other warnings as well... leaving it here in case it's useful to anyone else (including myself) in the future...

in rollup.config.js:

const onwarn = (warning, onwarn) => {
   if (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message))
      return true
   if (warning.message === 'Unused CSS selector')
      return true
   return onwarn(warning)
}

...

client: {
   ...
   onwarn,
},

server: {
   ...
   onwarn,
}

[Bestulo]

I tried all the suggestions in this thread and none worked. It seems I have a different version of the message.

I finally made it work using a regular expression instead of a === operator:

const onwarn = (warning, onwarn) =>
	(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
	(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
	(/Unused CSS selector/.test(warning.message)) ||
	onwarn(warning);

[tcstory]

this is my webpack config. it works

				{
					test: /\.svelte$/,
					use: {
						loader: 'svelte-loader',
						options: {
							onwarn(warning, onwarn) {
								return warning.code === 'css-unused-selector' || onwarn(warning);
							},
							preprocess,
							compilerOptions: {
								dev: !prod
							},
							emitCss: prod,
							hotReload: !prod
						}
					}
				},