Warning with :global(*) in a component with no html elements

[Zachiah]

Describe the bug

If I have a component like this

<style>
  :global(*) {
    box-sizing: border-box;
  }
</style>

it gives this warning when running the dev server and going to localhost:3000

[vite-plugin-svelte] C:/Users/Justin/Documents/Zachiah/brandons-freelancer-projects/svelte-vite-bug/src/App.svelte:5:1 Unused CSS selector "*"

I think this is a bug here due to the fact that it doesn't show up in the svelte repl, or vs code, although I could be wrong, if so sorry about that.

Reproduction

You can clone this repo https://github.com/Zachiah/vite-plugin-svelte-warning-with-global-selector and just run the dev server and go to localhost:3000

Logs

vite v2.5.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 523ms.

11:19:44 AM [vite-plugin-svelte] C:/Users/Justin/Documents/Zachiah/brandons-freelancer-projects/svelte-vite-bug/src/App.svelte:5:1 Unused CSS selector "*"

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) m5-6Y54 CPU @ 1.10GHz
    Memory: 2.04 GB / 7.88 GB
  Binaries:
    Node: 14.17.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.19.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.84)
    Internet Explorer: 11.0.19041.906

Severity

annoyance

[bluwy]

You're right that it's a bug in vite-plugin-svelte, but for a different reason. vite-plugin-svelte actually implicitly adds * {} to the style tag so that CSS HMR doesn't affect JS HMR (IIRC). But this fails if there's no element to select in the markup.

I don't think it can be dynamically added depending on on the markup though, maybe we would have to suppress that warning by default then.

[dominikg]

it's complicated. This extra * {} is used to ensure that the svelte compiler adds the components css-hash class to every element of the rendered template. Which in turn means we can get more "css-only" updates when editing classes in template and style sections of a component.

The case of a "component with styles but without a template" wasn't considered when this was implemented. And i'm curious why you would use that. If there is nothing to scope to, you're better off using external css files, right?

To ignore this warning by default, we could add a filter to warnDev in log.ts. The extra selector isn't added on build and i don't want to filter build warnings.
But we should also add a FAQ entry encouraging people to only add scoped styles to style nodes in .svelte components as vite offers far superior tooling for global styles.
Or if you phrase it differently, warn about not abusing global in svelte component styles.

[bluwy]

Besides "global styles without a template", I actually hit this issue a while ago for one of our Svelte components that contains only subcomponents (no HTML elements). So this issue could happen in the wild unintentionally too.

EDIT: Actually my scenario is kinda a code smell too as it would also happen when the style tag has :global, which in most cases should be a scoped global instead.

[dominikg]

This warning is specifically only emitted when there is not a single element in the template where a scope can be applied.
As soon as there is a <slot> or any other non-child-component element it does not happen.

So i'd say the warning is a sign for code-smell in 99% of cases it happens. So instead of filtering it we could issue a seaprate code + message so that the user learns about the potential issue and for legitimate usecases they can decide to ignore it via custom onwarn