CSS scroll state container queries #4311
Conversation
* Add support for CSS container query scroll-state.
dosubot
bot
added
the
size:M
|
@puckowski What's the state of this? Where you going to refactor it? |
* Fixes issue with scroll-state function not being detected by regex.
|
Thank you for the ping. Pulled latest master to avoid CI issues and applied fixes (no more space between |
|
@puckowski I ultimately still don't agree with the code present here. I don't understand why Meaning, if Less was sticking an extra space after parens or something, then the at-rule was getting incorrectly parsed, but that has nothing to do with needing to add this very specific function name as a whitelisted case. That's adding net code to circumvent a bug (in one very very narrow case) instead of fixing the bug. What happens if it was any other function after If the problem is that functions aren't generally accepted in an at-rule, then that's a parsing bug. If the problem is that what's accepted after |
| import Variable from '../tree/variable'; | ||
| import Anonymous from '../tree/variable'; | ||
|
|
||
| const scrollStateExpression = function (args) { |
There was a problem hiding this comment.
There have been a few PRs like this (I forget from whom) that to me, seem far too specific and as a result, are probably a bit bloated. The syntax of container queries should be mostly generic and aligned with media queries. That is, they should accept any property or custom property declaration. Scroll state is not special and should not be treated specially. Otherwise there would end up being n files like this related to every CSS property. Less is not a linter, and does not check to see if properties are valid, only that syntax is valid.
There was a problem hiding this comment.
Further to that, there should, ideally, be only one AtRule type for @container, @media, and @supports (and maybe more). Something that acts as a generic with roughly the same structure that has the same bubbling behavior. They wouldn't necessarily be parsed the same, but they would be stored the same (with the individual options specifying which actual at-rule it represents).
What:
Add Less.js support for container queries to style descendants of containers based on their scroll state.
Why:
Container query scroll state support is available in Chrome 133 (https://developer.chrome.com/blog/chrome-133-beta). Getting ahead of broader support. Without this PR the Less.js output of scroll-state is incorrect.
Checklist: