From 0b2024e31652acb8c5d90bcd99e93403a96236c3 Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
Date: Wed, 9 Feb 2022 10:46:38 +0000
Subject: [PATCH] Fix single quotes being converted to double quotes (#51)

---
 package-lock.json | 1 +
 package.json      | 1 +
 src/index.js      | 8 ++++++++
 tests/test.js     | 1 +
 4 files changed, 11 insertions(+)

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>`,