Ensure classFunctions completions work inside <script> tags

Author: thecrypticace

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

@@ -1,6 +1,6 @@
-import { test, expect, describe } from 'vitest'
+import { test, expect } from 'vitest'
 import { withFixture } from '../common'
-import { css, defineTest } from '../../src/testing'
+import { css, defineTest, html, js } from '../../src/testing'
 import { createClient } from '../utils/client'
 
 function buildCompletion(c) {
@@ -738,3 +738,63 @@ defineTest({
     expect(completion?.items.length).toBe(12289)
   },
 })
+
+defineTest({
+  name: 'v4: Completions show inside class functions in JS/TS files',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      settings: {
+        tailwindCSS: {
+          classFunctions: ['clsx'],
+        },
+      },
+      lang: 'javascript',
+      text: js`
+        let classes = clsx('');
+      `,
+    })
+
+    // let classes = clsx('');
+    //                    ^
+    let completion = await document.completions({ line: 0, character: 20 })
+
+    expect(completion?.items.length).toBe(12289)
+  },
+})
+
+defineTest({
+  name: 'v4: Completions show inside class functions in JS/TS contexts',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      settings: {
+        tailwindCSS: {
+          classFunctions: ['clsx'],
+        },
+      },
+      lang: 'html',
+      text: html`
+        <script>
+          let classes = clsx('')
+        </script>
+      `,
+    })
+
+    //   let classes = clsx('')
+    //                      ^
+    let completion = await document.completions({ line: 1, character: 22 })
+
+    expect(completion?.items.length).toBe(12289)
+  },
+})

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

@@ -22,7 +22,7 @@ import isObject from './util/isObject'
 import { braceLevel, parenLevel } from './util/braceLevel'
 import * as emmetHelper from 'vscode-emmet-helper-bundled'
 import { isValidLocationForEmmetAbbreviation } from './util/isValidLocationForEmmetAbbreviation'
-import { isJsDoc, isJsxContext } from './util/js'
+import { isJsContext, isJsDoc, isJsxContext } from './util/js'
 import { naturalExpand } from './util/naturalExpand'
 import * as semver from './util/semver'
 import { getTextWithoutComments } from './util/doc'
@@ -986,7 +986,11 @@ async function provideClassNameCompletions(
     return provideAtApplyCompletions(state, document, position, context)
   }
 
-  if (isHtmlContext(state, document, position) || isJsxContext(state, document, position)) {
+  if (
+    isHtmlContext(state, document, position) ||
+    isJsContext(state, document, position) ||
+    isJsxContext(state, document, position)
+  ) {
     return provideClassAttributeCompletions(state, document, position, context)
   }
 

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

@@ -12,6 +12,19 @@ export function isJsDoc(state: State, doc: TextDocument): boolean {
   return [...jsLanguages, ...userJsLanguages].indexOf(doc.languageId) !== -1
 }
 
+export function isJsContext(state: State, doc: TextDocument, position: Position): boolean {
+  let str = doc.getText({
+    start: { line: 0, character: 0 },
+    end: position,
+  })
+
+  let boundaries = getLanguageBoundaries(state, doc, str)
+
+  return boundaries
+    ? ['js', 'ts', 'jsx', 'tsx'].includes(boundaries[boundaries.length - 1].type)
+    : false
+}
+
 export function isJsxContext(state: State, doc: TextDocument, position: Position): boolean {
   let str = doc.getText({
     start: { line: 0, character: 0 },