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