consolidate conflict diagnostics and update quick fixes

Author: bradlc

src/lsp/providers/codeActionProvider/index.ts

@@ -11,7 +11,7 @@ import { isWithinRange } from '../../util/isWithinRange'
 import { getClassNameParts } from '../../util/getClassNameAtPosition'
 const dlv = require('dlv')
 import dset from 'dset'
-import { removeRangeFromString } from '../../util/removeRangeFromString'
+import { removeRangesFromString } from '../../util/removeRangesFromString'
 import detectIndent from 'detect-indent'
 import { cssObjToAst } from '../../util/cssObjToAst'
 import isObject from '../../../util/isObject'
@@ -26,6 +26,7 @@ import {
   UtilityConflictsDiagnostic,
 } from '../diagnostics/types'
 import { flatten, dedupeBy } from '../../../util/array'
+import { joinWithAnd } from '../../util/joinWithAnd'
 
 async function getDiagnosticsFromCodeActionParams(
   state: State,
@@ -174,35 +175,23 @@ async function provideUtilityConflictsCodeActions(
 ): Promise<CodeAction[]> {
   return [
     {
-      title: `Delete '${diagnostic.className.className}'`,
-      kind: CodeActionKind.QuickFix,
-      diagnostics: [diagnostic],
-      edit: {
-        changes: {
-          [params.textDocument.uri]: [
-            {
-              range: diagnostic.className.classList.range,
-              newText: removeRangeFromString(
-                diagnostic.className.classList.classList,
-                diagnostic.className.relativeRange
-              ),
-            },
-          ],
-        },
-      },
-    },
-    {
-      title: `Delete '${diagnostic.otherClassName.className}'`,
+      title: `Delete ${joinWithAnd(
+        diagnostic.otherClassNames.map(
+          (otherClassName) => `'${otherClassName.className}'`
+        )
+      )}`,
       kind: CodeActionKind.QuickFix,
       diagnostics: [diagnostic],
       edit: {
         changes: {
           [params.textDocument.uri]: [
             {
               range: diagnostic.className.classList.range,
-              newText: removeRangeFromString(
+              newText: removeRangesFromString(
                 diagnostic.className.classList.classList,
-                diagnostic.otherClassName.relativeRange
+                diagnostic.otherClassNames.map(
+                  (otherClassName) => otherClassName.relativeRange
+                )
               ),
             },
           ],
@@ -323,7 +312,7 @@ async function provideInvalidApplyCodeActions(
               ? [
                   {
                     range: diagnostic.className.classList.range,
-                    newText: removeRangeFromString(
+                    newText: removeRangesFromString(
                       diagnostic.className.classList.classList,
                       diagnostic.className.relativeRange
                     ),

src/lsp/providers/diagnostics/diagnosticsProvider.ts

@@ -29,6 +29,7 @@ import {
   InvalidTailwindDirectiveDiagnostic,
   AugmentedDiagnostic,
 } from './types'
+import { joinWithAnd } from '../../util/joinWithAnd'
 
 function getInvalidApplyDiagnostics(
   state: State,
@@ -104,45 +105,58 @@ function getUtilityConflictDiagnostics(
     const classNames = getClassNamesInClassList(classList)
 
     classNames.forEach((className, index) => {
+      let decls = getClassNameDecls(state, className.className)
+      if (!decls) return
+
+      let properties = Object.keys(decls)
+      let meta = getClassNameMeta(state, className.className)
+
       let otherClassNames = classNames.filter((_className, i) => i !== index)
-      otherClassNames.forEach((otherClassName) => {
-        let decls = getClassNameDecls(state, className.className)
-        if (!decls) return
 
+      let conflictingClassNames = otherClassNames.filter((otherClassName) => {
         let otherDecls = getClassNameDecls(state, otherClassName.className)
-        if (!otherDecls) return
+        if (!otherDecls) return false
 
-        let meta = getClassNameMeta(state, className.className)
         let otherMeta = getClassNameMeta(state, otherClassName.className)
 
-        if (
-          equal(Object.keys(decls), Object.keys(otherDecls)) &&
+        return (
+          equal(properties, Object.keys(otherDecls)) &&
           !Array.isArray(meta) &&
           !Array.isArray(otherMeta) &&
           equal(meta.context, otherMeta.context) &&
           equal(meta.pseudo, otherMeta.pseudo)
-        ) {
-          diagnostics.push({
-            code: DiagnosticKind.UtilityConflicts,
-            className,
-            otherClassName,
-            range: className.range,
-            severity:
-              severity === 'error'
-                ? DiagnosticSeverity.Error
-                : DiagnosticSeverity.Warning,
-            message: `'${className.className}' and '${otherClassName.className}' apply the same CSS properties.`,
-            relatedInformation: [
-              {
-                message: otherClassName.className,
-                location: {
-                  uri: document.uri,
-                  range: otherClassName.range,
-                },
+        )
+      })
+
+      if (conflictingClassNames.length === 0) return
+
+      diagnostics.push({
+        code: DiagnosticKind.UtilityConflicts,
+        className,
+        otherClassNames: conflictingClassNames,
+        range: className.range,
+        severity:
+          severity === 'error'
+            ? DiagnosticSeverity.Error
+            : DiagnosticSeverity.Warning,
+        message: `'${className.className}' applies the same CSS ${
+          properties.length === 1 ? 'property' : 'properties'
+        } as ${joinWithAnd(
+          conflictingClassNames.map(
+            (conflictingClassName) => `'${conflictingClassName.className}'`
+          )
+        )}.`,
+        relatedInformation: conflictingClassNames.map(
+          (conflictingClassName) => {
+            return {
+              message: conflictingClassName.className,
+              location: {
+                uri: document.uri,
+                range: conflictingClassName.range,
               },
-            ],
-          })
-        }
+            }
+          }
+        ),
       })
     })
   })

src/lsp/providers/diagnostics/types.ts

@@ -13,7 +13,7 @@ export enum DiagnosticKind {
 export type UtilityConflictsDiagnostic = Diagnostic & {
   code: DiagnosticKind.UtilityConflicts
   className: DocumentClassName
-  otherClassName: DocumentClassName
+  otherClassNames: DocumentClassName[]
 }
 
 export function isUtilityConflictsDiagnostic(

src/lsp/util/joinWithAnd.ts

@@ -0,0 +1,11 @@
+export function joinWithAnd(strings: string[]): string {
+  return strings.reduce((acc, cur, i) => {
+    if (i === 0) {
+      return cur
+    }
+    if (strings.length > 1 && i === strings.length - 1) {
+      return `${acc} and ${cur}`
+    }
+    return `${acc}, ${cur}`
+  }, '')
+}

src/lsp/util/removeRangeFromString.ts

@@ -0,0 +1,39 @@
+import { Range } from 'vscode-languageserver'
+import lineColumn from 'line-column'
+import { ensureArray } from '../../util/array'
+
+export function removeRangesFromString(
+  str: string,
+  rangeOrRanges: Range | Range[]
+): string {
+  let ranges = ensureArray(rangeOrRanges)
+  let finder = lineColumn(str + '\n', { origin: 0 })
+  let indexRanges: { start: number; end: number }[] = []
+
+  ranges.forEach((range) => {
+    let start = finder.toIndex(range.start.line, range.start.character)
+    let end = finder.toIndex(range.end.line, range.end.character)
+    for (let i = start - 1; i >= 0; i--) {
+      if (/\s/.test(str.charAt(i))) {
+        start = i
+      } else {
+        break
+      }
+    }
+    indexRanges.push({ start, end })
+  })
+
+  indexRanges.sort((a, b) => a.start - b.start)
+
+  let result = ''
+  let i = 0
+
+  indexRanges.forEach((indexRange) => {
+    result += str.substring(i, indexRange.start)
+    i = indexRange.end
+  })
+
+  result += str.substring(i)
+
+  return result.trim()
+}