Nested selectors in @container queries causing an unhandled exception

[Pavel Nedrigailov]

Hi,

I noticed that when I try to nest selectors inside of a @container block, magicString.remove throws an exception:

@container main (width > 50em) {
    parent-tag {
        width: 0;
    
        & child-tag {
            width: 10px;
        }
    }
}

end must be greater than start
Plugin: vite-plugin-svelte
File: /Users/my-proj/frontend/src/routes/stations/[[id]]/+page.svelte
at MagicString.remove (file:///Users/my-proj/node_modules/.pnpm/magic-string@0.30.4/node_modules/magic-string/dist/magic-string.es.mjs:848:26)
at file:///Users/my-proj/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/compile/css/Stylesheet.js:271:11
at Array.forEach (<anonymous>)
    at Atrule.minify (file:///Users/my-proj/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/compile/css/Stylesheet.js:269:18)
    at file:///Users/my-proj/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/compile/css/Stylesheet.js:474:11
    at Array.forEach (<anonymous>)
        at Stylesheet.render (file:///Users/my-proj/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/compile/css/Stylesheet.js:471:17)
        at dom (file:///Users/my-proj/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/compile/render_dom/index.js:27:35)
        at compile (file:///Users/my-proj/node_modules/.pnpm/svelte@4.2.1/node_modules/svelte/src/compiler/compile/index.js:153:6)
        at compileSvelte (file:///Users/my-proj/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.6_svelte@4.2.1_vite@4.4.11/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:126:20)

In opposite, @media works without this problem.
if I change the CSS language to SCSS, everything works (but we use plain CSS with nesting).

My stack is:

• sveltekit 1.25.1 (svelte@4.2.1)(vite@4.4.11)) (upgrade to the v2 is my next task ;)
• magic-string: 0.30.4 is a sveltekit dependency.