Use existing CSS package for calc(…) evaluation

Author: thecrypticace

packages/tailwindcss-language-service/package.json

@@ -13,6 +13,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@csstools/css-calc": "2.1.2",
     "@csstools/css-parser-algorithms": "3.0.4",
     "@csstools/css-tokenizer": "3.0.3",
     "@csstools/media-query-list-parser": "2.0.4",

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

@@ -1,56 +1,30 @@
-function parseLength(length: string): [number, string] | null {
-  let regex = /^(-?\d*\.?\d+)([a-z%]*)$/i
-  let match = length.match(regex)
-
-  if (!match) return null
-
-  let numberPart = parseFloat(match[1])
-  if (isNaN(numberPart)) return null
-
-  return [numberPart, match[2]]
-}
-
-function round(n: number, precision: number): number {
-  return Math.round(n * Math.pow(10, precision)) / Math.pow(10, precision)
-}
+import { stringify, tokenize } from '@csstools/css-tokenizer'
+import { isFunctionNode, parseComponentValue } from '@csstools/css-parser-algorithms'
+import { calcFromComponentValues } from '@csstools/css-calc'
 
 export function evaluateExpression(str: string): string | null {
-  // We're only interested simple calc expressions of the form
-  // A + B, A - B, A * B, A / B
+  let tokens = tokenize({ css: `calc(${str})` })
 
-  let parts = str.split(/\s+([+*/-])\s+/)
+  let components = parseComponentValue(tokens, {})
+  if (!components) return null
 
-  if (parts.length === 1) return null
-  if (parts.length !== 3) return null
+  let result = calcFromComponentValues([[components]], {
+    // Ensure evaluation of random() is deterministic
+    randomSeed: 1,
 
-  let a = parseLength(parts[0])
-  let b = parseLength(parts[2])
+    // Limit precision to keep values environment independent
+    precision: 4,
+  })
 
-  // Not parsable
-  if (!a || !b) {
-    return null
-  }
-
-  // Addition and subtraction require the same units
-  if ((parts[1] === '+' || parts[1] === '-') && a[1] !== b[1]) {
-    return null
-  }
-
-  // Multiplication and division require at least one unit to be empty
-  if ((parts[1] === '*' || parts[1] === '/') && a[1] !== '' && b[1] !== '') {
-    return null
-  }
+  // The result array is the same shape as the original so we're guaranteed to
+  // have an element here
+  let node = result[0][0]
 
-  switch (parts[1]) {
-    case '+':
-      return round(a[0] + b[0], 4).toString() + a[1]
-    case '*':
-      return round(a[0] * b[0], 4).toString() + a[1]
-    case '-':
-      return round(a[0] - b[0], 4).toString() + a[1]
-    case '/':
-      return round(a[0] / b[0], 4).toString() + a[1]
+  // If we have a top-level `calc(…)` node then the evaluation did not resolve
+  // to a single value and we consider it to be incomplete
+  if (isFunctionNode(node)) {
+    if (node.name[1] === 'calc(') return null
   }
 
-  return null
+  return stringify(...node.tokens())
 }