Bump precision of evaluated calc expressions

Author: thecrypticace

packages/tailwindcss-language-service/src/util/rewriting/calc.ts

@@ -13,7 +13,14 @@ export function evaluateExpression(str: string): string | null {
     randomSeed: 1,
 
     // Limit precision to keep values environment independent
-    precision: 4,
+    //
+    // This is mostly to limit displayed numbers to a reasonable length. Ideally
+    // we could perform any calcs with "infinite" precision and only then round
+    // numbers back for display purposes.
+    //
+    // This is short of the 7 digits that 32-bit floats provide. JS does store
+    // numbers as doubles so maybe this can be bumped to like 12–15?
+    precision: 6,
   })
 
   // The result array is the same shape as the original so we're guaranteed to

packages/tailwindcss-language-service/src/util/rewriting/index.test.ts

@@ -173,10 +173,18 @@ test('Evaluating CSS calc expressions', () => {
   )
 
   expect(replaceCssCalc('calc(1.25 / 0.875)', (node) => evaluateExpression(node.value))).toBe(
-    '1.4286',
+    '1.428571',
   )
 
   expect(replaceCssCalc('calc(1/4 * 100%)', (node) => evaluateExpression(node.value))).toBe('25%')
+
+  expect(replaceCssCalc('calc(0.12345rem * 0.5)', (node) => evaluateExpression(node.value))).toBe(
+    '0.061725rem',
+  )
+
+  expect(
+    replaceCssCalc('calc(0.12345789rem * 0.5)', (node) => evaluateExpression(node.value)),
+  ).toBe('0.061729rem')
 })
 
 test('Inlining calc expressions using the design system', () => {