feat: add support for invalid class diagnostics and update settings

Author: felicijus

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

@@ -11,6 +11,7 @@ import { getRecommendedVariantOrderDiagnostics } from './getRecommendedVariantOr
 import { getInvalidSourceDiagnostics } from './getInvalidSourceDiagnostics'
 import { getUsedBlocklistedClassDiagnostics } from './getUsedBlocklistedClassDiagnostics'
 import { getSuggestCanonicalClassesDiagnostics } from './canonical-classes'
+import { getInvalidClassDiagnostics } from './getInvalidClassDiagnostics'
 
 export async function doValidate(
   state: State,
@@ -26,6 +27,7 @@ export async function doValidate(
     DiagnosticKind.RecommendedVariantOrder,
     DiagnosticKind.UsedBlocklistedClass,
     DiagnosticKind.SuggestCanonicalClasses,
+    DiagnosticKind.InvalidClass,
   ],
 ): Promise<AugmentedDiagnostic[]> {
   const settings = await state.editor.getConfiguration(document.uri)
@@ -62,6 +64,9 @@ export async function doValidate(
         ...(only.includes(DiagnosticKind.SuggestCanonicalClasses)
           ? await getSuggestCanonicalClassesDiagnostics(state, document, settings)
           : []),
+        ...(only.includes(DiagnosticKind.InvalidClass)
+          ? await getInvalidClassDiagnostics(state, document, settings)
+          : []),
       ]
     : []
 }

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

@@ -0,0 +1,61 @@
+import type { State, Settings, DocumentClassName } from '../util/state'
+import { type InvalidClassDiagnostic, DiagnosticKind } from './types'
+import { findClassListsInDocument, getClassNamesInClassList } from '../util/find'
+import { visit } from './getCssConflictDiagnostics'
+import type { TextDocument } from 'vscode-languageserver-textdocument'
+
+function isClassValid(state: State, className: string): boolean {
+  if (!state.v4) return true // Only check for v4
+
+  let roots = state.designSystem.compile([className])
+  let hasDeclarations = false
+
+  visit([roots[0]], (node) => {
+    if ((node.type === 'rule' || node.type === 'atrule') && node.nodes) {
+      for (let child of node.nodes) {
+        if (child.type === 'decl') {
+          hasDeclarations = true
+          break
+        }
+      }
+    }
+  })
+
+  return hasDeclarations
+}
+
+export async function getInvalidClassDiagnostics(
+  state: State,
+  document: TextDocument,
+  settings: Settings,
+): Promise<InvalidClassDiagnostic[]> {
+  let severity = settings.tailwindCSS.lint.invalidClass || 'warning' // Assuming a new setting, default to warning
+  if (severity === 'ignore') return []
+
+  let diagnostics: InvalidClassDiagnostic[] = []
+  const classLists = await findClassListsInDocument(state, document)
+
+  classLists.forEach((classList) => {
+    const classNames = getClassNamesInClassList(classList, state.blocklist)
+
+    classNames.forEach((className) => {
+      if (!isClassValid(state, className.className)) {
+        diagnostics.push({
+          code: DiagnosticKind.InvalidClass,
+          source: 'tailwindcss',
+          className,
+          range: className.range,
+          severity:
+            severity === 'error'
+              ? 1 /* DiagnosticSeverity.Error */
+              : severity === 'warning'
+              ? 2 /* DiagnosticSeverity.Warning */
+              : 3 /* DiagnosticSeverity.Information */,
+          message: `'${className.className}' is not a recognized Tailwind CSS class.`,
+        })
+      }
+    })
+  })
+
+  return diagnostics
+}

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

@@ -12,6 +12,7 @@ export enum DiagnosticKind {
   RecommendedVariantOrder = 'recommendedVariantOrder',
   UsedBlocklistedClass = 'usedBlocklistedClass',
   SuggestCanonicalClasses = 'suggestCanonicalClasses',
+  InvalidClass = 'invalidClass',
 }
 
 export type CssConflictDiagnostic = Diagnostic & {
@@ -123,6 +124,17 @@ export function isSuggestCanonicalClasses(
   return diagnostic.code === DiagnosticKind.SuggestCanonicalClasses
 }
 
+export type InvalidClassDiagnostic = Diagnostic & {
+  code: DiagnosticKind.InvalidClass
+  className: DocumentClassName
+}
+
+export function isInvalidClassDiagnostic(
+  diagnostic: AugmentedDiagnostic,
+): diagnostic is InvalidClassDiagnostic {
+  return diagnostic.code === DiagnosticKind.InvalidClass
+}
+
 export type AugmentedDiagnostic =
   | CssConflictDiagnostic
   | InvalidApplyDiagnostic
@@ -134,3 +146,4 @@ export type AugmentedDiagnostic =
   | RecommendedVariantOrderDiagnostic
   | UsedBlocklistedClassDiagnostic
   | SuggestCanonicalClassesDiagnostic
+  | InvalidClassDiagnostic

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

@@ -36,7 +36,7 @@ export type EditorState = {
   ) => Promise<Array<[string, { isDirectory: boolean }]>>
 }
 
-type DiagnosticSeveritySetting = 'ignore' | 'warning' | 'error'
+type DiagnosticSeveritySetting = 'ignore' | 'info' | 'warning' | 'error'
 
 export type EditorSettings = {
   tabSize: number
@@ -67,6 +67,7 @@ export type TailwindCssSettings = {
     recommendedVariantOrder: DiagnosticSeveritySetting
     usedBlocklistedClass: DiagnosticSeveritySetting
     suggestCanonicalClasses: DiagnosticSeveritySetting
+    invalidClass: DiagnosticSeveritySetting
   }
   experimental: {
     classRegex: string[] | [string, string][]
@@ -207,6 +208,7 @@ export function getDefaultTailwindSettings(): Settings {
         recommendedVariantOrder: 'warning',
         usedBlocklistedClass: 'warning',
         suggestCanonicalClasses: 'warning',
+        invalidClass: 'warning',
       },
       showPixelEquivalents: true,
       includeLanguages: {},

packages/vscode-tailwindcss/package.json

@@ -327,6 +327,18 @@
           "markdownDescription": "Indicate when utilities may be written in a more optimal form",
           "scope": "language-overridable"
         },
+        "tailwindCSS.lint.invalidClass": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "info",
+            "warning",
+            "error"
+          ],
+          "default": "info",
+          "markdownDescription": "Classes that are not recognized as valid Tailwind CSS classes",
+          "scope": "language-overridable"
+        },
         "tailwindCSS.experimental.classRegex": {
           "type": "array",
           "scope": "language-overridable"