Remove emotion-utils and use packages from emotion-js/next

.flowconfig

@@ -12,7 +12,6 @@
 
 [options]
 suppress_comment=.*\\$FlowFixMe
-module.name_mapper='^\(emotion-utils\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(create-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(create-emotion-styled\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(react-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'

packages/babel-plugin-emotion/package.json

@@ -15,10 +15,12 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "7.0.0-beta.32",
+    "@emotion/hash": "^0.6.2",
+    "@emotion/memoize": "^0.6.1",
+    "@emotion/stylis": "^0.6.5",
     "babel-plugin-macros": "^2.0.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "convert-source-map": "^1.5.0",
-    "emotion-utils": "^9.1.0",
     "find-root": "^1.1.0",
     "mkdirp": "^0.5.1",
     "source-map": "^0.5.7",

packages/babel-plugin-emotion/src/index.js

@@ -20,7 +20,9 @@ import type {
   Types,
   Babel
 } from 'babel-flow-types'
-import { hashString, Stylis, memoize } from 'emotion-utils'
+import hashString from '@emotion/hash'
+import Stylis from '@emotion/stylis'
+import memoize from '@emotion/memoize'
 import { addSourceMaps } from './source-map'
 
 import cssProps from './css-prop'

packages/create-emotion-server/package.json

@@ -14,7 +14,6 @@
     "clean": "rimraf lib"
   },
   "dependencies": {
-    "emotion-utils": "^9.1.0",
     "html-tokenize": "^2.0.0",
     "multipipe": "^1.0.2",
     "through": "^2.3.8"

packages/create-emotion-styled/package.json

@@ -16,8 +16,7 @@
     "watch": "rollup -c ../../rollup.config.js --watch"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^0.6.1",
-    "emotion-utils": "^9.1.0"
+    "@emotion/is-prop-valid": "^0.6.1"
   },
   "peerDependencies": {
     "prop-types": ">= 15"

packages/create-emotion-styled/src/index.js

@@ -1,5 +1,4 @@
 // @flow
-import { STYLES_KEY } from 'emotion-utils'
 import type { Emotion, Interpolations } from 'create-emotion'
 import { channel, contextTypes } from '../../emotion-theming/src/utils'
 import type { ElementType } from 'react'
@@ -49,7 +48,9 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
     return function() {
       let args = arguments
       let styles =
-        isReal && tag[STYLES_KEY] !== undefined ? tag[STYLES_KEY].slice(0) : []
+        isReal && tag.__emotion_styles !== undefined
+          ? tag.__emotion_styles.slice(0)
+          : []
       if (identifierName !== undefined) {
         styles.push(`label:${identifierName};`)
       }
@@ -140,7 +141,7 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
             })`
 
       Styled.contextTypes = contextTypes
-      Styled[STYLES_KEY] = styles
+      Styled.__emotion_styles = styles
       Styled.__emotion_base = baseTag
       Styled.__emotion_real = Styled
       Object.defineProperty(Styled, 'toString', {

packages/create-emotion/package.json

@@ -16,7 +16,10 @@
     "watch": "rollup -c ../../rollup.config.js --watch"
   },
   "dependencies": {
-    "emotion-utils": "^9.1.0",
+    "@emotion/hash": "^0.6.2",
+    "@emotion/memoize": "^0.6.1",
+    "@emotion/stylis": "^0.6.5",
+    "@emotion/unitless": "^0.6.2",
     "stylis": "^3.5.0",
     "stylis-rule-sheet": "^0.0.10"
   },

packages/create-emotion/src/index.js

@@ -1,5 +1,6 @@
 // @flow
-import { hashString, Stylis, STYLES_KEY } from 'emotion-utils'
+import hashString from '@emotion/hash'
+import Stylis from '@emotion/stylis'
 import stylisRuleSheet from 'stylis-rule-sheet'
 import {
   processStyleName,
@@ -8,7 +9,7 @@ import {
   isBrowser
 } from './utils'
 import StyleSheet from './sheet'
-import type { PrefixOption, StylisOptions, ClassNameArg } from './utils'
+import type { PrefixOption, ClassNameArg } from './utils'
 
 type StylisPlugins = Function[] | null | Function
 
@@ -85,15 +86,11 @@ function createEmotion(
 
   const insertionPlugin = stylisRuleSheet(insertRule)
 
-  const stylisOptions: StylisOptions = {
-    keyframe: false,
-    global: false,
-    prefix: options.prefix === undefined ? true : options.prefix,
-    semicolon: true
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    stylisOptions.compress = false
+  let stylisOptions
+  if (options.prefix !== undefined) {
+    stylisOptions = {
+      prefix: options.prefix
+    }
   }
 
   const caches = {
@@ -127,7 +124,7 @@ function createEmotion(
       case 'boolean':
         return ''
       case 'function':
-        if (interpolation[STYLES_KEY] !== undefined) {
+        if (interpolation.__emotion_styles !== undefined) {
           let selector = interpolation.toString()
           if (
             selector === 'NO_COMPONENT_SELECTOR' &&

packages/create-emotion/src/utils.js

@@ -1,5 +1,6 @@
 // @flow
-import { memoize, unitless } from 'emotion-utils'
+import memoize from '@emotion/memoize'
+import unitless from '@emotion/unitless'
 
 const hyphenateRegex = /[A-Z]|^ms/g
 
@@ -76,13 +77,3 @@ export const isBrowser = typeof document !== 'undefined'
 export type PrefixOption =
   | boolean
   | ((key: string, value: string, context: 1 | 2 | 3) => boolean)
-
-export type StylisOptions = {
-  keyframe?: boolean,
-  compress?: boolean,
-  global?: boolean,
-  cascade?: boolean,
-  semicolon?: boolean,
-  preserve?: boolean,
-  prefix?: PrefixOption
-}