Treat <script lang=“tsx”> as containing JSX (#1175)

Fixes #1046

Author: thecrypticace

packages/tailwindcss-language-server/tests/env/v4.test.js

@@ -1,7 +1,7 @@
 import { expect } from 'vitest'
 import { init } from '../common'
 import { HoverRequest } from 'vscode-languageserver'
-import { css, defineTest, js, json } from '../../src/testing'
+import { css, defineTest, html, js, json } from '../../src/testing'
 import dedent from 'dedent'
 import { CompletionRequest } from 'vscode-languageserver-protocol'
 
@@ -529,3 +529,48 @@ defineTest({
     })
   },
 })
+
+defineTest({
+  name: 'script + lang=tsx is treated as containing JSX',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ c: await init(root) }),
+  handle: async ({ c }) => {
+    let document = await c.openDocument({
+      lang: 'vue',
+      text: html`
+        <script lang="tsx">
+          function App() {
+            return <div class="bg-black" />
+          }
+        </script>
+      `,
+    })
+
+    let hover = await c.sendRequest(HoverRequest.type, {
+      textDocument: document,
+
+      //    return <div class="bg-black" />
+      //                       ^
+      position: { line: 2, character: 24 },
+    })
+
+    expect(hover).toEqual({
+      contents: {
+        language: 'css',
+        value: dedent`
+          .bg-black {
+            background-color: var(--color-black) /* #000 = #000000 */;
+          }
+        `,
+      },
+      range: {
+        start: { line: 2, character: 23 },
+        end: { line: 2, character: 31 },
+      },
+    })
+  },
+})

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

@@ -197,6 +197,14 @@ export function getLanguageBoundaries(
           boundaries.push({ type: defaultType, range: { start: position, end: undefined } })
         } else if (token.type === 'lang') {
           boundaries[boundaries.length - 1].type = token.text
+
+          if (token.text === 'tsx') {
+            boundaries[boundaries.length - 1].type = 'jsx'
+            boundaries[boundaries.length - 1].lang = 'tsx'
+          } else if (token.text === 'ts') {
+            boundaries[boundaries.length - 1].type = 'js'
+            boundaries[boundaries.length - 1].lang = 'ts'
+          }
         } else if (token.type === 'type' && htmlScriptTypes.includes(token.text)) {
           boundaries[boundaries.length - 1].type = 'html'
         } else if (token.type === 'type' && jsxScriptTypes.includes(token.text)) {

packages/vscode-tailwindcss/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Prerelease
 
 - Ensure hover information for `theme(…)` and other functions are shown when used in `@media` queries ([#1172](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1172))
+- Treat `<script lang=“tsx”>` as containing JSX ([#1175](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1175))
 
 ## 0.14.3