Skip to content

Commit e3bbd69

Browse files
committed
add .vue @apply support (tailwindlabs#4)
1 parent 481b8b1 commit e3bbd69

File tree

1 file changed

+92
-34
lines changed

1 file changed

+92
-34
lines changed

src/extension.ts

Lines changed: 92 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const HTML_TYPES = [
1515
'razor',
1616
'php',
1717
'blade',
18-
'vue',
1918
'twig',
2019
'markdown',
2120
'erb',
@@ -97,14 +96,25 @@ async function getTailwind() {
9796

9897
export function deactivate() {}
9998

100-
function createCompletionItemProvider(
99+
function createCompletionItemProvider({
101100
items,
102-
languages: string[],
103-
regex: RegExp,
104-
triggerCharacters: string[],
101+
languages,
102+
regex,
103+
triggerCharacters,
105104
config,
106-
prefix = ''
107-
): vscode.Disposable {
105+
prefix = '',
106+
enable = () => true,
107+
emmet = false
108+
}: {
109+
items?
110+
languages?: string[]
111+
regex?: RegExp
112+
triggerCharacters?: string[]
113+
config?
114+
prefix?: string
115+
enable?: (text: string) => boolean
116+
emmet?: boolean
117+
} = {}): vscode.Disposable {
108118
return vscode.languages.registerCompletionItemProvider(
109119
languages,
110120
{
@@ -116,21 +126,28 @@ function createCompletionItemProvider(
116126
let str
117127

118128
const range: vscode.Range = new vscode.Range(
119-
new vscode.Position(Math.max(position.line - 5, 0), 0),
129+
new vscode.Position(0, 0),
120130
position
121131
)
122132
const text: string = document.getText(range)
123133

124-
let matches = text.match(regex)
134+
if (!enable(text)) return []
135+
136+
let lines = text.split(/[\n\r]/)
137+
138+
let matches = lines
139+
.slice(-5)
140+
.join('\n')
141+
.match(regex)
125142

126143
if (matches) {
127144
let parts = matches[matches.length - 1].split(' ')
128145
str = parts[parts.length - 1]
129-
} else if (languages.indexOf('html') !== -1) {
146+
} else if (emmet) {
130147
// match emmet style syntax
131148
// e.g. .flex.items-center
132-
let lineText = text.split('\n').pop()
133-
matches = lineText.match(/\.([^()#>*^ \[\]=$@{}]*)$/i)
149+
let currentLine = lines[lines.length - 1]
150+
matches = currentLine.match(/\.([^()#>*^ \[\]=$@{}]*)$/i)
134151
let parts = matches[matches.length - 1].split('.')
135152
str = parts[parts.length - 1]
136153
}
@@ -326,34 +343,75 @@ class TailwindIntellisense {
326343
this._providers = []
327344

328345
this._providers.push(
329-
createCompletionItemProvider(
330-
this._items,
331-
JS_TYPES,
332-
/\btw`([^`]*)$/,
333-
['`', ' ', separator],
334-
tailwind.config
335-
)
346+
createCompletionItemProvider({
347+
items: this._items,
348+
languages: JS_TYPES,
349+
regex: /\btw`([^`]*)$/,
350+
triggerCharacters: ['`', ' ', separator],
351+
config: tailwind.config
352+
})
336353
)
337354

338355
this._providers.push(
339-
createCompletionItemProvider(
340-
this._items,
341-
CSS_TYPES,
342-
/@apply ([^;}]*)$/,
343-
['.', separator],
344-
tailwind.config,
345-
'.'
346-
)
356+
createCompletionItemProvider({
357+
items: this._items,
358+
languages: CSS_TYPES,
359+
regex: /@apply ([^;}]*)$/,
360+
triggerCharacters: ['.', separator],
361+
config: tailwind.config,
362+
prefix: '.'
363+
})
347364
)
348365

349366
this._providers.push(
350-
createCompletionItemProvider(
351-
this._items,
352-
HTML_TYPES,
353-
/\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
354-
["'", '"', ' ', '.', separator],
355-
tailwind.config
356-
)
367+
createCompletionItemProvider({
368+
items: this._items,
369+
languages: HTML_TYPES,
370+
regex: /\bclass(Name)?=["']([^"']*)$/, // /\bclass(Name)?=(["'])(?!.*?\2)/
371+
triggerCharacters: ["'", '"', ' ', '.', separator],
372+
config: tailwind.config,
373+
emmet: true
374+
})
375+
)
376+
377+
// Vue.js
378+
this._providers.push(
379+
createCompletionItemProvider({
380+
items: this._items,
381+
languages: ['vue'],
382+
regex: /\bclass(Name)?=["']([^"']*)$/,
383+
enable: text => {
384+
if (
385+
(text.indexOf('<template') !== -1 &&
386+
text.indexOf('</template>') === -1) ||
387+
(text.indexOf('<script') !== -1 && text.indexOf('</script>') === -1)
388+
) {
389+
return true
390+
}
391+
return false
392+
},
393+
triggerCharacters: ["'", '"', ' ', '.', separator],
394+
config: tailwind.config,
395+
emmet: true
396+
})
397+
)
398+
this._providers.push(
399+
createCompletionItemProvider({
400+
items: this._items,
401+
languages: ['vue'],
402+
regex: /@apply ([^;}]*)$/,
403+
triggerCharacters: ['.', separator],
404+
config: tailwind.config,
405+
enable: text => {
406+
if (
407+
text.indexOf('<style') !== -1 &&
408+
text.indexOf('</style>') === -1
409+
) {
410+
return true
411+
}
412+
return false
413+
}
414+
})
357415
)
358416

359417
this._providers.push(

0 commit comments

Comments
 (0)