Repository: styled-components/babel-plugin-styled-components (js)

Issue:
css prop not working with babel plugins: "transform-react-inline-elements", "transform-react-constant-elements"
Hi,

I'm using [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) for a project and have upgraded styled-components to v4. 

For the production build I use the following babel configuration (i've only added `styled-components`, the rest is the initial configuration provided by the boilerplate):

```
"production": {
        "only": [
          "app"
        ],
        "plugins": [
          "styled-components",
          "transform-react-remove-prop-types",
          "transform-react-inline-elements",
          "transform-react-constant-elements"
        ]
      },
```

I have a component which uses the `css` prop, but even though it is working fine in development, when I run the production build the styles defined in the `css` prop are not being applied unless I remove `transform-react-inline-elements` and `transform-react-constant-elements` from the babel configurations.

I wasn't able to tell why it's happening, just reporting this here in case anyone has any clues. For now there's no workaround besides not using the `css` prop.

Thank you!

**Edit:** [Also confirmed here](https://github.com/styled-components/babel-plugin-styled-components/issues/203#issuecomment-468163379)

---

Example:

```
<div css={{ padding: '5rem', border: '1px solid red' }}>Dummy div</div>
```

`package.json`:

```
"babel-cli": "6.26.0",
    "babel-core": "6.26.3",
    "babel-eslint": "^8.2.6",
    "babel-loader": "7.1.4",
    "babel-plugin-dynamic-import-node": "1.2.0",
    "babel-plugin-react-intl": "2.4.0",
    "babel-plugin-react-transform": "3.0.0",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-inline-elements": "6.22.0",
    "babel-plugin-transform-react-jsx-source": "6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.13",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
```

Pull request description:
fix injection location of generated components via css prop
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)

Patch:
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
index 4f77033..c5aaed1 100644
--- a/src/visitors/transpileCssProp.js
+++ b/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 patch:
diff --git a/test/fixtures/transpile-css-prop-add-import/output.js b/test/fixtures/transpile-css-prop-add-import/output.js
index 8503995..c4655dd 100644
--- a/test/fixtures/transpile-css-prop-add-import/output.js
+++ b/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());
diff --git a/test/fixtures/transpile-css-prop-add-require/output.js b/test/fixtures/transpile-css-prop-add-require/output.js
index 99d7506..e00d2bd 100644
--- a/test/fixtures/transpile-css-prop-add-require/output.js
+++ b/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());
diff --git a/test/fixtures/transpile-css-prop-all-options-on/code.js b/test/fixtures/transpile-css-prop-all-options-on/code.js
index 00c8898..5b1a833 100644
--- a/test/fixtures/transpile-css-prop-all-options-on/code.js
+++ b/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;" />
diff --git a/test/fixtures/transpile-css-prop-all-options-on/output.js b/test/fixtures/transpile-css-prop-all-options-on/output.js
index 2c87f9b..ae5645f 100644
--- a/test/fixtures/transpile-css-prop-all-options-on/output.js
+++ b/test/fixtures/transpile-css-prop-all-options-on/output.js
@@ -2,42 +2,80 @@
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _SomeComponentPath = _interopRequireDefault(require("../SomeComponentPath"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var _require = require('../SomeOtherComponentPath'),
+    SomeOtherComponent = _require.SomeOtherComponent;
 /**
  * control
  */
+
+
+var _StyledSomeOtherComponent = (0, _styledComponents["default"])(SomeOtherComponent).withConfig({
+  displayName: "code___StyledSomeOtherComponent",
+  componentId: "sc-7evkve-0"
+})(["color:red;"]);
+
 var Thing = _styledComponents["default"].div.withConfig({
   displayName: "code__Thing",
-  componentId: "sc-7evkve-0"
+  componentId: "sc-7evkve-1"
 })(["color:red;"]);
 
 var Thing2 = (0, _styledComponents["default"])(Thing).withConfig({
   displayName: "code__Thing2",
-  componentId: "sc-7evkve-1"
+  componentId: "sc-7evkve-2"
 })(["background:blue;"]);
 /*
  * Basic fixtures
  */
 
+var _StyledP = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP",
+  componentId: "sc-7evkve-3"
+})(["flex:1;"]);
+
 var StaticString = function StaticString(p) {
   return <_StyledP>A</_StyledP>;
 };
 
