Babel 7 compatibility and change tests (#440)

* Create our own module metadata * Babel 7 compat and start running some tests on babel 6 & 7 * Run source map tests on babel 6 & 7 * Add createExtract util and make some tests use it * Use the same test cases for extract and inline for most tests and start macro testing on babel 6 & 7 * Use @babel/helper-module-imports * Start fixing macro tests * Use module import helper to add extracted css import * Remove each packages' lockfile since it seems like yarn workspaces only uses a single lockfile * Increase coverage and stuff
emotion-js · Nov 4, 2017 · bec844d · bec844d
1 parent 4246cf5
commit bec844d
Show file tree

Hide file tree

Showing 32 changed files with 3,395 additions and 22,161 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
-    "babel-macros": "^1.0.2",
+    "babel-macros": "^1.2.0",
     "babel-plugin-codegen": "^1.2.0",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-polyfill": "^6.26.0",
@@ -56,6 +56,7 @@
     "jest": "^21.2.1",
     "jest-cli": "^20.0.4",
     "jest-glamor-react": "^3.1.1",
+    "jest-in-case": "^1.0.2",
     "lerna": "^2.2.0",
     "module-alias": "^2.0.1",
     "npm-run-all": "^4.0.2",

diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json
@@ -14,15 +14,16 @@
     "clean": "rimraf lib"
   },
   "dependencies": {
-    "babel-generator": "^6.26.0",
-    "babel-macros": "^1.0.2",
+    "@babel/helper-module-imports": "7.0.0-beta.31",
+    "babel-macros": "^1.2.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "convert-source-map": "^1.5.0",
     "emotion-utils": "^8.0.9",
     "source-map": "^0.5.7",
     "touch": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0-beta.4",
     "babel-cli": "^6.24.1",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1"

diff --git a/packages/babel-plugin-emotion/src/css-prop.js b/packages/babel-plugin-emotion/src/css-prop.js
@@ -1,3 +1,4 @@
+import { addNamed } from '@babel/helper-module-imports'
 import { addSourceMaps } from './source-map'
 
 export default function(path, state, t) {
@@ -105,7 +106,7 @@ export default function(path, state, t) {
   function getCssIdentifer() {
     if (state.opts.autoImportCssProp !== false) {
       if (!state.cssPropIdentifier) {
-        state.cssPropIdentifier = path.hub.file.addImport('emotion', 'css')
+        state.cssPropIdentifier = addNamed(path, 'css', 'emotion')
       }
       return state.cssPropIdentifier
     } else {
@@ -115,10 +116,7 @@ export default function(path, state, t) {
   function getMergeIdentifier() {
     if (state.opts.autoImportCssProp !== false) {
       if (!state.cssPropMergeIdentifier) {
-        state.cssPropMergeIdentifier = path.hub.file.addImport(
-          'emotion',
-          'merge'
-        )
+        state.cssPropMergeIdentifier = addNamed(path, 'merge', 'emotion')
       }
       return state.cssPropMergeIdentifier
     } else {

diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js
@@ -2,6 +2,7 @@
 import fs from 'fs'
 import { basename } from 'path'
 import { touchSync } from 'touch'
+import { addSideEffect } from '@babel/helper-module-imports'
 import {
   getIdentifierName,
   getName,
@@ -200,35 +201,87 @@ export default function(babel) {
             ...defaultImportedNames,
             ...state.opts.importedNames
           }
-          state.file.metadata.modules.imports.forEach(
-            ({ source, imported, specifiers }) => {
-              if (source.indexOf('emotion') !== -1) {
-                const importedNames = specifiers
-                  .filter(
-                    v =>
-                      [
-                        'default',
-                        'css',
-                        'keyframes',
-                        'injectGlobal',
-                        'fontFace',
-                        'merge'
-                      ].indexOf(v.imported) !== -1
-                  )
-                  .reduce(
-                    (acc, { imported, local }) => ({
-                      ...acc,
-                      [imported === 'default' ? 'styled' : imported]: local
-                    }),
-                    defaultImportedNames
-                  )
-                state.importedNames = {
-                  ...importedNames,
-                  ...state.opts.importedNames
+
+          const imports = []
+
+          let isModule = false
+
+          for (const node of path.node.body) {
+            if (t.isModuleDeclaration(node)) {
+              isModule = true
+              break
+            }
+          }
+
+          if (isModule) {
+            path.traverse({
+              ImportDeclaration: {
+                exit(path) {
+                  const { node } = path
+
+                  const imported = []
+                  const specifiers = []
+
+                  imports.push({
+                    source: node.source.value,
+                    imported,
+                    specifiers
+                  })
+
+                  for (const specifier of path.get('specifiers')) {
+                    const local = specifier.node.local.name
+
+                    if (specifier.isImportDefaultSpecifier()) {
+                      imported.push('default')
+                      specifiers.push({
+                        kind: 'named',
+                        imported: 'default',
+                        local
+                      })
+                    }
+
+                    if (specifier.isImportSpecifier()) {
+                      const importedName = specifier.node.imported.name
+                      imported.push(importedName)
+                      specifiers.push({
+                        kind: 'named',
+                        imported: importedName,
+                        local
+                      })
+                    }
+                  }
                 }
               }
+            })
+          }
+
+          imports.forEach(({ source, imported, specifiers }) => {
+            if (source.indexOf('emotion') !== -1) {
+              const importedNames = specifiers
+                .filter(
+                  v =>
+                    [
+                      'default',
+                      'css',
+                      'keyframes',
+                      'injectGlobal',
+                      'fontFace',
+                      'merge'
+                    ].indexOf(v.imported) !== -1
+                )
+                .reduce(
+                  (acc, { imported, local }) => ({
+                    ...acc,
+                    [imported === 'default' ? 'styled' : imported]: local
+                  }),
+                  defaultImportedNames
+                )
+              state.importedNames = {
+                ...importedNames,
+                ...state.opts.importedNames
+              }
             }
-          )
+          })
 
           state.extractStatic =
             // path.hub.file.opts.filename !== 'unknown' ||
@@ -248,12 +301,7 @@ export default function(babel) {
             filenameArr.push('emotion', 'css')
             const cssFilename = filenameArr.join('.')
             const exists = fs.existsSync(cssFilename)
-            path.node.body.unshift(
-              t.importDeclaration(
-                [],
-                t.stringLiteral('./' + basename(cssFilename))
-              )
-            )
+            addSideEffect(path, './' + basename(cssFilename))
             if (
               exists ? fs.readFileSync(cssFilename, 'utf8') !== toWrite : true
             ) {
@@ -272,7 +320,7 @@ export default function(babel) {
             CallExpression(callExprPath) {
               if (
                 callExprPath.node.callee.name === state.importedNames.css ||
-                callExprPath.node.callee.name === `_${state.importedNames.css}`
+                callExprPath.node.callee === state.cssPropIdentifier
               ) {
                 hoistPureArgs(callExprPath)
               }