[Feature request] CSS Nesting support

[woody-li]

https://www.w3.org/TR/css-nesting-1/ https://caniuse.com/css-nesting/ CSS Nesting has implemented, Chrome 112 and Safari 16.5 will support it. Does less has any implement schedule of it? An option or other settings (e.g. browserlist)?

[thecodechef]

@woody-li its Chrome 112 not Chrome 102 that will support CSS Nesting

[matthew-dean]

@woody-li The short answer is there hasn't been a long-term roadmap for Less in regards to CSS Nesting. In general, Less is in maintenance mode. The other tricky thing is that CSS Nesting is not a 1:1 map to Less / Sass nesting. Both Less and Sass basically append whatever string is after & to form a compound selector. CSS Nesting isn't like that. Each selector and combinator after & is a distinct match. In other words, consider this example:

.box {
  &-header {
    background: red;
  }
}

In Less / Sass, this will match an element like this:

<div class="box-header"></div>

However, with CSS Nesting, this will match an element like this:

<-header class="box"></-header>

Less could probably add a flag to prevent flattening 🤔 , hmm...

[SuperPat45]

Having an option to allow compiling LESS nesting to CSS standard compatible nesting (by rewriting only incompatibles nesting) would be awesome as soon as Firefox will implement it.