Missing support for @import urls with layer() functions.

[kwangure]

Describe the bug

CSS now has pretty wide support for @layer/layer(). However Svelte chokes on @import statements assigned to a particular layer.

@import url("bootstrap.css") layer(framework);

You can work around by putting the styles in a CSS file then import that file instead, but this only works if you do not preprocess your code to inline CSS brought in via @import or by using JS imports.

Reproduction

https://svelte.dev/repl/0bf3cf34781c4dfa8968cdba3fc1644d?version=3.59.1

Logs

No response

System Info

N/A

Severity

annoyance

[kwangure]

When I checked csstree it seemed to already be supported. I think Svelte just needs to updated now.

[benmccann]

It looks like @layer was added to Svelte in a one-line change here: https://github.com/sveltejs/svelte/pull/7514

Hopefully @import layer() wouldn't be much harder though I confess ignorance to this section of the code

[ngtr6788]

I noticed that css-tree itself doesn't quite lex/parse the @import rule properly yet, as per this issue: https://github.com/csstree/csstree/issues/259