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?

[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.