customize css prop component injection depending on use case (#228)

generally speaking, the component should be injected just before
it's needed, unless it's a styled() HOC and referring to another
component in scope, in which case we need to find that component
and inject immediately after it

Author: quantizor

src/visitors/transpileCssProp.js

@@ -45,11 +45,20 @@ export default t => (path, state) => {
   )
 
   let styled
+  let injector
 
   if (TAG_NAME_REGEXP.test(name)) {
     styled = t.memberExpression(importName, t.identifier(name))
   } else {
     styled = t.callExpression(importName, [t.identifier(name)])
+
+    if (bindings[name] && !t.isImportDeclaration(bindings[name].path.parent)) {
+      injector = nodeToInsert =>
+        (t.isVariableDeclaration(bindings[name].path.parent)
+          ? bindings[name].path.parentPath
+          : bindings[name].path
+        ).insertAfter(nodeToInsert)
+    }
   }
 
   let css
@@ -179,9 +188,17 @@ export default t => (path, state) => {
     }, [])
   }
 
-  // Add the tagged template expression and then requeue the newly added node
-  // so Babel runs over it again
-  const length = program.node.body.push(
+  if (!injector) {
+    let parent = elem
+
+    while (!t.isProgram(parent.parentPath)) {
+      parent = parent.parentPath
+    }
+
+    injector = nodeToInsert => parent.insertBefore(nodeToInsert)
+  }
+
+  injector(
     t.variableDeclaration('var', [
       t.variableDeclarator(
         id,
@@ -191,6 +208,4 @@ export default t => (path, state) => {
       ),
     ])
   )
-
-  program.requeue(program.get('body')[length - 1])
 }

test/fixtures/transpile-css-prop-add-import/output.js

@@ -27,6 +27,8 @@ function _templateObject() {
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+var _StyledDiv = _styledComponents["default"].div(_templateObject());
+
 var _default = function _default() {
   return <_StyledDiv>
     <_Card.default>
@@ -41,5 +43,3 @@ var _default = function _default() {
 };
 
 exports["default"] = _default;
-
-var _StyledDiv = _styledComponents["default"].div(_templateObject());

test/fixtures/transpile-css-prop-add-require/output.js

@@ -23,10 +23,10 @@ function _templateObject() {
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+var _StyledDiv = _styledComponents["default"].div(_templateObject());
+
 var _default = function _default() {
   return <_StyledDiv />;
 };
 
 exports["default"] = _default;
-
-var _StyledDiv = _styledComponents["default"].div(_templateObject());

test/fixtures/transpile-css-prop-all-options-on/code.js

@@ -1,4 +1,6 @@
 import styled from 'styled-components'
+import SomeComponent from '../SomeComponentPath'
+const { SomeOtherComponent } = require('../SomeOtherComponentPath')
 
 /**
  * control
@@ -133,3 +135,22 @@ const ObjectPropMixedInputs = p => {
     </p>
   )
 }
+
+/* styled component defined after function it's used in */
+
+const EarlyUsageComponent = p => <Thing3 css="color: red;" />
+
+const Thing3 = styled.div`
+  color: blue;
+`
+
+const EarlyUsageComponent2 = p => <Thing4 css="color: red;" />
+
+function Thing4(props) {
+  return <div {...props} />
+}
+
+/* insert before usage for non-local scope styled HOC targets */
+
+const ImportedComponentUsage = p => <SomeComponent css="color: red;" />
+const RequiredComponentUsage = p => <SomeOtherComponent css="color: red;" />