From a9be90c5d4fa8e5b53b369d91a279d6e4b56f926 Mon Sep 17 00:00:00 2001
From: Lucas Duailibe <lucasds@gmail.com>
Date: Sat, 2 Dec 2017 22:50:07 -0300
Subject: [PATCH] Format CSS prop for emotion

---
 src/multiparser.js                            | 19 +++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 64 +++++++++++++++++++
 tests/template_literals/css-prop.js           | 26 ++++++++
 3 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 tests/template_literals/css-prop.js

diff --git a/src/multiparser.js b/src/multiparser.js
index ade26630..70a770cb 100644
--- a/src/multiparser.js
+++ b/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";
 }
diff --git a/tests/template_literals/__snapshots__/jsfmt.spec.js.snap b/tests/template_literals/__snapshots__/jsfmt.spec.js.snap
index 224b1043..79e3abf7 100644
--- a/tests/template_literals/__snapshots__/jsfmt.spec.js.snap
+++ b/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\`;
diff --git a/tests/template_literals/css-prop.js b/tests/template_literals/css-prop.js
new file mode 100644
index 00000000..758c3d70
--- /dev/null
+++ b/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>
+);