1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110

diff --git a/src/lsp/providers/diagnosticsProvider.ts b/src/lsp/providers/diagnosticsProvider.ts
index 2a59c26ff93e9a9feb7a7d988c0015ea492549db..4d0e58032a84fcbe68bb55100ada5a682b2943c9 100644
--- a/src/lsp/providers/diagnosticsProvider.ts
+++ b/src/lsp/providers/diagnosticsProvider.ts
@@ -22,8 +22,8 @@ import semver from 'semver'
 import { getLanguageBoundaries } from '../util/getLanguageBoundaries'
 import { absoluteRange } from '../util/absoluteRange'
 import { isObject } from '../../class-names/isObject'
-import levenshtein from 'js-levenshtein'
 import { stringToPath } from '../util/stringToPath'
+import { closest } from '../util/closest'
 
 function getUnsupportedApplyDiagnostics(
   state: State,
@@ -170,6 +170,12 @@       if (screens.includes(match.groups.screen)) {
         return null
       }
 
+      let message = `The screen '${match.groups.screen}' does not exist in your theme config.`
+      let suggestion = closest(match.groups.screen, screens)
+      if (suggestion) {
+        message += ` Did you mean '${suggestion}'?`
+      }
+
       diagnostics.push({
         range: absoluteRange(
           {
@@ -185,7 +191,7 @@         severity:
           severity === 'error'
             ? DiagnosticSeverity.Error
             : DiagnosticSeverity.Warning,
-        message: 'Unknown screen',
+        message,
       })
     })
   })
@@ -227,6 +233,12 @@         if (state.variants.includes(variant)) {
           continue
         }
 
+        let message = `The variant '${variant}' does not exist.`
+        let suggestion = closest(variant, state.variants)
+        if (suggestion) {
+          message += ` Did you mean '${suggestion}'?`
+        }
+
         let variantStartIndex =
           listStartIndex + variants.slice(0, i).join('').length
 
@@ -242,7 +254,7 @@           severity:
             severity === 'error'
               ? DiagnosticSeverity.Error
               : DiagnosticSeverity.Warning,
-          message: `Unknown variant: ${variant}`,
+          message,
         })
       }
     })
@@ -329,17 +341,14 @@           ...base,
           ...keys.slice(0, keys.length - 1),
         ])
         if (isObject(parentValue)) {
-          let validKeys = Object.keys(parentValue)
-            .filter((key) => isValid(parentValue[key]))
-            .sort(
-              (a, b) =>
-                levenshtein(keys[keys.length - 1], a) -
-                levenshtein(keys[keys.length - 1], b)
-            )
-          if (validKeys.length) {
+          let closestValidKey = closest(
+            keys[keys.length - 1],
+            Object.keys(parentValue).filter((key) => isValid(parentValue[key]))
+          )
+          if (closestValidKey) {
             message += ` Did you mean '${stitch([
               ...keys.slice(0, keys.length - 1),
-              validKeys[0],
+              closestValidKey,
             ])}'?`
           }
         }
@@ -422,6 +431,16 @@       if (valid.includes(match.groups.value)) {
         return null
       }
 
+      let message = `'${match.groups.value}' is not a valid group.`
+      if (match.groups.value === 'preflight') {
+        message += ` Did you mean 'base'?`
+      } else {
+        let suggestion = closest(match.groups.value, valid)
+        if (suggestion) {
+          message += ` Did you mean '${suggestion}'?`
+        }
+      }
+
       diagnostics.push({
         range: absoluteRange(
           {
@@ -437,9 +456,7 @@         severity:
           severity === 'error'
             ? DiagnosticSeverity.Error
             : DiagnosticSeverity.Warning,
-        message: `Unsupported value: ${match.groups.value}${
-          match.groups.value === 'preflight' ? '. Use base instead.' : ''
-        }`,
+        message,
       })
     })
   })

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

diff --git a/src/lsp/util/closest.ts b/src/lsp/util/closest.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3153cb8e8a48bde030c2d34d4149b2a364a9e942
--- /dev/null
+++ b/src/lsp/util/closest.ts
@@ -0,0 +1,7 @@
+import levenshtein from 'js-levenshtein'
+
+export function closest(input: string, options: string[]): string | undefined {
+  return options.sort(
+    (a, b) => levenshtein(input, a) - levenshtein(input, b)
+  )[0]
+}