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,43 @@ import { lazy } from './lazy'
 
 const classAttributeStates: { [x: string]: moo.Rules } = {
   doubleClassList: {
-    lbrace: { match: /(?<!\\)\{/, push: 'interp' },
+    lbrace: { match: /(?<!\\)\{/, push: 'interpBrace' },
     rbrace: { match: /(?<!\\)\}/, pop: 1 },
     end: { match: /(?<!\\)"/, pop: 1 },
     classlist: { match: /[\s\S]/, lineBreaks: true },
   },
   singleClassList: {
-    lbrace: { match: /(?<!\\)\{/, push: 'interp' },
+    lbrace: { match: /(?<!\\)\{/, push: 'interpBrace' },
     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 },
   },
-  interp: {
+  interpBrace: {
     startSingle: { match: /(?<!\\)'/, push: 'singleClassList' },
     startDouble: { match: /(?<!\\)"/, push: 'doubleClassList' },
     startTick: { match: /(?<!\\)`/, push: 'tickClassList' },
-    lbrace: { match: /(?<!\\)\{/, push: 'interp' },
+    lbrace: { match: /(?<!\\)\{/, push: 'interpBrace' },
     rbrace: { match: /(?<!\\)\}/, pop: 1 },
     text: { match: /[\s\S]/, lineBreaks: true },
   },
+  interpSingle: {
+    startDouble: { match: /(?<!\\)"/, push: 'doubleClassList' },
+    startTick: { match: /(?<!\\)`/, push: 'tickClassList' },
+    single: { match: /(?<!\\)'/, pop: 1 },
+    text: { match: /[\s\S]/, lineBreaks: true },
+  },
+  interpDouble: {
+    startSingle: { match: /(?<!\\)'/, push: 'singleClassList' },
+    startTick: { match: /(?<!\\)`/, push: 'tickClassList' },
+    double: { match: /(?<!\\)"/, pop: 1 },
+    text: { match: /[\s\S]/, lineBreaks: true },
+  },
 }
 
 export const getClassAttributeLexer = lazy(() =>
@@ -35,7 +47,7 @@   moo.states({
     main: {
       start1: { match: '"', push: 'doubleClassList' },
       start2: { match: "'", push: 'singleClassList' },
-      start3: { match: '{', push: 'interp' },
+      start3: { match: '{', push: 'interpBrace' },
     },
     ...classAttributeStates,
   })
@@ -44,10 +56,10 @@
 export const getComputedClassAttributeLexer = lazy(() =>
   moo.states({
     main: {
-      quote: { match: /['"{]/, push: 'interp' },
+      lbrace: { match: '{', push: 'interpBrace' },
+      single: { match: "'", push: 'interpSingle' },
+      double: { match: '"', push: 'interpDouble' },
     },
-    // TODO: really this should use a different interp definition that is
-    // terminated correctly based on the initial quote type
     ...classAttributeStates,
   })
 )