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
|
diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 94102237e8fd87bd615323c627523a1bc3c4968d..f5d361455c387057be39534126ccb64e72d26406 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -14,7 +14,7 @@ import removeMeta from './util/removeMeta'
import { getColor, getColorFromValue } from './util/color'
import { isHtmlContext } from './util/html'
import { isCssContext } from './util/css'
-import { findLast } from './util/find'
+import { findLast, matchClassAttributes } from './util/find'
import { stringifyConfigValue, stringifyCss } from './util/stringify'
import { stringifyScreen, Screen } from './util/screens'
import isObject from './util/isObject'
@@ -327,25 +327,30 @@ }),
}
}
-function provideClassAttributeCompletions(
+async function provideClassAttributeCompletions(
state: State,
document: TextDocument,
position: Position,
context?: CompletionContext
-): CompletionList {
+): Promise<CompletionList> {
let str = document.getText({
start: document.positionAt(Math.max(0, document.offsetAt(position) - 500)),
end: position,
})
- const match = findLast(/(?:\s|:|\()(?:class(?:Name)?|\[ngClass\])\s*=\s*['"`{]/gi, str)
+ let matches = matchClassAttributes(
+ str,
+ (await state.editor.getConfiguration(document.uri)).tailwindCSS.classAttributes
+ )
- if (match === null) {
+ if (matches.length === 0) {
return null
}
+ let match = matches[matches.length - 1]
+
const lexer =
- match[0][0] === ':' || match[0].trim().startsWith('[ngClass]')
+ match[0][0] === ':' || (match[1].startsWith('[') && match[1].endsWith(']'))
? getComputedClassAttributeLexer()
: getClassAttributeLexer()
lexer.reset(str.substr(match.index + match[0].length - 1))
@@ -490,12 +495,12 @@ }
)
}
-function provideClassNameCompletions(
+async function provideClassNameCompletions(
state: State,
document: TextDocument,
position: Position,
context?: CompletionContext
-): CompletionList {
+): Promise<CompletionList> {
if (isCssContext(state, document, position)) {
return provideAtApplyCompletions(state, document, position)
}
@@ -1035,7 +1040,7 @@ ) {
if (state === null) return { items: [], isIncomplete: false }
const result =
- provideClassNameCompletions(state, document, position, context) ||
+ (await provideClassNameCompletions(state, document, position, context)) ||
provideCssHelperCompletions(state, document, position) ||
provideCssDirectiveCompletions(state, document, position) ||
provideScreenDirectiveCompletions(state, document, position) ||
|