fix injection location of generated components via css prop

[quantizor]

inject the generated components before the tree they're being used in rather than to the end of the file, this fixes situations where a bundler might wrap a component in an IIFE and our component generated from the css prop hasn't been initialized yet (fixes #221, #203)

[quantizor]

I assume this should be a safe thing to do since before we were basically doing the same thing but a file append instead of a sibling prepend to the node tree that we're currently working on.

[quantizor]

This is available to test under [email protected] if anyone wants to.

[mxstbr]

LGTM!

[quantizor]

Waiting for codesandbox to work again so I can test these changes against the babel macro

[quantizor]

I'm going to extract out the object css prop and @bpierre's changes into a separate branch, I'm getting weird errors building projects after the insert position changes and it needs more bake time

[quantizor]

Tested against a babel macro project and a fairly hefty nextjs project with [email protected] and it looks good.

[quantizor]

cleaned up the PR - all the content is the same as before just compacted and rebased

[UXDart]

I'm having this problem when using rollup to bundle, everything seems to be working but the generated code has the styledDiv creation after and outside the React.createElement, so I have error saying createElement received undefined. I assume this is because rollup ast must be different? what can I do? TIA!

[UXDart]

it seems this is the code that sets the injector, if the injector is null, then it adds to the program body, but at the end... for some reason

`
if (TAG_NAME_REGEXP.test(name)) {
styled = t.callExpression(importName, [t.stringLiteral(name)]);
} else {
styled = t.callExpression(importName, [nameExpression]);

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);
}

}
`

how can I get into the else part of the if? not sure what name should be and where... thx

[UXDart]

oh... nvm just found why this happens, I was using css prop on the main jsx file, I used it now inside a second file, and it works. it seems if css prop is used on main file, it is injecting the new var outside the main scope. thx