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

Issue:
Runtime error with css prop and const declared after component
Example:
```jsx
// in:
import React from "react"
import { css } from "styled-components"

export default function Example() {
  return <div css={someCss}>oops</div>
}

const someCss = css`
  color: red;
`

// out:
import _styled from "styled-components";
import React from "react";
import { css } from "styled-components";

var _StyledDiv = _styled.div.withConfig({
  displayName: "Example___StyledDiv",
  componentId: "sc-1j0h0n6-0"
})(["", ""], someCss);

export default function Example() {
  return <_StyledDiv>oops</_StyledDiv>;
}
const someCss = css(["color:red;"]);
```

At runtime, this code will fail, as it tries to access `someCss` before it's declared.

This works if we declare `someCss` before `Example`. The `someCss` style is correctly placed before the styled component.
```jsx
// in:
import React from "react"
import { css } from "styled-components"

const someCss = css`
  color: red;
`

export default function Example() {
  return <div css={someCss}>oops</div>
}

// out:
import _styled from "styled-components";
import React from "react";
import { css } from "styled-components";
const someCss = css(["color:red;"]);

var _StyledDiv = _styled.div.withConfig({
  displayName: "Example___StyledDiv",
  componentId: "sc-1j0h0n6-0"
})(["", ""], someCss);

export default function Example() {
  return <_StyledDiv>oops</_StyledDiv>;
}
```

Repro: https://github.com/kingdaro/styled-components-css-prop-error

Downgraded to 1.10.2 as a workaround for now. It looks like this commit introduced the change in behavior: https://github.com/styled-components/babel-plugin-styled-components/commit/9bc3c08ee31b82be1c2a74dc7f4a1fbd0e12ac7b

Pull request description:
move injected styled component to end of file
in case it references a variable that is declared after the react component that uses it

fixes #260
reimplements #297 on top of latest main

