Wrap escaped quote in JSX attribute in JSXExpressionContainer (fixes …

…issue mentioned in #73)
prettier · Jan 12, 2017 · 8f652af · 8f652af
1 parent e033326
commit 8f652af
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/printer.js b/src/printer.js
@@ -1028,8 +1028,17 @@ function genericPrintNoParens(path, options, print) {
   case "JSXAttribute":
     parts.push(path.call(print, "name"));
 
-    if (n.value)
+    if (n.value) {
+      // JSX doesn't allow attributes with escaped quotes, so wrap in JSXExpressionContainer
+      if (n.value.type === "Literal") {
+        const str = nodeStr(n.value.value, options);
+        if (str.match(/\\['"]/)) {
+          parts.push("=", "{", str, "}");
+          return concat(parts);
+        }
+      }
       parts.push("=", path.call(print, "value"));
+    }
 
     return concat(parts);
   case "JSXIdentifier":

diff --git a/tests/prettier/__snapshots__/jsfmt.spec.js.snap b/tests/prettier/__snapshots__/jsfmt.spec.js.snap
@@ -178,6 +178,18 @@ const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) =>
 "
 `;
 
+exports[`test jsx-string-escape.js 1`] = `
+"<div
+  a=\"\'\"
+  b=\'\"\'
+  c={\"\\\"\"}
+  d={\'\\\'\'}
+/>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div a=\"\'\" b={\"\\\"\"} c={\"\\\"\"} d={\"\'\"} />;
+"
+`;
+
 exports[`test optional-type-name.js 1`] = `
 "type Foo = (any) => string
 

diff --git a/tests/prettier/jsx-string-escape.js b/tests/prettier/jsx-string-escape.js
@@ -0,0 +1,6 @@
+<div
+  a="'"
+  b='"'
+  c={"\""}
+  d={'\''}
+/>