feat: add support for invalid class code actions and update diagnostic message

Author: felicijus

packages/tailwindcss-language-service/src/codeActions/codeActionProvider.ts

@@ -14,11 +14,13 @@ import {
   isInvalidVariantDiagnostic,
   isRecommendedVariantOrderDiagnostic,
   isSuggestCanonicalClasses,
+  isInvalidClassDiagnostic,
 } from '../diagnostics/types'
 import { flatten, dedupeBy } from '../util/array'
 import { provideCssConflictCodeActions } from './provideCssConflictCodeActions'
 import { provideInvalidApplyCodeActions } from './provideInvalidApplyCodeActions'
 import { provideSuggestionCodeActions } from './provideSuggestionCodeActions'
+import { provideInvalidClassCodeActions } from './provideInvalidClassCodeActions'
 
 async function getDiagnosticsFromCodeActionParams(
   state: State,
@@ -70,6 +72,10 @@ export async function doCodeActions(
         return provideCssConflictCodeActions(state, params, diagnostic)
       }
 
+      if (isInvalidClassDiagnostic(diagnostic)) {
+        return provideInvalidClassCodeActions(state, params, diagnostic)
+      }
+
       if (
         isInvalidConfigPathDiagnostic(diagnostic) ||
         isInvalidTailwindDirectiveDiagnostic(diagnostic) ||

packages/tailwindcss-language-service/src/codeActions/provideInvalidClassCodeActions.ts

@@ -0,0 +1,31 @@
+import type { CodeAction, CodeActionParams } from 'vscode-languageserver'
+import type { State } from '../util/state'
+import type { InvalidClassDiagnostic } from '../diagnostics/types'
+import { removeRangesFromString } from '../util/removeRangesFromString'
+
+export function provideInvalidClassCodeActions(
+  _state: State,
+  params: CodeActionParams,
+  diagnostic: InvalidClassDiagnostic,
+): CodeAction[] {
+  return [
+    {
+      title: `Remove invalid class '${diagnostic.className.className}'`,
+      kind: 'quickfix',
+      diagnostics: [diagnostic],
+      edit: {
+        changes: {
+          [params.textDocument.uri]: [
+            {
+              range: diagnostic.className.classList.range,
+              newText: removeRangesFromString(
+                diagnostic.className.classList.classList,
+                [diagnostic.className.relativeRange],
+              ),
+            },
+          ],
+        },
+      },
+    },
+  ]
+}

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

@@ -61,7 +61,7 @@ export async function getInvalidClassDiagnostics(
               : severity === 'warning'
               ? 2 /* DiagnosticSeverity.Warning */
               : 3 /* DiagnosticSeverity.Information */,
-          message: `'${className.className}' is not a recognized Tailwind CSS class.`,
+          message: `'${className.className}' is not a recognized Tailwind CSS utility class.`,
         })
       }
     })