PSA: css selectors that target an imported `.svg` are considered `unused` and are pruned

Hi,

Thank you for this great plugin. It's nice to be able to import the raw svg xml and seamlessly pass attributes into it at the same time.

This video provided a nice overview and use case: LIVE Coding & Chill: 🖼 importing SVGs in SvelteKit 🌠

Here's what I ran into:

When using import for an .svg, css selectors, that target only that svg, are pruned because Svelte (or Vite or one of the css minifiers) thinks they're unused.

Example:

<script>
    import Logo from '$lib/logo.svg?component';
</script>

<Logo id="logo"/>

<style>
#logo {
    opacity: 0.5;
}
</style>

Result:

Console output: Unused CSS selector "#logo"
That #logo selector is removed from the css output.
Therefore the SVG does not receive opacity: 0.5

The same happens if you explicitly set the id= inside of the original .svg file, as opposed to setting it via an attribute on the sveltekit-svg created <Logo id="logo"/> tag.

I originally found this with a <style lang="sass"> block. I thought maybe this had something to do with using sass as a pre-processor. But it doesn't. At least not in this case.

But if you copy/paste the .svg code directly into the .svelte file, it works as expected:

<svg id="logo"/>

<style>
#logo {
    opacity: 0.5;
}
</style>

Result:

No warning in the console.
The #logo selector remains.
opacity: 0.5 is applied.

Workarounds:

The main workaround seems to be using: :global(#logo)

This forces Svelte to keep the #logo selector, regardless of its use/non-use. See: https://github.com/sveltejs/svelte/issues/1594#issuecomment-405269805
Someone else suggested using the svelte-preprocess plugin and set <style global>. But that seems less than ideal.
Another way of approaching it, would be to wrap the <Logo/> in an element with the ID and adjust your CSS accordingly:

<div id="logo">
    <Logo>
</div>

<style>
#logo svg {
    opacity: 0.5;
}
</style>

Here's some commentary about this exact issues: https://github.com/sveltejs/svelte/issues/5804

This seems to bite a lot of people. It's the second or third issue I've run into related to import (which seems to be the frequently preferred method of using assets) and then later having issues because some other plugin or generic code doesn't recognizing that dynamic import at compile-time.

I'm posted this not because it's a bug with sveltekit-svg, but more for:

General information/PSA.
Cross-referencing to others who have reported similar SvelteKit issues.
Maybe because it would be good to put something in the sveltekit-svg docs about this issue. I figure, because of the nature of this plugin, a disproportionate number of people might run into this. (But I could be wrong)

I have no grand suggestion or request, since this seems to have basically everything to do with how SvelteKit is setup and not your plugin :-)

I hope this helps.

Thanks.

poppa / sveltekit-svg