Add css var() hovers in v4

Add test

Author: thecrypticace

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

@@ -1,5 +1,7 @@
-import { test } from 'vitest'
+import { expect, test } from 'vitest'
 import { withFixture } from '../common'
+import { css, defineTest } from '../../src/testing'
+import { createClient } from '../utils/client'
 
 withFixture('basic', (c) => {
   async function testHover(
@@ -545,3 +547,58 @@ withFixture('v4/path-mappings', (c) => {
     },
   })
 })
+
+defineTest({
+  name: 'wip',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+
+  handle: async ({ client }) => {
+    let doc = await client.open({
+      lang: 'css',
+      text: css`
+        .foo {
+          color: theme(--color-black);
+        }
+        .bar {
+          color: var(--color-black);
+        }
+      `,
+    })
+
+    //   color: theme(--color-black);
+    //                  ^
+    let hoverTheme = await doc.hover({ line: 1, character: 18 })
+
+    //   color: var(--color-black);
+    //                ^
+    let hoverVar = await doc.hover({ line: 4, character: 16 })
+
+    expect(hoverTheme).toEqual({
+      contents: {
+        kind: 'markdown',
+        value: ['```plaintext', '#000', '```'].join('\n'),
+      },
+      range: {
+        start: { line: 1, character: 15 },
+        end: { line: 1, character: 28 },
+      },
+    })
+
+    expect(hoverVar).toEqual({
+      contents: {
+        kind: 'markdown',
+        value: ['```plaintext', '#000', '```'].join('\n'),
+      },
+      range: {
+        start: { line: 4, character: 13 },
+        end: { line: 4, character: 26 },
+      },
+    })
+  },
+})

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

@@ -53,6 +53,8 @@ async function provideCssHelperHover(
   for (let helperFn of helperFns) {
     if (!isWithinRange(position, helperFn.ranges.path)) continue
 
+    if (helperFn.helper === 'var' && !state.v4) continue
+
     let validated = validateConfigPath(
       state,
       helperFn.path,

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

@@ -405,7 +405,7 @@ export function findHelperFunctionsInRange(
 ): DocumentHelperFunction[] {
   const text = getTextWithoutComments(doc, 'css', range)
   let matches = findAll(
-    /(?<prefix>[\W])(?<helper>config|theme|--theme)(?<innerPrefix>\(\s*)(?<path>[^)]*?)\s*\)/g,
+    /(?<prefix>[\W])(?<helper>config|theme|--theme|var)(?<innerPrefix>\(\s*)(?<path>[^)]*?)\s*\)/g,
     text,
   )
 
@@ -450,10 +450,12 @@ export function findHelperFunctionsInRange(
       match.groups.helper.length +
       match.groups.innerPrefix.length
 
-    let helper: 'config' | 'theme' = 'config'
+    let helper: 'config' | 'theme' | 'var' = 'config'
 
     if (match.groups.helper === 'theme' || match.groups.helper === '--theme') {
       helper = 'theme'
+    } else if (match.groups.helper === 'var') {
+      helper = 'var'
     }
 
     return {

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

@@ -161,7 +161,7 @@ export type DocumentClassName = {
 }
 
 export type DocumentHelperFunction = {
-  helper: 'theme' | 'config'
+  helper: 'theme' | 'config' | 'var'
   path: string
   ranges: {
     full: Range