Encapsulated CSS specificity bug

[Rich-Harris]

This is possibly a bit of an edge case, and it's something that can easily be worked around, but it's a bug nonetheless:

https://gist.github.com/giuseppeg/d37644d8d9d5004b15c5c48e66f632aa

<div>
  <div>
    <div>
      <span>
        Big red Comic Sans
      </span>
      <span class='foo'>
        Big red Comic Sans
      </span>
    </div>
  </div>
</div>

<style>
  div div div span {
    color: red;
    font-size: 2em;
    font-family: 'Comic Sans MS';
  }
  .foo {
    color: green;
  }
</style>

In this example, the second span should be green (because classes override element selectors), but because Svelte transforms it to...

<style>
  div.svelte-xyz div div span.svelte-xyz {
    color: red;
    font-size: 2em;
    font-family: 'Comic Sans MS';
  }
  .foo.svelte-xyz {
    color: green;
  }
</style>

...the first declaration defeats the second one.

One possible solution is to double up single selectors:

.foo.svelte-xyz.svelte-xyz {
  color: green;
}

See thysultan/stylis#101. Thanks to @giuseppeg for flagging this up

[arxpoetica]

Hey is this the same problem? https://svelte.technology/repl?version=2.15.2&gist=e2a175d700754f4464c6e853585f1101