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

diff --git a/src/lsp/providers/diagnosticsProvider.ts b/src/lsp/providers/diagnosticsProvider.ts
index 152f3b76a3c0a9d10f37c63f42bdcdc6e5d8a4e1..e76bf49249f86a753313ebc8aecd65c29403d89a 100644
--- a/src/lsp/providers/diagnosticsProvider.ts
+++ b/src/lsp/providers/diagnosticsProvider.ts
@@ -6,37 +6,35 @@ } 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')
+import { getClassNameMeta } from '../util/getClassNameMeta'
 
 function provideCssDiagnostics(state: State, document: TextDocument): void {
   const classNames = findClassNamesInRange(document, undefined, 'css')
 
   let diagnostics: Diagnostic[] = classNames
     .map(({ className, range }) => {
-      const parts = getClassNameParts(state, className)
-      if (!parts) return null
+      const meta = getClassNameMeta(state, className)
+      if (!meta) return null
 
-      const info = dlv(state.classNames.classNames, parts)
       let message: string
 
-      if (Array.isArray(info)) {
+      if (Array.isArray(meta)) {
         message = `\`@apply\` cannot be used with \`.${className}\` because it is included in multiple rulesets.`
-      } else if (info.__source !== 'utilities') {
+      } else if (meta.source !== 'utilities') {
         message = `\`@apply\` cannot be used with \`.${className}\` because it is not a utility.`
-      } else 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 if (meta.context && meta.context.length > 0) {
+        if (meta.context.length === 1) {
+          message = `\`@apply\` cannot be used with \`.${className}\` because it is nested inside of an at-rule (${meta.context[0]}).`
         } else {
-          message = `\`@apply\` cannot be used with \`.${className}\` because it is nested inside of at-rules (${info.__context.join(
+          message = `\`@apply\` cannot be used with \`.${className}\` because it is nested inside of at-rules (${meta.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 if (meta.pseudo && meta.pseudo.length > 0) {
+        if (meta.pseudo.length === 1) {
+          message = `\`@apply\` cannot be used with \`.${className}\` because its definition includes a pseudo-selector (${meta.pseudo[0]})`
         } else {
-          message = `\`@apply\` cannot be used with \`.${className}\` because its definition includes pseudo-selectors (${info.__pseudo.join(
+          message = `\`@apply\` cannot be used with \`.${className}\` because its definition includes pseudo-selectors (${meta.pseudo.join(
             ', '
           )})`
         }

 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

diff --git a/src/lsp/util/getClassNameDecls.ts b/src/lsp/util/getClassNameDecls.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a04ce94f186e0999b7546021378aeef7a6db2498
--- /dev/null
+++ b/src/lsp/util/getClassNameDecls.ts
@@ -0,0 +1,20 @@
+import { State } from './state'
+import { getClassNameParts } from './getClassNameAtPosition'
+import removeMeta from './removeMeta'
+const dlv = require('dlv')
+
+export function getClassNameDecls(
+  state: State,
+  className: string
+): Record<string, string> | Record<string, string>[] | null {
+  const parts = getClassNameParts(state, className)
+  if (!parts) return null
+
+  const info = dlv(state.classNames.classNames, parts)
+
+  if (Array.isArray(info)) {
+    return info.map(removeMeta)
+  }
+
+  return removeMeta(info)
+}

 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

diff --git a/src/lsp/util/getClassNameMeta.ts b/src/lsp/util/getClassNameMeta.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ec86cdfd90a3007964aac4c33fd1d855729e26c
--- /dev/null
+++ b/src/lsp/util/getClassNameMeta.ts
@@ -0,0 +1,28 @@
+import { State, ClassNameMeta } from './state'
+import { getClassNameParts } from './getClassNameAtPosition'
+const dlv = require('dlv')
+
+export function getClassNameMeta(
+  state: State,
+  className: string
+): ClassNameMeta | ClassNameMeta[] {
+  const parts = getClassNameParts(state, className)
+  if (!parts) return null
+  const info = dlv(state.classNames.classNames, parts)
+
+  if (Array.isArray(info)) {
+    return info.map((i) => ({
+      source: i.__source,
+      pseudo: i.__pseudo,
+      scope: i.__scope,
+      context: i.__context,
+    }))
+  }
+
+  return {
+    source: info.__source,
+    pseudo: info.__pseudo,
+    scope: info.__scope,
+    context: info.__context,
+  }
+}

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

diff --git a/src/lsp/util/state.ts b/src/lsp/util/state.ts
index fc474eb4e418d6628542a8d78c69e54d6d9288b6..dad7e768af5686c49bbc1b6505d476ec0cb51605 100644
--- a/src/lsp/util/state.ts
+++ b/src/lsp/util/state.ts
@@ -53,3 +53,10 @@ export type DocumentClassName = {
   className: string
   range: Range
 }
+
+export type ClassNameMeta = {
+  source: 'base' | 'components' | 'utilities'
+  pseudo: string[]
+  scope: string[]
+  context: string[]
+}