css scoping breaks specificity of css rules using >

[insidewhy]

Here's a minimal example:

<style>
  main button {
    background-color: red;
  }

  main div >button {
    background-color: blue;
  }
</style>
<main>
  <div>
    <button type="submit">Blue</button>
  </div>
</main>

The button has color red when it clearly should be blue.

Here's the generated css which inverts the specificity of these two rules:

main.svelte-5fpo0b.svelte-5fpo0b button.svelte-5fpo0b.svelte-5fpo0b {
    background-color: red;
}

main.svelte-5fpo0b div.svelte-5fpo0b>button.svelte-5fpo0b {
    background-color: blue;
}

[insidewhy]

Note if I change:

main div > button

to

main div button

This works around the bug. So it seems like svelte is failing to deal with > correctly.

[GrygrFlzr]

Note that 3.16.5 was the last version to handle this properly, and starting with 3.16.6+ it instead displays this bug, likely due to #4146 fixing #1277.

[Conduitry]

This is fixed in 3.25.1.