How to use svelte :global() with sass/scss?

Question

I have a Svelte component with dynamic classes, and according to most GitHub issues, and StackOverflow answers, the best option to ensure that unused selectors are not removed from compilation unnecessarily, is to use the :global() function for the CSS element.

Unfortunately, it does not seem to work and the syntax gives me error for the nested classes. Following is my component:

<script lang="ts">
  export let color: "orange" | "blue" | "green" | "purple" = "blue";
  export let text: string = "";
  export let showDot: boolean = false;
  export let active: boolean = false;
</script>

<button class={color === "orange" + active ? " active" : ""}>
  <span>{text}</span>

  {#if showDot}
    <span class="dot">•</span>
  {/if}
</button>

<style lang="scss">
  button {
    width: 80px;
    color: #00000099;
    opacity: 80%;

    &.orange {
      .dot {
        color: #ff9100;
      }

      &.active {
        background-color: #ff9100;
        color: #fff;
      }
    }

    &.blue {
      .dot {
        color: #69bcff;
      }

      &.active {
        background-color: #69bcff;
        color: #fff;
      }
    }

    &.purple {
      .dot {
        color: #5c6bc0;
      }

      &.active {
        background-color: #5c6bc0;
        color: #fff;
      }
    }

    &.green {
      .dot {
        color: #66bb6a;
      }

      &.active {
        background-color: #66bb6a;
        color: #fff;
      }
    }
  }
</style>

Currently this code gives me the error (or warning rather):

Unused CSS selector "button.orange .dot" svelte(css-unused-selector)
Unused CSS selector "button.orange.active" svelte(css-unused-selector)
Unused CSS selector "button.blue .dot" svelte(css-unused-selector)
Unused CSS selector "button.blue.active" svelte(css-unused-selector)
Unused CSS selector "button.purple .dot" svelte(css-unused-selector)
Unused CSS selector "button.purple.active" svelte(css-unused-selector)
Unused CSS selector "button.green .dot" svelte(css-unused-selector)
Unused CSS selector "button.green.active" svelte(css-unused-selector)

I tried using :global(button) but it gives me the same error, and when using it over one of the nested classes (for example :global(&.orange)) or any of the variants, it gives me a syntax error.

How would I either:

a. Use :global() to ensure that the selectors are not removed?

OR

b. Find some other way to prevent selectors to be removed?

Answer 1

You can use like this

<style lang="scss">
  :global(button) {
    width: 80px;
    color: #00000099;
    opacity: 80%;

    & :global(.orange) {
      .dot {
        color: #ff9100;
      }

      & :global(.active) {
        background-color: #ff9100;
        color: #fff;
      }
    }
</style>

Answer 2

Seems like I have sort of found a workaround which does not involve using :global(). Since my main goal is to prevent CSS selectors as being marked unused, I instead used the "class directives" in svelte, and modified my button like so:

<button
  class:orange={color === "orange"}
  class:blue={color === "blue"}
  class:purple={color === "purple"}
  class:green={color === "green"}
  class:active
>
  <span>{text}</span>

  {#if showDot}
    <span class="dot">•</span>
  {/if}
</button>