Revert "remove jsx transforms"

This reverts commit 5a1d3a1.

__tests__/__fixtures__/02-jsx/code.js

@@ -0,0 +1,6 @@
+import g from "glamorous";
+
+const GDot1 = props => <g.Span {...props}>Hi, I'm a Span!</g.Span>;
+const GDot2 = props => <g.Div css={{marginTop: 5}}/>;
+const GDot3 = props => <g.Div marginTop={5}/>;
+const GDot4 = props => <g.Div marginTop={5} css={{marginTop: 10}} marginBottom="5" onClick={handler}/>;

__tests__/__fixtures__/02-jsx/output.js

@@ -0,0 +1,15 @@
+const GDot1 = props => <span {...props}>Hi, I'm a Span!</span>;
+
+const GDot2 = props => <div css={{
+  marginTop: 5
+}} />;
+
+const GDot3 = props => <div css={{
+  marginTop: 5
+}} />;
+
+const GDot4 = props => <div css={{
+  marginTop: 10,
+  marginTop: 5,
+  marginBottom: "5"
+}} onClick={handler} />;

index.js

@@ -39,6 +39,50 @@ module.exports = function(babel) {
     });
   };
 
+  const transformJSXAttributes = jsxAttrs => {
+    if (!jsxAttrs) return [];
+    const appendToCss = [];
+    let cssAttr = null;
+    const newAttrs = jsxAttrs.filter(attr => {
+      if (t.isJSXSpreadAttribute(attr)) return true;
+      const {value, name: jsxKey} = attr;
+      if (jsxKey.name === "css") {
+        cssAttr = attr;
+      } else {
+        // TODO: be smarter about finding out which properties
+        // are CSS properties and which ones are not
+
+        // event handlers are no CSS Props!
+        if (jsxKey.name.indexOf("on") === 0) return true;
+
+        appendToCss.push({
+          name: t.identifier(jsxKey.name),
+          value: t.isJSXExpressionContainer(value) ? value.expression : value,
+        });
+        return false;
+      }
+      return true;
+    });
+    if (appendToCss.length > 0) {
+      if (!cssAttr) {
+        cssAttr = t.jsxAttribute(
+          t.jsxIdentifier("css"),
+          t.jsxExpressionContainer(t.objectExpression([]))
+        );
+        newAttrs.push(cssAttr);
+      } else if (!t.isObjectExpression(cssAttr.value.expression)) {
+        // turn <span css={obj} .../> into <span css={{...obj}} .../>
+        // so we can add more properties to this css attribute
+        cssAttr.value.expression = t.objectExpression([t.spreadElement(cssAttr.value.expression)]);
+      }
+      appendToCss.forEach(({name, value}) => {
+        cssAttr.value.expression.properties.push(t.objectProperty(name, value));
+      });
+      cssAttr.value.expression.properties;
+    }
+    return newAttrs;
+  };
+
   const glamorousVisitor = {
     // for each reference to an identifier...
     ReferencedIdentifier(path, {getNewName, oldName}) {
@@ -76,10 +120,8 @@ module.exports = function(babel) {
         case "JSXMemberExpression": {
           const grandParent = path.parentPath.parent;
           grandParent.name = t.identifier(grandParent.name.property.name.toLowerCase());
-          if (t.isJSXOpeningElement(grandParent) && grandParent.attributes) {
-            console.warn(
-              "The current version of the codemod has only weak support of the '<glamorous.Div>' syntax. It won't transform any attributes."
-            );
+          if (t.isJSXOpeningElement(grandParent)) {
+            grandParent.attributes = transformJSXAttributes(grandParent.attributes);
           }
           break;
         }