+var _StyledP2 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP2",
+  componentId: "sc-7evkve-4"
+})(["flex:1;"]);
+
 var StaticTemplate = function StaticTemplate(p) {
   return <_StyledP2>
     A
   </_StyledP2>;
 };
 
+var _StyledP3 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP3",
+  componentId: "sc-7evkve-5"
+})({
+  color: 'blue'
+});
+
 var ObjectProp = function ObjectProp(p) {
   return <_StyledP3>A</_StyledP3>;
 };
 
+var _StyledP4 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP4",
+  componentId: "sc-7evkve-6"
+})(["flex:1;"]);
+
 var NoChildren = function NoChildren(p) {
   return <_StyledP4 />;
 };
 
+var _StyledP5 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP5",
+  componentId: "sc-7evkve-7"
+})(["color:blue;"]);
+
 var CssHelperProp = function CssHelperProp(p) {
   return <_StyledP5>
     A
@@ -48,20 +86,46 @@ var CssHelperProp = function CssHelperProp(p) {
  */
 
 
+var _StyledParagraph = (0, _styledComponents["default"])(Paragraph).withConfig({
+  displayName: "code___StyledParagraph",
+  componentId: "sc-7evkve-8"
+})(["flex:1"]);
+
 var CustomComp = function CustomComp(p) {
   return <_StyledParagraph>H</_StyledParagraph>;
 };
 
+var _StyledP6 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP6",
+  componentId: "sc-7evkve-9"
+})(["", ""], function (p) {
+  return p._css;
+});
+
 var DynamicProp = function DynamicProp(p) {
   return <_StyledP6 _css={props.cssText}>H</_StyledP6>;
 };
 
+var _StyledP7 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP7",
+  componentId: "sc-7evkve-10"
+})(["background:", ";"], function (p) {
+  return p._css2;
+});
+
 var LocalInterpolation = function LocalInterpolation(p) {
   return <_StyledP7 _css2={props.bg}>
     H
   </_StyledP7>;
 };
 
+var _StyledP8 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP8",
+  componentId: "sc-7evkve-11"
+})(["color:", ";"], function (props) {
+  return props.theme.a;
+});
+
 var FuncInterpolation = function FuncInterpolation(p) {
   return <_StyledP8>
     H
@@ -70,36 +134,75 @@ var FuncInterpolation = function FuncInterpolation(p) {
 
 var radius = 10;
 
+var _StyledP9 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP9",
+  componentId: "sc-7evkve-12"
+})(["border-radius:", "px;"], radius);
+
 var GlobalInterpolation = function GlobalInterpolation(p) {
   return <_StyledP9>
     H
   </_StyledP9>;
 };
 
+var _StyledP10 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP10",
+  componentId: "sc-7evkve-13"
+})(["color:", ";"], function (p) {
+  return p._css3;
+});
+
 var LocalCssHelperProp = function LocalCssHelperProp(p) {
   return <_StyledP10 _css3={p.color}>
     A
   </_StyledP10>;
 };
 
+var _StyledP11 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP11",
+  componentId: "sc-7evkve-14"
+})(["color:", ";"], function (props) {
+  return props.theme.color;
+});
+
 var DynamicCssHelperProp = function DynamicCssHelperProp(p) {
   return <_StyledP11>
     A
   </_StyledP11>;
 };
 
+var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost).withConfig({
+  displayName: "code___StyledButtonGhost",
+  componentId: "sc-7evkve-15"
+})(["flex:1"]);
+
 var CustomCompWithDot = function CustomCompWithDot(p) {
   return <_StyledButtonGhost>H</_StyledButtonGhost>;
 };
 
+var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New).withConfig({
+  displayName: "code___StyledButtonGhostNew",
+  componentId: "sc-7evkve-16"
+})(["flex:1"]);
+
 var NestedCompWithDot = function NestedCompWithDot(p) {
   return <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
 };
 
+var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost).withConfig({
+  displayName: "code___StyledButtonGhost2",
+  componentId: "sc-7evkve-17"
+})(["flex:1"]);
+
 var CustomCompWithDotLowerCase = function CustomCompWithDotLowerCase(p) {
   return <_StyledButtonGhost2>H</_StyledButtonGhost2>;
 };
 
