Improve jsx output for style components (#1144)

* Hug template literals inside of JSXExpressionContainer

We already hug a bunch of things inside of `{}`. It seems that it's a good idea to do it for template literals as well. I don't think I've seen anyone actually indent them.

Fixes #1090

* Inline jsx elements with single template literal expression

If there is a single expression and a single template literal, then a lot of people in the jsx-style world inline it. I've also myself used this for markdown and printed it that way. So we probably should print it that way.

Note that I'm checking for children.length === 1, this means that if there's any whitespace, this is not going to be true and will not enter this case. So it WON'T reformat

```js
<style>
  {`
     color: red;
  `}
</style>
```

into

```js
<style>{`
    color: red;
`}</style>
```

which is great. You have to opt-in to the second style in order to get it.

Fixes #1090

src/printer.js

@@ -1269,6 +1269,8 @@ function genericPrintNoParens(path, options, print, args) {
         n.expression.type === "CallExpression" ||
         n.expression.type === "FunctionExpression" ||
         n.expression.type === "JSXEmptyExpression" ||
+        n.expression.type === "TemplateLiteral" ||
+        n.expression.type === "TaggedTemplateExpression" ||
         (parent.type === "JSXElement" &&
           (n.expression.type === "ConditionalExpression" ||
             isBinaryish(n.expression)));
@@ -2912,8 +2914,23 @@ function printJSXElement(path, options, print) {
     delete n.closingElement;
   }
 
-  // If no children, just print the opening element
   const openingLines = path.call(print, "openingElement");
+  const closingLines = path.call(print, "closingElement");
+
+  if (
+    n.children.length === 1 &&
+    n.children[0].type === "JSXExpressionContainer" &&
+    (n.children[0].expression.type === "TemplateLiteral" ||
+      n.children[0].expression.type === "TaggedTemplateExpression")
+  ) {
+    return concat([
+      openingLines,
+      concat(path.map(print, "children")),
+      closingLines
+    ]);
+  }
+
+  // If no children, just print the opening element
   if (n.openingElement.selfClosing) {
     assert.ok(!n.closingElement);
     return openingLines;
@@ -3000,8 +3017,6 @@ function printJSXElement(path, options, print) {
     )
   ];
 
-  const closingLines = path.call(print, "closingElement");
-
   const multiLineElem = group(
     concat([
       openingLines,

tests/jsx_template/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styled-components.js 1`] = `
+"<style jsx>{\`
+  p {
+    color: red;
+  }
+\`}</style>;
+
+<style jsx>{tpl\`
+  p {
+    color: red;
+  }
+\`}</style>;
+
+<style jsx>
+  {\`p {
+     color: red;
+     }
+  \`}
+</style>;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<style jsx>{\`
+  p {
+    color: red;
+  }
+\`}</style>;
+
+<style jsx>{tpl\`
+  p {
+    color: red;
+  }
+\`}</style>;
+
+<style jsx>
+  {\`p {
+     color: red;
+     }
+  \`}
+</style>;
+"
+`;

tests/jsx_template/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname);

tests/jsx_template/styled-components.js

@@ -0,0 +1,18 @@
+<style jsx>{`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>{tpl`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>
+  {`p {
+     color: red;
+     }
+  `}
+</style>;