[CSS] bug when handling var(foo)

[wangxd18]

Prettier 1.15.1
Playground link

--parser css

Input:

.a/root {
  transition: height var(transition-time)s;
}

Output:

.a/root {
  transition: height var(transition-time) s;
}

Note the extra space after var(transition-time).

[vjeux]

For context, @wangxd18 is a Facebook employee and it was found in the Facebook codebase.

[lydell]

The problematic thing here is that the example is invalid CSS.

• It should be var(--transition-time), not var(transition-time) (missing --).
• Putting a unit after var() is not valid (try it in a browser, it won't work) – it has to be part of the value itself, or added using for example calc(var(--foo) * 1s).

Why are you using invalid CSS?

[lydell]

See also: #4224 (duplicate?)

[wangxd18]

This might be a Facebook specific issue. FB has css preprocesser that will replace these vars before sending to browser.

What's the best way to handle this non-standard issue?

[vjeux]

@lydell I'm curious, since it's not valid CSS, would it make sense to keep it as it is written? This won't break anyone and help out Facebook. It also doesn't seem unreasonable to have it kept that way.

[lydell]

Yeah, I guess we could try to keep it as written. Just wanted to make sure this is something worth doing something about on Prettier's side first (it could have been a mistake).

(CSS is difficult since we support an arbitrary superset of the standard, which forces us to apply "garbage in, garbage out" instead of throwing parse errors sometimes, and it's not easy to to know what's garbage and what's not.)

[alexander-akait]

It is hard to fix it, logic around spaces based on prev, current and next types (i.e. function/number with unit/variable and etc), it is allow add spaces for math operators in Less and Sass and in calc in CSS, better avoid invalid CSS, it can lead to such consequences in many places, we can try to close this case, but then we can break the normal syntax