CSS scoping inconsistency when the same element is present in both classed and non-classed parents

[longnguyen2004]

Describe the bug

Take this HTML for example:

<main>
  <section class="a">
    <ul>
      <li>a</li>
    </ul>
  </section>
  <section>
    <ul>
      <li>a</li>
    </ul>
  </section>
</main>

If I make a CSS ruleset that targets .a ul li, Svelte doesn't hash the first ul, which is understandable, since the class name and the hash of the parent section alone is enough to differentiate the ul, so I'd expect the transformed selector to be .a.svelte-xxxxxx ul li.svelte-xxxxxx. However, the actual transformed selector is .a.svelte-xxxxxx ul.svelte-xxxxxx li.svelte-xxxxxx, with a hashed ul, so it doesn't apply to the transformed HTML.

Reproduction

https://svelte.dev/repl/7a6866307f124c48ab9194c67082bf40?version=3.55.0

Logs

No response

System Info

Svelte v3.55.0 from svelte.dev REPL

Severity

annoyance

[longnguyen2004]

There are also other scoping inconsistencies that I noticed when comparing vite dev with vite build. Is the CSS handled differently between dev mode and build mode?

[longnguyen2004]

It's still a problem in v3.55.1. Can anyone look into this?

[Rich-Harris]

This is fixed in Svelte 5, so I'll close this