Svelte v5 (maybe v4 too?) incorrectly removes CSS selectors alleging they are unused

[webJose]

Describe the bug

I am working on a data view component, and some CSS style selectors are removed incorrectly when the style tag is processed.

This URL to the exact lines show SCSS lines that have been commented because, when uncommented, Svelte removes them. If you go down some 17 more lines, you'll find the equivalent written with :global() at the start and end selectors as this is the only way I have found to preserve them.

Reproduction

1. Clone this repo.
2. npm i.
3. npm run dev
4. Uncomment the commented CSS mentioned in the previous section and comment the workaround. Saving will make Svelte output the unused CSS selector warning.
5. See how row striping and row highlighting doesn't color pinned columns.

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.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 3.35 GB / 15.77 GB
  Binaries:
    Node: 20.6.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527

Severity

blocking an upgrade

[paoloricciuti]

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"

[webJose]

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?

[Conduitry]

Duplicate of #10143.

[paoloricciuti]

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.

[webJose]

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.

[paoloricciuti]

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>

[webJose]

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.

[paoloricciuti]

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?

[webJose]

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. 👍