Add support for Astro’s template literal attributes (#1193)

Fixes #1114

Author: thecrypticace

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

@@ -0,0 +1,81 @@
+import type { State } from './state'
+import { test } from 'vitest'
+import { TextDocument } from 'vscode-languageserver-textdocument'
+import { findClassListsInHtmlRange } from './find'
+
+test('test', async ({ expect }) => {
+  let content = [
+    //
+    '<a class=`p-4 sm:p-2 ${active ? "underline": "line-through"}`>',
+    '  <slot />',
+    '</a>',
+  ].join('\n')
+
+  let doc = TextDocument.create('file://file.astro', 'astro', 1, content)
+  let state: State = {
+    blocklist: [],
+    editor: {
+      userLanguages: {},
+      getConfiguration: async () => ({
+        editor: {
+          tabSize: 1,
+        },
+        tailwindCSS: {
+          classAttributes: ['class'],
+          experimental: {
+            classRegex: [
+              ['cva\\(([^)]*)\\)', '["\'`]([^"\'`]*).*?["\'`]'],
+              ['cn\\(([^)]*)\\)', '["\'`]([^"\'`]*).*?["\'`]'],
+            ],
+          },
+        } as any,
+      }),
+    } as any,
+  } as any
+
+  let classLists = await findClassListsInHtmlRange(state, doc, 'html')
+
+  expect(classLists).toMatchInlineSnapshot(`
+    [
+      {
+        "classList": "p-4 sm:p-2 $",
+        "range": {
+          "end": {
+            "character": 22,
+            "line": 0,
+          },
+          "start": {
+            "character": 10,
+            "line": 0,
+          },
+        },
+      },
+      {
+        "classList": "underline",
+        "range": {
+          "end": {
+            "character": 42,
+            "line": 0,
+          },
+          "start": {
+            "character": 33,
+            "line": 0,
+          },
+        },
+      },
+      {
+        "classList": "line-through",
+        "range": {
+          "end": {
+            "character": 58,
+            "line": 0,
+          },
+          "start": {
+            "character": 46,
+            "line": 0,
+          },
+        },
+      },
+    ]
+  `)
+})

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

@@ -72,6 +72,7 @@ export const getClassAttributeLexer = lazy(() => {
         start1: { match: '"', push: 'doubleClassList' },
         start2: { match: "'", push: 'singleClassList' },
         start3: { match: '{', push: 'interpBrace' },
+        start4: { match: '`', push: 'tickClassList' },
       },
       ...classAttributeStates(),
     })

packages/vscode-tailwindcss/CHANGELOG.md

@@ -12,6 +12,7 @@
 - Assume 16px font size for `1rem` in media queries ([#1190](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1190))
 - Show warning when loading a config in v3 fails ([#1191](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1191))
 - Better handle really long class lists in attributes and custom regexes ([#1192](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1192))
+- Add support for Astro’s template literal attributes ([#1193](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1193))
 
 ## 0.14.3