Add support for import at-rule layer functionality

[puckowski]

What:

Add support for @import layer functionality documented in https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Builds on top of #4337

@import url("theme.css") layer(theme);
@import url("features.css") layer(features) supports(display: grid);
@import url("responsive.css") layer(responsive) supports(display: flex) screen and (max-width: 768px);
@import url("print.css") layer(print) print;

The above syntax has widely available browser support according to MDN.

Why:

Supporting the additional @import CSS syntax may benefit Less users.

Checklist:

• Documentation
• Added/updated unit tests
• Code complete

I did not venture into .less imports using this syntax as existing import code makes a clear distinction between .css and .less and the two have significantly different behavior.

[luangong]

Hi @puckowski! Do you have updates on this? Thanks!

[puckowski]

@luangong Hello, this PR is currently awaiting peer review from another Less.js contributor before it can be merged.

@matthew-dean What do you think of this PR to enhance @layer capabilities?

[matthew-dean]

@puckowski Sorry for missing this. So this just adds support for layer() in the @import statement?

[puckowski]

Yes, this PR bolsters @import parsing capabilities with support for:

@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;

which are documented here: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

@matthew-dean

[matthew-dean]

Cool, thanks!

[jmpri3]

I did not venture into .less imports using this syntax as existing import code makes a clear distinction between .css and .less and the two have significantly different behavior.

Is there a ticket about this (I couldn't find one) or it's simply not planned?

[puckowski]

@jmpri3 I have made a note to take a look at expanding support of @import syntax to better handle .less files, but there is currently no open issue. I may file one this weekend.

Less 4.4.0 is now available which has improved support for @layer at https://www.npmjs.com/package/less/v/4.4.0

[jmpri3]

For now I'm successfully using the @layer directive for my needs. Thanks for all the hard work, @puckowski!