Unused CSS selector for class prop component

[amirhossein-fzl]

Describe the bug

I defined a prop class in the Card component ...

<script lang="ts">
    import clsx from 'clsx';
    export let tag: string = 'div';
    let className: string = '';
    export { className as class };
</script>

<svelte:element this={tag} class={clsx('card', className)}>
    <slot />
</svelte:element>

<style lang="scss">
    .card {
        @apply ring-1 ring-slate-900/5 rounded-xl shadow-light;
    }

    :global(.dark) {
        .card {
            @apply bg-slate-800 shadow-dark ring-0;
        }
    }
</style>

And I used it in Navbar component like this:

<script lang="ts">
    import LanguageSwitcher from "../LanguageSwitcher.svelte";
    import ThemeSwitcher from "../ThemeSwitcher.svelte";
    import Card from "../Card.svelte";
</script>

<Card class="nav" tag="nav">
    <LanguageSwitcher />
    <ThemeSwitcher />
</Card>

<style lang="scss">
    .nav {
        @apply flex justify-between items-center px-4 py-2 rounded-2xl;
    }
</style>

And the error I get is:

Unused CSS selector ".nav"svelte(css-unused-selector)

I don't want to use :global ... please solve this problem... at least put an option for this in the settings so that the developer doesn't have this problem by activating it ...

Reproduction

Logs

No response

System Info

System:
    OS: Linux 6.2 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 767.75 MB / 7.64 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 19.9.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.6.5 - /usr/bin/npm
  Browsers:
    Brave Browser: 112.1.50.125
    Firefox: 112.0.2
  npmPackages:
    svelte: ^3.55.1 => 3.58.0

Severity

annoyance

[Prinzhorn]

https://github.com/search?q=repo%3Asveltejs%2Fsvelte+class+prop+css-unused-selector&type=issues

#7763
#2870

#8345

[amirhossein-fzl]

https://github.com/search?q=repo%3Asveltejs%2Fsvelte+class+prop+css-unused-selector&type=issues

#7763 #2870

#8345

@Prinzhorn

Not convincing ... Please write a comprehensive solution yourself ...