less.js icon indicating copy to clipboard operation
less.js copied to clipboard

CSS scroll state container queries and improved function handling

Open puckowski opened this issue 8 months ago • 1 comments

What:

Add Less.js support for container queries to style descendants of containers based on their scroll state.

This PR also aims to improve function handling for @media and @container without adding new functions to the function registry as was done in https://github.com/less/less.js/pull/4311.

With this solution, future CSS functions should work without having to update Less code.

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.

Global support suggests 65.76% availability per https://caniuse.com/?search=scroll-state.

Checklist:

  • [ ] Documentation
  • [x] Added/updated unit tests
  • [x] Code complete

puckowski avatar Apr 26 '25 10:04 puckowski

Closed https://github.com/less/less.js/pull/4311 in favor of this PR.

This PR adopts the feedback provided for https://github.com/less/less.js/pull/4311 of not adding functions to the function registry while deferring the broader effort of unifying @container, @media, @support and potentially other at-rules.

puckowski avatar Apr 26 '25 10:04 puckowski

This PR also aims to improve function handling for @media and @container without adding new functions to the function registry as was done in https://github.com/less/less.js/pull/4311.

Glad to hear that, looking forward to it.

woody-li avatar Jul 24 '25 01:07 woody-li

Thanks @puckowski !

matthew-dean avatar Jul 24 '25 17:07 matthew-dean

I'll prepare a patch release PR tomorrow.

puckowski avatar Aug 26 '25 23:08 puckowski