feat: add tests for invalid class diagnostics and update related logic

Author: felicijus

packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js

@@ -37,6 +37,7 @@ withFixture('basic', (c) => {
   testFixture('css-conflict/vue-style-lang-sass')
   testFixture('invalid-screen/simple')
   testFixture('invalid-theme/simple')
+  testFixture('invalid-class/simple')
 })
 
 withFixture('v4/basic', (c) => {
@@ -88,6 +89,7 @@ withFixture('v4/basic', (c) => {
   // testFixture('css-conflict/css-multi-rule')
   // testFixture('css-conflict/css-multi-prop')
   // testFixture('invalid-screen/simple')
+  testFixture('invalid-class/simple')
 
   testInline('simple typos in theme keys (in key)', {
     code: '.test { color: theme(--color-red-901) }',
@@ -324,6 +326,17 @@ withFixture('v4/basic', (c) => {
           },
         ],
       },
+      {
+        code: 'invalidClass',
+        source: 'tailwindcss',
+        message: "Unknown utility class 'foo'.",
+        className: {
+          className: 'foo',
+          classList: {
+            classList: 'foo max-w-4xl max-w-6xl hover:underline',
+          },
+        },
+      },
     ],
   })
 

packages/tailwindcss-language-server/tests/diagnostics/invalid-class/simple.json

@@ -0,0 +1,27 @@
+{
+  "code": "<div class=\"px-4 nonexistent-class\"></div>",
+  "expected": [
+    {
+      "code": "invalidClass",
+      "source": "tailwindcss",
+      "className": {
+        "className": "nonexistent-class",
+        "classList": {
+          "classList": "px-4 nonexistent-class",
+          "range": {
+            "start": { "line": 0, "character": 12 },
+            "end": { "line": 0, "character": 34 }
+          }
+        },
+        "relativeRange": {
+          "start": { "line": 0, "character": 5 },
+          "end": { "line": 0, "character": 22 }
+        },
+        "range": { "start": { "line": 0, "character": 17 }, "end": { "line": 0, "character": 34 } }
+      },
+      "range": { "start": { "line": 0, "character": 17 }, "end": { "line": 0, "character": 34 } },
+      "severity": 3,
+      "message": "Unknown utility class 'nonexistent-class'."
+    }
+  ]
+}

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

@@ -6,23 +6,30 @@ import { getClassNameDecls } from '../util/getClassNameDecls'
 import * as jit from '../util/jit'
 import type { TextDocument } from 'vscode-languageserver-textdocument'
 
+function isCustomProperty(property: string): boolean {
+  return property.startsWith('--')
+}
+
 function isClassValid(state: State, className: string): boolean {
   if (state.v4) {
     // V4: Use design system compilation
     let roots = state.designSystem.compile([className])
     let hasDeclarations = false
+    let hasNonCustomProperties = 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
+            if (!isCustomProperty(child.prop)) {
+              hasNonCustomProperties = true
+            }
           }
         }
       }
     })
-    return hasDeclarations
+    return hasDeclarations && hasNonCustomProperties
   } else if (state.jit) {
     // JIT: Try to generate rules
     let { rules } = jit.generateRules(state, [className])
@@ -61,7 +68,7 @@ export async function getInvalidClassDiagnostics(
               : severity === 'warning'
               ? 2 /* DiagnosticSeverity.Warning */
               : 3 /* DiagnosticSeverity.Information */,
-          message: `'${className.className}' is not a recognized Tailwind CSS utility class.`,
+          message: `Unknown utility class '${className.className}'.`,
         })
       }
     })