From 66748785c8edaac6b844c40753d87bf2def1d4fb Mon Sep 17 00:00:00 2001
From: LooSheng <loosheng@outlook.com>
Date: Tue, 14 Jun 2022 01:17:33 +0800
Subject: [PATCH] feat(autocomplete): vue file `:class` support (#1100)

---
 packages/preset-attributify/src/autocomplete.ts | 2 +-
 packages/shared-common/src/index.ts             | 2 +-
 test/autocomplete-utils.test.ts                 | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/preset-attributify/src/autocomplete.ts b/packages/preset-attributify/src/autocomplete.ts
index 110615989a..a3ff955c88 100644
--- a/packages/preset-attributify/src/autocomplete.ts
+++ b/packages/preset-attributify/src/autocomplete.ts
@@ -40,7 +40,7 @@ export const autocompleteExtractorAttributify: AutoCompleteExtractor = {
     if (!attrName)
       return null
 
-    if (attrName === 'class' || attrName === 'className')
+    if (attrName === 'class' || attrName === 'className' || attrName === ':class')
       return null
     if (attrValues === undefined) {
       return {
diff --git a/packages/shared-common/src/index.ts b/packages/shared-common/src/index.ts
index 1fad28a5c4..636a74368a 100644
--- a/packages/shared-common/src/index.ts
+++ b/packages/shared-common/src/index.ts
@@ -44,7 +44,7 @@ export function getMatchedPositions(code: string, matched: string[]) {
 
   // hightlight for plain classes
   let start = 0
-  code.split(/[\s"';<>]/g).forEach((i) => {
+  code.split(/[\s"'`;<>]/g).forEach((i) => {
     const end = start + i.length
     if (plain.has(i))
       result.push([start, end, i])
diff --git a/test/autocomplete-utils.test.ts b/test/autocomplete-utils.test.ts
index 8b403c4e2e..79206b9dbd 100644
--- a/test/autocomplete-utils.test.ts
+++ b/test/autocomplete-utils.test.ts
@@ -9,6 +9,9 @@ describe('searchUsageBoundary', () => {
     expect(searchUsageBoundary('<div class="p-1 p-2', 14).content)
       .toMatchInlineSnapshot('"p-1"')
 
+    expect(searchUsageBoundary('<div :class="`p-1 p-2', 16).content)
+      .toMatchInlineSnapshot('"p-1"')
+
     expect(searchUsageBoundary('<div p-1 p-2>', 10).content)
       .toMatchInlineSnapshot('"p-2"')