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

diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index cbd1f36df3de7c81cfc170c4a39911a27cfab264..bac0cd328b5970183ca3f6cdb9377dd006d39ea4 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -10,8 +10,8 @@ } from 'vscode-languageserver'
 const dlv = require('dlv')
 import removeMeta from '../util/removeMeta'
 import { getColor, getColorFromString } from '../util/color'
-import { isHtmlDoc } from '../util/html'
-import { isCssDoc } from '../util/css'
+import { isHtmlContext } from '../util/html'
+import { isCssContext } from '../util/css'
 import { findLast, findJsxStrings, arrFindLast } from '../util/find'
 import { stringifyConfigValue } from '../util/stringify'
 import isObject from '../util/isObject'
@@ -171,11 +171,11 @@   params: CompletionParams
 ): CompletionList {
   let doc = state.editor.documents.get(params.textDocument.uri)
 
-  if (isHtmlDoc(doc)) {
+  if (isHtmlContext(doc, params.position)) {
     return provideClassAttributeCompletions(state, params)
   }
 
-  if (isCssDoc(doc)) {
+  if (isCssContext(doc, params.position)) {
     return provideAtApplyCompletions(state, params)
   }
 
@@ -188,7 +188,7 @@   { position, textDocument }: CompletionParams
 ): CompletionList {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssDoc(doc)) {
+  if (!isCssContext(doc, position)) {
     return null
   }
 

 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

diff --git a/packages/tailwindcss-language-server/src/util/css.ts b/packages/tailwindcss-language-server/src/util/css.ts
index 88a1dcc31af589f2313844394e5116afed4b2015..33b70e9bcd31f6a84497b7a1df3480556e34435f 100644
--- a/packages/tailwindcss-language-server/src/util/css.ts
+++ b/packages/tailwindcss-language-server/src/util/css.ts
@@ -1,4 +1,5 @@
-import { TextDocument } from 'vscode-languageserver'
+import { TextDocument, Position } from 'vscode-languageserver'
+import { isMixedDoc, isInsideTag } from './html'
 
 export const CSS_LANGUAGES = [
   'css',
@@ -7,10 +8,25 @@   'postcss',
   'sass',
   'scss',
   'stylus',
-  'svelte',
-  'vue'
 ]
 
-export function isCssDoc(doc: TextDocument): boolean {
+function isCssDoc(doc: TextDocument): boolean {
   return CSS_LANGUAGES.indexOf(doc.languageId) !== -1
 }
+
+export function isCssContext(doc: TextDocument, position: Position): boolean {
+  if (isCssDoc(doc)) {
+    return true
+  }
+
+  if (isMixedDoc(doc)) {
+    let str = doc.getText({
+      start: { line: 0, character: 0 },
+      end: position,
+    })
+
+    return isInsideTag(str, ['style'])
+  }
+
+  return false
+}

 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
74
75
76

diff --git a/packages/tailwindcss-language-server/src/util/html.ts b/packages/tailwindcss-language-server/src/util/html.ts
index 97761adc6e19c9ad4e0342018f3b5d597e701bee..fee187f77aaaaa874ac03daa38a0d8f66e284fec 100644
--- a/packages/tailwindcss-language-server/src/util/html.ts
+++ b/packages/tailwindcss-language-server/src/util/html.ts
@@ -1,4 +1,4 @@
-import { TextDocument } from 'vscode-languageserver'
+import { TextDocument, Position } from 'vscode-languageserver'
 import { JS_LANGUAGES } from './js'
 
 export const HTML_LANGUAGES = [
@@ -19,12 +19,61 @@   'nunjucks',
   'php',
   'razor',
   'slim',
-  'svelte',
   'twig',
-  'vue',
-  ...JS_LANGUAGES
+  ...JS_LANGUAGES,
 ]
 
-export function isHtmlDoc(doc: TextDocument): boolean {
+function isHtmlDoc(doc: TextDocument): boolean {
   return HTML_LANGUAGES.indexOf(doc.languageId) !== -1
 }
+
+function isVueDoc(doc: TextDocument): boolean {
+  return doc.languageId === 'vue'
+}
+
+function isSvelteDoc(doc: TextDocument): boolean {
+  return doc.languageId === 'svelte'
+}
+
+export function isMixedDoc(doc: TextDocument): boolean {
+  return isVueDoc(doc) || isSvelteDoc(doc)
+}
+
+export function isHtmlContext(doc: TextDocument, position: Position): boolean {
+  if (isHtmlDoc(doc)) {
+    return true
+  }
+
+  if (isMixedDoc(doc)) {
+    let str = doc.getText({
+      start: { line: 0, character: 0 },
+      end: position,
+    })
+
+    if (isVueDoc(doc)) {
+      return isInsideTag(str, ['template', 'script'])
+    }
+
+    if (isSvelteDoc(doc)) {
+      return !isInsideTag(str, ['style'])
+    }
+  }
+
+  return false
+}
+
+export function isInsideTag(str: string, tag: string | string[]): boolean {
+  let open = 0
+  let close = 0
+  let match: RegExpExecArray
+  let tags = Array.isArray(tag) ? tag : [tag]
+  let regex = new RegExp(`<(?<slash>/?)(?:${tags.join('|')})\\b`, 'ig')
+  while ((match = regex.exec(str)) !== null) {
+    if (match.groups.slash) {
+      close += 1
+    } else {
+      open += 1
+    }
+  }
+  return open > 0 && open > close
+}

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

diff --git a/packages/tailwindcss-language-server/src/util/js.ts b/packages/tailwindcss-language-server/src/util/js.ts
index 6c0e484ef90f9978ba0478fb3ae9df0998b5c098..fa2390a3a8184efb1469ebb4fe6de1ca59751d6f 100644
--- a/packages/tailwindcss-language-server/src/util/js.ts
+++ b/packages/tailwindcss-language-server/src/util/js.ts
@@ -4,8 +4,7 @@ export const JS_LANGUAGES = [
   'javascript',
   'javascriptreact',
   'reason',
-  'svelte',
-  'typescriptreact'
+  'typescriptreact',
 ]
 
 export function isJsDoc(doc: TextDocument): boolean {

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

diff --git a/packages/tailwindcss-vscode/src/extension.ts b/packages/tailwindcss-vscode/src/extension.ts
index f6a4b88f8c3b41f093c25639696b51c95b235b0f..81ca5e142d98ad15c2af1fae7eac4aaf35da44b2 100755
--- a/packages/tailwindcss-vscode/src/extension.ts
+++ b/packages/tailwindcss-vscode/src/extension.ts
@@ -22,7 +22,7 @@ 
 let defaultClient: LanguageClient
 let clients: Map<string, LanguageClient> = new Map()
 
-const LANGS = ['css', 'javascript', 'html']
+const LANGS = ['css', 'javascript', 'html', 'vue', 'svelte']
 
 let _sortedWorkspaceFolders: string[] | undefined
 function sortedWorkspaceFolders(): string[] {