nesting selector doesn't work if it was wrapped by @container query

[JabSYsEmb]

Describe the bug

The nesting selector functionality appears to be non-operational when utilized within a container query.

Reproduction

repl: https://svelte.dev/repl/c467cfb38bc64e94b8fc28a7a1b41c12?version=4.2.9

<script>
  let name = "world";
</script>

<div>
  <h1 title="test">Hello {name}!</h1>
</div>

<style>
  div {
    container: resp / inline-size;
  }

  div { /* works fine */
    & h1[title] {
      color: red;
    }
  }

  @container resp (width < 300px) {
    h1[title] {
      color: blue !important;
    }


		/* doesn't work fine */ 
    /* div { 
			& h1[title] {
				color: red;
			}
		} */
  }
</style>

Logs

Error: end must be greater than start
    remove [email protected]:41732
    minify [email protected]:43196
    minify [email protected]:43194
    render [email protected]:43399
    render [email protected]:43396
    dom [email protected]:38151
    compile [email protected]:45626
    Immutable 2
        transform
        runHook
index-vVM6uc9D.js:64:4649
    jg Immutable

System Info

svelte.dev

Severity

annoyance

[Conduitry]

CSS nesting doesn't properly work yet as a whole - #8587. Your first example only appears to work in this case - the h1[title] is not properly scoped. The CSS in question compiles to div.svelte-18sf3ua{& h1[title] { color: red; }}, which will also incorrectly match h1[title] elements in child components that are inside this component's <div>.

[AlbertMarashi]

#9549 should fix this

[JabSYsEmb]

@AlbertMarashi , thanks for the info I will keep an eye on this fix.