Svelte v5 (maybe v4 too?) incorrectly removes CSS selectors alleging they are unused about svelte HOT 9 CLOSED

As a general rule, what I do to know it is incorrect removal, is to use Developer Tools to add the new style rule. I copy and paste the alleged unused CSS selector into Developer Tools. If it works, it means it was incorrectly removed.

You can't use this method to check if it was incorrectly removed because styles are scoped in svelte. This means that in a situation like this

<!-- Parent.svelte -->
<div>
    <Child />
</div>

<!-- Child.svelte -->
<span>text</span>

A selector like div > span will work in the browser but not in Parent.svelte. What I suspect is happening is that you are rendering a snippet inside the div so the nested style is not working but that to me seems expected. For the future try to create a minimal reproduction instead of posting the entire repo like this

Again this should be the intended behavior since the snippet is "kinda like a child component"

from svelte.

Ok ok. You're hinting something to me that is completely new to me. I don't have any recollection of reading it anywhere: Snippets inside a component are like separate components when it comes to style scoping? Did I understand it correctly?

from svelte.

Duplicate of #10143.

from svelte.

Ok ok. You're hinting something to me that is completely new to me. I don't have any recollection of reading it anywhere: Snippets inside a component are like separate components when it comes to style scoping? Did I understand it correctly?

It's not exactly the same...you can target values inside the snippet with the same style but if you render a snippet inside another element svelte will not follow through the snippet to see if inside the snippet there's a selector that will satisfy that css as I've shown in my repro.

from svelte.

Thanks a lot for the explanation. But this is a bug, correct? I was shocked because you used the adjective "expected". If it were expected, I would say it takes away the usefulness of snippets inside components.

from svelte.

Thanks a lot for the explanation. But this is a bug, correct? I was shocked because you used the adjective "expected". If it were expected, I would say it takes away the usefulness of snippets inside components.

Not exactly because you can adjust your css to target what's inside the snippet excluding the wrapper. As you can see in the duplicated issue posted by Conduitry there's a draft PR opened by Simon to try and fix this but it's not straightforward since static analysis can only get you far enough...for example what happens if you do this

{#snippet span(level=0)}
{#if level < 3}
<span>{@render span(level+1)}</span>
{/if}
{/snippet}

{@render span()}

<style>
span span span span {
    color: red;
}
</style>

from svelte.

I think I understand. My point to the detriment of snippets is that they were advertised as a way to reuse code. Sveltestrap has a very good example (or even exampleS, plural). I think my sample is also a very good one where I cannot divide styles. I depend on identifying the even and odd rows in the parent markup, and then render the snippet several times with the additional classes.

Anyway, as long as you, masters of the UI understand, I'll butt out. I'm a backend dev that only enjoys UI building in Svelte. I trust that you guys will do what's best. Cheers.

from svelte.

I think I understand. My point to the detriment of snippets is that they were advertised as a way to reuse code. Sveltestrap has a very good example (or even exampleS, plural). I think my sample is also a very good one where I cannot divide styles. I depend on identifying the even and odd rows in the parent markup, and then render the snippet several times with the additional classes.

Anyway, as long as you, masters of the UI understand, I'll butt out. I'm a backend dev that only enjoys UI building in Svelte. I trust that you guys will do what's best. Cheers.

Just pass odd or even to the snippet and apply a class to the snippet element based on that?

from svelte.

Good suggestion. I don't remember if that's all that I need, but certainly, you are correct that maybe I can overcome certain things with traditional programming. 👍

from svelte.