Support class function hovers in Svelte and HTML <script> blocks (#1311)

When using the `tailwindCSS.classFunctions` setting we were handling
completions correctly inside `<script>` tags but not class hovers. This
is b/c the code path for the two is just… different.

It'll get unified eventually (soon hopefully) but until then this is the
bug fix to ensure that hovering inside something like `<script>let
classes = clsx("flex relative")</script>` works

Author: thecrypticace

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

@@ -1,5 +1,5 @@
 import { test } from 'vitest'
-import { findClassListsInHtmlRange } from './find'
+import { findClassListsInHtmlRange, findClassNameAtPosition } from './find'
 import { js, html, pug, createDocument } from './test-utils'
 
 test('class regex works in astro', async ({ expect }) => {
@@ -791,3 +791,87 @@ test('classAttributes find class lists inside Vue bindings', async ({ expect })
     },
   ])
 })
+
+test('Can find class name inside JS/TS functions in <script> tags (HTML)', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.html',
+    lang: 'html',
+    settings: {
+      tailwindCSS: {
+        classFunctions: ['clsx'],
+      },
+    },
+    content: html`
+      <script>
+        let classes = clsx('flex relative')
+      </script>
+    `,
+  })
+
+  let className = await findClassNameAtPosition(file.state, file.doc, {
+    line: 1,
+    character: 23,
+  })
+
+  expect(className).toEqual({
+    className: 'flex',
+    range: {
+      start: { line: 1, character: 22 },
+      end: { line: 1, character: 26 },
+    },
+    relativeRange: {
+      start: { line: 0, character: 0 },
+      end: { line: 0, character: 4 },
+    },
+    classList: {
+      classList: 'flex relative',
+      important: undefined,
+      range: {
+        start: { character: 22, line: 1 },
+        end: { character: 35, line: 1 },
+      },
+    },
+  })
+})
+
+test('Can find class name inside JS/TS functions in <script> tags (Svelte)', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.svelte',
+    lang: 'svelte',
+    settings: {
+      tailwindCSS: {
+        classFunctions: ['clsx'],
+      },
+    },
+    content: html`
+      <script>
+        let classes = clsx('flex relative')
+      </script>
+    `,
+  })
+
+  let className = await findClassNameAtPosition(file.state, file.doc, {
+    line: 1,
+    character: 23,
+  })
+
+  expect(className).toEqual({
+    className: 'flex',
+    range: {
+      start: { line: 1, character: 22 },
+      end: { line: 1, character: 26 },
+    },
+    relativeRange: {
+      start: { line: 0, character: 0 },
+      end: { line: 0, character: 4 },
+    },
+    classList: {
+      classList: 'flex relative',
+      important: undefined,
+      range: {
+        start: { character: 22, line: 1 },
+        end: { character: 35, line: 1 },
+      },
+    },
+  })
+})

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

@@ -5,7 +5,7 @@ import lineColumn from 'line-column'
 import { isCssContext, isCssDoc } from './css'
 import { isHtmlContext, isVueDoc } from './html'
 import { isWithinRange } from './isWithinRange'
-import { isJsxContext } from './js'
+import { isJsContext } from './js'
 import { dedupeByRange, flatten } from './array'
 import { getClassAttributeLexer, getComputedClassAttributeLexer } from './lexers'
 import { getLanguageBoundaries } from './getLanguageBoundaries'
@@ -526,7 +526,7 @@ export async function findClassNameAtPosition(
     classNames = await findClassNamesInRange(state, doc, searchRange, 'css')
   } else if (isHtmlContext(state, doc, position)) {
     classNames = await findClassNamesInRange(state, doc, searchRange, 'html')
-  } else if (isJsxContext(state, doc, position)) {
+  } else if (isJsContext(state, doc, position)) {
     classNames = await findClassNamesInRange(state, doc, searchRange, 'jsx')
   } else {
     classNames = await findClassNamesInRange(state, doc, searchRange)

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

@@ -228,6 +228,7 @@ export function createState(
   return {
     enabled: true,
     features: [],
+    blocklist: [],
     ...partial,
     editor: {
       get connection(): Connection {

packages/vscode-tailwindcss/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Prerelease
 
 - Warn when using a blocklisted class in v4 ([#1310](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1310))
+- Support class function hovers in Svelte and HTML `<script>` blocks ([#1311](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1311))
 
 # 0.14.15