diff --git a/package-lock.json b/package-lock.json
index c6ea0a2a..9a5bc8c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "import-fresh": "^3.3.0",
         "import-from": "^4.0.0",
         "jest": "^27.4.7",
+        "jsesc": "^2.5.2",
         "license-checker": "^25.0.1",
         "line-column": "^1.0.2",
         "object-hash": "^2.2.0",
diff --git a/package.json b/package.json
index e4126cd1..d304a812 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "import-fresh": "^3.3.0",
     "import-from": "^4.0.0",
     "jest": "^27.4.7",
+    "jsesc": "^2.5.2",
     "license-checker": "^25.0.1",
     "line-column": "^1.0.2",
     "object-hash": "^2.2.0",
diff --git a/src/index.js b/src/index.js
index 2082f34e..168b9bc9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,6 +18,7 @@ import requireFresh from 'import-fresh'
 import objectHash from 'object-hash'
 import * as svelte from 'prettier-plugin-svelte'
 import lineColumn from 'line-column'
+import jsesc from 'jsesc'
 
 let contextMap = new Map()
 
@@ -168,6 +169,13 @@ function transformHtml(attributes, computedAttributes = []) {
             if (isStringLiteral(path.node)) {
               if (sortStringLiteral(path.node, { env })) {
                 didChange = true
+
+                // https://github.com/benjamn/recast/issues/171#issuecomment-224996336
+                let quote = path.node.extra.raw[0]
+                let value = jsesc(path.node.value, {
+                  quotes: quote === "'" ? 'single' : 'double',
+                })
+                path.node.value = new String(quote + value + quote)
               }
             }
             this.traverse(path)
diff --git a/tests/test.js b/tests/test.js
index 583cf79b..b5888daf 100644
--- a/tests/test.js
+++ b/tests/test.js
@@ -108,6 +108,7 @@ let vue = [
   t`<div :class="\`${yes}\`"></div>`,
   t`<div :class="\`${yes} \${someVar}\`"></div>`,
   t`<div :class="someVar! ? \`${yes}\` : \`${yes}\`"></div>`, // ts
+  t`<div :class="someVar ? someFunc(someVar as string) + '${yes}' : ''"></div>`, // ts
   [
     `<div :class="\`sm:block inline flex\${someVar}\`"></div>`,
     `<div :class="\`inline sm:block flex\${someVar}\`"></div>`,