Patch:
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
index 625b6ae..1b88130 100644
--- a/src/visitors/transpileCssProp.js
+++ b/src/visitors/transpileCssProp.js
@@ -212,11 +212,11 @@ export default t => (path, state) => {
   if (!injector) {
     let parent = elem
 
-    while (!t.isProgram(parent.parentPath)) {
+    while (!t.isProgram(parent)) {
       parent = parent.parentPath
     }
 
-    injector = nodeToInsert => parent.insertBefore(nodeToInsert)
+    injector = nodeToInsert => parent.pushContainer('body', nodeToInsert)
   }
 
   injector(


Test patch:
diff --git a/test/fixtures/css-declared-after-component/.babelrc b/test/fixtures/css-declared-after-component/.babelrc
new file mode 100644
index 0000000..7a2ae60
--- /dev/null
+++ b/test/fixtures/css-declared-after-component/.babelrc
@@ -0,0 +1,7 @@
+{
+    "plugins": [
+      [
+        "../../../src"
+      ]
+    ]
+  }
diff --git a/test/fixtures/css-declared-after-component/code.js b/test/fixtures/css-declared-after-component/code.js
new file mode 100644
index 0000000..5be1a9e
--- /dev/null
+++ b/test/fixtures/css-declared-after-component/code.js
@@ -0,0 +1,10 @@
+import React from "react"
+import { css } from "styled-components"
+
+export default function Example() {
+  return <div css={someCss}>oops</div>
+}
+
+const someCss = css`
+  color: red;
+`
diff --git a/test/fixtures/css-declared-after-component/output.js b/test/fixtures/css-declared-after-component/output.js
new file mode 100644
index 0000000..d5d1634
--- /dev/null
+++ b/test/fixtures/css-declared-after-component/output.js
@@ -0,0 +1,12 @@
+import _styled from "styled-components";
+import React from "react";
+import { css } from "styled-components";
+export default function Example() {
+  return <_StyledDiv>oops</_StyledDiv>;
+}
+const someCss = css(["color:red;"]);
+
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "code___StyledDiv",
+  componentId: "sc-7mydya-0"
+})(["", ""], someCss);
diff --git a/test/fixtures/transformed-imports-with-jsx-member-expressions/output.js b/test/fixtures/transformed-imports-with-jsx-member-expressions/output.js
index 37ff63e..e741877 100644
--- a/test/fixtures/transformed-imports-with-jsx-member-expressions/output.js
+++ b/test/fixtures/transformed-imports-with-jsx-member-expressions/output.js
@@ -14,29 +14,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const someCss = (0, _styledComponents.css)([" background:purple;"]);
 
+const App1 = () => {
+  return <_StyledIcons />;
+};
+
+const App2 = () => {
+  return <_StyledIconsFoo />;
+};
+
+const App3 = () => {
+  return <_StyledIconsFooBar />;
+};
+
 var _StyledIcons = (0, _styledComponents.default)(_icons.default).withConfig({
   displayName: "code___StyledIcons",
   componentId: "sc-1wxehft-0"
 })(["", ""], someCss);
 
-const App1 = () => {
-  return <_StyledIcons />;
-};
-
 var _StyledIconsFoo = (0, _styledComponents.default)(_icons.default.Foo).withConfig({
   displayName: "code___StyledIconsFoo",
   componentId: "sc-1wxehft-1"
 })(["", ""], someCss);
 
-const App2 = () => {
-  return <_StyledIconsFoo />;
-};
-
 var _StyledIconsFooBar = (0, _styledComponents.default)(_icons.default.Foo.Bar).withConfig({
   displayName: "code___StyledIconsFooBar",
   componentId: "sc-1wxehft-2"
 })(["", ""], someCss);
-
-const App3 = () => {
-  return <_StyledIconsFooBar />;
-};
diff --git a/test/fixtures/transpile-css-prop-add-import/output.js b/test/fixtures/transpile-css-prop-add-import/output.js
index 558ba65..b5868ba 100644
--- a/test/fixtures/transpile-css-prop-add-import/output.js
+++ b/test/fixtures/transpile-css-prop-add-import/output.js
@@ -19,8 +19,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: 35em;\n    "])));
-
 var _default = function _default() {
   return <_StyledDiv>
     <_Card.default>
@@ -35,3 +33,5 @@ var _default = function _default() {
 };
 
 exports["default"] = _default;
+
+var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: 35em;\n    "])));
diff --git a/test/fixtures/transpile-css-prop-add-require/output.js b/test/fixtures/transpile-css-prop-add-require/output.js
index 20f2338..778ad57 100644
--- a/test/fixtures/transpile-css-prop-add-require/output.js
+++ b/test/fixtures/transpile-css-prop-add-require/output.js
@@ -15,10 +15,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: 35em;\n    "])));
-
 var _default = function _default() {
   return <_StyledDiv />;
 };
 
 exports["default"] = _default;
+
+var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: 35em;\n    "])));
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 1f1396c..c24cff2 100644
--- a/test/fixtures/transpile-css-prop-all-options-on/output.js
+++ b/test/fixtures/transpile-css-prop-all-options-on/output.js
@@ -37,51 +37,24 @@ var Thing2 = (0, _styledComponents["default"])(Thing).withConfig({
  * Basic fixtures
  */
 
-var _StyledP = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "code___StyledP",
-  componentId: "sc-7evkve-3"
-})(["flex:1;"]);
-
 var StaticString = function StaticString(p) {
   return <_StyledP>A</_StyledP>;
 };
 
-var _StyledP2 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "code___StyledP2",
-  componentId: "sc-7evkve-4"
-})(["flex:1;"]);
-
 var StaticTemplate = function StaticTemplate(p) {
   return <_StyledP2>
     A
   </_StyledP2>;
 };
 
-var _StyledP3 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "code___StyledP3",
-  componentId: "sc-7evkve-5"
-})({
-  color: 'blue'
-});
-
 var ObjectProp = function ObjectProp(p) {
   return <_StyledP3>A</_StyledP3>;
 };
 
-var _StyledP4 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "code___StyledP4",
-  componentId: "sc-7evkve-6"
-})(["flex:1;"]);
-
 var NoChildren = function NoChildren(p) {
   return <_StyledP4 />;
 };
 
