Top-level selectors getting svelte-token appended twice

dnmurray commented 4 years ago

I just started playing with svelte and am trying to incorporate sass. I noticed my styling was broken and upon deeper inspection, I'm seeing that the svelte-token is being appended twice on any top-level selectors. e.g.

<style type="text/scss">
 main {
   margin: 8px;
 }

 .content {
   color: blue;
   .test {
     display: none;
   }
 }
</style>

emits

main.svelte-u2gzuo.svelte-u2gzuo{margin:8px}
.content.svelte-u2gzuo.svelte-u2gzuo{color:blue}
.content.svelte-u2gzuo .test.svelte-u2gzuo{display:none}

into bundle.css (wrapped to make it easier to read).

Any idea what's causing this?

TIA, Dave

LukasHechenberger commented 4 years ago

This is expected behavior, the CSS code is not broken. Works the same if not using SCSS:

Svelte REPL

Please confirm and close this issue.

dnmurray commented 4 years ago

Thanks. Not sure why it was broken earlier, but it's working now.

ls-age / svelte-preprocess-sass

Top-level selectors getting svelte-token appended twice #93