Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested selectors in @container queries causing an unhandled exception #267

Open
shadow-identity opened this issue Jan 17, 2024 · 0 comments

Comments

@shadow-identity
Copy link

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant