Treat astro code fences as JS

Author: thecrypticace

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

@@ -4,7 +4,7 @@ import {
   findClassNameAtPosition,
   findHelperFunctionsInDocument,
 } from './find'
-import { js, html, pug, createDocument, css } from './test-utils'
+import { js, html, pug, createDocument, css, astro } from './test-utils'
 import type { Range } from 'vscode-languageserver-textdocument'
 
 const range = (startLine: number, startCol: number, endLine: number, endCol: number): Range => ({
@@ -1044,3 +1044,40 @@ test('Can find helper functions in CSS', async ({ expect }) => {
     },
   ])
 })
+
+test('class functions work inside astro code fences', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.astro',
+    lang: 'astro',
+    settings: {
+      tailwindCSS: {
+        classFunctions: ['clsx'],
+      },
+    },
+    content: astro`
+      ---
+      let x = clsx("relative flex bg-red-500")
+      ---
+      <div class="relative flex bg-red-500"></div>
+    `,
+  })
+
+  let classLists = await findClassListsInHtmlRange(file.state, file.doc, 'html')
+
+  expect(classLists).toEqual([
+    {
+      classList: 'relative flex bg-red-500',
+      range: {
+        start: { line: 3, character: 12 },
+        end: { line: 3, character: 36 },
+      },
+    },
+    {
+      classList: 'relative flex bg-red-500',
+      range: {
+        start: { line: 1, character: 14 },
+        end: { line: 1, character: 38 },
+      },
+    },
+  ])
+})

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

@@ -1,6 +1,6 @@
 import type { Range } from 'vscode-languageserver'
 import type { TextDocument } from 'vscode-languageserver-textdocument'
-import { isVueDoc, isHtmlDoc, isSvelteDoc } from './html'
+import { isVueDoc, isHtmlDoc, isSvelteDoc, isAstroDoc } from './html'
 import type { State } from './state'
 import { indexToPosition } from './find'
 import { isJsDoc } from './js'
@@ -134,8 +134,21 @@ let vueStates = {
   },
 }
 
+let astroStates = {
+  ...states,
+  main: {
+    frontmatterBlockStart: { match: /^[\s\n]*---/, push: 'frontmatterScript' },
+    ...states.main,
+  },
+  frontmatterScript: {
+    frontmatterBlockEnd: { match: /\s*---(?=\s)/, pop: 1 },
+    ...text,
+  },
+}
+
 let defaultLexer = moo.states(states)
 let vueLexer = moo.states(vueStates)
+let astroLexer = moo.states(astroStates)
 
 let cache = new Cache<string, LanguageBoundary[] | null>({ max: 25, maxAge: 1000 })
 
@@ -161,7 +174,7 @@ export function getLanguageBoundaries(
 
   if (isVueDoc(doc)) {
     defaultType = 'none'
-  } else if (isHtmlDoc(state, doc) || isSvelteDoc(doc)) {
+  } else if (isHtmlDoc(state, doc) || isSvelteDoc(doc) || isAstroDoc(doc)) {
     defaultType = 'html'
   } else if (isJs) {
     defaultType = 'jsx'
@@ -180,6 +193,10 @@ export function getLanguageBoundaries(
     if (isVueDoc(doc)) {
       lexer = vueLexer
     }
+  } else if (defaultType === 'html') {
+    if (isAstroDoc(doc)) {
+      lexer = astroLexer
+    }
   }
 
   lexer.reset(text)
@@ -199,6 +216,11 @@ export function getLanguageBoundaries(
             boundaries[boundaries.length - 1].range.end = position
           }
           type = token.type.replace(/BlockStart$/, '')
+
+          if (lexer === astroLexer && type === 'frontmatter') {
+            type = 'js'
+          }
+
           boundaries.push({ type, range: { start: position, end: undefined } })
         } else if (token.type.endsWith('BlockEnd')) {
           let position = indexToPosition(text, offset)

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

@@ -20,6 +20,10 @@ export function isSvelteDoc(doc: TextDocument): boolean {
   return doc.languageId === 'svelte'
 }
 
+export function isAstroDoc(doc: TextDocument): boolean {
+  return doc.languageId === 'astro'
+}
+
 export function isHtmlContext(state: State, doc: TextDocument, position: Position): boolean {
   let str = doc.getText({
     start: { line: 0, character: 0 },

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

@@ -1,6 +1,6 @@
 import { test } from 'vitest'
 import { getLanguageBoundaries } from './getLanguageBoundaries'
-import { jsx, createDocument, html } from './test-utils'
+import { jsx, createDocument, html, astro } from './test-utils'
 
 test('regex literals are ignored when determining language boundaries', ({ expect }) => {
   let file = createDocument({
@@ -189,3 +189,67 @@ test('Vue files detect <template>, <script>, and <style> as separate boundaries'
     },
   ])
 })
+
+test('Astro files default to HTML', ({ expect }) => {
+  let file = createDocument({
+    name: 'file.astro',
+    lang: 'astro',
+    content: html`<div class="border-gray-200"></div>`,
+  })
+
+  let boundaries = getLanguageBoundaries(file.state, file.doc)
+
+  expect(boundaries).toEqual([
+    {
+      type: 'html',
+      range: {
+        start: { line: 0, character: 0 },
+        end: { line: 0, character: 35 },
+      },
+    },
+  ])
+})
+
+test('Astro files front matter is pared as JS', ({ expect }) => {
+  let file = createDocument({
+    name: 'file.astro',
+    lang: 'astro',
+    content: astro`
+      ---
+      console.log('test')
+      ---
+      <div class="border-gray-200"></div>
+    `,
+  })
+
+  let boundaries = getLanguageBoundaries(file.state, file.doc)
+
+  expect(boundaries).toEqual([
+    // This block just shouldn't be here
+    {
+      type: 'html',
+      range: {
+        start: { line: 0, character: 0 },
+        end: { line: 0, character: 0 },
+      },
+    },
+    {
+      type: 'js',
+      range: {
+        // This should probably be 0:3 instead of 0:0
+        start: { line: 0, character: 0 },
+
+        // This should probably be 2:0 instead of 1:19
+        end: { line: 1, character: 19 },
+      },
+    },
+    {
+      type: 'html',
+      range: {
+        // This should probably be 2:3 instead of 1:19
+        start: { line: 1, character: 19 },
+        end: { line: 3, character: 35 },
+      },
+    },
+  ])
+})

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

@@ -9,6 +9,7 @@ export const ts: Dedent = dedent
 export const tsx: Dedent = dedent
 export const css: Dedent = dedent
 export const html: Dedent = dedent
+export const astro: Dedent = dedent
 export const pug: Dedent = dedent
 
 export function createDocument({