Hash for styles of my Svelte component is doubled #4374
Description
When I put my component to REPL I have doubled styles hash and browser could not apply styles when I write them in separate css file.
component code:
<style>
.wpk-player {
padding: 10px 15px;
}
.wpk-button svg {
fill-opacity: 0.8;
}
</style>
<div class="wpk-player">
<div class="wpk-player__buttons-1">
<button class="wpk-button">
<svg width="26" height="22" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg">
<path d="M17.245 1.849c0-.92-.628-1.298-1.397-.837L.57 10.162c-.768.463-.768 1.217 0 1.678l15.278 9.148c.769.46 1.397.085 1.397-.836V1.849zm4.756 19.152H25s.956.074.994-1.001c.006-.197-.027-17.645.001-17.996.085-1.054-.996-1-.996-1h-3.001s-1.123-.059-1.001 1c.009.078.011 17.506.004 18-.016 1.161 1 .997 1 .997z" fill="#fff"/>
</svg>
</button>
</div>
</div>
CSS output:
.wpk-player.svelte-4i1jb7.svelte-4i1jb7{padding:10px 15px}.wpk-button.svelte-4i1jb7 svg.svelte-4i1jb7{fill-opacity:0.8}
Also this component reproduce the same issue:
<div class="red">
<div></div>
</div>
<style>
.red {color:red}
.red div {color: green}
</style>
CSS outut:
.red.svelte-wvyici.svelte-wvyici{color:red}.red.svelte-wvyici div.svelte-wvyici{color:green}