fix(issue#4242): add support for layer at-rule

[puckowski]

What:

Fix for issue #4242 that builds upon #4333 to add support for @layer at-rule.

Why:

The @layer at-rule has 94.47% (https://caniuse.com/mdn-css_at-rules_layer) browser support can support for the at-rule can benefit Less users.

Checklist:

• Documentation
• Added/updated unit tests
• Code complete

[matthew-dean]

LGTM!

[luangong]

Hi! Does it support the following syntax?

@import "..." layer(...);

See @import - CSS | MDN.

[puckowski]

Merging to avoid re-review and to keep future review scope small.

I have code for a separate PR to add support for:

@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;

[puckowski]

Created a PR #4340 for supporting the following syntax:

@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;

[matthew-dean]

@puckowski Hey, I figured out today you missed part of the @layer syntax, and it's currently causing a parsing error. Just wondered if you wanted to take a look.

You can do:

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

See: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

[puckowski]

@matthew-dean #4351 with #4349 should resolve that issue pending a release to npm (4.4.1).

This less:

@layer framework.layout {
    p {
        margin-block: 1rem;
    }
}

becomes this CSS:

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

on latest master.

[matthew-dean]

@puckowski Oh! My bad. I guess I missed publishing. Done.

[puckowski]

Thank you for publishing @matthew-dean I did a quick test of 4.4.1 from a fresh install and it seems resolve the above @layer syntax issue.