swc-project
Support mixed-unit calc in media queries
Describe the bug
Cannot resolve the calc() function in @media.
See also: https://chromium-review.googlesource.com/c/chromium/src/+/3683420
cc @g-plane
Input code
@media ( width > calc(5px + 1rem) ) {}
@media ( width < calc(Infinity * 1px) ) {}
@media ( max-width: calc(5px + 1rem) ) {}
@media ( width: calc(5px + 1rem) ) {}
Maybe we should also check @container:
@container ( width > calc(5px + 1rem) ) {}
@container ( width < calc(Infinity * 1px) ) {}
Playground link
https://swc-css.netlify.app/?code=eJxzyE1NyUxU0FAoz0wpyVCwU0hOzEnWMC2oUNBWMCxKzdVU0FSoruVyQFVmA1HmmZeWmZdZUqmgpWBYUAFVCgAXkxjz
Expected behavior
The calc() function can be parsed correctly.
Version
swc_common = "0.26" swc_css_ast = "0.104" swc_css_parser = "0.113"
SWC CSS parser doesn't support @container currently. It should be supported in the future, but this is out of this topic.
Yes, today, I will do it (it was already in my todo list on this week :smile: ), sorry for delay
UPDATED: also I think we need to add more test cases for @supports to check it too and also need to check env(...)
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
