Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Container style queries unexpected space #4235

Open
woody-li opened this issue Sep 26, 2023 · 10 comments
Open

Container style queries unexpected space #4235

woody-li opened this issue Sep 26, 2023 · 10 comments

Comments

@woody-li
Copy link

woody-li commented Sep 26, 2023

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
@woody-li woody-li added the bug label Sep 26, 2023
@haseeb196
Copy link

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
Copy link
Author

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

puckowski added a commit to puckowski/less.js that referenced this issue Oct 22, 2023
fixes issue less#4235 where container query style would have invalid space
after keyword
@matthew-dean
Copy link
Member

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

@woody-li
Copy link
Author

@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
Copy link
Member

matthew-dean commented Nov 13, 2023

@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
Copy link
Author

Sorry for my mistake, it should be style.
Thanks

@ghazanfarofficial01
Copy link

How can I contribute to this issue?

@BhushanNalawade
Copy link

How to contribute to this issue?

puckowski added a commit to puckowski/less.js that referenced this issue Dec 10, 2023
fixes issues less#4235 wgere container query style would have invalid
space after keyword
puckowski added a commit to puckowski/less.js that referenced this issue Dec 10, 2023
fixes issue less#4235 where container query style would have invalid space
after keyword
matthew-dean pushed a commit that referenced this issue Jan 18, 2024
* fix(issue:4211) parse entities for comma list

parse the correct entities for a comma separated list so that all URLs are
rewritten correctly.

* fix(issue #4235) style must not have space

fixes issue #4235 where container query style would have invalid space
after keyword
@rejhgadellaa
Copy link

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
Copy link

rejhgadellaa commented Sep 20, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants