Improve conflict diagnostics (#503)

packages/tailwindcss-language-service/src/diagnostics/getCssConflictDiagnostics.ts

@@ -20,7 +20,9 @@ export async function getCssConflictDiagnostics(
   const classLists = await findClassListsInDocument(state, document)
 
   classLists.forEach((classList) => {
-    const classNames = getClassNamesInClassList(classList)
+    const classNames = Array.isArray(classList)
+      ? classList.flatMap(getClassNamesInClassList)
+      : getClassNamesInClassList(classList)
 
     classNames.forEach((className, index) => {
       if (state.jit) {

packages/tailwindcss-language-service/src/diagnostics/getRecommendedVariantOrderDiagnostics.ts

@@ -22,7 +22,7 @@ export async function getRecommendedVariantOrderDiagnostics(
   let diagnostics: RecommendedVariantOrderDiagnostic[] = []
   const classLists = await findClassListsInDocument(state, document)
 
-  classLists.forEach((classList) => {
+  classLists.flat().forEach((classList) => {
     const classNames = getClassNamesInClassList(classList)
     classNames.forEach((className) => {
       let { rules } = jit.generateRules(state, [className.className])

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

@@ -20,7 +20,7 @@ export async function getDocumentColors(
   if (settings.tailwindCSS.colorDecorators === false) return colors
 
   let classLists = await findClassListsInDocument(state, document)
-  classLists.forEach((classList) => {
+  classLists.flat().forEach((classList) => {
     let classNames = getClassNamesInClassList(classList)
     classNames.forEach((className) => {
       let color = getColor(state, className.className)

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

@@ -77,7 +77,15 @@ export async function findClassNamesInRange(
   includeCustom: boolean = true
 ): Promise<DocumentClassName[]> {
   const classLists = await findClassListsInRange(state, doc, range, mode, includeCustom)
-  return flatten(classLists.map(getClassNamesInClassList))
+  return flatten(
+    classLists.flatMap((classList) => {
+      if (Array.isArray(classList)) {
+        return classList.map(getClassNamesInClassList)
+      } else {
+        return [getClassNamesInClassList(classList)]
+      }
+    })
+  )
 }
 
 export async function findClassNamesInDocument(
@@ -85,7 +93,15 @@ export async function findClassNamesInDocument(
   doc: TextDocument
 ): Promise<DocumentClassName[]> {
   const classLists = await findClassListsInDocument(state, doc)
-  return flatten(classLists.map(getClassNamesInClassList))
+  return flatten(
+    classLists.flatMap((classList) => {
+      if (Array.isArray(classList)) {
+        return classList.map(getClassNamesInClassList)
+      } else {
+        return [getClassNamesInClassList(classList)]
+      }
+    })
+  )
 }
 
 export function findClassListsInCssRange(doc: TextDocument, range?: Range): DocumentClassList[] {
@@ -182,7 +198,7 @@ export async function findClassListsInHtmlRange(
   state: State,
   doc: TextDocument,
   range?: Range
-): Promise<DocumentClassList[]> {
+): Promise<Array<DocumentClassList | DocumentClassList[]>> {
   const text = doc.getText(range)
 
   const matches = matchClassAttributes(
@@ -190,7 +206,7 @@ export async function findClassListsInHtmlRange(
     (await state.editor.getConfiguration(doc.uri)).tailwindCSS.classAttributes
   )
 
-  const result: DocumentClassList[] = []
+  const result: Array<DocumentClassList | DocumentClassList[]> = []
 
   matches.forEach((match) => {
     const subtext = text.substr(match.index + match[0].length - 1)
@@ -201,9 +217,11 @@ export async function findClassListsInHtmlRange(
         : getClassAttributeLexer()
     lexer.reset(subtext)
 
-    let classLists: { value: string; offset: number }[] = []
-    let token: moo.Token
+    let classLists: Array<{ value: string; offset: number } | { value: string; offset: number }[]> =
+      []
+    let rootClassList: { value: string; offset: number }[] = []
     let currentClassList: { value: string; offset: number }
+    let depth = 0
 
     try {
       for (let token of lexer) {
@@ -218,26 +236,69 @@ export async function findClassListsInHtmlRange(
           }
         } else {
           if (currentClassList) {
+            if (depth === 0) {
+              rootClassList.push({
+                value: currentClassList.value,
+                offset: currentClassList.offset,
+              })
+            } else {
               classLists.push({
                 value: currentClassList.value,
                 offset: currentClassList.offset,
               })
             }
+          }
           currentClassList = undefined
         }
+        if (token.type === 'lbrace') {
+          depth += 1
+        } else if (token.type === 'rbrace') {
+          depth -= 1
+        }
       }
     } catch (_) {}
 
     if (currentClassList) {
+      if (depth === 0) {
+        rootClassList.push({
+          value: currentClassList.value,
+          offset: currentClassList.offset,
+        })
+      } else {
         classLists.push({
           value: currentClassList.value,
           offset: currentClassList.offset,
         })
       }
+    }
+
+    classLists.push(rootClassList)
 
     result.push(
       ...classLists
-        .map(({ value, offset }) => {
+        .map((classList) => {
+          if (Array.isArray(classList)) {
+            return classList
+              .map((classList) => resolveClassList(classList, text, match, range))
+              .filter((x) => x !== null)
+          } else {
+            return resolveClassList(classList, text, match, range)
+          }
+        })
+        .filter((x) => x !== null)
+    )
+  })
+
+  return result
+}
+
+function resolveClassList(
+  classList: { value: string; offset: number },
+  text: string,
+  match: RegExpMatchArray,
+  range?: Range
+): DocumentClassList {
+  let { value, offset } = classList
   if (value.trim() === '') {
     return null
   }
@@ -247,10 +308,7 @@ export async function findClassListsInHtmlRange(
   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 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
@@ -269,12 +327,6 @@ export async function findClassListsInHtmlRange(
       },
     },
   }
-        })
-        .filter((x) => x !== null)
-    )
-  })
-
-  return result
 }
 
 export async function findClassListsInRange(
@@ -283,8 +335,8 @@ export async function findClassListsInRange(
   range?: Range,
   mode?: 'html' | 'css',
   includeCustom: boolean = true
-): Promise<DocumentClassList[]> {
-  let classLists: DocumentClassList[]
+): Promise<Array<DocumentClassList | DocumentClassList[]>> {
+  let classLists: Array<DocumentClassList | DocumentClassList[]>
   if (mode === 'css') {
     classLists = findClassListsInCssRange(doc, range)
   } else {
@@ -296,7 +348,7 @@ export async function findClassListsInRange(
 export async function findClassListsInDocument(
   state: State,
   doc: TextDocument
-): Promise<DocumentClassList[]> {
+): Promise<Array<DocumentClassList | DocumentClassList[]>> {
   if (isCssDoc(state, doc)) {
     return findClassListsInCssRange(doc)
   }