@import rule with supports() and/or layer() parsed as Raw

[bartveneman]

CSSTree doesn't seem to Lex/parse layer() and supports() in @import rules.

Reproduction

Repro on StackBlitz

For each of these examples the node's prelude is type Raw:

@import "my.css" layer;
@import "my.css" layer(test);
@import "my.css" layer supports(display: grid);
@import "my.css" layer (min-width: 768px);
@import "my.css" layer(base) supports(accent-color: green) (min-width: 768px);

Validator results

I'm slightly confused because the validator does recognise even the last example with their correct token types. Link

I'd be happy to contribute a fix for this, but I got stuck on trying to add new logic to import.js, so I might need a bit of guidance.

[bartveneman]

It looks like @ngtr6788 already implemented a fork for this for Svelte over here: https://github.com/sveltejs/svelte/pull/9098/files#diff-ed2fad2b231aca18fc2b692be85898d0099355fc12ceca4bdd2990faf5159d94, although it doesn't seem merged yet.

[lahmatiy]

This was implemented and will be available in next major version soon.

I'm slightly confused because the validator does recognise even the last example with their correct token types

The validator works on tokens, not AST.

[bartveneman]

Thanks for the clarification!