How will Less support CSS @layer?

[trusktr]

@layer is out in all browsers. Does Less have a plan on how to support it? With @import syntax?

[matthew-dean]

Just tested in Less 4.2.0:

@layer test {
  ul {
    li {
      foo: bar;
    }
  }
}

Outputs:

@layer test {
  ul li {
    foo: bar;
  }
}

Is there an issue?

[luangong]

The @layer rule works but the layer() function of the @import rule is not yet supported. For example, the following syntax doesn’t work:

@import "ng-zorro-antd/ng-zorro-antd.less" layer(antd);

[radektuma]

Hello, but code, for example:

@layer bootstrap { @import (inline) "../css/bootstrap.css"; }

doesn't work, too.

[puckowski]

Hello,

@layer at-rule support is being improved. #4337 has been merged but a release hasn't been published yet.

#4340 should add preliminary support for the layer() function.

[luangong]

Hello,

@layer at-rule support is being improved. #4337 has been merged but a release hasn't been published yet.

#4340 should add preliminary support for the layer() function.

@puckowski The following syntax works surprisingly well despite that support for @layer at-rule hasn’t been released yet and I don’t know why (I’m using less@4.2.2):

@layer antd {
  @import "ng-zorro-antd/ng-zorro-antd.less";
}

[radektuma]

Hello,
great idea! Specially for frameworks. My vision is this code (main less file including other less and css files):

@import (inline) "../css/bootstrap.css" layer(bootstrap);

@layer custom {
@import "base/base";
@import "base/font";
@import "base/table";
// etc.
}

So the output of generated CSS could be like this:

@layer bootstrap {
// Bootstrap styles
}

@layer custom {
// custom styles
}

[radektuma]

Hello,
less code @import (inline) "../css/bootstrap.css" layer(bootstrap); did end with an error.

So I changed this to:

@layer bootstrap {
@import (inline) "../css/bootstrap.css";
}

Thad didn't end with an error, but no one @layer construction did appear in the generated CSS code.

I use Node.js version 20.14.0, npm version 10.8.1, gulp version 4.0.2 and gulp-less 5.0.0.

[matthew-dean]

@radektuma

Ohhhh... yes this will not be supported yet:

https://github.com/import (inline) "../css/bootstrap.css" layer(bootstrap);

The other forms should be supported.

[radektuma]

Should be but doesn't. I tried to install module @csstools/postcss-cascade-layers what should have made it possible but it didn't help, too.

[matthew-dean]

@radektuma Do you have a Stackblitz or something that demonstrates this issue?

[radektuma]

I created project in Stakblitz and translated comments to English here: https://stackblitz.com/edit/stackblitz-starters-skfadu?file=.gitignore

[radektuma]

May be it is gulp-less problem. I'll will ask there.

[puckowski]

See #4337 and #4340 for recent development.

[puckowski]

Hello,

See #4337 and #4340 which are now available on npm in release https://www.npmjs.com/package/less/v/4.4.0

If you encounter any issues or limitations with @layer support in Less 4.4.0 please open an issue and we will take a look.