Reporting unused CSS

[MrAmericanMike]

Describe the bug

In combination with Tailwind and PostCSS vite-plugin-svelte is reporting unused CSS

The console output looks like this:

[vite-plugin-svelte] ___/src/routes/+page.svelte:29:0 Unused CSS selector ".button > :not([hidden]) ~ :not([hidden])"

I made a SvelteLab project to illustrate this issue. https://www.sveltelab.dev/2h5pdcohp85tvd4?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte

Project is using Skeleton Library. https://www.skeleton.dev/

When I create the button like this:

<button class="btn variant-filled-primary">BUTTON 1</button>

Everything seams fine, but as soon as I go this route:

<button class="button">BUTTON 2</button>

<style lang="postcss">
    .button{
        @apply btn variant-filled-primary
    }
</style>

Console shows the error mentioned above.

Sorry if this is not something for vite-plugin-svelte to fix, or maybe the error comes from somewhere else, but needed to start somewhere as I'm not sure.

Reproduction URL

https://www.sveltelab.dev/2h5pdcohp85tvd4?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte

Reproduction

No response

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (2) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.12 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/kit: ^1.20.4 => 1.25.1 
    svelte: ^4.0.5 => 4.2.1 
    vite: ^4.4.2 => 4.4.9

[dominikg]

vite-plugin-svelte is just the messenger here.

The message is correct, if the @apply generates that strange direct child selector it wont target anything in this case as there is no child.

please consult skeleton docs or their support channels. This is a bug tracker for bugs in vite-plugin-svelte only.