Format CSS prop for emotion (#3381)

src/clean-ast.js

@@ -229,6 +229,16 @@ function massageAST(ast, parent) {
       quasis.forEach(q => delete q.value);
     }
 
+    // CSS template literals in css prop
+    if (
+      ast.type === "JSXAttribute" &&
+      ast.name.name === "css" &&
+      ast.value.type === "JSXExpressionContainer" &&
+      ast.value.expression.type === "TemplateLiteral"
+    ) {
+      newObj.value.expression.quasis.forEach(q => delete q.value);
+    }
+
     // styled-components, graphql, markdown
     if (
       ast.type === "TaggedTemplateExpression" &&

src/multiparser.js

@@ -94,7 +94,9 @@ function fromBabylonFlowOrTypeScript(path, print, options) {
 
   switch (node.type) {
     case "TemplateLiteral": {
-      const isCss = [isStyledJsx, isStyledComponents].some(isIt => isIt(path));
+      const isCss = [isStyledJsx, isStyledComponents, isCssProp].some(isIt =>
+        isIt(path)
+      );
 
       if (isCss) {
         // Get full template literal with expressions replaced by placeholders
@@ -534,6 +536,21 @@ function isStyledComponents(path) {
   }
 }
 
+/**
+ * JSX element with CSS prop
+ */
+function isCssProp(path) {
+  const parent = path.getParentNode();
+  const parentParent = path.getParentNode(1);
+  return (
+    parentParent &&
+    parent.type === "JSXExpressionContainer" &&
+    parentParent.type === "JSXAttribute" &&
+    parentParent.name.type === "JSXIdentifier" &&
+    parentParent.name.name === "css"
+  );
+}
+
 function isStyledIdentifier(node) {
   return node.type === "Identifier" && node.name === "styled";
 }

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

@@ -1,5 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`css-prop.js 1`] = `
+function SomeComponent (props) {
+  // Create styles as if you're calling css and the class will be applied to the component
+  return (<div css={\`
+    color: blue;
+    font-size: 17 px;
+
+    &:hover {
+      color: green;
+    }
+
+    & .some-class {
+      font-size: 20px;
+    }
+  \`}>
+    This will be blue until hovered.
+    <div className="some-class">
+      This font size will be 20px
+    </div>
+  </div>)
+}
+
+const TestComponent = ({ children, ...props }) => (
+  <div css={\`color: white; background: black\`}>
+    {children}
+  </div>
+);
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+function SomeComponent(props) {
+  // Create styles as if you're calling css and the class will be applied to the component
+  return (
+    <div
+      css={\`
+        color: blue;
+        font-size: 17 px;
+
+        &:hover {
+          color: green;
+        }
+
+        & .some-class {
+          font-size: 20px;
+        }
+      \`}
+    >
+      This will be blue until hovered.
+      <div className="some-class">This font size will be 20px</div>
+    </div>
+  );
+}
+
+const TestComponent = ({ children, ...props }) => (
+  <div
+    css={\`
+      color: white;
+      background: black;
+    \`}
+  >
+    {children}
+  </div>
+);
+
+`;
+
 exports[`expressions.js 1`] = `
 const long = \`long \${a//comment
   .b} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long long\`;

tests/template_literals/css-prop.js

@@ -0,0 +1,26 @@
+function SomeComponent (props) {
+  // Create styles as if you're calling css and the class will be applied to the component
+  return (<div css={`
+    color: blue;
+    font-size: 17 px;
+
+    &:hover {
+      color: green;
+    }
+
+    & .some-class {
+      font-size: 20px;
+    }
+  `}>
+    This will be blue until hovered.
+    <div className="some-class">
+      This font size will be 20px
+    </div>
+  </div>)
+}
+
+const TestComponent = ({ children, ...props }) => (
+  <div css={`color: white; background: black`}>
+    {children}
+  </div>
+);