Container style queries unexpected space

[woody-li]

To reproduce:

https://lesscss.org/less-preview/#eyJjb2RlIjoiQGNvbnRhaW5lciBzdHlsZSgtLXRoZW1lOiBkYXJrKXtcbiAgLm1haW57XG4gICAgY29sb3I6IzAwMDtcbiAgfVxufVxuXG4iLCJhY3RpdmVWZXJzaW9uIjoiNC4yLjAiLCJtYXRoIjoicGFyZW5zLWRpdmlzaW9uIiwic3RyaWN0VW5pdHMiOmZhbHNlfQ==

@container style(--theme: dark){
  .main{
    color: #000;
  }
}

Current behavior: There's a space between "style" and the bracket.

@container style (--theme: dark)

Expected behavior: No space between "style" and the bracket.

@container style(--theme: dark)

Environment information:

• less version: 4.2.0

[haseeb196]

Maybe this is not a error the less code is correct but some text editors and Markdown renderers might automatically add a space after type and it does not affect the functionality of the code.

[woody-li]

@haseeb196 But it doesn't take effect in Chrome when contains a space. Seems the "style" is recognized as a function.

[matthew-dean]

Sorry what? AFAIK, @container [function] is not valid, unless you can point to where it is.

[woody-li]

@matthew-dean I don't ensure it's a function. But according to the specification, the style syntax: style( <style-query> ) looks like a function.

Only Chrome has implemented the container style query so far, and it cannot take effect when a space exists between style and bracket.

[matthew-dean]

@woody-li Ah, okay, your issue was written confusingly, because type( would be invalid. (I'm not sure why you didn't write style( in your example?) I see the style( reference now, my bad.

[woody-li]

Sorry for my mistake, it should be style. Thanks

[ghazanfarofficial01]

How can I contribute to this issue?

[BhushanNalawade]

How to contribute to this issue?

[rejhgadellaa]

Any news on this? Safari 18 now supports container style queries as well, so would be nice to have this fix land in prod. Thnx!

[rejhgadellaa]

FWIW, you can work around this issue by escaping the style() query:

@container ( ~"style(--theme: light)" )

For @ variables:

@container ( ~"style(--theme: @{theme})" )

(you need the extra ( ... ) around the style() query or less will complain about them missing)

[woody-li]

@matthew-dean The release PR has merged, could you help to release new version to npm.