Merge branch 'master' into diagnostics

.vscodeignore

@@ -8,3 +8,4 @@ contributing.md
 node_modules/**
 src/**
 tests/**
+img/**

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-tailwindcss",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

@@ -5,7 +5,7 @@
   "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 @@
         "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\"}`"
         }
       }
     }

src/lsp/providers/completionProvider.ts

@@ -126,7 +126,7 @@ function provideClassAttributeCompletions(
     end: position,
   })
 
-  const match = findLast(/[\s:]class(?:Name)?=['"`{]/gi, str)
+  const match = findLast(/(?:\b|:)class(?:Name)?=['"`{]/gi, str)
 
   if (match === null) {
     return null

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 @@ export function findClassListsInHtmlRange(
   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 }[] = []