How to disable unused style warning in svelte

Question

I have a CSS rule which I used for global style, the style worked but my terminal keep show me this warning, how can I disable it?

src/components/Navbar.svelte changed. rebuilding...
• server
src/routes/index.svelte
Module Warning (from ./node_modules/svelte-loader-hot/index.js):
Unused CSS selector "*" (22:2)
20: 
21: <style global>
22:   * {
      ^
23:     font-family: 'Poppins';
24:   }
• client
src/routes/index.svelte
Module Warning (from ./node_modules/svelte-loader-hot/index.js):
Unused CSS selector "*" (22:2)
20: 
21: <style global>
22:   * {
      ^
23:     font-family: 'Poppins';
24:   }
✔ service worker (73ms)

Answer 1

Interesting but I can't find anything about the <style global> in the official documentation. Where did you see that this syntax is supported?

To fix that you can use the :global(*) modifier instead of just the * selector or move all global styles into a separated global.css file (useful to declare styles for *, body, a, ...). You can find a basic svelte project architecture in the official template and there is a /src/public/global.css file.

Answer 2

In rollup.config.js

export default {
    plugins: [
         svelte({
            onwarn: (warning, handler) => {
                const { code, frame, filename } = warning
                if (code === "css-unused-selector" && filename == 'src/routes/index.svelte') {
                    return;
                }
                handler(warning)
            },

         }),
      ]
    }