Handle calc expressions and equivalents directly

Author: thecrypticace

packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts

@@ -1,20 +1,114 @@
-import type { State } from '../state'
+import type { State, TailwindCssSettings } from '../state'
 
-import { replaceCssVars } from './replacements'
+import { evaluateExpression } from './calc'
+import { replaceCssVars, replaceCssCalc, Range } from './replacements'
+import { addPixelEquivalentsToValue } from '../pixelEquivalents'
+import { applyComments, Comment } from '../comments'
+import { getEquivalentColor } from '../colorEquivalents'
 
-export function addThemeValues(css: string, state: State) {
+export function addThemeValues(css: string, state: State, settings: TailwindCssSettings) {
   if (!state.designSystem) return css
 
-  // Add fallbacks to variables with their theme values
-  // Ideally these would just be commentss like
-  // `var(--foo) /* 3rem = 48px */` or
-  // `calc(var(--spacing) * 5) /* 1.25rem = 20px */`
-  css = replaceCssVars(css, ({ name }) => {
+  let comments: Comment[] = []
+  let replaced: Range[] = []
+
+  css = replaceCssCalc(css, (expr) => {
+    let inlined = replaceCssVars(expr.value, ({ name }) => {
+      if (!name.startsWith('--')) return null
+
+      let value = state.designSystem.resolveThemeValue?.(name) ?? null
+      if (value === null) return null
+
+      // Inline CSS calc expressions in theme values
+      value = replaceCssCalc(value, (expr) => evaluateExpression(expr.value))
+
+      return value
+    })
+
+    let evaluated = evaluateExpression(inlined)
+
+    // No changes were made so we can just return the original expression
+    if (expr.value === evaluated) return null
+    if (!evaluated) return null
+
+    replaced.push(expr.range)
+
+    let px = addPixelEquivalentsToValue(evaluated, settings.rootFontSize, false)
+    if (px !== evaluated) {
+      comments.push({
+        index: expr.range.end + 1,
+        value: `${evaluated} = ${px}`,
+      })
+
+      return null
+    }
+
+    let color = getEquivalentColor(evaluated)
+    if (color !== evaluated) {
+      comments.push({
+        index: expr.range.end + 1,
+        value: `${evaluated} = ${color}`,
+      })
+
+      return null
+    }
+
+    comments.push({
+      index: expr.range.end + 1,
+      value: evaluated,
+    })
+
+    return null
+  })
+
+  css = replaceCssVars(css, ({ name, range }) => {
     if (!name.startsWith('--')) return null
 
+    for (let r of replaced) {
+      if (r.start <= range.start && r.end >= range.end) {
+        return null
+      }
+    }
+
     let value = state.designSystem.resolveThemeValue?.(name) ?? null
     if (value === null) return null
 
-    return `var(${name}, ${value})`
+    let px = addPixelEquivalentsToValue(value, settings.rootFontSize, false)
+    if (px !== value) {
+      comments.push({
+        index: range.end + 1,
+        value: `${value} = ${px}`,
+      })
+
+      return null
+    }
+
+    let color = getEquivalentColor(value)
+    if (color !== value) {
+      comments.push({
+        index: range.end + 1,
+        value: `${value} = ${color}`,
+      })
+
+      return null
+    }
+
+    // Inline CSS calc expressions in theme values
+    value = replaceCssCalc(value, (expr) => {
+      let evaluated = evaluateExpression(expr.value)
+      if (!evaluated) return null
+      if (evaluated === expr.value) return null
+
+      return `calc(${expr.value}) ≈ ${evaluated}`
+    })
+
+    comments.push({
+      index: range.end + 1,
+      value,
+    })
+
+    return null
   })
+
+  return applyComments(css, comments)
 }

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

@@ -0,0 +1,56 @@
+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)
+}
+
+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 parts = str.split(/\s+([+*/-])\s+/)
+
+  if (parts.length === 1) return null
+  if (parts.length !== 3) return null
+
+  let a = parseLength(parts[0])
+  let b = parseLength(parts[2])
+
+  // 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
+  }
+
+  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]
+  }
+
+  return null
+}

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

@@ -1,6 +1,11 @@
 import { expect, test } from 'vitest'
