feat: classFunctions & classProperties should not duplicate matches

Author: Laurynas Grigutis

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

@@ -281,22 +281,6 @@ test('find class lists in nested fn calls', async ({ expect }) => {
         end: { line: 20, character: 24 },
       },
     },
-
-    // TODO: These duplicates are from matching nested clsx(…) and should be ignored
-    {
-      classList: 'fixed',
-      range: {
-        start: { line: 9, character: 5 },
-        end: { line: 9, character: 10 },
-      },
-    },
-    {
-      classList: 'absolute inset-0',
-      range: {
-        start: { line: 10, character: 5 },
-        end: { line: 10, character: 21 },
-      },
-    },
   ])
 })
 
@@ -510,6 +494,57 @@ test('classFunctions regexes only match on function names', async ({ expect }) =
   expect(classListsA).toEqual([])
 })
 
+test('classFunctions & classProperties should not duplicate matches', async ({ expect }) => {
+  let fileA = createDocument({
+    name: 'file.jsx',
+    lang: 'javascriptreact',
+    settings: {
+      tailwindCSS: {
+        classFunctions: ['cva', 'clsx'],
+      },
+    },
+    content: js`
+      const Component = ({ className }) => (
+        <div
+          className={clsx(
+            'relative flex',
+            'inset-0 md:h-[calc(100%-2rem)]',
+            clsx('rounded-none bg-blue-700', className),
+          )}
+        >
+          CONTENT
+        </div>
+      )
+    `,
+  })
+
+  let classListsA = await findClassListsInHtmlRange(fileA.state, fileA.doc, 'js')
+
+  expect(classListsA).toEqual([
+    {
+      classList: 'relative flex',
+      range: {
+        start: { line: 3, character: 7 },
+        end: { line: 3, character: 20 },
+      },
+    },
+    {
+      classList: 'inset-0 md:h-[calc(100%-2rem)]',
+      range: {
+        start: { line: 4, character: 7 },
+        end: { line: 4, character: 37 },
+      },
+    },
+    {
+      classList: 'rounded-none bg-blue-700',
+      range: {
+        start: { line: 5, character: 12 },
+        end: { line: 5, character: 36 },
+      },
+    },
+  ])
+})
+
 function createDocument({
   name,
   lang,

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

@@ -208,7 +208,8 @@ export async function findClassListsInHtmlRange(
     matches.push(...matchClassFunctions(text, settings.classFunctions))
   }
 
-  const result: DocumentClassList[] = []
+  const existingResultSet = new Set<string>()
+  const results: DocumentClassList[] = []
 
   matches.forEach((match) => {
     const subtext = text.substr(match.index + match[0].length - 1)
@@ -253,46 +254,53 @@ export async function findClassListsInHtmlRange(
       })
     }
 
-    result.push(
-      ...classLists
-        .map(({ value, offset }) => {
-          if (value.trim() === '') {
-            return null
-          }
+    classLists.forEach(({ value, offset }) => {
+      if (value.trim() === '') {
+        return null
+      }
 
-          const before = value.match(/^\s*/)
-          const beforeOffset = before === null ? 0 : before[0].length
-          const after = value.match(/\s*$/)
-          const afterOffset = after === null ? 0 : -after[0].length
-
-          const start = indexToPosition(
-            text,
-            match.index + match[0].length - 1 + offset + beforeOffset,
-          )
-          const end = indexToPosition(
-            text,
-            match.index + match[0].length - 1 + offset + value.length + afterOffset,
-          )
-
-          return {
-            classList: value.substr(beforeOffset, value.length + afterOffset),
-            range: {
-              start: {
-                line: (range?.start.line || 0) + start.line,
-                character: (end.line === 0 ? range?.start.character || 0 : 0) + start.character,
-              },
-              end: {
-                line: (range?.start.line || 0) + end.line,
-                character: (end.line === 0 ? range?.start.character || 0 : 0) + end.character,
-              },
-            },
-          }
-        })
-        .filter((x) => x !== null),
-    )
+      const before = value.match(/^\s*/)
+      const beforeOffset = before === null ? 0 : before[0].length
+      const after = value.match(/\s*$/)
+      const afterOffset = after === null ? 0 : -after[0].length
+
+      const start = indexToPosition(text, match.index + match[0].length - 1 + offset + beforeOffset)
+      const end = indexToPosition(
+        text,
+        match.index + match[0].length - 1 + offset + value.length + afterOffset,
+      )
+
+      const result: DocumentClassList = {
+        classList: value.substr(beforeOffset, value.length + afterOffset),
+        range: {
+          start: {
+            line: (range?.start.line || 0) + start.line,
+            character: (end.line === 0 ? range?.start.character || 0 : 0) + start.character,
+          },
+          end: {
+            line: (range?.start.line || 0) + end.line,
+            character: (end.line === 0 ? range?.start.character || 0 : 0) + end.character,
+          },
+        },
+      }
+
+      const resultKey = [
+        result.classList,
+        result.range.start.line,
+        result.range.start.character,
+        result.range.end.line,
+        result.range.end.character,
+      ].join(':')
+
+      // No need to add the result if it was already matched
+      if (!existingResultSet.has(resultKey)) {
+        existingResultSet.add(resultKey)
+        results.push(result)
+      }
+    })
   })
 
-  return result
+  return results
 }
 
 export async function findClassListsInRange(