Media query with calc in does not compile

[Kl4rry]

Description
When placing a calc inside of a media query you get a compiler error.

To Reproduce
This repl contains an example of the bug.
https://svelte.dev/repl/d3b8fb7d74d540b69b990f34105b9b22?version=3.31.2

This results in compiler error.
@media screen and (min-width: calc(100px - 10px)) { h1 { color: green; } }

Intended behavior
This works with normal css so it should produce valid css instead of throwing an error

System:
OS: Windows 10 10.0.18363
CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
Memory: 7.15 GB / 15.94 GB
Binaries:
Node: 14.8.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 87.0.4280.141
Edge: Spartan (44.18362.449.0)
Internet Explorer: 11.0.18362.1
npmPackages:
rollup: ^2.3.4 => 2.36.1
svelte: ^3.31.2 => 3.31.2

[Conduitry]

I think this unfortunately will involve updating the version of css-tree that we're using. We're pinned to an old alpha from 2017 because later versions aren't very treeshakable. It's been a while since I've checked on that project to see whether they still have the treeshakability problems or even to see whether it's still maintained.

[dreitzner]

@Conduitry: it is still maintained (last npm update 2 months ago)

• src\compiler\parse\read\style.ts
• linked to pin css-tree at 1.0.0-alpha16 #370

[ludofischer]

I think https://github.com/thysultan/stylis might be a better fit, emotion and styled components in React use it for CSS in JS. A sophisticated parser like CSSTree seems a bit too much for the use inside the Svelte compiler (the AST is even being traversed as if it was JavaScript).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.