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

diff --git a/src/lsp/providers/diagnosticsProvider.ts b/src/lsp/providers/diagnosticsProvider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..51565e9c5cb5a4d1f3291a37a4c28d99a220d47d
--- /dev/null
+++ b/src/lsp/providers/diagnosticsProvider.ts
@@ -0,0 +1,79 @@
+import {
+  TextDocument,
+  Diagnostic,
+  DiagnosticSeverity,
+} from 'vscode-languageserver'
+import { State } from '../util/state'
+import { isCssDoc } from '../util/css'
+import { findClassNamesInRange } from '../util/find'
+import { getClassNameParts } from '../util/getClassNameAtPosition'
+const dlv = require('dlv')
+
+function provideCssDiagnostics(state: State, document: TextDocument): void {
+  const classNames = findClassNamesInRange(document)
+
+  let diagnostics: Diagnostic[] = classNames
+    .map(({ className, range }) => {
+      const parts = getClassNameParts(state, className)
+      if (!parts) return null
+      const info = dlv(state.classNames.classNames, parts)
+      let message: string
+      if (info.__context && info.__context.length > 0) {
+        if (info.__context.length === 1) {
+          message = `\`@apply\` cannot be used with \`.${className}\` because it is nested inside of an at-rule (${info.__context[0]}).`
+        } else {
+          message = `\`@apply\` cannot be used with \`.${className}\` because it is nested inside of at-rules (${info.__context.join(
+            ', '
+          )}).`
+        }
+      } else if (info.__pseudo && info.__pseudo.length > 0) {
+        if (info.__pseudo.length === 1) {
+          message = `\`@apply\` cannot be used with \`.${className}\` because its definition includes a pseudo-selector (${info.__pseudo[0]})`
+        } else {
+          message = `\`@apply\` cannot be used with \`.${className}\` because its definition includes pseudo-selectors (${info.__pseudo.join(
+            ', '
+          )})`
+        }
+      }
+
+      if (!message) return null
+
+      return {
+        severity: DiagnosticSeverity.Error,
+        range,
+        message,
+        // source: 'ex',
+      }
+    })
+    .filter(Boolean)
+
+  // if (state.editor.capabilities.diagnosticRelatedInformation) {
+  //   diagnostic.relatedInformation = [
+  //     {
+  //       location: {
+  //         uri: document.uri,
+  //         range: Object.assign({}, diagnostic.range),
+  //       },
+  //       message: '',
+  //     },
+  //     {
+  //       location: {
+  //         uri: document.uri,
+  //         range: Object.assign({}, diagnostic.range),
+  //       },
+  //       message: '',
+  //     },
+  //   ]
+  // }
+
+  state.editor.connection.sendDiagnostics({ uri: document.uri, diagnostics })
+}
+
+export async function provideDiagnostics(
+  state: State,
+  document: TextDocument
+): Promise<void> {
+  if (isCssDoc(state, document)) {
+    return provideCssDiagnostics(state, document)
+  }
+}

 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

diff --git a/src/lsp/server.ts b/src/lsp/server.ts
index b28b1bad9d226222f5d9e24472c9d8d698df6187..480aa289e7b5035e907891fd287bf45baeddd159 100644
--- a/src/lsp/server.ts
+++ b/src/lsp/server.ts
@@ -26,6 +26,7 @@ } from './providers/completionProvider'
 import { provideHover } from './providers/hoverProvider'
 import { URI } from 'vscode-uri'
 import { getDocumentSettings } from './util/getDocumentSettings'
+import { provideDiagnostics } from './providers/diagnosticsProvider'
 
 let state: State = { enabled: false }
 let connection = createConnection(ProposedFeatures.all)
@@ -44,6 +45,9 @@   getDocumentSettings(state, event.document.uri)
 })
 documents.onDidClose((event) => {
   documentSettings.delete(event.document.uri)
+})
+documents.onDidChangeContent((change) => {
+  provideDiagnostics(state, change.document)
 })
 documents.listen(connection)
 
@@ -64,6 +68,10 @@           : {},
       capabilities: {
         configuration:
           capabilities.workspace && !!capabilities.workspace.configuration,
+        diagnosticRelatedInformation:
+          capabilities.textDocument &&
+          capabilities.textDocument.publishDiagnostics &&
+          capabilities.textDocument.publishDiagnostics.relatedInformation,
       },
     }
 

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

diff --git a/src/lsp/util/css.ts b/src/lsp/util/css.ts
index 84b788889c876707b4201ba3d2093b8bb472dd2f..d1acbea2b4e6e166e57d7d604ac2e615d1e94a0b 100644
--- a/src/lsp/util/css.ts
+++ b/src/lsp/util/css.ts
@@ -11,7 +11,7 @@   'scss',
   'stylus',
 ]
 
-function isCssDoc(state: State, doc: TextDocument): boolean {
+export function isCssDoc(state: State, doc: TextDocument): boolean {
   const userCssLanguages = Object.keys(
     state.editor.userLanguages
   ).filter((lang) => CSS_LANGUAGES.includes(state.editor.userLanguages[lang]))

 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

diff --git a/src/lsp/util/find.ts b/src/lsp/util/find.ts
index 3fb04517624e5208d2b2c4f2152e3285e1bb9d8a..17b6a127654ae8b748941e828167512078286361 100644
--- a/src/lsp/util/find.ts
+++ b/src/lsp/util/find.ts
@@ -72,7 +72,7 @@ }
 
 export function findClassNamesInRange(
   doc: TextDocument,
-  range: Range
+  range?: Range
 ): DocumentClassName[] {
   const classLists = findClassListsInRange(doc, range)
   return [].concat.apply(
@@ -111,10 +111,11 @@ }
 
 export function findClassListsInRange(
   doc: TextDocument,
-  range: Range
+  range?: Range
 ): DocumentClassList[] {
   const text = doc.getText(range)
   const matches = findAll(/(@apply\s+)(?<classList>[^;}]+)[;}]/g, text)
+  const globalStart: Position = range ? range.start : { line: 0, character: 0 }
 
   return matches.map((match) => {
     const start = indexToPosition(text, match.index + match[1].length)
@@ -126,12 +127,12 @@     return {
       classList: match.groups.classList,
       range: {
         start: {
-          line: range.start.line + start.line,
-          character: range.start.character + start.character,
+          line: globalStart.line + start.line,
+          character: globalStart.character + start.character,
         },
         end: {
-          line: range.start.line + end.line,
-          character: range.start.character + end.character,
+          line: globalStart.line + end.line,
+          character: globalStart.character + end.character,
         },
       },
     }

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

diff --git a/src/lsp/util/state.ts b/src/lsp/util/state.ts
index daaa0501c05f20e0e88dc85c4357533d26e4a74d..fc474eb4e418d6628542a8d78c69e54d6d9288b6 100644
--- a/src/lsp/util/state.ts
+++ b/src/lsp/util/state.ts
@@ -21,6 +21,7 @@   globalSettings: Settings
   userLanguages: Record<string, string>
   capabilities: {
     configuration: boolean
+    diagnosticRelatedInformation: boolean
   }
 }