+var _StyledButtonGhost3 = _styledComponents["default"]["button-ghost"].withConfig({
+  displayName: "code___StyledButtonGhost3",
+  componentId: "sc-7evkve-18"
+})(["flex:1"]);
+
 var CustomElement = function CustomElement(p) {
   return <_StyledButtonGhost3>H</_StyledButtonGhost3>;
 };
@@ -110,118 +213,70 @@ var getAfterValue = function getAfterValue() {
   return '"bar"';
 };
 
+var _StyledP12 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP12",
+  componentId: "sc-7evkve-19"
+})(function (p) {
+  return {
+    background: p._css4,
+    color: p._css5,
+    textAlign: 'left',
+    '::before': {
+      content: p._css6
+    },
+    '::after': {
+      content: p._css7
+    }
+  };
+});
+
 var ObjectPropMixedInputs = function ObjectPropMixedInputs(p) {
   var color = 'red';
   return <_StyledP12 _css4={p.background} _css5={color} _css6={globalVar} _css7={getAfterValue()}>
       A
     </_StyledP12>;
 };
+/* styled component defined after function it's used in */
 
-var _StyledP = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP",
-  componentId: "sc-7evkve-2"
-})(["flex:1;"]);
-
-var _StyledP2 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP2",
-  componentId: "sc-7evkve-3"
-})(["flex:1;"]);
-
-var _StyledP3 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP3",
-  componentId: "sc-7evkve-4"
-})({
-  color: 'blue'
-});
 
-var _StyledP4 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP4",
-  componentId: "sc-7evkve-5"
-})(["flex:1;"]);
+var EarlyUsageComponent = function EarlyUsageComponent(p) {
+  return <_StyledThing />;
+};
 
-var _StyledP5 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP5",
-  componentId: "sc-7evkve-6"
+var Thing3 = _styledComponents["default"].div.withConfig({
+  displayName: "code__Thing3",
+  componentId: "sc-7evkve-20"
 })(["color:blue;"]);
 
-var _StyledParagraph = (0, _styledComponents["default"])(Paragraph).withConfig({
-  displayName: "code___StyledParagraph",
-  componentId: "sc-7evkve-7"
-})(["flex:1"]);
-
-var _StyledP6 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP6",
-  componentId: "sc-7evkve-8"
-})(["", ""], function (p) {
-  return p._css;
-});
-
-var _StyledP7 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP7",
-  componentId: "sc-7evkve-9"
-})(["background:", ";"], function (p) {
-  return p._css2;
-});
-
-var _StyledP8 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP8",
-  componentId: "sc-7evkve-10"
-})(["color:", ";"], function (props) {
-  return props.theme.a;
-});
-
-var _StyledP9 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP9",
-  componentId: "sc-7evkve-11"
-})(["border-radius:", "px;"], radius);
+var _StyledThing = (0, _styledComponents["default"])(Thing3).withConfig({
+  displayName: "code___StyledThing",
+  componentId: "sc-7evkve-21"
+})(["color:red;"]);
 
-var _StyledP10 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP10",
-  componentId: "sc-7evkve-12"
-})(["color:", ";"], function (p) {
-  return p._css3;
-});
+var EarlyUsageComponent2 = function EarlyUsageComponent2(p) {
+  return <_StyledThing2 />;
+};
 
-var _StyledP11 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP11",
-  componentId: "sc-7evkve-13"
-})(["color:", ";"], function (props) {
-  return props.theme.color;
-});
+function Thing4(props) {
+  return <div {...props} />;
+}
+/* insert before usage for non-local scope styled HOC targets */
 
-var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost).withConfig({
-  displayName: "code___StyledButtonGhost",
-  componentId: "sc-7evkve-14"
-})(["flex:1"]);
 
-var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New).withConfig({
-  displayName: "code___StyledButtonGhostNew",
-  componentId: "sc-7evkve-15"
-})(["flex:1"]);
+var _StyledThing2 = (0, _styledComponents["default"])(Thing4).withConfig({
+  displayName: "code___StyledThing2",
+  componentId: "sc-7evkve-22"
+})(["color:red;"]);
 
