Make the global styles only warning configurable

[fehnomenal]

Describe the problem

I'm using unocss in the svelte scoped mode. In short it scans through the source, collects all tailwind-like classes it detects, (optionally combines them to one, during build or if forced) and outputs the rules as global styles (e.g. :global(.c-red) {...) by adding a <style> tag if necessary.
Also I'm using shadcn-svelte which has a lot of wrapper components without any html elements but defining classes (e.g. https://github.com/huntabyte/shadcn-svelte/blob/next-tailwind-3/sites/docs/src/lib/registry/new-york/ui/alert-dialog/alert-dialog-description.svelte). After preprocessing the component has some global styles defined and this triggers this plugin's check for scopable elements (this is one by adding *{} and checking if the svelte compiler complains because of that rule).

This combination results in my getting spammed with a wall of warnings directly after starting the dev server.

Repro: https://github.com/fehnomenal/repro-unocss-svelte-scoped

Describe the proposed solution

My ideal solution would be to totally silence the warning if there are really no scopable elements and only global selectors. But this info is currently not available AFAIK.

Alternatives considered

Just ignore the warnings, but it is easy to miss real warnings that indicate a problem. Either by just not reading them or configuring:

  compilerOptions: {
    warningFilter: (w) =>
      w.code !== 'css_unused_selector' || w.message.includes('No scopable elements found'),
  },

Importance

would make my life easier

[dominikg]

do you have a link to a repo demonstrating this?

could the global css be an import to (virtual?) css in the script block instead?

[fehnomenal]

I'll setup a repo later. But your idea to import a virtual CSS file is actually really nice. It would simplify the logic to generate the selectors by a lot.

[dominikg]

another thing that changed recently is that vite-plugin-svelte now scopes the css module to the js module so that the style isn't included in build output when the component is referenced in a barrel file but remains unused. But that only works for style blocks that do not contain unscoped :global selectors

[fehnomenal]

Here is the repro: https://github.com/fehnomenal/repro-unocss-svelte-scoped

another thing that changed recently is that vite-plugin-svelte now scopes the css module to the js module so that the style isn't included in build output when the component is referenced in a barrel file but remains unused. But that only works for style blocks that do not contain unscoped :global selectors

This is cool. The approach with importing a virtual css file would only work for the vite part of the unocss-scoped plugin as the preprocessor has no idea of a bundler and that would need a different but similar implementation. I will think about it a bit more.

[dominikg]

vite-plugin-svelte tags that message with a separate code

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/log.js

Line 216 in e687ccf

code: 'vite-plugin-svelte-css-no-scopable-elements',

so you can use that to ignore it specifically via onwarn.

is that good enough until unocss moves to a solution that doesn't involve style :global?

for that warning to not occur if all style rules were unscoped globals, it would have to be changed in svelte itself as that has logic to detect global styles (it currently does not have logic to detect if all rules are global though)