wip

Author: thecrypticace

packages/tailwindcss-language-service/src/util/comments.ts

@@ -1,14 +1,14 @@
+import { spliceChangesIntoString } from './splice-changes-into-string'
+
 export type Comment = { index: number; value: string }
 
 export function applyComments(str: string, comments: Comment[]): string {
-  let offset = 0
-
-  for (let comment of comments) {
-    let index = comment.index + offset
-    let commentStr = ` /* ${comment.value} */`
-    str = str.slice(0, index) + commentStr + str.slice(index)
-    offset += commentStr.length
-  }
-
-  return str
+  return spliceChangesIntoString(
+    str,
+    comments.map((c) => ({
+      start: c.index,
+      end: c.index,
+      replacement: ` /* ${c.value} */`,
+    })),
+  )
 }

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

@@ -4,6 +4,7 @@ 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, settings: TailwindCssSettings) {
   let comments: Comment[] = []
@@ -17,6 +18,9 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
       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
     })
 
@@ -38,6 +42,16 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
       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,
@@ -68,6 +82,25 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
       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,
@@ -76,7 +109,5 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
     return null
   })
 
-  comments.sort((a, b) => a.index - b.index)
-
   return applyComments(css, comments)
 }

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

@@ -65,10 +65,17 @@ test('Evaluating CSS calc expressions', () => {
   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('Inlicing calc expressions using the design system', () => {
-  let map = new Map<string, string>([['--spacing', '0.25rem']])
+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,
@@ -81,6 +88,8 @@ test('Inlicing calc expressions using the design system', () => {
     rootFontSize: 10,
   } as any
 
+  // Inlining calc expressions
+  // + pixel equivalents
   expect(addThemeValues('calc(var(--spacing) * 4)', state, settings)).toBe(
     'calc(var(--spacing) * 4) /* 1rem = 10px */',
   )
@@ -108,4 +117,9 @@ test('Inlicing calc expressions using the design system', () => {
   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 */',
+  )
 })