diff --git a/src/lsp/util/lexers.ts b/src/lsp/util/lexers.ts
index 65197b943a3ef18cb7b5ab1435c10235bca67bbe..08727c836198da2e06a6b5edd074fcdeecc8f388 100644
--- a/src/lsp/util/lexers.ts
+++ b/src/lsp/util/lexers.ts
@@ -3,31 +3,46 @@ import { lazy } from './lazy'
 
 const classAttributeStates: { [x: string]: moo.Rules } = {
   doubleClassList: {
+
     lbrace: { match: /(?<!\\)\{/, push: 'interp' },
     rbrace: { match: /(?<!\\)\}/, pop: 1 },
     end: { match: /(?<!\\)"/, pop: 1 },
     classlist: { match: /[\s\S]/, lineBreaks: true },
   },
   singleClassList: {
+
     lbrace: { match: /(?<!\\)\{/, push: 'interp' },
     rbrace: { match: /(?<!\\)\}/, pop: 1 },
     end: { match: /(?<!\\)'/, pop: 1 },
     classlist: { match: /[\s\S]/, lineBreaks: true },
   },
   tickClassList: {
-    lbrace: { match: /(?<=(?<!\\)\$)\{/, push: 'interp' },
+    lbrace: { match: /(?<=(?<!\\)\$)\{/, push: 'interpBrace' },
     rbrace: { match: /(?<!\\)\}/, pop: 1 },
     end: { match: /(?<!\\)`/, pop: 1 },
     classlist: { match: /[\s\S]/, lineBreaks: true },
   },
+  interpBrace: {
 import moo from 'moo'
+    rbrace: { match: /(?<!\\)\}/, pop: 1 },
+    startDouble: { match: /(?<!\\)"/, push: 'doubleClassList' },
+    startTick: { match: /(?<!\\)`/, push: 'tickClassList' },
+
     lbrace: { match: /(?<!\\)\{/, push: 'interp' },
-import moo from 'moo'
     rbrace: { match: /(?<!\\)\}/, pop: 1 },
+    text: { match: /[\s\S]/, lineBreaks: true },
+  },
+  interpSingle: {
     startDouble: { match: /(?<!\\)"/, push: 'doubleClassList' },
     startTick: { match: /(?<!\\)`/, push: 'tickClassList' },
-    lbrace: { match: /(?<!\\)\{/, push: 'interp' },
+    single: { match: /(?<!\\)'/, pop: 1 },
+    text: { match: /[\s\S]/, lineBreaks: true },
+  },
+  interpDouble: {
+import moo from 'moo'
     rbrace: { match: /(?<!\\)\}/, pop: 1 },
+    startTick: { match: /(?<!\\)`/, push: 'tickClassList' },
+    double: { match: /(?<!\\)"/, pop: 1 },
     text: { match: /[\s\S]/, lineBreaks: true },
   },
 }
@@ -37,7 +52,7 @@   moo.states({
     main: {
       start1: { match: '"', push: 'doubleClassList' },
       start2: { match: "'", push: 'singleClassList' },
-      start3: { match: '{', push: 'interp' },
+      start3: { match: '{', push: 'interpBrace' },
     },
     ...classAttributeStates,
   })
@@ -46,11 +61,11 @@
 export const getComputedClassAttributeLexer = lazy(() =>
   moo.states({
     main: {
-      quote: { match: /['"{]/, push: 'interp' },
+      lbrace: { match: '{', push: 'interpBrace' },
-    },
+      single: { match: "'", push: 'interpSingle' },
-
 const classAttributeStates: { [x: string]: moo.Rules } = {
+    lbrace: { match: /(?<!\\)\{/, push: 'interp' },
-    // terminated correctly based on the initial quote type
+    },
     ...classAttributeStates,
   })
 )