Unused import warning when module used inside event and animate directives.

[nassredean]

Hi there! Thanks for working on this plugin, I find it very useful! I found a small bug. When importing a module and using it inside a directive in a component, the import statement is greyed out and we get an "unused import warning":

Here is the relavent code

<script>
  import { quintOut } from 'svelte/easing';
  import { fly } from 'svelte/transition';
  import { flip } from 'svelte/animate';
</script>

<div>
    {#each items.filter((item) => item.id === active) as item (item.id)}
      <img src={item.url}
           data-carousel-index={item.id}
           alt={`carousel-image-${item.id}`}
           on:click|stopPropagation|preventDefault={handleClick}
           on:mousemove={updateCursor}
           on:mouseenter={updateCursor}
           out:fly="{{
 x: -window.innerWidth * easeDirection, opacity: 1, duration: 600, easing: quintOut,
}}"
           in:fly="{{
 x: window.innerWidth * easeDirection, opacity: 1, duration: 600, easing: quintOut,
}}"
           animate:flip
      >
    {/each}
</div>

You can see int the editor it is greyed out:

Though it is being used here:

[tomblachut]

Hi! Yes, please refer to #11. Basically every reference used in HTML attribute name so far is treated as plain text.

[nassredean]

Sorry for opening this I didn't see that issue! Thanks again!