Merge pull request #334 from styled-components/297-reimplement

move injected styled component to end of file
styled-components · Jun 29, 2021 · 433a6ba · 433a6ba
2 parents 6a355b5 + 5bc989b
commit 433a6ba
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 217 deletions.
diff --git 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(

diff --git a/test/fixtures/css-declared-after-component/.babelrc 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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    "])));