Make v4 theme key hovers nicer

Author: thecrypticace

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

@@ -399,7 +399,14 @@ withFixture('v4/basic', (c) => {
     expected: {
       contents: {
         kind: 'markdown',
-        value: ['```plaintext', '80rem /* 1280px */', '```'].join('\n'),
+        value: [
+          //
+          '```css',
+          '@theme {',
+          '  --breakpoint-xl: 80rem /* 1280px */;',
+          '}',
+          '```',
+        ].join('\n'),
       },
       range: {
         start: { line: 0, character: 23 },
@@ -582,7 +589,14 @@ defineTest({
     expect(hoverTheme).toEqual({
       contents: {
         kind: 'markdown',
-        value: ['```plaintext', '#000', '```'].join('\n'),
+        value: [
+          //
+          '```css',
+          '@theme {',
+          '  --color-black: #000;',
+          '}',
+          '```',
+        ].join('\n'),
       },
       range: {
         start: { line: 1, character: 15 },
@@ -593,7 +607,14 @@ defineTest({
     expect(hoverVar).toEqual({
       contents: {
         kind: 'markdown',
-        value: ['```plaintext', '#000', '```'].join('\n'),
+        value: [
+          //
+          '```css',
+          '@theme {',
+          '  --color-black: #000;',
+          '}',
+          '```',
+        ].join('\n'),
       },
       range: {
         start: { line: 4, character: 13 },

packages/tailwindcss-language-service/src/hoverProvider.ts

@@ -71,6 +71,17 @@ async function provideCssHelperHover(
 
     let lines = ['```plaintext', value, '```']
 
+    if (state.v4 && helperFn.path.startsWith('--')) {
+      lines = [
+        //
+        '```css',
+        '@theme {',
+        `  ${helperFn.path}: ${value};`,
+        '}',
+        '```',
+      ]
+    }
+
     return {
       contents: { kind: 'markdown', value: lines.join('\n') },
       range: helperFn.ranges.path,