How to force add styles to svelte in scss

Question

I'm trying to add some CSS which will be detected as unused CSS.

There's a workaround that we can use :global(.class) {} to do it.

But this can only add styles. How can we add nested scss class instead?

I want to use something like

<style lang="scss">
    div:global(.marked) {
        a,
        a:visited {
            color: #3498db;
        }

        a:hover,
        a:focus,
        a:active {
            color: #2980b9;
        }

        pre {
            background-color: #fafafa;
            padding: 1rem;
            text-align: left;
        }
    }
</style>

or

<style lang="scss">
  div:global(.marked) {
    @import './theCss.scss';
  }
</style>

But seems Svelte will transform it into lots of pure CSS and turn out will be unused CSS again.

Unused CSS selector "div:global(.marked) a"svelte(css-unused-selector)
Unused CSS selector "div:global(.marked) a:visited"svelte(css-unused-selector)
Unused CSS selector "div:global(.marked) a:hover"svelte(css-unused-selector)
Unused CSS selector "div:global(.marked) a:focus"svelte(css-unused-selector)
Unused CSS selector "div:global(.marked) a:active"svelte(css-unused-selector)
Unused CSS selector "div:global(.marked) pre"svelte(css-unused-selector)

Is there any good solution for this?

Answer 1

With SCSS and Svelte can't you do it like so:

div {
  &:global(.marked){
    //put your style in here
  }
}

Because I believe you would still be able to access the main div style and add specific style for when it is marked.

Hope that helps