-import { replaceCssVarsWithFallbacks } from './index'
-import { State } from '../state'
+import {
+  addThemeValues,
+  evaluateExpression,
+  replaceCssCalc,
+  replaceCssVarsWithFallbacks,
+} from './index'
+import { State, TailwindCssSettings } from '../state'
 import { DesignSystem } from '../v4'
 
 test('replacing CSS variables with their fallbacks (when they have them)', () => {
@@ -52,3 +57,69 @@ test('replacing CSS variables with their fallbacks (when they have them)', () =>
   // Unknown theme keys without fallbacks are not replaced
   expect(replaceCssVarsWithFallbacks(state, 'var(--unknown)')).toBe('var(--unknown)')
 })
+
+test('Evaluating CSS calc expressions', () => {
+  expect(replaceCssCalc('calc(1px + 1px)', (node) => evaluateExpression(node.value))).toBe('2px')
+  expect(replaceCssCalc('calc(1px * 4)', (node) => evaluateExpression(node.value))).toBe('4px')
+  expect(replaceCssCalc('calc(1px / 4)', (node) => evaluateExpression(node.value))).toBe('0.25px')
+  expect(replaceCssCalc('calc(1rem + 1px)', (node) => evaluateExpression(node.value))).toBe(
+    'calc(1rem + 1px)',
+  )
+
+  expect(replaceCssCalc('calc(1.25 / 0.875)', (node) => evaluateExpression(node.value))).toBe(
+    '1.4286',
+  )
+})
+
+test('Inlining calc expressions using the design system', () => {
+  let map = new Map<string, string>([
+    ['--spacing', '0.25rem'],
+    ['--color-red-500', 'oklch(0.637 0.237 25.331)'],
+  ])
+
+  let state: State = {
+    enabled: true,
+    designSystem: {
+      resolveThemeValue: (name) => map.get(name) ?? null,
+    } as DesignSystem,
+  }
+
+  let settings: TailwindCssSettings = {
+    rootFontSize: 10,
+  } as any
+
+  // Inlining calc expressions
+  // + pixel equivalents
+  expect(addThemeValues('calc(var(--spacing) * 4)', state, settings)).toBe(
+    'calc(var(--spacing) * 4) /* 1rem = 10px */',
+  )
+
+  expect(addThemeValues('calc(var(--spacing) / 4)', state, settings)).toBe(
+    'calc(var(--spacing) / 4) /* 0.0625rem = 0.625px */',
+  )
+
+  expect(addThemeValues('calc(var(--spacing) * 1)', state, settings)).toBe(
+    'calc(var(--spacing) * 1) /* 0.25rem = 2.5px */',
+  )
+
+  expect(addThemeValues('calc(var(--spacing) * -1)', state, settings)).toBe(
+    'calc(var(--spacing) * -1) /* -0.25rem = -2.5px */',
+  )
+
+  expect(addThemeValues('calc(var(--spacing) + 1rem)', state, settings)).toBe(
+    'calc(var(--spacing) + 1rem) /* 1.25rem = 12.5px */',
+  )
+
+  expect(addThemeValues('calc(var(--spacing) - 1rem)', state, settings)).toBe(
+    'calc(var(--spacing) - 1rem) /* -0.75rem = -7.5px */',
+  )
+
+  expect(addThemeValues('calc(var(--spacing) + 1px)', state, settings)).toBe(
+    'calc(var(--spacing) /* 0.25rem = 2.5px */ + 1px)',
+  )
+
+  // Color equivalents
+  expect(addThemeValues('var(--color-red-500)', state, settings)).toBe(
+    'var(--color-red-500) /* oklch(0.637 0.237 25.331) = #fb2c36 */',
+  )
+})

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

@@ -1,3 +1,4 @@
 export * from './replacements'
 export * from './var-fallbacks'
+export * from './calc'
 export * from './add-theme-values'

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

@@ -68,3 +68,55 @@ export function replaceCssVars(str: string, replace: CssVarReplacer): string {
 
   return str
 }
+
+/**
+ * A calc(…) expression in a CSS value
+ */
+export interface CalcExpression {
+  kind: 'calc-expression'
+  range: Range
+  value: string
+}
+
+export type CssCalcReplacer = (node: CalcExpression) => string | null
+
+/**
+ * Replace all calc expression in a string using the replacer function
+ */
+export function replaceCssCalc(str: string, replace: CssCalcReplacer): string {
+  for (let i = 0; i < str.length; ++i) {
+    if (!str.startsWith('calc(', i)) continue
+
+    let depth = 0
+
+    for (let j = i + 5; i < str.length; ++j) {
+      if (str[j] === '(') {
+        depth++
+      } else if (str[j] === ')' && depth > 0) {
+        depth--
+      } else if (str[j] === ')' && depth === 0) {
+        let expr = str.slice(i + 5, j)
+
+        let replacement = replace({
+          kind: 'calc-expression',
+          value: expr,
+          range: {
+            start: i,
+            end: j,
+          },
+        })
+
+        if (replacement !== null) {
+          str = str.slice(0, i) + replacement + str.slice(j + 1)
+        }
+
+        // We don't want to skip past anything here because `replacement`
+        // might contain more var(…) calls in which case `i` will already
+        // be pointing at the right spot to start looking for them
+        break
+      }
+    }
+  }
+
+  return str
+}