From ea3c5a3d0d2a07f5d2bf83ced0c04094910c75c0 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 14 Apr 2025 10:17:57 -0400
Subject: [PATCH 1/2] Add test for `classAttributes` matching variable names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This was 100% a bug that this behavior got introduced but at this point it’s shipped and people might rely on it / want the behavior. So I’m explicitly encoding this in a test so it doesn’t break later when the big parsing refactor lands.
---
 .../src/util/find.test.ts                     | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/packages/tailwindcss-language-service/src/util/find.test.ts b/packages/tailwindcss-language-service/src/util/find.test.ts
index 561f82e8..d9f156a6 100644
--- a/packages/tailwindcss-language-service/src/util/find.test.ts
+++ b/packages/tailwindcss-language-service/src/util/find.test.ts
@@ -682,3 +682,56 @@ test('classFunctions should only match in JS-like contexts', async ({ expect })
     },
   ])
 })
+
+test('classAttributes find class lists inside variables in JS(X)/TS(X)', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.html',
+    lang: 'javascript',
+    settings: {
+      tailwindCSS: {
+        classAttributes: ['className'],
+      },
+    },
+    content: js`
+      let className = {
+        a: "relative flex",
+        nested: {
+          b: "relative flex",
+        },
+        inFn: fn({
+          c: "relative flex",
+        })
+      }
+
+      let other = {
+        a: "relative flex",
+      }
+    `,
+  })
+
+  let classLists = await findClassListsInHtmlRange(file.state, file.doc, 'js')
+
+  expect(classLists).toEqual([
+    {
+      classList: 'relative flex',
+      range: {
+        start: { line: 1, character: 6 },
+        end: { line: 1, character: 19 },
+      },
+    },
+    {
+      classList: 'relative flex',
+      range: {
+        start: { line: 3, character: 8 },
+        end: { line: 3, character: 21 },
+      },
+    },
+    {
+      classList: 'relative flex',
+      range: {
+        start: { line: 6, character: 8 },
+        end: { line: 6, character: 21 },
+      },
+    },
+  ])
+})

From e97814b82450dd4a0d6adaa33dbea1a296282661 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 14 Apr 2025 11:10:29 -0400
Subject: [PATCH 2/2] Add tests

---
 .../src/util/find.test.ts                     | 58 ++++++++++++++++++-
 .../src/util/test-utils.ts                    |  1 +
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss-language-service/src/util/find.test.ts b/packages/tailwindcss-language-service/src/util/find.test.ts
index d9f156a6..839fb6d0 100644
--- a/packages/tailwindcss-language-service/src/util/find.test.ts
+++ b/packages/tailwindcss-language-service/src/util/find.test.ts
@@ -1,6 +1,6 @@
 import { test } from 'vitest'
 import { findClassListsInHtmlRange } from './find'
-import { js, html, createDocument } from './test-utils'
+import { js, html, pug, createDocument } from './test-utils'
 
 test('class regex works in astro', async ({ expect }) => {
   let file = createDocument({
@@ -735,3 +735,59 @@ test('classAttributes find class lists inside variables in JS(X)/TS(X)', async (
     },
   ])
 })
+
+test('classAttributes find class lists inside pug', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.pug',
+    lang: 'pug',
+    settings: {
+      tailwindCSS: {
+        classAttributes: ['className'],
+      },
+    },
+    content: pug`
+      div(classNAme="relative flex")
+    `,
+  })
+
+  let classLists = await findClassListsInHtmlRange(file.state, file.doc, 'js')
+
+  expect(classLists).toEqual([
+    {
+      classList: 'relative flex',
+      range: {
+        start: { line: 0, character: 15 },
+        end: { line: 0, character: 28 },
+      },
+    },
+  ])
+})
+
+test('classAttributes find class lists inside Vue bindings', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.pug',
+    lang: 'vue',
+    settings: {
+      tailwindCSS: {
+        classAttributes: ['class'],
+      },
+    },
+    content: html`
+      <template>
+        <div :class="{'relative flex': true}"></div>
+      </template>
+    `,
+  })
+
+  let classLists = await findClassListsInHtmlRange(file.state, file.doc, 'js')
+
+  expect(classLists).toEqual([
+    {
+      classList: 'relative flex',
+      range: {
+        start: { line: 1, character: 17 },
+        end: { line: 1, character: 30 },
+      },
+    },
+  ])
+})
diff --git a/packages/tailwindcss-language-service/src/util/test-utils.ts b/packages/tailwindcss-language-service/src/util/test-utils.ts
index 088dade5..ce66ecaf 100644
--- a/packages/tailwindcss-language-service/src/util/test-utils.ts
+++ b/packages/tailwindcss-language-service/src/util/test-utils.ts
@@ -9,6 +9,7 @@ export const ts = dedent
 export const tsx = dedent
 export const css = dedent
 export const html = dedent
+export const pug = dedent
 
 export function createDocument({
   name,