Can I keep "unused css selector"?

Question

I noticed that svelte will purge my css automatically, all "unused css selector" will get removed.

For example:

<p class="blue">This is a paragraph.</p>

<style>
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
</style>

The style for class 'red' will be removed. How can I keep the '.red' selector? I want to use it later at some point.

Answer 1

You probably want to wrap the selector in :global(...), like

:global(.red) {
    color: red;
}

This forces Svelte to keep the class around, and also makes it so the selector isn't scoped to that single component. This is usually what you want when Svelte is removing selectors that you want to keep.

Answer 2

You can also use global in the style tag, if you have svelte-preprocess installed (link):

<style global>
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
</style>