Parse Astro code fences as JS (#1386)

Fixes #1385

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

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

@@ -13,7 +13,7 @@ import type { TextDocument } from 'vscode-languageserver-textdocument'
 import dlv from 'dlv'
 import removeMeta from './util/removeMeta'
 import { formatColor, getColor, getColorFromValue } from './util/color'
-import { isHtmlContext, isHtmlDoc, isVueDoc } from './util/html'
+import { isHtmlContext, isHtmlDoc } from './util/html'
 import { isCssContext } from './util/css'
 import { findLast, matchClassAttributes, matchClassFunctions } from './util/find'
 import { stringifyConfigValue, stringifyCss } from './util/stringify'

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 })
 
@@ -157,13 +170,15 @@ export function getLanguageBoundaries(
 
   let isJs = isJsDoc(state, doc)
 
-  let defaultType = isVueDoc(doc)
-    ? 'none'
-    : isHtmlDoc(state, doc) || isSvelteDoc(doc)
-      ? 'html'
-      : isJs
-        ? 'jsx'
-        : null
+  let defaultType: string | null = null
+
+  if (isVueDoc(doc)) {
+    defaultType = 'none'
+  } else if (isHtmlDoc(state, doc) || isSvelteDoc(doc) || isAstroDoc(doc)) {
+    defaultType = 'html'
+  } else if (isJs) {
+    defaultType = 'jsx'
+  }
 
   if (defaultType === null) {
     cache.set(cacheKey, null)
@@ -172,7 +187,18 @@ export function getLanguageBoundaries(
 
   text = getTextWithoutComments(text, isJs ? 'js' : 'html')
 
-  let lexer = defaultType === 'none' ? vueLexer : defaultLexer
+  let lexer = defaultLexer
+
+  if (defaultType === 'none') {
+    if (isVueDoc(doc)) {
+      lexer = vueLexer
+    }
+  } else if (defaultType === 'html') {
+    if (isAstroDoc(doc)) {
+      lexer = astroLexer
+    }
+  }
+
   lexer.reset(text)
 
   let type = defaultType
@@ -190,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 parsed 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({

packages/vscode-tailwindcss/CHANGELOG.md

@@ -5,6 +5,7 @@
 - Highlight CSS variables correctly inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
 - Highlight comments inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
 - Highlight at-rules inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
+- Detect class functions and class attributes inside Astro code fences ([#1386](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1386))
 
 ## 0.14.22