Unused CSS class when using use:active action

[ritchieanesco]

I am trying to use the active action and i'm getting the following warning from svelte linter: Unused CSS selector "a.active"

Here's a basic example of what is happening.

<script lang="ts">
  import { active } from "tinro"
  interface Page {
    url: string
    label: string
  }
  export let pages: Page[]
</script>

<ul>
  {#each pages as { url, label }}
    <li><a href={url} use:active data-exact>{label}</a></li>
  {/each}
</ul>

<style>
  a {
    padding: 1rem 0;
    display: block;
    text-decoration: none;
  }
  a.active { /* svelte linter complains about this line */
    font-weight: 600;
  }
</style>

Thoughts on how I can resolve this?

[AlexxNB]

You must use global class. So add it in global.css or as :global(.active){...} in the component.

[AlexxNB]

In case you need isolated class in the component - use complex :global selector:

<style>
  ...
  a :global(.active) { 
    font-weight: 600;
  }
</style>

[ritchieanesco]

Thanks @AlexxNB thats exactly what I was looking for. Not sure why I couldn’t find it in the svelte docs