Surprise "Unused selector" error when refactoring with snippets. #13593
Description
Describe the bug
If I've understood this correctly, then css combinating selectors cannot cross the snippet/render barrier. The error reported is "Unused selector", and the effect is that the selector is not emitted.
This is surprising (at least for new users) if all they did was a seemingly semantically preserving refactoring, i.e. pulling repeated html into a snippet.
The "skills-issue" can perhaps be ameliorated with a better error message? The selectors are not really "unused" in the regular meaning of that word, it's more a case of "the svelte compiler cannot follow the css context from the calling site when trying to figure out if a css 'sub'-selector is in use, even if the snippet is in the same file".
In our small group we've had a more than a couple of instances of "..but it's right there!", usually followed by someone (presumably trying to be helpful) saying "just use :global(..)..." -- often followed a few days later by ":global(..) really is waay global isn't it..?" I don't know if it would be possible to provide some direction in the error message, but it would probably be very helpful.
Functionality-wise, it would be nice to have an analyzer that could handle these cases, but barring that, it would be helpful to have a way to communicate that "definitely emit this rule, I can vouch for it being in use"...
Reproduction
When refactoring this code to add a section for darker colors:
<script>
const names = ['lightblue', 'lightgreen', 'lime', 'yellow', 'lightyellow']
</script>
<h1>colors</h1>
<div class="colors" style="display: grid; grid-template-columns: repeat(5, 1fr)">
{#each names as color}
<div style="background-color: {color};">
<p class="title">{color}</p>
</div>
{/each}
</div>
<style>
.colors > div {
height: 65px;
display: flex;
align-items: center;
justify-content: center;
}
</style>I naively added a snippet:
<script>
const dark = ['red', 'green', 'blue', 'violet', 'brown', 'orange', 'black', 'slate']
const light = ['lightblue', 'lightgreen', 'lime', 'yellow', 'lightyellow']
</script>
{#snippet color_slot(color)}
<div class="swatch" style="background-color: {color};">
<p class="title">{color}</p>
</div>
{/snippet}
<h1>light</h1>
<div class="colors light" style="display: grid; grid-template-columns: repeat(5, 1fr)">
{#each light as color}{@render color_slot(color)}{/each}
</div>
<h1>dark</h1>
<div class="colors dark" style="display: grid; grid-template-columns: repeat(5, 1fr)">
{#each dark as color}{@render color_slot(color)}{/each}
</div>
<style>
.swatch {border: 4px dotted rebeccapurple}
.colors {
.swatch {
height: 65px;
display: flex;
align-items: center;
justify-content: center;
}
}
.dark .swatch { color: white; }
.light .swatch { color: black; }
</style>All the .swatch classes, except the first one, are now listed as "Unused".
Logs
The css output from the repl:
.swatch.svelte-1emmr9o {border: 4px dotted rebeccapurple}
/* (empty) .colors {
.swatch {
height: 65px;
display: flex;
align-items: center;
justify-content: center;
}
}*/
/* (unused) .dark .swatch {color: white}*/
/* (unused) .light .swatch {color: black}*/
### System Info
```shell
repl
Severity
annoyance