Skip to content
New issue

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

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

Already on GitHub? # to your account

fix(issue:3766) add support for container queries #1

Merged
merged 1 commit into from
Jul 21, 2023

Conversation

puckowski
Copy link
Owner

@puckowski puckowski commented Jul 20, 2023

What:

This pull request resolves issue 3766 by adding support for CSS Container Queries (https://www.w3.org/TR/css-contain-3/).

Why:

Users of Less.js may wish to use newer features of CSS supported by newer versions of most browsers.

Checklist:

  • Documentation
  • Added/updated unit tests
  • Code complete

Performance:

I have found performance is roughly the same, fluctuating slightly between runs of the benchmark based on whatever the host is doing.

There are a couple of quick checks added for at rules, and if the checks pass a small amount of additional code is run relative to the default branch of execution. In all, performance should be level or only slightly slower when evaluating many at rules.

Pull request branch:

----------------------
Parsing
----------------------
Min. Time: 6 ms
Max. Time: 10 ms
Total Average Time: 8 ms (12369 KB/s)
+/- 44%

----------------------
Evaluation
----------------------
Min. Time: 16 ms
Max. Time: 37 ms
Total Average Time: 19 ms (5057 KB/s)
+/- 108%

----------------------
Render Time
----------------------
Min. Time: 23 ms
Max. Time: 45 ms
Total Average Time: 26 ms (3589 KB/s)
+/- 81%

master branch:

----------------------
Parsing
----------------------
Min. Time: 7 ms
Max. Time: 9 ms
Total Average Time: 8 ms (12309 KB/s)
+/- 33%

----------------------
Evaluation
----------------------
Min. Time: 16 ms
Max. Time: 36 ms
Total Average Time: 19 ms (5026 KB/s)
+/- 102%

----------------------
Render Time
----------------------
Min. Time: 23 ms
Max. Time: 43 ms
Total Average Time: 27 ms (3569 KB/s)
+/- 72%

Tests:

I evaluated the CSS Container Query specification add added appropriate tests, which are passing and have been manually reviewed. All the original tests pass.

- Test Sync _main/import: OK

All Passed 213 run
- Test Sync _main/plugin: OK

All Passed 214 run
- Test Sync math/strict/css: OK

All Passed 215 run

Bundle size:

Less.js 4.1.3 Official minified: 146,335 bytes
Less.js 4.1.3 Pull Request minified: 149,014 bytes
Delta: 2,679 bytes

Lines of code delta: 521 added (including tests)

Behavior of media at-rule with invalid query in parens:

Query in parens syntax comes from CSS Container Query specification, but I do not believe media at rules support them. I searched online and did some tests in a CodePen.

Both master and the pull request branch result in the following when media at rule tries to use query in parens:

ParseError: Missing closing ')'

Extensibility:

The pull request lays the groundwork for adding scope at rules with minimal additional effort.

* Add support for CSS Container Queries
* Add tests for CSS Container Queries
@puckowski puckowski force-pushed the master_container_queries branch from b649e5c to 856ca74 Compare July 21, 2023 20:08
@puckowski puckowski merged commit bcf6f8e into master Jul 21, 2023
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support for recently added CSS functionality container-queries
1 participant