Support for recently added CSS functionality container-queries

[sneridagh]

As pointed out by @treponat, it seems support for @container queries should be implemented in less.

By tomorrow (12/12/2022) Firefox will release 108 with support for container queries, completing all the major browsers support for the feature.

Discussed in #3759

^{Originally posted by treponat November 3, 2022}
Recently some of the browser started to support a new feature that would allow to create responsive design based on the parent element rather than client's viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
It would be wonderful if LESS would also start to fully support this feature.
Currently you can use container functionality in .less files, but the hierarchical structure of css blocks is not working as expected for the container syntax.
for example

.widget.discoverresults, .widget.repositoriesresults {
        container-type: inline-size;
        @container (max-width: 350px) {           
                    .cite {
                        .wdr-authors {
                            display: none;
                         }
                }
         }
}
    

would produce this css blocks

.widget.discoverresults,
.widget.repositoriesresults {
  container-type: inline-size;
}
@container (max-width: 350px) {
  .cite .wdr-authors {
    display: none;
  }
}

instead of

.widget.discoverresults,
.widget.repositoriesresults {
	container-type: inline-size;
}

@container (max-width: 350px) {

	.widget.discoverresults,
	.widget.repositoriesresults {
		.cite .wdr-authors {
			display: none;
		}
	}
}

[iChenLei]

cc @matthew-dean

[levito]

I found a workaround with saving the selector to a variable using the plugin https://github.com/seven-phases-max/less-plugin-reflections as suggested here: #3053 (comment)

.container(@from, @rules) {
  .container(@from, @to: 0, @rules);
}
.container(@from, @to, @rules) {
  @selector: current-selector();

  .return(@selector) when (@from = 0) {
    @container (max-width: @to) {
      @{selector} {
        @rules();
      }
    }
  }
  .return(@selector) when (@to = 0) {
    @container (min-width: @from) {
      @{selector} {
        @rules();
      }
    }
  }
  .return(@selector) when (default()) {
    @container (min-width: @from) and (max-width: @to) {
      @{selector} {
        @rules();
      }
    }
  }
  .return(@selector);
}

Usage:

.deeply .nested .selector {
  .container(300px, {
    content: "container min width of 300px";
  }
  .container(0, 700px, {
    .going .deeper {
      content: "container max width of 700px";
    }
  }
}

[matthew-dean]

Oh I see, you're expecting @container to act like @media or @supports? That's reasonable.

[sneridagh]

@matthew-dean yeah, that's the point :) BTW, I forgot to mention that SCSS has already support for this behavior.

[rejhgadellaa]

Just ran into this issue. Is there any timeframe on how long this could take to land this in a release? I'm trying to decide if I should wait a few weeks or do everything the old fashioned way for now and then refactor in a couple of months or so?

[abhishek-kumar-91]

I want to work on this issue, please assign me.

[matthew-dean]

@abhishek-kumar-91 Go for it!

[matthew-dean]

@abhishek-kumar-91

I presume that what you'll want to do is extend from (or refactor) the Media tree type. Then you'll probably want to alter the media parser to generalize it for @container queries.

This is called within the atrule parser early, for @import, @plugin, and @media, as they have special handling rules, so I presume the line will end up looking like:

value = this['import']() || this.plugin() || this.mediaOrContainer();

And then, of course, writing css / less tests to verify input / output. Make sense?

[levito]

How are things going with this? When working on this, it would be awesome to also support container style queries, which I think should be pretty straightforward since it's syntactically very similar to named container queries.