Am I missing a sveltekit config?

[longrunningprocess]

I'm getting a bunch of these Unused CSS selector warnings when I run my sveltekit builds, e.g., Unused CSS selector "button-group > .btn:not(:first-of-type)".

Do you all see those in your projects or did you add some additional configuration to have them purged during the build?

Thanks!

I've narrowed it down to the way I use @apply within my style blocks.

When I do things like this I do not see any errors:

<label for={id} class=label>
	<span class='label-text'>{label}</span>
</label>

<input {id} use:typeWorkaround bind:value {required} bind:this={input} class='input input-bordered' />

However, when I do it like this, I see a bunch of Unused CSS selector messages from vite-plugin-svelte:

<label for={id}>
	<span>{label}</span>
</label>

<input {id} use:typeWorkaround bind:value {required} bind:this={input} />

<style>
	/* https://daisyui.com/components/input */
	label { @apply
		label;
	}
	label > span { @apply
		label-text;
	}
	input { @apply
		input
		input-bordered;
	}
</style>

[saadeghi]

I tried to reproduce this issue but everything seems to work fine:

https://stackblitz.com/edit/daisyui-sveltekit-69ehca?file=src/routes/index.svelte

[longrunningprocess]

and here's a repro: https://stackblitz.com/edit/daisyui-sveltekit-kwyhz6?file=src/routes/index.svelte with all of the "Unused" errors I mentioned initially.

[longrunningprocess]

I can create a new discussion if you like since I muddied the water on this one by forgetting why I need the preprocess.

[longrunningprocess]

I mentioned this required sveltekit setup to the Tailwind team: tailwindlabs/tailwindcss.com#1221

[saadeghi]

I see...
Let's see what's the issue here:
daisyUI has this selector: .label a:hover
and if we don't have a a inside .label it's up to the CSS processor that remove this line or keep it.
Packages like purgecss or uncss will remove this line if .label has no a in it but Tailwind CSS's JIT doesn't remove it.
I think it's because of compatibility reasons. If we have nested components, .label is one file and a is in another file, we wouldn't want that style to be removed just because the CSS preprocessor didn't find the exact hierarchy of styles in a file.

So, the CSS preprocessor is keeping .label a:hover style. then you use @apply label as a scoped style inside your Svelte component. what happens here is, Tailwind gives .label a:hover style to your component.
Your component checks the style and compares with its own markup. it finds label but can't find <a> inside it, so it warns you that you have unused scoped styles.

That's it. and I don't think there's a fix for this.

However, may I ask why are you scoping CSS?
Because the whole point of using a utility first CSS is avoiding scoped CSS so our class names will be reusable on all components.

[longrunningprocess]

wow, that's excellent research, thank you!

However, may I ask why are you scoping CSS?
Because the whole point of using a utility first CSS is avoiding scoped CSS so our class names will be reusable on all components.

Simply to keep the HTML as clean as possible honestly. You're already doing so much of that with your work in daisy but I had hoped I'd be able to keep everything in the style blocks. It doesn't have to be a big deal, I can simply run the tradeoffs by the team and see what they prefer. I'm going to recommend we put the classes in the HTML and just make it the very last attribute.