-var _StyledP5 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "code___StyledP5",
-  componentId: "sc-7evkve-7"
-})(["color:blue;"]);
-
 var CssHelperProp = function CssHelperProp(p) {
   return <_StyledP5>
     A
@@ -92,46 +65,20 @@ 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 = (0, _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 = (0, _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 = (0, _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
@@ -140,75 +87,36 @@ var FuncInterpolation = function FuncInterpolation(p) {
 
 var radius = 10;
 
-var _StyledP9 = (0, _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 = (0, _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 = (0, _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 = (0, _styledComponents["default"])("button-ghost").withConfig({
-  displayName: "code___StyledButtonGhost3",
-  componentId: "sc-7evkve-18"
-})(["flex:1"]);
-
 var CustomElement = function CustomElement(p) {
   return <_StyledButtonGhost3>H</_StyledButtonGhost3>;
 };
@@ -219,23 +127,6 @@ var getAfterValue = function getAfterValue() {
   return '"bar"';
 };
 
-var _StyledP12 = (0, _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()}>
@@ -243,36 +134,6 @@ var ObjectPropMixedInputs = function ObjectPropMixedInputs(p) {
     </_StyledP12>;
 };
 
-var _StyledP13 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "code___StyledP13",
-  componentId: "sc-7evkve-20"
-})(function (p) {
-  return _objectSpread(_objectSpread({}, _objectSpread({
-    '::before': {
-      content: p._css8
-    },
-    '::after': {
-      content: p._css9
-    }
-  }, {
-    '::before': {
-      content: p._css10
-    },
-    '::after': {
-      content: p._css11
-    }
-  })), {}, {
-    background: p._css12,
-    textAlign: 'left',
-    '::before': {
-      content: p._css13
-    },
-    '::after': {
-      content: p._css14
-    }
-  });
-});
-
 var SpreadObjectPropMixedInputs = function SpreadObjectPropMixedInputs(p) {
   var color = 'red';
   return <_StyledP13 _css8={globalVar} _css9={getAfterValue()} _css10={globalVar} _css11={getAfterValue()} _css12={p.background} _css13={globalVar} _css14={getAfterValue()}>
@@ -288,12 +149,12 @@ var EarlyUsageComponent = function EarlyUsageComponent(p) {
 
 var Thing3 = _styledComponents["default"].div.withConfig({
   displayName: "code__Thing3",
-  componentId: "sc-7evkve-21"
+  componentId: "sc-7evkve-3"
 })(["color:blue;"]);
 
 var _StyledThing = (0, _styledComponents["default"])(Thing3).withConfig({
   displayName: "code___StyledThing",
-  componentId: "sc-7evkve-22"
+  componentId: "sc-7evkve-4"
 })(["color:red;"]);
 
 var EarlyUsageComponent2 = function EarlyUsageComponent2(p) {
@@ -308,12 +169,7 @@ function Thing4(props) {
 
 var _StyledThing2 = (0, _styledComponents["default"])(Thing4).withConfig({
   displayName: "code___StyledThing2",
-  componentId: "sc-7evkve-23"
-})(["color:red;"]);
-
-var _StyledSomeComponent = (0, _styledComponents["default"])(_SomeComponentPath["default"]).withConfig({
-  displayName: "code___StyledSomeComponent",
-  componentId: "sc-7evkve-24"
+  componentId: "sc-7evkve-5"
 })(["color:red;"]);
 
 var ImportedComponentUsage = function ImportedComponentUsage(p) {
@@ -323,3 +179,147 @@ var ImportedComponentUsage = function ImportedComponentUsage(p) {
 var RequiredComponentUsage = function RequiredComponentUsage(p) {
   return <_StyledSomeOtherComponent />;
 };
+
+var _StyledP = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP",
+  componentId: "sc-7evkve-6"
+})(["flex:1;"]);
+
+var _StyledP2 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP2",
+  componentId: "sc-7evkve-7"
+})(["flex:1;"]);
+
+var _StyledP3 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP3",
+  componentId: "sc-7evkve-8"
+})({
+  color: 'blue'
+});
+
+var _StyledP4 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP4",
+  componentId: "sc-7evkve-9"
+})(["flex:1;"]);
+
+var _StyledP5 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP5",
+  componentId: "sc-7evkve-10"
+})(["color:blue;"]);
+
+var _StyledParagraph = (0, _styledComponents["default"])(Paragraph).withConfig({
+  displayName: "code___StyledParagraph",
+  componentId: "sc-7evkve-11"
+})(["flex:1"]);
+
+var _StyledP6 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP6",
+  componentId: "sc-7evkve-12"
+})(["", ""], function (p) {
+  return p._css;
+});
+
+var _StyledP7 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP7",
+  componentId: "sc-7evkve-13"
+})(["background:", ";"], function (p) {
+  return p._css2;
+});
+
+var _StyledP8 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP8",
+  componentId: "sc-7evkve-14"
+})(["color:", ";"], function (props) {
+  return props.theme.a;
+});
+
+var _StyledP9 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP9",
+  componentId: "sc-7evkve-15"
+})(["border-radius:", "px;"], radius);
+
+var _StyledP10 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP10",
+  componentId: "sc-7evkve-16"
+})(["color:", ";"], function (p) {
+  return p._css3;
+});
+
+var _StyledP11 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP11",
+  componentId: "sc-7evkve-17"
+})(["color:", ";"], function (props) {
+  return props.theme.color;
+});
+
+var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost).withConfig({
+  displayName: "code___StyledButtonGhost",
+  componentId: "sc-7evkve-18"
+})(["flex:1"]);
+
+var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New).withConfig({
+  displayName: "code___StyledButtonGhostNew",
+  componentId: "sc-7evkve-19"
+})(["flex:1"]);
+
+var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost).withConfig({
+  displayName: "code___StyledButtonGhost2",
+  componentId: "sc-7evkve-20"
+})(["flex:1"]);
+
+var _StyledButtonGhost3 = (0, _styledComponents["default"])("button-ghost").withConfig({
+  displayName: "code___StyledButtonGhost3",
+  componentId: "sc-7evkve-21"
+})(["flex:1"]);
+
+var _StyledP12 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP12",
+  componentId: "sc-7evkve-22"
+})(function (p) {
+  return {
+    background: p._css4,
+    color: p._css5,
+    textAlign: 'left',
+    '::before': {
+      content: p._css6
+    },
+    '::after': {
+      content: p._css7
+    }
+  };
+});
+
+var _StyledP13 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP13",
+  componentId: "sc-7evkve-23"
+})(function (p) {
+  return _objectSpread(_objectSpread({}, _objectSpread({
+    '::before': {
+      content: p._css8
+    },
+    '::after': {
+      content: p._css9
+    }
+  }, {
+    '::before': {
+      content: p._css10
+    },
+    '::after': {
+      content: p._css11
+    }
+  })), {}, {
+    background: p._css12,
+    textAlign: 'left',
+    '::before': {
+      content: p._css13
+    },
+    '::after': {
+      content: p._css14
+    }
+  });
+});
+
+var _StyledSomeComponent = (0, _styledComponents["default"])(_SomeComponentPath["default"]).withConfig({
+  displayName: "code___StyledSomeComponent",
+  componentId: "sc-7evkve-24"
+})(["color:red;"]);
diff --git a/test/fixtures/transpile-css-prop/output.js b/test/fixtures/transpile-css-prop/output.js
index ce999c8..aed872e 100644
--- a/test/fixtures/transpile-css-prop/output.js
+++ b/test/fixtures/transpile-css-prop/output.js
@@ -8,8 +8,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var _StyledP = (0, _styledComponents["default"])("p")(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex: 1;"])));
-
 /*
  * Basic fixtures
  */
@@ -17,30 +15,20 @@ var StaticString = function StaticString(p) {
   return <_StyledP>A</_StyledP>;
 };
 
-var _StyledP2 = (0, _styledComponents["default"])("p")(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      flex: 1;\n    "])));
-
 var StaticTemplate = function StaticTemplate(p) {
   return <_StyledP2>
     A
   </_StyledP2>;
 };
 
-var _StyledP3 = (0, _styledComponents["default"])("p")({
-  color: 'blue'
-});
-
 var ObjectProp = function ObjectProp(p) {
   return <_StyledP3>A</_StyledP3>;
 };
 
-var _StyledP4 = (0, _styledComponents["default"])("p")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex: 1;"])));
-
 var NoChildren = function NoChildren(p) {
   return <_StyledP4 />;
 };
 
-var _StyledP5 = (0, _styledComponents["default"])("p")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: blue;\n    "])));
-
 var CssHelperProp = function CssHelperProp(p) {
   return <_StyledP5>
     A
@@ -51,34 +39,20 @@ var CssHelperProp = function CssHelperProp(p) {
  */
 
 
-var _StyledParagraph = (0, _styledComponents["default"])(Paragraph)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex: 1"])));
-
 var CustomComp = function CustomComp(p) {
   return <_StyledParagraph>H</_StyledParagraph>;
 };
 
-var _StyledP6 = (0, _styledComponents["default"])("p")(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), function (p) {
-  return p._css;
-});
-
 var DynamicProp = function DynamicProp(p) {
   return <_StyledP6 _css={props.cssText}>H</_StyledP6>;
 };
 
-var _StyledP7 = (0, _styledComponents["default"])("p")(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background: ", ";\n    "])), function (p) {
-  return p._css2;
-});
-
 var LocalInterpolation = function LocalInterpolation(p) {
   return <_StyledP7 _css2={props.bg}>
     H
   </_StyledP7>;
 };
 
-var _StyledP8 = (0, _styledComponents["default"])("p")(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (props) {
-  return props.theme.a;
-});
-
 var FuncInterpolation = function FuncInterpolation(p) {
   return <_StyledP8>
     H
@@ -87,54 +61,36 @@ var FuncInterpolation = function FuncInterpolation(p) {
 
 var radius = 10;
 
-var _StyledP9 = (0, _styledComponents["default"])("p")(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "])), radius);
-
 var GlobalInterpolation = function GlobalInterpolation(p) {
   return <_StyledP9>
     H
   </_StyledP9>;
 };
 
-var _StyledP10 = (0, _styledComponents["default"])("p")(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (p) {
-  return p._css3;
-});
-
 var LocalCssHelperProp = function LocalCssHelperProp(p) {
   return <_StyledP10 _css3={p.color}>
     A
   </_StyledP10>;
 };
 
-var _StyledP11 = (0, _styledComponents["default"])("p")(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (props) {
-  return props.theme.color;
-});
-
 var DynamicCssHelperProp = function DynamicCssHelperProp(p) {
   return <_StyledP11>
     A
   </_StyledP11>;
 };
 
-var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex: 1"])));
-
 var CustomCompWithDot = function CustomCompWithDot(p) {
   return <_StyledButtonGhost>H</_StyledButtonGhost>;
 };
 
-var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex: 1"])));
-
 var NestedCompWithDot = function NestedCompWithDot(p) {
   return <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
 };
 
-var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex: 1"])));
-
 var CustomCompWithDotLowerCase = function CustomCompWithDotLowerCase(p) {
   return <_StyledButtonGhost2>H</_StyledButtonGhost2>;
 };
 
-var _StyledButtonGhost3 = (0, _styledComponents["default"])("button-ghost")(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex: 1"])));
-
 var CustomElement = function CustomElement(p) {
   return <_StyledButtonGhost3>H</_StyledButtonGhost3>;
 };
@@ -145,7 +101,7 @@ var EarlyUsageComponent = function EarlyUsageComponent(p) {
   return <_StyledThing />;
 };
 
-var Thing3 = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: blue;\n"])));
+var Thing3 = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: blue;\n"])));
 
 var _StyledThing2 = (0, _styledComponents["default"])(Thing3)(function (p) {
   return {
@@ -153,13 +109,7 @@ var _StyledThing2 = (0, _styledComponents["default"])(Thing3)(function (p) {
   };
 });
 
-var _StyledThing = (0, _styledComponents["default"])(Thing3)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["color: red;"])));
-
-var _StyledP12 = (0, _styledComponents["default"])("p")(function (p) {
-  return {
-    color: p._css4
-  };
-});
+var _StyledThing = (0, _styledComponents["default"])(Thing3)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["color: red;"])));
 
 var ObjectInterpolation = function ObjectInterpolation(p) {
   var theme = useTheme();
@@ -174,3 +124,53 @@ var ObjectInterpolationCustomComponent = function ObjectInterpolationCustomCompo
     H
   </_StyledThing2>;
 };
+
+var _StyledP = (0, _styledComponents["default"])("p")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex: 1;"])));
+
+var _StyledP2 = (0, _styledComponents["default"])("p")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex: 1;\n    "])));
+
+var _StyledP3 = (0, _styledComponents["default"])("p")({
+  color: 'blue'
+});
+
+var _StyledP4 = (0, _styledComponents["default"])("p")(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex: 1;"])));
+
+var _StyledP5 = (0, _styledComponents["default"])("p")(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: blue;\n    "])));
+
+var _StyledParagraph = (0, _styledComponents["default"])(Paragraph)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex: 1"])));
+
+var _StyledP6 = (0, _styledComponents["default"])("p")(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), function (p) {
+  return p._css;
+});
+
+var _StyledP7 = (0, _styledComponents["default"])("p")(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      background: ", ";\n    "])), function (p) {
+  return p._css2;
+});
+
+var _StyledP8 = (0, _styledComponents["default"])("p")(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (props) {
+  return props.theme.a;
+});
+
+var _StyledP9 = (0, _styledComponents["default"])("p")(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "])), radius);
+
+var _StyledP10 = (0, _styledComponents["default"])("p")(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (p) {
+  return p._css3;
+});
+
+var _StyledP11 = (0, _styledComponents["default"])("p")(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (props) {
+  return props.theme.color;
+});
+
+var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex: 1"])));
+
+var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex: 1"])));
+
+var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex: 1"])));
+
+var _StyledButtonGhost3 = (0, _styledComponents["default"])("button-ghost")(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex: 1"])));
+
+var _StyledP12 = (0, _styledComponents["default"])("p")(function (p) {
+  return {
+    color: p._css4
+  };
+});