-var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost).withConfig({
-  displayName: "code___StyledButtonGhost2",
-  componentId: "sc-7evkve-16"
-})(["flex:1"]);
+var _StyledSomeComponent = (0, _styledComponents["default"])(_SomeComponentPath["default"]).withConfig({
+  displayName: "code___StyledSomeComponent",
+  componentId: "sc-7evkve-23"
+})(["color:red;"]);
 
-var _StyledButtonGhost3 = _styledComponents["default"]["button-ghost"].withConfig({
-  displayName: "code___StyledButtonGhost3",
-  componentId: "sc-7evkve-17"
-})(["flex:1"]);
+var ImportedComponentUsage = function ImportedComponentUsage(p) {
+  return <_StyledSomeComponent />;
+};
 
-var _StyledP12 = _styledComponents["default"].p.withConfig({
-  displayName: "code___StyledP12",
-  componentId: "sc-7evkve-18"
-})(function (p) {
-  return {
-    background: p._css4,
-    color: p._css5,
-    textAlign: 'left',
-    '::before': {
-      content: p._css6
-    },
-    '::after': {
-      content: p._css7
-    }
-  };
-});
+var RequiredComponentUsage = function RequiredComponentUsage(p) {
+  return <_StyledSomeOtherComponent />;
+};
diff --git a/test/fixtures/transpile-css-prop/code.js b/test/fixtures/transpile-css-prop/code.js
index 35d17d3..66358ab 100644
--- a/test/fixtures/transpile-css-prop/code.js
+++ b/test/fixtures/transpile-css-prop/code.js
@@ -98,3 +98,11 @@ const CustomCompWithDotLowerCase = p => (
 )
 
 const CustomElement = p => <button-ghost css="flex: 1">H</button-ghost>
