Add tailwindCSS.classFunctions setting

packages/tailwindcss-language-service/scripts/build.mjs

@@ -27,14 +27,20 @@ let build = await esbuild.context({
       name: 'generate-types',
       async setup(build) {
         build.onEnd(async (result) => {
+          const distPath = path.resolve(__dirname, '../dist')
+
           // Call the tsc command to generate the types
           spawnSync(
             'tsc',
-            ['--emitDeclarationOnly', '--outDir', path.resolve(__dirname, '../dist')],
+            ['--emitDeclarationOnly', '--outDir', distPath],
             {
               stdio: 'inherit',
             },
           )
+          // Remove all .test.d.ts file definitions
+          spawnSync('find', [distPath, '-name', '*.test.d.ts', '-delete'], {
+            stdio: 'inherit',
+          })
         })
       },
     },

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

@@ -1,8 +1,8 @@
 export type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends (infer U)[]
-    ? U[]
-    : T[P] extends (...args: any) => any
-      ? T[P] | undefined
+  [P in keyof T]?: T[P] extends ((...args: any) => any) | ReadonlyArray<any> | Date
+    ? T[P]
+    : T[P] extends (infer U)[]
+      ? U[]
       : T[P] extends object
         ? DeepPartial<T[P]>
         : T[P]

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,90 @@ 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: {
+        classAttributes: ['className'],
+        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>
+      )
+      const OtherComponent = ({ 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 },
+      },
+    },
+    {
+      classList: 'relative flex',
+      range: {
+        start: { line: 14, character: 7 },
+        end: { line: 14, character: 20 },
+      },
+    },
+    {
+      classList: 'inset-0 md:h-[calc(100%-2rem)]',
+      range: {
+        start: { line: 15, character: 7 },
+        end: { line: 15, character: 37 },
+      },
+    },
+    {
+      classList: 'rounded-none bg-blue-700',
+      range: {
+        start: { line: 16, character: 12 },
+        end: { line: 16, character: 36 },
+      },
+    },
+  ])
+})
+
 function createDocument({
   name,
   lang,
@@ -530,7 +598,6 @@ function createDocument({
   let defaults = getDefaultTailwindSettings()
   let state = createState({
     editor: {
-      // @ts-ignore
       getConfiguration: async () => ({
         ...defaults,
         ...settings,

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

@@ -184,7 +184,7 @@ export function matchClassFunctions(text: string, fnNames: string[]): RegExpMatc
 
   // 3. Match against the function names in the document
   let re = /^(NAMES)$/
-  let isClassFn = new RegExp(re.source.replace('NAMES', names.join('|')), 'dgi')
+  let isClassFn = new RegExp(re.source.replace('NAMES', names.join('|')), 'i')
 
   let matches = foundFns.filter((fn) => isClassFn.test(fn[1]))
 
@@ -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(

packages/tailwindcss-language-service/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "include": ["src", "../../types"],
-  "exclude": ["src/**/*.test.ts"],
   "compilerOptions": {
     "module": "NodeNext",
     "lib": ["ES2022"],
@@ -15,6 +14,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "NodeNext",
+    "skipLibCheck": true,
     "jsx": "react",
     "esModuleInterop": true
   }