Create rollup builds with Babel 7 (#459)

* start

* VS Code is too smart sometimes

* Fix preact-emotion build

* meh

* It didn't help

* Try to make it more similar to master

* Run tests on dist files and make more of emotion-theming's tests run on the external api

* Fix UMD build

* Maybe this'll fix it

* Actually fix UMD build

* Don't run build twice on Travis

jest.dist.json

@@ -0,0 +1,21 @@
+{
+  "transform": {
+    "\\.css$": "<rootDir>/test/styleTransform.js",
+    "^.+\\.js?$": "babel-jest"
+  },
+  "moduleNameMapper": {
+    "^emotion$": "<rootDir>/packages/emotion/dist/index.cjs.js",
+    "^react-emotion$": "<rootDir>/packages/react-emotion/dist/index.cjs.js",
+    "^emotion-utils$": "<rootDir>/packages/emotion-utils/dist/index.cjs.js",
+    "^emotion-server$": "<rootDir>/packages/emotion-server/lib",
+    "^emotion-theming$": "<rootDir>/packages/emotion-theming/dist/index.cjs.js",
+    "^babel-plugin-emotion": "<rootDir>/packages/babel-plugin-emotion/lib"
+  },
+  "transformIgnorePatterns": [
+    "dist"
+  ],
+  "testPathIgnorePatterns": [
+    "babel-plugin-emotion"
+  ],
+  "setupTestFrameworkScriptFile": "<rootDir>/test/testSetup.js"
+}

package.json

@@ -6,23 +6,30 @@
     "build": "lerna run build --parallel",
     "test:size": "npm-run-all clean rollup:umd size",
     "clean": "lerna run clean --parallel",
-    "test": "npm-run-all -p lint:check coverage test:size test:typescript && npm run benchmark",
+    "test": "npm-run-all -p lint:check coverage test:size test:typescript && npm run test:prod && npm run benchmark",
     "test:typescript": "lerna run test:typescript --parallel",
     "coverage": "jest --coverage --no-cache --ci --runInBand",
+    "test:prod": "npm run build && jest -c jest.dist.json --no-cache --ci --runInBand",
     "lint:check": "eslint .",
     "test:watch": "jest --watch --no-cache",
     "rollup": "lerna run rollup --parallel",
     "rollup:umd": "lerna run rollup:umd --parallel",
     "size": "bundlesize",
     "release": "npm run test && npm run build && lerna publish && git push --tags",
     "lint": "eslint . --fix",
-    "benchmark": "npm run build && lerna exec --scope benchmarks npm run benchmark",
+    "benchmark": "lerna exec --scope benchmarks npm run benchmark",
     "start:site": "lerna exec --scope emotion-example-project npm run start:site",
     "build:site": "lerna exec --scope emotion-example-project npm run build:site",
     "watch": "lerna run --parallel watch",
     "bootstrap": "lerna bootstrap"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0-beta.31",
+    "@babel/plugin-external-helpers": "^7.0.0-beta.31",
+    "@babel/preset-env": "^7.0.0-beta.31",
+    "@babel/preset-flow": "^7.0.0-beta.31",
+    "@babel/preset-react": "^7.0.0-beta.31",
+    "@babel/preset-stage-0": "^7.0.0-beta.31",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
@@ -70,8 +77,8 @@
     "rimraf": "^2.6.1",
     "rollup": "^0.51.3",
     "rollup-plugin-alias": "^1.3.1",
-    "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-babel": "4.0.0-beta.0",
+    "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-uglify": "^2.0.1",

packages/emotion-theming/test/index.test.js

@@ -10,7 +10,7 @@ import {
   getInterceptor,
   getChannel
 } from './test-helpers'
-import { channel, ThemeProvider, withTheme } from '../src/index'
+import { channel, ThemeProvider, withTheme } from 'emotion-theming'
 
 test(`theming default channel`, () => {
   const defaultChannel = channel

packages/emotion-theming/test/test-helpers.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { Component, PureComponent } from 'react'
 
-import { channel } from '../src/utils'
+import { channel } from 'emotion-theming'
 
 export const getContextTypes = C => C.contextTypes
 export const getChannel = C => Object.keys(getContextTypes(C))[0]

rollup.config.js

@@ -21,25 +21,25 @@ const config = {
   exports: 'named',
   sourcemap: true,
   plugins: [
+    cjs({ exclude: [path.join(__dirname, 'packages', '*/src/**/*')] }),
     resolve(),
     babel({
       presets: [
         [
-          'env',
+          '@babel/env',
           {
             loose: true,
             modules: false,
-            exclude: ['transform-es2015-typeof-symbol']
+            exclude: ['transform-typeof-symbol']
           }
         ],
-        'stage-0',
-        'react',
-        'flow'
+        '@babel/stage-0',
+        '@babel/react',
+        '@babel/flow'
       ],
-      plugins: ['codegen', 'external-helpers'],
+      plugins: ['codegen'],
       babelrc: false
-    }),
-    cjs()
+    })
   ],
   output: [
     { file: pkg.main, format: 'cjs' },
@@ -74,7 +74,7 @@ if (process.env.UMD) {
 
 if (pkg.name === 'preact-emotion') {
   config.input = '../react-emotion/src/index.js'
-  config.external = ['preact', 'emotion-utils', 'emotion']
+  config.external = ['preact', 'emotion-utils', 'emotion', 'prop-types']
   config.plugins.unshift(alias({ react: 'preact' }))
 }