[css-cascade-5]Clarify the behavior of a empty `@layer` before `@import`

[yisibl]

https://www.w3.org/TR/css-cascade-5/#at-import

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset and empty @layer definitions) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid.

Ignoring @layer in this case is well understood and uncontroversial:

@layer bar;
@import "foo.css";

However, the following case is not specified in the specification. The @import will be invalidated in the browser. The implementation in SWC is the opposite, and the CSS parser implementor may have misunderstood.

@layer {}
@import "foo.css";

I think the specification should add an example.

[Loirooriol]

See https://drafts.csswg.org/css-cascade-5/#layer-empty

The @layer rule can also be used to define new layers without assigning any style rules, by providing only the layer name:

@layer <layer-name>;

Such empty @layer rules are allowed before @import and @namespace rules (after the @charset rule, if any) as well as everywhere @layer block at-rules are allowed.

So I guess that the "empty @layer definitions" from your quote refers to @layer statement at-rules, not to @layer block at-rules.

[yisibl]

@Loirooriol Yes, indeed, it would be nice to have an example in the specification.

[fantasai]

@yisibl There already is an example in https://www.w3.org/TR/css-cascade-5/#layer-empty showing the validity of the first case.

Wrt the empty blocks, clarified that in https://github.com/w3c/csswg-drafts/commit/b14636c2b6ebea0fd1e9dae306351491f910203a Let me know if that works for you!

[yisibl]

@fantasai Thanks, this is very helpful and swc will track improvements in this issue https://github.com/swc-project/swc/issues/5643.