Fix single quotes being converted to double quotes (#51)

Author: bradlc

package-lock.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",

package.json

@@ -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)

src/index.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>`,