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

diff --git a/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts b/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
index 66fc540125ce57a44e5550b89d9b6f1551085141..e829b5735e74900f08d5d7161c5d561eebd7b89f 100644
--- a/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
+++ b/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
@@ -2,7 +2,7 @@ import { findClassNamesInRange } from '../../util/find'
 import { InvalidApplyDiagnostic, DiagnosticKind } from './types'
 import { Settings, State } from '../../util/state'
 import { TextDocument, DiagnosticSeverity } from 'vscode-languageserver'
-import { getClassNameMeta } from '../../util/getClassNameMeta'
+import { validateApply } from '../../util/validateApply'
 
 export function getInvalidApplyDiagnostics(
   state: State,
@@ -15,39 +15,12 @@
   const classNames = findClassNamesInRange(document, undefined, 'css')
 
   let diagnostics: InvalidApplyDiagnostic[] = classNames.map((className) => {
-    const meta = getClassNameMeta(state, className.className)
-    if (!meta) return null
-
-    let message: string
+    let result = validateApply(state, className.className)
 
-    if (Array.isArray(meta)) {
-      message = `'@apply' cannot be used with '${className.className}' because it is included in multiple rulesets.`
-    } else if (meta.source !== 'utilities') {
-      message = `'@apply' cannot be used with '${className.className}' because it is not a utility.`
-    } else if (meta.context && meta.context.length > 0) {
-      if (meta.context.length === 1) {
-        message = `'@apply' cannot be used with '${className.className}' because it is nested inside of an at-rule ('${meta.context[0]}').`
-      } else {
-        message = `'@apply' cannot be used with '${
-          className.className
-        }' because it is nested inside of at-rules (${meta.context
-          .map((c) => `'${c}'`)
-          .join(', ')}).`
-      }
-    } else if (meta.pseudo && meta.pseudo.length > 0) {
-      if (meta.pseudo.length === 1) {
-        message = `'@apply' cannot be used with '${className.className}' because its definition includes a pseudo-selector ('${meta.pseudo[0]}')`
-      } else {
-        message = `'@apply' cannot be used with '${
-          className.className
-        }' because its definition includes pseudo-selectors (${meta.pseudo
-          .map((p) => `'${p}'`)
-          .join(', ')}).`
-      }
+    if (result === null || result.isApplyable === true) {
+      return null
     }
 
-    if (!message) return null
-
     return {
       code: DiagnosticKind.InvalidApply,
       severity:
@@ -55,7 +28,7 @@         severity === 'error'
           ? DiagnosticSeverity.Error
           : DiagnosticSeverity.Warning,
       range: className.range,
-      message,
+      message: result.reason,
       className,
     }
   })

 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

diff --git a/src/lsp/providers/hoverProvider.ts b/src/lsp/providers/hoverProvider.ts
index a9010a3142cb4e9700f63e3bd06426a144b9afa0..2084ec42933cbf2cfc02ead3b476698727a2d89e 100644
--- a/src/lsp/providers/hoverProvider.ts
+++ b/src/lsp/providers/hoverProvider.ts
@@ -1,10 +1,11 @@
 import { State } from '../util/state'
 import { Hover, TextDocumentPositionParams } from 'vscode-languageserver'
-import { getClassNameParts } from '../util/getClassNameAtPosition'
 import { stringifyCss, stringifyConfigValue } from '../util/stringify'
 const dlv = require('dlv')
 import { isCssContext } from '../util/css'
 import { findClassNameAtPosition } from '../util/find'
+import { validateApply } from '../util/validateApply'
+import { getClassNameParts } from '../util/getClassNameAtPosition'
 
 export function provideHover(
   state: State,
@@ -80,6 +81,13 @@   if (className === null) return null
 
   const parts = getClassNameParts(state, className.className)
   if (!parts) return null
+
+  if (isCssContext(state, doc, position)) {
+    let validated = validateApply(state, parts)
+    if (validated === null || validated.isApplyable === false) {
+      return null
+    }
+  }
 
   return {
     contents: {

 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

diff --git a/src/lsp/util/validateApply.ts b/src/lsp/util/validateApply.ts
new file mode 100644
index 0000000000000000000000000000000000000000..52f2b2c432fc5d85f448a1e9560683dc75a5bfed
--- /dev/null
+++ b/src/lsp/util/validateApply.ts
@@ -0,0 +1,44 @@
+import { State } from './state'
+import { getClassNameMeta } from './getClassNameMeta'
+
+export function validateApply(
+  state: State,
+  classNameOrParts: string | string[]
+): { isApplyable: true } | { isApplyable: false; reason: string } | null {
+  const meta = getClassNameMeta(state, classNameOrParts)
+  if (!meta) return null
+
+  const className = Array.isArray(classNameOrParts)
+    ? classNameOrParts.join(state.separator)
+    : classNameOrParts
+
+  let reason: string
+
+  if (Array.isArray(meta)) {
+    reason = `'@apply' cannot be used with '${className}' because it is included in multiple rulesets.`
+  } else if (meta.source !== 'utilities') {
+    reason = `'@apply' cannot be used with '${className}' because it is not a utility.`
+  } else if (meta.context && meta.context.length > 0) {
+    if (meta.context.length === 1) {
+      reason = `'@apply' cannot be used with '${className}' because it is nested inside of an at-rule ('${meta.context[0]}').`
+    } else {
+      reason = `'@apply' cannot be used with '${className}' because it is nested inside of at-rules (${meta.context
+        .map((c) => `'${c}'`)
+        .join(', ')}).`
+    }
+  } else if (meta.pseudo && meta.pseudo.length > 0) {
+    if (meta.pseudo.length === 1) {
+      reason = `'@apply' cannot be used with '${className}' because its definition includes a pseudo-selector ('${meta.pseudo[0]}')`
+    } else {
+      reason = `'@apply' cannot be used with '${className}' because its definition includes pseudo-selectors (${meta.pseudo
+        .map((p) => `'${p}'`)
+        .join(', ')}).`
+    }
+  }
+
+  if (reason) {
+    return { isApplyable: false, reason }
+  }
+
+  return { isApplyable: true }
+}