Show theme values (and pixel/color equivalents) in hovers and complet…

…ions (#1092)

Fixes #1089

In v4 when we switched to using just `var(--some-theme-key)` in
declarations instead of including fallbacks this had the side-effect of
hiding pixel and color equivalents. This PR brings those back.

- [x] Evaluate simple calc expressions that are derived from the theme

packages/tailwindcss-language-server/package.json

@@ -20,7 +20,7 @@
     "create-notices-file": "node scripts/createNoticesFile.mjs",
     "prepublishOnly": "pnpm run build",
     "test": "vitest",
-    "pretest": "node tests/prepare.js"
+    "pretest": "node tests/prepare.mjs"
   },
   "bin": {
     "tailwindcss-language-server": "./bin/tailwindcss-language-server"

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

@@ -310,8 +310,8 @@ withFixture('v4/basic', (c) => {
     let result = await completion({ lang, text, position, settings })
     let textEdit = expect.objectContaining({ range: { start: position, end: position } })
 
-    expect(result.items.length).toBe(12492)
-    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(270)
+    expect(result.items.length).toBe(12319)
+    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(306)
     expect(result).toEqual({
       isIncomplete: false,
       items: expect.arrayContaining([
@@ -586,12 +586,24 @@ withFixture('v4/basic', (c) => {
 
     expect(resolved).toEqual({
       ...item,
-      detail:
-        'font-size: var(--font-size-sm, 0.875rem /* 8.75px */); line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));',
+      detail: [
+        'font-size: 0.875rem /* 8.75px */;',
+        'line-height: calc(1.25 / 0.875);',
+        'letter-spacing: undefined;',
+        'font-weight: undefined;',
+      ].join(' '),
       documentation: {
         kind: 'markdown',
-        value:
-          '```css\n.text-sm {\n  font-size: var(--font-size-sm, 0.875rem /* 8.75px */);\n  line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));\n}\n```',
+        value: [
+          '```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 */);',
+          '  letter-spacing: undefined;',
+          '  font-weight: undefined;',
+          '}',
+          '```',
+        ].join('\n'),
       },
     })
   })
@@ -613,7 +625,7 @@ withFixture('v4/basic', (c) => {
 
     expect(resolved).toEqual({
       ...item,
-      detail: 'background-color: var(--color-red-500, oklch(0.637 0.237 25.331));',
+      detail: 'background-color: oklch(0.637 0.237 25.331);',
       documentation: '#fb2c36',
     })
   })
@@ -642,19 +654,19 @@ withFixture('v4/workspaces', (c) => {
 
     expect(resolved[0]).toEqual({
       ...items[0],
-      detail: 'background-color: var(--color-beet, #8e3b46);',
+      detail: 'background-color: #8e3b46;',
       documentation: '#8e3b46',
     })
 
     expect(resolved[1]).toEqual({
       ...items[1],
-      detail: 'background-color: var(--color-orangepeel, #ff9f00);',
+      detail: 'background-color: #ff9f00;',
       documentation: '#ff9f00',
     })
 
     expect(resolved[2]).toEqual({
       ...items[2],
-      detail: 'background-color: var(--color-style-main, #8e3b46);',
+      detail: 'background-color: #8e3b46;',
       documentation: '#8e3b46',
     })
   })

packages/tailwindcss-language-server/tests/fixtures/v4/auto-content-split/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "tailwindcss": "^4.0.0-alpha.30",
-    "@tailwindcss/oxide": "^4.0.0-alpha.30"
+    "tailwindcss": "^4.0.0-beta.6",
+    "@tailwindcss/oxide": "^4.0.0-beta.6"
   }
 }