Failed to format CSS file when calc and var is nested

When I try to format CSS which has var in calc,
I get the error message,
“We can’t format this file yet because there’s a syntax error”.

I’ve tried in three cases.

width: var(–paper-width); // OK :slightly_smiling_face:
width: calc(100px - 10px); // OK :slightly_smiling_face:
width: calc(var(–paper-width) - 10px); // NG :cry:

Putting extra space after calc and var seem to work for the formatter,
but it is invalid CSS and it does not work in Chrome.

width: calc (var (–paper-width) - 10px); // formatted but invalid :cry:

Any idea? THX

https://twitter.com/TakashiSasaki

Hi @TakashiSasaki,

Thanks for pointing this out! Our Format This File feature relies on the prettierrc tool.

I’m not sure if that forced space is intended, but here is their documentation that explains some of the rules it sticks to.

Also, here is a link to the options available when using prettierrc.

2 Likes

Thank you for reading my report and posting a reply.
I will try some options of Prettier code formatter :running_man:

(updated)
I confirmed that prettier.io playground (Prettier v1.19.1)
works well for nested calc and var.
Prettier in Glitch may not have the latest version.

Thanks for letting us know!

It looks like the glitch editor is currently using prettier v1.18.2, but we will be updating it soon!