This issue was raised on Cascade 5.

The current cascade-layers proposal offers several directions.

This also raises some question around ordering of @layer and @import rules. Currently:

• Layering is determined by source-order of @layer rules
• @import is required to come first in a document.

Using @layer

The most direct approach would be allowing a url() in place of a {…} code block in the @layer rule:

/* @layer <name>? url(<contents>) */
@layer reset url(reset.css);
@layer bootstrap url(bootstrap.css);

Using @import

It may also be possible to build on the existing @import syntax:

@import layer reset url(reset.css);
@import layer(reset) url(reset.css);

Other options?

Other proposals include creating a new at-rule, or allowing imports to be nested inside the block syntax:

/* new rule */
@layer-import reset url(reset.css);

/* nested imports */
@layer reset { 
  @import url(reset.css); 
}

/* etc… */