Failed to format CSS file when calc and var is nested

Glitch Help
1

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

2

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
3

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.

4

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!

6

This seems to still be an issue.
I noticed that CodeMirror got updated recently, is it still the same version of prettier?

Is there a workaround, perhaps by adding prettierrc or specifiying newer version in project dependencies?

7

@tasha, why glitch don’t use CodeMirror with an option to use variety of themes, to be honest
the current theme and highlighting really suck.