+
+/* styled component defined after function it's used in */
+
+const EarlyUsageComponent = p => <Thing3 css="color: red;" />
+
+const Thing3 = styled.div`
+  color: blue;
+`
diff --git a/test/fixtures/transpile-css-prop/output.js b/test/fixtures/transpile-css-prop/output.js
index 524d47d..6fab70d 100644
--- a/test/fixtures/transpile-css-prop/output.js
+++ b/test/fixtures/transpile-css-prop/output.js
@@ -4,6 +4,26 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _templateObject17() {
+  var data = _taggedTemplateLiteral(["color: red;"]);
+
+  _templateObject17 = function _templateObject17() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject16() {
+  var data = _taggedTemplateLiteral(["\n  color: blue;\n"]);
+
+  _templateObject16 = function _templateObject16() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject15() {
   var data = _taggedTemplateLiteral(["flex: 1"]);
 
@@ -156,6 +176,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 _StyledP = _styledComponents["default"].p(_templateObject());
+
 /*
  * Basic fixtures
  */
@@ -163,20 +185,30 @@ var StaticString = function StaticString(p) {
   return <_StyledP>A</_StyledP>;
 };
 
+var _StyledP2 = _styledComponents["default"].p(_templateObject2());
+
 var StaticTemplate = function StaticTemplate(p) {
   return <_StyledP2>
     A
   </_StyledP2>;
 };
 
+var _StyledP3 = _styledComponents["default"].p({
+  color: 'blue'
+});
+
 var ObjectProp = function ObjectProp(p) {
   return <_StyledP3>A</_StyledP3>;
 };
 
+var _StyledP4 = _styledComponents["default"].p(_templateObject3());
+
 var NoChildren = function NoChildren(p) {
   return <_StyledP4 />;
 };
 
+var _StyledP5 = _styledComponents["default"].p(_templateObject4());
+
 var CssHelperProp = function CssHelperProp(p) {
   return <_StyledP5>
     A
@@ -187,20 +219,34 @@ var CssHelperProp = function CssHelperProp(p) {
  */
 
 
+var _StyledParagraph = (0, _styledComponents["default"])(Paragraph)(_templateObject5());
+
 var CustomComp = function CustomComp(p) {
   return <_StyledParagraph>H</_StyledParagraph>;
 };
 
+var _StyledP6 = _styledComponents["default"].p(_templateObject6(), function (p) {
+  return p._css;
+});
+
 var DynamicProp = function DynamicProp(p) {
   return <_StyledP6 _css={props.cssText}>H</_StyledP6>;
 };
 
+var _StyledP7 = _styledComponents["default"].p(_templateObject7(), function (p) {
+  return p._css2;
+});
+
 var LocalInterpolation = function LocalInterpolation(p) {
   return <_StyledP7 _css2={props.bg}>
     H
   </_StyledP7>;
 };
 
+var _StyledP8 = _styledComponents["default"].p(_templateObject8(), function (props) {
+  return props.theme.a;
+});
+
 var FuncInterpolation = function FuncInterpolation(p) {
   return <_StyledP8>
     H
@@ -209,80 +255,64 @@ var FuncInterpolation = function FuncInterpolation(p) {
 
 var radius = 10;
 
+var _StyledP9 = _styledComponents["default"].p(_templateObject9(), radius);
+
 var GlobalInterpolation = function GlobalInterpolation(p) {
   return <_StyledP9>
     H
   </_StyledP9>;
 };
 
+var _StyledP10 = _styledComponents["default"].p(_templateObject10(), function (p) {
+  return p._css3;
+});
+
 var LocalCssHelperProp = function LocalCssHelperProp(p) {
   return <_StyledP10 _css3={p.color}>
     A
   </_StyledP10>;
 };
 
+var _StyledP11 = _styledComponents["default"].p(_templateObject11(), function (props) {
+  return props.theme.color;
+});
+
 var DynamicCssHelperProp = function DynamicCssHelperProp(p) {
   return <_StyledP11>
     A
   </_StyledP11>;
 };
 
+var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost)(_templateObject12());
+
 var CustomCompWithDot = function CustomCompWithDot(p) {
   return <_StyledButtonGhost>H</_StyledButtonGhost>;
 };
 
+var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New)(_templateObject13());
+
 var NestedCompWithDot = function NestedCompWithDot(p) {
   return <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
 };
 
+var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost)(_templateObject14());
+
 var CustomCompWithDotLowerCase = function CustomCompWithDotLowerCase(p) {
   return <_StyledButtonGhost2>H</_StyledButtonGhost2>;
 };
 
+var _StyledButtonGhost3 = _styledComponents["default"]["button-ghost"](_templateObject15());
+
 var CustomElement = function CustomElement(p) {
   return <_StyledButtonGhost3>H</_StyledButtonGhost3>;
 };
+/* styled component defined after function it's used in */
 
-var _StyledP = _styledComponents["default"].p(_templateObject());
-
-var _StyledP2 = _styledComponents["default"].p(_templateObject2());
-
-var _StyledP3 = _styledComponents["default"].p({
-  color: 'blue'
-});
-
-var _StyledP4 = _styledComponents["default"].p(_templateObject3());
-
-var _StyledP5 = _styledComponents["default"].p(_templateObject4());
-
-var _StyledParagraph = (0, _styledComponents["default"])(Paragraph)(_templateObject5());
-
-var _StyledP6 = _styledComponents["default"].p(_templateObject6(), function (p) {
-  return p._css;
-});
 
-var _StyledP7 = _styledComponents["default"].p(_templateObject7(), function (p) {
-  return p._css2;
-});
-
-var _StyledP8 = _styledComponents["default"].p(_templateObject8(), function (props) {
-  return props.theme.a;
-});
-
-var _StyledP9 = _styledComponents["default"].p(_templateObject9(), radius);
-
-var _StyledP10 = _styledComponents["default"].p(_templateObject10(), function (p) {
-  return p._css3;
-});
-
-var _StyledP11 = _styledComponents["default"].p(_templateObject11(), function (props) {
-  return props.theme.color;
-});
-
-var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost)(_templateObject12());
-
-var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New)(_templateObject13());
+var EarlyUsageComponent = function EarlyUsageComponent(p) {
+  return <_StyledThing />;
+};
 
-var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost)(_templateObject14());
+var Thing3 = styled.div(_templateObject16());
 
-var _StyledButtonGhost3 = _styledComponents["default"]["button-ghost"](_templateObject15());
+var _StyledThing = (0, _styledComponents["default"])(Thing3)(_templateObject17());