reuse @apply validation in hover provider

Author: bradlc

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,47 +15,20 @@ export function getInvalidApplyDiagnostics(
   const classNames = findClassNamesInRange(document, undefined, 'css')
 
   let diagnostics: InvalidApplyDiagnostic[] = classNames.map((className) => {
-    const meta = getClassNameMeta(state, className.className)
-    if (!meta) return null
+    let result = validateApply(state, className.className)
 
-    let message: string
-
-    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:
         severity === 'error'
           ? DiagnosticSeverity.Error
           : DiagnosticSeverity.Warning,
       range: className.range,
-      message,
+      message: result.reason,
       className,
     }
   })

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,
@@ -81,6 +82,13 @@ function provideClassNameHover(
   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: {
       language: 'css',

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 }
+}