Bump precision of evaluated calc expressions (#1449)

Fixes #1446

Author: thecrypticace

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -602,7 +602,7 @@ withFixture('v4/basic', (c) => {
           '```css',
           '.text-sm {',
           '  font-size: var(--text-sm) /* 0.875rem = 8.75px */;',
-          '  line-height: var(--tw-leading, var(--text-sm--line-height) /* calc(1.25 / 0.875) ≈ 1.4286 */);',
+          '  line-height: var(--tw-leading, var(--text-sm--line-height) /* calc(1.25 / 0.875) ≈ 1.428571 */);',
           '}',
           '```',
         ].join('\n'),

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', () => {

packages/vscode-tailwindcss/CHANGELOG.md

@@ -6,6 +6,7 @@
 - Suggest default variant values when they also support arbitrary values ([#1439](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1439))
 - Show color swatches for OKLCH colors with units in all positions ([#1442](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1442))
 - Fix incorrect diagnostic for `--theme(--some-var inline)` ([#1443](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1443))
+- Bump precision of evaluated calc expressions ([#1449](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1449))
 
 ## 0.14.26