1
2
3
4
5
6
7
8
9

diff --git a/.vscodeignore b/.vscodeignore
index eef67fbd5ddbdef7a67fc3a82d8672cdf6962895..23a60828e8f0b03542bc2d6c396023fd6f92343e 100755
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -8,3 +8,4 @@ contributing.md
 node_modules/**
 src/**
 tests/**
+img/**

1
2
3
4

diff --git a/img/css-highlighting-after.png b/img/css-highlighting-after.png
new file mode 100755
index 0000000000000000000000000000000000000000..86a12fb8596e001e2c68d171733cb7950d66335c
Binary files /dev/null and b/img/css-highlighting-after.png differ

1
2
3
4

diff --git a/img/css-highlighting-before.png b/img/css-highlighting-before.png
new file mode 100755
index 0000000000000000000000000000000000000000..2eeffdc19d7293136e52f9426eb66456d0c1abb4
Binary files /dev/null and b/img/css-highlighting-before.png differ

1
2
3
4

diff --git a/img/css.gif b/img/css.gif
new file mode 100755
index 0000000000000000000000000000000000000000..e81904e7863349207daf4e368aae489a2f9374d8
Binary files /dev/null and b/img/css.gif differ

1
2
3
4

diff --git a/img/html-hover.gif b/img/html-hover.gif
new file mode 100755
index 0000000000000000000000000000000000000000..94540b86a062f0274f9ae1d3d755898f749fed43
Binary files /dev/null and b/img/html-hover.gif differ

1
2
3
4

diff --git a/img/html.gif b/img/html.gif
new file mode 100755
index 0000000000000000000000000000000000000000..8ffc7ffa9962333d28c60136b1f7ad50edf09883
Binary files /dev/null and b/img/html.gif differ

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

diff --git a/package-lock.json b/package-lock.json
index 9f6cc9e8f8945efca1701457b98f5e55ae655dfe..91c1aca81ac946c1fd36e4fd59904914710f8008 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "vscode-tailwindcss",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

 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

diff --git a/package.json b/package.json
index 456a3dccab16c2e9747c42d823e08749a55f1c98..2b5746fac07659c552f3a9436395bba7e0932a1d 100755
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@   "description": "Tailwind CSS class name completion",
   "preview": true,
   "author": "Brad Cornes <hello@bradley.dev>",
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "homepage": "https://github.com/bradlc/vscode-tailwindcss",
   "bugs": {
     "url": "https://github.com/bradlc/vscode-tailwindcss/issues",
@@ -60,12 +60,15 @@       "properties": {
         "tailwindCSS.emmetCompletions": {
           "type": "boolean",
           "default": false,
-          "description": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`."
+          "markdownDescription": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`"
         },
         "tailwindCSS.includeLanguages": {
           "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
           "default": {},
-          "description": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
+          "markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
         }
       }
     }

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

diff --git a/src/lsp/providers/completionProvider.ts b/src/lsp/providers/completionProvider.ts
index 8f47ca6a5ff2c7a6dda52817da2eafd830386ee1..6dbb1e7a8de391c327c00dee9b74fb0b1fe08c87 100644
--- a/src/lsp/providers/completionProvider.ts
+++ b/src/lsp/providers/completionProvider.ts
@@ -126,7 +126,7 @@     start: { line: Math.max(position.line - 10, 0), character: 0 },
     end: position,
   })
 
-  const match = findLast(/[\s:]class(?:Name)?=['"`{]/gi, str)
+  const match = findLast(/(?:\b|:)class(?:Name)?=['"`{]/gi, str)
 
   if (match === null) {
     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

diff --git a/src/lsp/util/find.ts b/src/lsp/util/find.ts
index 9a04ac4de58771e60379719acd0b50a5e1ebcdf2..3eb49e31772022aa2bb2038fdd38e30dccab888d 100644
--- a/src/lsp/util/find.ts
+++ b/src/lsp/util/find.ts
@@ -5,8 +5,11 @@ import { isCssContext, isCssDoc } from './css'
 import { isHtmlContext, isHtmlDoc, isSvelteDoc, isVueDoc } from './html'
 import { isWithinRange } from './isWithinRange'
 import { isJsContext, isJsDoc } from './js'
-import { getClassAttributeLexer } from './lexers'
 import { flatten } from '../../util/array'
+import {
+  getClassAttributeLexer,
+  getComputedClassAttributeLexer,
+} from './lexers'
 
 export function findAll(re: RegExp, str: string): RegExpMatchArray[] {
   let match: RegExpMatchArray
@@ -111,13 +114,16 @@   doc: TextDocument,
   range?: Range
 ): DocumentClassList[] {
   const text = doc.getText(range)
-  const matches = findAll(/[\s:]class(?:Name)?=['"`{]/g, text)
+  const matches = findAll(/(?:\b|:)class(?:Name)?=['"`{]/g, text)
   const result: DocumentClassList[] = []
 
   matches.forEach((match) => {
     const subtext = text.substr(match.index + match[0].length - 1, 200)
 
-    let lexer = getClassAttributeLexer()
+    let lexer =
+      match[0][0] === ':'
+        ? getComputedClassAttributeLexer()
+        : getClassAttributeLexer()
     lexer.reset(subtext)
 
     let classLists: { value: string; offset: number }[] = []