Insert import to @emotion/core after existing imports to avoid ordering issues with polyfills (#1576)

Author: Andarist

.changeset/five-ligers-chew.md

@@ -0,0 +1,6 @@
+---
+'@emotion/babel-plugin-jsx-pragmatic': patch
+'@emotion/babel-preset-css-prop': patch
+---
+
+Insert import to @emotion/core after existing imports to avoid ordering issues with polyfills

packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js

@@ -0,0 +1,9 @@
+// inserted import has to go AFTER polyfills
+import 'react-app-polyfill/ie11'
+import 'react-app-polyfill/stable'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))

packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap

@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`@emotion/babel-plugin-jsx-pragmatic existing-imports 1`] = `
+"// inserted import has to go AFTER polyfills
+import 'react-app-polyfill/ie11'
+import 'react-app-polyfill/stable'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+// inserted import has to go AFTER polyfills
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
+ReactDOM.render(<App />, document.getElementById('root'));"
+`;
+
 exports[`@emotion/babel-plugin-jsx-pragmatic fragment-only 1`] = `
 "import * as React from 'react'
 
@@ -8,8 +32,8 @@ const F = () => <></>
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
 import * as React from 'react';
+import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
 
 const F = () => <></>;"
 `;
@@ -22,8 +46,8 @@ const P = () => <p />
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
 import * as React from 'react';
+import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
 
 const P = () => <p />;"
 `;

packages/babel-plugin-jsx-pragmatic/package.json

@@ -22,4 +22,4 @@
   "devDependencies": {
     "@babel/core": "^7.5.5"
   }
-}
+}

packages/babel-plugin-jsx-pragmatic/src/index.js

@@ -1,9 +1,18 @@
 import syntaxJsx from '@babel/plugin-syntax-jsx'
 
+const findLast = (arr, predicate) => {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) {
+      return arr[i]
+    }
+  }
+}
+
 export default function jsxPragmatic(babel) {
   const t = babel.types
-  function getPragmaImport(state) {
-    return t.importDeclaration(
+
+  function addPragmaImport(path, state) {
+    const importDeclar = t.importDeclaration(
       [
         t.importSpecifier(
           t.identifier(state.opts.import),
@@ -12,6 +21,15 @@ export default function jsxPragmatic(babel) {
       ],
       t.stringLiteral(state.opts.module)
     )
+
+    const targetPath = findLast(path.get('body'), p => p.isImportDeclaration())
+
+    if (targetPath) {
+      targetPath.insertAfter([importDeclar])
+    } else {
+      // Apparently it's now safe to do this even if Program begins with directives.
+      path.unshiftContainer('body', importDeclar)
+    }
   }
 
   return {
@@ -27,10 +45,7 @@ export default function jsxPragmatic(babel) {
       Program: {
         exit: function(path, state) {
           if (!state.get('jsxDetected')) return
-
-          // Apparently it's now safe to do this even if Program begins with
-          // directives.
-          path.unshiftContainer('body', getPragmaImport(state))
+          addPragmaImport(path, state)
         }
       },
 

packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap

@@ -19,13 +19,12 @@ export let Button = props => {
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
 
 import * as React from 'react';
+import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
 
 var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"1q24rv0-Button\\",

packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap

@@ -19,11 +19,10 @@ export let Button = props => {
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
+import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
 var _ref = {
   name: \\"1a7y9g-__fixtures__--__fixtures__--Button\\",
   styles: \\"color:hotpink;;label:__fixtures__--__fixtures__--Button;\\"