How to remove random svelte-preprocess classes from the DOM structure?

I recently decided to check Svelte.js Then I thought I will need a scss support.

So after installing "svelte-preprocess" I noticed that some strange class is added to EVERY DOM element inside my component. -> "svelte-1w7boou"

Does anyone know what is this and how to remove it? Tbh my research does not gave any results. I did not found anything inside the docs..

Structure is simple. Looks like this:

<script>

const teachers = [
    { id: 1, name: 'Anna', photo: 'img/teachers/anna.jpg' },
    { id: 2, name: 'Britney', photo: 'img/teachers/anna.jpg' }
];

</script>

   <div class="teacher_wrapper">
        {#each teachers as { name, photo}, i}

            <div class="teacher">
                <img class="img-responsive" src={photo} alt="">
                <span class="teacher_name">{name}</span>
            </div>

        {/each}
    </div>

<style lang="scss">

@import "../scss/style";
.teachers_section{
   padding: 50px 0;
}
.teacher_wrapper{
    display: grid;
    grid-template-columns: repeat(2, minmax(10px, 1fr));
    grid-gap: 10px;
    margin-top: 70px;
    @include MQ(M){
        grid-template-columns: repeat(3, minmax(10px, 1fr));
        grid-gap: 20px;
    }
    @include MQ(L){
        grid-template-columns: repeat(5, minmax(10px, 1fr));
        grid-gap: 20px;
    }
}
.teacher{
    position: relative;
    img{
        filter: grayscale(90);
        transition: all .3s linear;
        &:hover{
            filter: grayscale(0);
        }
    }
}

</style>