lightningcss ate my precision

[mrginglymus]

I have a line-height which I have defined as

line-height: calc(4 / 3);

sass (annoyingly) turns this to

line-height: 1.3333333333;

Lightningcss compiles this to

line-height: 1.33333;

With a font-size of 12px, chrome's dev-tools reports this as a line-height of 16px.

However, the computed layout reports an element height of 15.984px. This results in a 1px upshift of content meaning it appears uncentered.

Adding another two digits of precision fixes the issue, but ideally I would like some option to be able to specify the precision of floats.

See also #917

How it should look:

How it does look:

[mrginglymus]

On further inspection, it seems like sass ate the fractions, but did at least emit with sufficient precision. However, forcing sass to emit the raw calc is a mite annoying, and the underlying problem is that lightningcss over-zealously rounds.

[devongovett]

The current behavior matches how browsers serialize CSS numbers. See https://codepen.io/devongovett/pen/pvvyqKb

This is defined in the specification: https://drafts.csswg.org/cssom/#serializing-css-values

A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using "." to separate decimals (if any), rounding the value if necessary to not produce more than 6 decimals, preceded by "-" (U+002D) if it is negative.

[mrginglymus]

Thanks for the response. Chrome appears to be doing something strange with its rounding (or not rounding) then: https://codepen.io/billhp/pen/YPPWWYN

in chrome:

in firefox:

Would it be possible to ask lightningcss to emit warnings when it truncates fractions - e.g. something on the lines of

Lightningcss has truncated a fraction. This may cause unexpected rendering issues on some browsers; it may be better expressed as a fraction.

In my case the problem was sass eating the fractions (and emitting non-spec-compliant but working decimals), and also the difference in behaviour between browsers (I still can't tell which one is doing it Right ™️). Having lightningcss provide a safety net here would be very helpful.