From ef1a595d78a1cf0e4954bd9ab0f6166191bbfc3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 12 Nov 2019 22:19:08 +0100
Subject: [PATCH 1/6] Move theming APIs to core

---
 docs/theming.mdx                              | 125 +++++++++++-
 docs/typescript.mdx                           |   8 +-
 .../__snapshots__/theme-provider.dom.js.snap  |   0
 .../__snapshots__/theme-provider.js.snap      |   0
 .../__tests__/__snapshots__/use-theme.js.snap |   0
 .../__snapshots__/with-theme.js.snap          |   0
 packages/core/__tests__/class-names.js        |   3 +-
 packages/core/__tests__/css.js                |   3 +-
 packages/core/__tests__/global-with-theme.js  |   3 +-
 .../__tests__/theme-provider.dom.js           |   3 +-
 .../__tests__/theme-provider.js               |   3 +-
 .../__tests__/use-theme.js                    |   3 +-
 .../__tests__/with-theme.js                   |   2 +-
 packages/core/package.json                    |   5 +-
 packages/core/src/class-names.js              |   6 +-
 packages/core/src/context.js                  |   1 -
 packages/core/src/global.js                   |   3 +-
 packages/core/src/index.js                    |   4 +-
 packages/core/src/jsx.js                      |   3 +-
 .../theme-provider.js => core/src/theming.js} |  29 ++-
 packages/{styled => core}/types/helper.d.ts   |   0
 packages/core/types/index.d.ts                |   3 +
 .../types/tests-theming.tsx}                  |  25 ++-
 .../index.d.ts => core/types/theming.d.ts}    |  20 +-
 packages/css/package.json                     |   9 +-
 packages/emotion-theming/README.md            | 188 ------------------
 .../__tests__/__snapshots__/index.js.snap     |  13 --
 packages/emotion-theming/__tests__/index.js   |  31 ---
 packages/emotion-theming/package.json         |  47 +----
 packages/emotion-theming/src/index.js         |   7 +-
 packages/emotion-theming/src/use-theme.js     |   7 -
 packages/emotion-theming/src/with-theme.js    |  26 ---
 packages/emotion-theming/types/tsconfig.json  |  26 ---
 packages/emotion-theming/types/tslint.json    |  22 --
 packages/native/README.md                     |   5 +-
 packages/native/package.json                  |   1 -
 .../__snapshots__/native-styled.test.js.snap  |   2 +-
 packages/native/test/native-styled.test.js    |   5 +-
 packages/primitives-core/src/styled.js        |   4 +-
 packages/primitives/README.md                 |  18 +-
 packages/primitives/package.json              |   1 -
 .../emotion-primitives.test.js.snap           |   4 +-
 .../test/emotion-primitives.test.js           |   6 +-
 packages/styled-base/package.json             |   3 -
 packages/styled-base/{ => src}/index.js       |   0
 packages/styled/__tests__/styled.js           |   3 +-
 packages/styled/src/base.js                   |   4 +-
 packages/styled/test/theming.dom.test.js      |   2 +-
 packages/styled/test/theming.test.js          |   3 +-
 packages/styled/types/base.d.ts               |   4 +-
 packages/styled/types/index.d.ts              |   2 -
 51 files changed, 221 insertions(+), 474 deletions(-)
 rename packages/{emotion-theming => core}/__tests__/__snapshots__/theme-provider.dom.js.snap (100%)
 rename packages/{emotion-theming => core}/__tests__/__snapshots__/theme-provider.js.snap (100%)
 rename packages/{emotion-theming => core}/__tests__/__snapshots__/use-theme.js.snap (100%)
 rename packages/{emotion-theming => core}/__tests__/__snapshots__/with-theme.js.snap (100%)
 rename packages/{emotion-theming => core}/__tests__/theme-provider.dom.js (93%)
 rename packages/{emotion-theming => core}/__tests__/theme-provider.js (96%)
 rename packages/{emotion-theming => core}/__tests__/use-theme.js (94%)
 rename packages/{emotion-theming => core}/__tests__/with-theme.js (96%)
 rename packages/{emotion-theming/src/theme-provider.js => core/src/theming.js} (57%)
 rename packages/{styled => core}/types/helper.d.ts (100%)
 rename packages/{emotion-theming/types/tests.tsx => core/types/tests-theming.tsx} (90%)
 rename packages/{emotion-theming/types/index.d.ts => core/types/theming.d.ts} (88%)
 delete mode 100644 packages/emotion-theming/README.md
 delete mode 100644 packages/emotion-theming/__tests__/__snapshots__/index.js.snap
 delete mode 100644 packages/emotion-theming/__tests__/index.js
 delete mode 100644 packages/emotion-theming/src/use-theme.js
 delete mode 100644 packages/emotion-theming/src/with-theme.js
 delete mode 100644 packages/emotion-theming/types/tsconfig.json
 delete mode 100644 packages/emotion-theming/types/tslint.json
 rename packages/styled-base/{ => src}/index.js (100%)

diff --git a/docs/theming.mdx b/docs/theming.mdx
index 28c18dd5a..39360f7a1 100644
--- a/docs/theming.mdx
+++ b/docs/theming.mdx
@@ -2,13 +2,19 @@
 title: 'Theming'
 ---
 
-Theming is provided by the library [`emotion-theming`](https://emotion.sh/docs/emotion-theming).
+Theming is included in the [`@emotion/core`](https://emotion.sh/docs/@emotion/core) package.
 
-```bash
-npm install -S emotion-theming
-```
+Add `ThemeProvider` to the top level of your app and access the theme with `props.theme` in a styled component or provide a function that accepts the theme as the css prop.
+
+## Table of Contents
 
-Add `ThemeProvider` to the top level of your app and access the theme with `props.theme` in a styled component or provide a function that accepts the theme as the css prop. The api is laid out in detail [in the documentation](https://emotion.sh/docs/emotion-theming).
+- [Examples](#examples)
+- [Usage](#usage)
+- [API](#api)
+  - [ThemeProvider](#themeprovider-reactcomponenttype)
+  - [withTheme](#withthemecomponent-reactcomponenttype-reactcomponenttype)
+  - [useTheme](#usetheme)
+- [Credits](#credits)
 
 ## Examples
 
@@ -17,8 +23,7 @@ Add `ThemeProvider` to the top level of your app and access the theme with `prop
 ```jsx
 // @live
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
-import { ThemeProvider } from 'emotion-theming'
+import { jsx, ThemeProvider } from '@emotion/core'
 
 const theme = {
   colors: {
@@ -40,9 +45,8 @@ render(
 ```jsx
 // @live
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx, ThemeProvider } from '@emotion/core'
 import styled from '@emotion/styled'
-import { ThemeProvider } from 'emotion-theming'
 
 const theme = {
   colors: {
@@ -66,8 +70,7 @@ render(
 ```jsx
 // @live
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
-import { ThemeProvider, useTheme } from 'emotion-theming'
+import { jsx, ThemeProvider, useTheme } from '@emotion/core'
 
 const theme = {
   colors: {
@@ -92,3 +95,103 @@ render(
 )
 ```
 
+## API
+
+### ThemeProvider: React.ComponentType
+
+A React component that passes the theme object down the component tree via [context](https://reactjs.org/docs/context.html). Additional `ThemeProvider` components can be added deeper in the tree to override the original theme. The theme object will be merged into its ancestor as if by [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). If a function is passed instead of an object it will be called with the ancestor theme and the result will be the new theme.
+
+_Accepts:_
+
+- **`children`: React.Node**
+- **`theme`: Object|Object => Object** - An object or function that provides an object.
+
+```jsx
+import * as React from 'react'
+import styled from '@emotion/styled'
+import { ThemeProvider, withTheme } from '@emotion/core'
+
+// object-style theme
+
+const theme = {
+  backgroundColor: 'green',
+  color: 'red'
+}
+
+// function-style theme; note that if multiple <ThemeProvider> are used,
+// the parent theme will be passed as a function argument
+
+const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' })
+
+class Container extends React.Component {
+  render() {
+    return (
+      <ThemeProvider theme={theme}>
+        <ThemeProvider theme={adjustedTheme}>
+          <Text>Boom shaka laka!</Text>
+        </ThemeProvider>
+      </ThemeProvider>
+    )
+  }
+}
+```
+
+> Note:
+>
+> Make sure to hoist your theme out of render otherwise you may have performance problems.
+
+### withTheme(component: React.ComponentType): React.ComponentType
+
+A higher-order component that provides the current theme as a prop to the wrapped child and listens for changes. If the theme is updated, the child component will be re-rendered accordingly.
+
+```jsx
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+import { withTheme } from '@emotion/core'
+
+class TellMeTheColor extends React.Component {
+  render() {
+    return <div>The color is {this.props.theme.color}.</div>
+  }
+}
+
+TellMeTheColor.propTypes = {
+  theme: PropTypes.shape({
+    color: PropTypes.string
+  })
+}
+
+const TellMeTheColorWithTheme = withTheme(TellMeTheColor)
+```
+
+### useTheme
+
+A React hook that provides the current theme as its value. If the theme is updated, the child component will be re-rendered accordingly.
+
+```jsx
+// @live
+/** @jsx jsx */
+import { jsx, ThemeProvider, useTheme } from '@emotion/core'
+import styled from '@emotion/styled'
+
+const theme = {
+  colors: {
+    primary: 'hotpink'
+  }
+}
+
+function SomeText(props) {
+  const theme = useTheme()
+  return <div css={{ color: theme.colors.primary }} {...props} />
+}
+
+render(
+  <ThemeProvider theme={theme}>
+    <SomeText>some text</SomeText>
+  </ThemeProvider>
+)
+```
+
+## Credits
+
+Thanks goes to the [styled-components team](https://github.com/styled-components/styled-components) and [their contributors](https://github.com/styled-components/styled-components/graphs/contributors) who designed this API.
diff --git a/docs/typescript.mdx b/docs/typescript.mdx
index 489c94218..03042a6c9 100644
--- a/docs/typescript.mdx
+++ b/docs/typescript.mdx
@@ -254,7 +254,7 @@ _styled.tsx_
 
 ```tsx
 import styled, { CreateStyled } from '@emotion/styled'
-import * as emotionTheming from 'emotion-theming'
+import { useTheme, ThemeProvider, EmotionTheming } from '@emotion/core'
 
 type Theme = {
   color: {
@@ -268,8 +268,8 @@ type Theme = {
 export default styled as CreateStyled<Theme>
 
 // You can also create themed versions of all the other theme helpers and hooks
-const { ThemeProvider, withTheme, useTheme } = emotionTheming as emotionTheming.EmotionTheming<Theme>
-export { ThemeProvider, withTheme, useTheme }
+const { ThemeProvider, useTheme } = { ThemeProvider, useTheme } as EmotionTheming<Theme>
+export { ThemeProvider, useTheme }
 ```
 
 _Button.tsx_
@@ -308,4 +308,4 @@ const StyledComponent0 = styled(Component)`
   background: ${(props: StyledComponentProps & ComponentProps) =>
     props.bgColor};
 `
-```
\ No newline at end of file
+```
diff --git a/packages/emotion-theming/__tests__/__snapshots__/theme-provider.dom.js.snap b/packages/core/__tests__/__snapshots__/theme-provider.dom.js.snap
similarity index 100%
rename from packages/emotion-theming/__tests__/__snapshots__/theme-provider.dom.js.snap
rename to packages/core/__tests__/__snapshots__/theme-provider.dom.js.snap
diff --git a/packages/emotion-theming/__tests__/__snapshots__/theme-provider.js.snap b/packages/core/__tests__/__snapshots__/theme-provider.js.snap
similarity index 100%
rename from packages/emotion-theming/__tests__/__snapshots__/theme-provider.js.snap
rename to packages/core/__tests__/__snapshots__/theme-provider.js.snap
diff --git a/packages/emotion-theming/__tests__/__snapshots__/use-theme.js.snap b/packages/core/__tests__/__snapshots__/use-theme.js.snap
similarity index 100%
rename from packages/emotion-theming/__tests__/__snapshots__/use-theme.js.snap
rename to packages/core/__tests__/__snapshots__/use-theme.js.snap
diff --git a/packages/emotion-theming/__tests__/__snapshots__/with-theme.js.snap b/packages/core/__tests__/__snapshots__/with-theme.js.snap
similarity index 100%
rename from packages/emotion-theming/__tests__/__snapshots__/with-theme.js.snap
rename to packages/core/__tests__/__snapshots__/with-theme.js.snap
diff --git a/packages/core/__tests__/class-names.js b/packages/core/__tests__/class-names.js
index ef9ca1c9c..4d39f13d8 100644
--- a/packages/core/__tests__/class-names.js
+++ b/packages/core/__tests__/class-names.js
@@ -1,8 +1,7 @@
 // @flow
 import * as React from 'react'
 import 'test-utils/next-env'
-import { ClassNames } from '@emotion/core'
-import { ThemeProvider } from 'emotion-theming'
+import { ClassNames, ThemeProvider } from '@emotion/core'
 import renderer from 'react-test-renderer'
 
 test('css', () => {
diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js
index b3a133962..1fdc38184 100644
--- a/packages/core/__tests__/css.js
+++ b/packages/core/__tests__/css.js
@@ -2,8 +2,7 @@
 /** @jsx jsx */
 import 'test-utils/next-env'
 import * as React from 'react'
-import { jsx, css, CacheProvider } from '@emotion/core'
-import { ThemeProvider } from 'emotion-theming'
+import { jsx, css, CacheProvider, ThemeProvider } from '@emotion/core'
 import { render } from '@testing-library/react'
 import renderer from 'react-test-renderer'
 import createCache from '@emotion/cache'
diff --git a/packages/core/__tests__/global-with-theme.js b/packages/core/__tests__/global-with-theme.js
index ab28c7e5a..812ec0a91 100644
--- a/packages/core/__tests__/global-with-theme.js
+++ b/packages/core/__tests__/global-with-theme.js
@@ -1,9 +1,8 @@
 // @flow
 import 'test-utils/dev-mode'
 import * as React from 'react'
-import { ThemeProvider } from 'emotion-theming'
 import { render, unmountComponentAtNode } from 'react-dom'
-import { Global } from '@emotion/core'
+import { Global, ThemeProvider } from '@emotion/core'
 
 beforeEach(() => {
   // $FlowFixMe
diff --git a/packages/emotion-theming/__tests__/theme-provider.dom.js b/packages/core/__tests__/theme-provider.dom.js
similarity index 93%
rename from packages/emotion-theming/__tests__/theme-provider.dom.js
rename to packages/core/__tests__/theme-provider.dom.js
index a1068c081..e4efee51f 100644
--- a/packages/emotion-theming/__tests__/theme-provider.dom.js
+++ b/packages/core/__tests__/theme-provider.dom.js
@@ -4,8 +4,7 @@ import 'test-utils/next-env'
 import 'test-utils/dev-mode'
 import { throwIfFalsy, safeQuerySelector } from 'test-utils'
 import * as React from 'react'
-import { ThemeProvider } from 'emotion-theming'
-import { jsx } from '@emotion/core'
+import { jsx, ThemeProvider } from '@emotion/core'
 import { render } from 'react-dom'
 
 test('provider with theme value that changes', () => {
diff --git a/packages/emotion-theming/__tests__/theme-provider.js b/packages/core/__tests__/theme-provider.js
similarity index 96%
rename from packages/emotion-theming/__tests__/theme-provider.js
rename to packages/core/__tests__/theme-provider.js
index 607c741b4..111fa244b 100644
--- a/packages/emotion-theming/__tests__/theme-provider.js
+++ b/packages/core/__tests__/theme-provider.js
@@ -2,8 +2,7 @@
 /** @jsx jsx */
 import 'test-utils/next-env'
 import { ignoreConsoleErrors } from 'test-utils'
-import { ThemeProvider } from 'emotion-theming'
-import { jsx } from '@emotion/core'
+import { jsx, ThemeProvider } from '@emotion/core'
 import renderer from 'react-test-renderer'
 import cases from 'jest-in-case'
 
diff --git a/packages/emotion-theming/__tests__/use-theme.js b/packages/core/__tests__/use-theme.js
similarity index 94%
rename from packages/emotion-theming/__tests__/use-theme.js
rename to packages/core/__tests__/use-theme.js
index c46c1fa9b..3c2defca0 100644
--- a/packages/emotion-theming/__tests__/use-theme.js
+++ b/packages/core/__tests__/use-theme.js
@@ -2,8 +2,7 @@
 /** @jsx jsx */
 import 'test-utils/next-env'
 import * as renderer from 'react-test-renderer'
-import { jsx } from '@emotion/core'
-import { useTheme, ThemeProvider } from 'emotion-theming'
+import { jsx, useTheme, ThemeProvider } from '@emotion/core'
 
 test('useTheme works', () => {
   function TestComponent(props) {
diff --git a/packages/emotion-theming/__tests__/with-theme.js b/packages/core/__tests__/with-theme.js
similarity index 96%
rename from packages/emotion-theming/__tests__/with-theme.js
rename to packages/core/__tests__/with-theme.js
index bd2d59280..cec6da5c7 100644
--- a/packages/emotion-theming/__tests__/with-theme.js
+++ b/packages/core/__tests__/with-theme.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
-import { withTheme, ThemeProvider } from 'emotion-theming'
+import { withTheme, ThemeProvider } from '@emotion/core'
 
 test('withTheme works', () => {
   class SomeComponent extends React.Component<{ theme: Object }> {
diff --git a/packages/core/package.json b/packages/core/package.json
index 7e5451088..7b07689ab 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -27,7 +27,9 @@
     "@emotion/css": "^11.0.0-next.3",
     "@emotion/serialize": "^0.11.15-next.1",
     "@emotion/sheet": "0.9.3",
-    "@emotion/utils": "0.11.2"
+    "@emotion/utils": "0.11.2",
+    "@emotion/weak-memoize": "0.2.4",
+    "hoist-non-react-statics": "^3.3.1"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",
@@ -45,7 +47,6 @@
     "dtslint": "^0.3.0",
     "emotion": "^11.0.0-next.0",
     "emotion-server": "^11.0.0-next.0",
-    "emotion-theming": "^11.0.0-next.5",
     "html-tag-names": "^1.1.2",
     "react": "^16.11.0",
     "svg-tag-names": "^1.1.1"
diff --git a/packages/core/src/class-names.js b/packages/core/src/class-names.js
index f86a16c11..d488d9685 100644
--- a/packages/core/src/class-names.js
+++ b/packages/core/src/class-names.js
@@ -1,9 +1,9 @@
 // @flow
 import * as React from 'react'
-import { useContext } from 'react'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
-import { withEmotionCache, ThemeContext } from './context'
+import { withEmotionCache } from './context'
+import { ThemeContext } from './theming'
 import { isBrowser } from './utils'
 
 type ClassNameArg =
@@ -112,7 +112,7 @@ export const ClassNames: React.AbstractComponent<
   let content = {
     css,
     cx,
-    theme: useContext(ThemeContext)
+    theme: React.useContext(ThemeContext)
   }
   let ele = props.children(content)
   hasRendered = true
diff --git a/packages/core/src/context.js b/packages/core/src/context.js
index 2d4352a51..c25e5b73f 100644
--- a/packages/core/src/context.js
+++ b/packages/core/src/context.js
@@ -15,7 +15,6 @@ let EmotionCacheContext: React.Context<EmotionCache | null> = React.createContex
   typeof HTMLElement !== 'undefined' ? createCache() : null
 )
 
-export let ThemeContext = React.createContext<Object>({})
 export let CacheProvider = EmotionCacheContext.Provider
 
 let withEmotionCache = function withEmotionCache<Props, Ref: React.Ref<*>>(
diff --git a/packages/core/src/global.js b/packages/core/src/global.js
index 06c77b70e..7d907ef14 100644
--- a/packages/core/src/global.js
+++ b/packages/core/src/global.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
-import { withEmotionCache, ThemeContext } from './context'
+import { withEmotionCache } from './context'
+import { ThemeContext } from './theming'
 import { insertStyles } from '@emotion/utils'
 import { isBrowser } from './utils'
 
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index 8af775cc8..bf2a91ff9 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -1,7 +1,9 @@
 // @flow
-export { withEmotionCache, CacheProvider, ThemeContext } from './context'
+export { withEmotionCache, CacheProvider } from './context'
 export { jsx } from './jsx'
 export { Global } from './global'
 export { keyframes } from './keyframes'
 export { ClassNames } from './class-names'
+// TODO: should we export ThemeContext?
+export { useTheme, ThemeProvider, withTheme } from './theming'
 export { default as css } from './css'
diff --git a/packages/core/src/jsx.js b/packages/core/src/jsx.js
index 1271b0ed7..2fda56cf0 100644
--- a/packages/core/src/jsx.js
+++ b/packages/core/src/jsx.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
-import { withEmotionCache, ThemeContext } from './context'
+import { withEmotionCache } from './context'
+import { ThemeContext } from './theming'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { isBrowser } from './utils'
 import { serializeStyles } from '@emotion/serialize'
diff --git a/packages/emotion-theming/src/theme-provider.js b/packages/core/src/theming.js
similarity index 57%
rename from packages/emotion-theming/src/theme-provider.js
rename to packages/core/src/theming.js
index bf523a25f..11fc1a8ee 100644
--- a/packages/emotion-theming/src/theme-provider.js
+++ b/packages/core/src/theming.js
@@ -1,9 +1,13 @@
 // @flow
 import * as React from 'react'
-import { ThemeContext } from '@emotion/core'
 import weakMemoize from '@emotion/weak-memoize'
+import hoistNonReactStatics from 'hoist-non-react-statics'
 
-let getTheme = (outerTheme: Object, theme: Object | (Object => Object)) => {
+export const ThemeContext = React.createContext<Object>({})
+
+export const useTheme = () => React.useContext(ThemeContext)
+
+const getTheme = (outerTheme: Object, theme: Object | (Object => Object)) => {
   if (typeof theme === 'function') {
     const mergedTheme = theme(outerTheme)
     if (
@@ -36,12 +40,12 @@ let createCacheWithTheme = weakMemoize(outerTheme => {
   })
 })
 
-type Props = {
+type ThemeProviderProps = {
   theme: Object | (Object => Object),
   children: React.Node
 }
 
-let ThemeProvider = (props: Props) => {
+export const ThemeProvider = (props: ThemeProviderProps) => {
   let theme = React.useContext(ThemeContext)
 
   if (props.theme !== theme) {
@@ -54,4 +58,19 @@ let ThemeProvider = (props: Props) => {
   )
 }
 
-export default ThemeProvider
+export function withTheme<Config: {}>(
+  Component: React.AbstractComponent<Config>
+): React.AbstractComponent<$Diff<Config, { theme: Object }>> {
+  const componentName = Component.displayName || Component.name || 'Component'
+  let render = (props, ref) => {
+    let theme = React.useContext(ThemeContext)
+
+    return <Component theme={theme} ref={ref} {...props} />
+  }
+  // $FlowFixMe
+  let WithTheme = React.forwardRef(render)
+
+  WithTheme.displayName = `WithTheme(${componentName})`
+
+  return hoistNonReactStatics(WithTheme, Component)
+}
diff --git a/packages/styled/types/helper.d.ts b/packages/core/types/helper.d.ts
similarity index 100%
rename from packages/styled/types/helper.d.ts
rename to packages/core/types/helper.d.ts
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
index e7d55ea45..2d13fa61d 100644
--- a/packages/core/types/index.d.ts
+++ b/packages/core/types/index.d.ts
@@ -36,6 +36,9 @@ export {
   SerializedStyles
 }
 
+export * from './theming'
+export * from './helper'
+
 export const ThemeContext: Context<object>
 export const CacheProvider: Provider<EmotionCache>
 export function withEmotionCache<Props, RefType = any>(
diff --git a/packages/emotion-theming/types/tests.tsx b/packages/core/types/tests-theming.tsx
similarity index 90%
rename from packages/emotion-theming/types/tests.tsx
rename to packages/core/types/tests-theming.tsx
index d095bbd6d..817ac9c3a 100644
--- a/packages/emotion-theming/types/tests.tsx
+++ b/packages/core/types/tests-theming.tsx
@@ -1,10 +1,14 @@
-import * as emotionTheming from 'emotion-theming'
 import * as React from 'react'
+import {
+  useTheme,
+  ThemeProvider,
+  withTheme,
+  EmotionTheming,
+  WithTheme
+} from '@emotion/core'
 import styled, { CreateStyled } from '@emotion/styled'
 import { Interpolation, ObjectInterpolation } from '@emotion/styled/base'
 
-const { ThemeProvider, withTheme, useTheme } = emotionTheming
-
 interface Theme {
   primary: string
   secondary: string
@@ -53,10 +57,10 @@ const ThemedCompWithDefault = withTheme(CompCWithDefault)
 ;<ThemedCompWithDefault />
 ;<ThemedCompWithDefault theme={theme} />
 
-const {
-  ThemeProvider: TypedThemeProvider,
-  withTheme: typedWithTheme
-} = emotionTheming as emotionTheming.EmotionTheming<Theme>
+const { ThemeProvider: TypedThemeProvider, withTheme: typedWithTheme } = {
+  ThemeProvider,
+  withTheme
+} as EmotionTheming<Theme>
 ;<TypedThemeProvider theme={theme} />
 // $ExpectError
 ;<TypedThemeProvider theme={{ primary: 5 }} />
@@ -67,6 +71,7 @@ typedWithTheme(CompFC)
  * @todo
  * Following line should report an error.
  */
+
 typedWithTheme((props: { value: number }) => null)
 
 {
@@ -118,11 +123,9 @@ const StyledDiv2 = themedStyled.div({})
 // $ExpectError
 ;<StyledDiv2 theme={{ primary: 0, secondary: 0 }} />
 
-export type StyleDefinition<T = {}> = Interpolation<
-  emotionTheming.WithTheme<T, Theme>
->
+export type StyleDefinition<T = {}> = Interpolation<WithTheme<T, Theme>>
 export type ObjectStyleDefinition<T = {}> = ObjectInterpolation<
-  emotionTheming.WithTheme<T, Theme>
+  WithTheme<T, Theme>
 >
 
 const style: StyleDefinition = ({ theme }) => ({
diff --git a/packages/emotion-theming/types/index.d.ts b/packages/core/types/theming.d.ts
similarity index 88%
rename from packages/emotion-theming/types/index.d.ts
rename to packages/core/types/theming.d.ts
index 601af2f20..87766f642 100644
--- a/packages/emotion-theming/types/index.d.ts
+++ b/packages/core/types/theming.d.ts
@@ -2,15 +2,7 @@
 // TypeScript Version: 3.1
 
 import * as React from 'react'
-
-import {
-  StyledComponent,
-  StyledOptions,
-  CreateStyledComponent,
-  StyledTags,
-  PropsOf,
-  DistributiveOmit
-} from '@emotion/styled'
+import { DistributiveOmit, PropsOf } from './helper'
 
 export interface ThemeProviderProps<Theme> {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
@@ -21,24 +13,24 @@ export interface ThemeProvider<Theme extends {} = any> {
   (props: ThemeProviderProps<Theme>): React.ReactElement
 }
 
+export type useTheme<Theme extends {} = any> = <T extends Theme = Theme>() => T
+
 export type withTheme<Theme extends {} = any> = <
   C extends React.ComponentType<React.ComponentProps<C>>
 >(
   component: C
 ) => React.FC<DistributiveOmit<PropsOf<C>, 'theme'> & { theme?: Theme }>
 
-export type useTheme<Theme extends {} = any> = <T extends Theme = Theme>() => T
-
 export const ThemeProvider: ThemeProvider
 
-export const withTheme: withTheme
-
 export const useTheme: useTheme
 
+export const withTheme: withTheme
+
 export interface EmotionTheming<Theme> {
   ThemeProvider: ThemeProvider<Theme>
-  withTheme: withTheme<Theme>
   useTheme: useTheme<Theme>
+  withTheme: withTheme<Theme>
 }
 
 export type WithTheme<P, T> = P extends { theme: infer Theme }
diff --git a/packages/css/package.json b/packages/css/package.json
index 1a5d3fef7..fd1a6433d 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -3,8 +3,6 @@
   "version": "11.0.0-next.3",
   "description": "a function to serialize css and object styless",
   "main": "dist/css.cjs.js",
-  "module": "dist/css.esm.js",
-  "types": "types/index.d.ts",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/css",
   "scripts": {
@@ -14,11 +12,6 @@
     "access": "public"
   },
   "files": [
-    "src",
     "dist"
-  ],
-  "browser": {
-    "./dist/css.cjs.js": "./dist/css.browser.cjs.js",
-    "./dist/css.esm.js": "./dist/css.browser.esm.js"
-  }
+  ]
 }
diff --git a/packages/emotion-theming/README.md b/packages/emotion-theming/README.md
deleted file mode 100644
index 5109a4d85..000000000
--- a/packages/emotion-theming/README.md
+++ /dev/null
@@ -1,188 +0,0 @@
-# emotion-theming
-
-> A CSS-in-JS theming solution for React
-
-_`emotion-theming` is a theming library inspired by [styled-components](https://github.com/styled-components/styled-components)_
-
-## Table of Contents
-
-- [Install](#install)
-- [Usage](#usage)
-- [API](#api)
-  - [ThemeProvider](#themeprovider-reactcomponenttype)
-  - [withTheme](#withthemecomponent-reactcomponenttype-reactcomponenttype)
-  - [useTheme](#usetheme)
-- [Credits](#credits)
-- [License](#license)
-
-## Install
-
-```bash
-# add --save if using npm@4 or lower
-npm i emotion-theming
-
-# or
-yarn add emotion-theming
-```
-
-## Usage
-
-Theming is accomplished by placing the `ThemeProvider` component, at the top of the React component tree and wrapping descendants with the `withTheme` higher-order component. This HOC gets the current theme and injects it as a "prop" into your own component.
-
-The theme prop is automatically injected into components created with `styled`. The theme can also be accessed via passing a function to the css prop.
-
-```jsx
-// Page.js
-import * as React from 'react'
-/** @jsx jsx */
-import { jsx } from '@emotion/core'
-import styled from '@emotion/styled'
-
-const Container = styled.div({
-  background: 'whitesmoke',
-  height: '100vh'
-})
-
-const Headline = styled.h1`
-  color: ${props => props.theme.color};
-  font-family: sans-serif;
-`
-
-export default class Page extends React.Component {
-  render() {
-    return (
-      <Container>
-        <Headline>I'm red!</Headline>
-        <p css={theme => ({ color: theme.color })}>I'm also red!</p>
-      </Container>
-    )
-  }
-}
-
-// App.js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { ThemeProvider } from 'emotion-theming'
-
-import Page from './Page.js'
-
-const theme = {
-  color: 'red'
-}
-
-class App extends React.Component {
-  render() {
-    return (
-      <ThemeProvider theme={theme}>
-        <Page />
-      </ThemeProvider>
-    )
-  }
-}
-```
-
-## API
-
-### ThemeProvider: React.ComponentType
-
-A React component that passes the theme object down the component tree via [context](https://reactjs.org/docs/context.html). Additional `ThemeProvider` components can be added deeper in the tree to override the original theme. The theme object will be merged into its ancestor as if by [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). If a function is passed instead of an object it will be called with the ancestor theme and the result will be the new theme.
-
-_Accepts:_
-
-- **`children`: React.Node**
-- **`theme`: Object|Object => Object** - An object or function that provides an object.
-
-```jsx
-import React from 'react'
-import styled from '@emotion/styled'
-import { ThemeProvider, withTheme } from 'emotion-theming'
-
-// object-style theme
-
-const theme = {
-  backgroundColor: 'green',
-  color: 'red'
-}
-
-// function-style theme; note that if multiple <ThemeProvider> are used,
-// the parent theme will be passed as a function argument
-
-const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' })
-
-class Container extends React.Component {
-  render() {
-    return (
-      <ThemeProvider theme={theme}>
-        <ThemeProvider theme={adjustedTheme}>
-          <Text>Boom shaka laka!</Text>
-        </ThemeProvider>
-      </ThemeProvider>
-    )
-  }
-}
-```
-
-> Note:
->
-> Make sure to hoist your theme out of render otherwise you may have performance problems.
-
-### withTheme(component: React.ComponentType): React.ComponentType
-
-A higher-order component that provides the current theme as a prop to the wrapped child and listens for changes. If the theme is updated, the child component will be re-rendered accordingly.
-
-```jsx
-import PropTypes from 'prop-types'
-import React from 'react'
-import { withTheme } from 'emotion-theming'
-
-class TellMeTheColor extends React.Component {
-  render() {
-    return <div>The color is {this.props.theme.color}.</div>
-  }
-}
-
-TellMeTheColor.propTypes = {
-  theme: PropTypes.shape({
-    color: PropTypes.string
-  })
-}
-
-const TellMeTheColorWithTheme = withTheme(TellMeTheColor)
-```
-
-### useTheme
-
-A React hook that provides the current theme as its value. If the theme is updated, the child component will be re-rendered accordingly.
-
-```jsx
-// @live
-/** @jsx jsx */
-import { jsx } from '@emotion/core'
-import styled from '@emotion/styled'
-import { ThemeProvider, useTheme } from 'emotion-theming'
-
-const theme = {
-  colors: {
-    primary: 'hotpink'
-  }
-}
-
-function SomeText(props) {
-  const theme = useTheme()
-  return <div css={{ color: theme.colors.primary }} {...props} />
-}
-
-render(
-  <ThemeProvider theme={theme}>
-    <SomeText>some text</SomeText>
-  </ThemeProvider>
-)
-```
-
-## Credits
-
-Thanks goes to the [styled-components team](https://github.com/styled-components/styled-components) and [their contributors](https://github.com/styled-components/styled-components/graphs/contributors) who designed this API.
-
-## License
-
-MIT 2017-present
diff --git a/packages/emotion-theming/__tests__/__snapshots__/index.js.snap b/packages/emotion-theming/__tests__/__snapshots__/index.js.snap
deleted file mode 100644
index 2c57e6387..000000000
--- a/packages/emotion-theming/__tests__/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`with styled 1`] = `
-.emotion-0 {
-  color: red;
-  background-color: green;
-  border: 1px solid blue;
-}
-
-<div
-  className="emotion-0"
-/>
-`;
diff --git a/packages/emotion-theming/__tests__/index.js b/packages/emotion-theming/__tests__/index.js
deleted file mode 100644
index 4ee6d5b46..000000000
--- a/packages/emotion-theming/__tests__/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import 'test-utils/legacy-env'
-import * as renderer from 'react-test-renderer'
-import React from 'react'
-import styled from '@emotion/styled'
-
-import { ThemeProvider } from 'emotion-theming'
-
-test('with styled', () => {
-  const theme = { bg: 'green', color: 'red' }
-
-  const ThemedComponent = styled.div`
-    color: ${p => p.theme.color};
-  `
-
-  const ReThemedComponent = styled(ThemedComponent)`
-    background-color: ${p => p.theme.bg};
-  `
-  const FinalComponent = styled(ReThemedComponent)`
-    border: 1px solid blue;
-  `
-
-  const tree = renderer
-    .create(
-      <ThemeProvider theme={theme}>
-        <FinalComponent />
-      </ThemeProvider>
-    )
-    .toJSON()
-
-  expect(tree).toMatchSnapshot()
-})
diff --git a/packages/emotion-theming/package.json b/packages/emotion-theming/package.json
index 64ed9f0f9..4ac3eca5a 100644
--- a/packages/emotion-theming/package.json
+++ b/packages/emotion-theming/package.json
@@ -3,56 +3,17 @@
   "version": "11.0.0-next.5",
   "description": "A CSS-in-JS theming solution, inspired by styled-components",
   "main": "dist/emotion-theming.cjs.js",
-  "module": "dist/emotion-theming.esm.js",
-  "types": "types/index.d.ts",
   "files": [
-    "src",
-    "dist",
-    "types"
+    "dist"
   ],
   "scripts": {
-    "test:typescript": "dtslint types"
+    "test:typescript": "exit 0"
   },
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/emotion-theming",
-  "keywords": [
-    "react",
-    "theme",
-    "theming",
-    "emotion",
-    "cssinjs",
-    "css-in-js"
-  ],
-  "author": "styled-components team",
-  "contributors": [
-    "Evan Scott <probablyup@gmail.com> (https://github.com/probablyup)"
-  ],
+  "keywords": [],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/emotion-js/emotion/issues"
   },
-  "homepage": "https://emotion.sh",
-  "devDependencies": {
-    "@emotion/core": "^11.0.0-next.5",
-    "@emotion/styled": "^11.0.0-next.5",
-    "@types/react": "^16.9.11",
-    "dtslint": "^0.3.0",
-    "react": "^16.11.0"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.7.2",
-    "@emotion/weak-memoize": "0.2.4",
-    "hoist-non-react-statics": "^3.3.0"
-  },
-  "peerDependencies": {
-    "@emotion/core": "^11.0.0-next.5",
-    "react": ">=16.8.0"
-  },
-  "umd:main": "dist/emotion-theming.umd.min.js",
-  "browser": {
-    "./dist/emotion-theming.cjs.js": "./dist/emotion-theming.browser.cjs.js",
-    "./dist/emotion-theming.esm.js": "./dist/emotion-theming.browser.esm.js"
-  },
-  "preconstruct": {
-    "umdName": "emotionTheming"
-  }
+  "homepage": "https://emotion.sh"
 }
diff --git a/packages/emotion-theming/src/index.js b/packages/emotion-theming/src/index.js
index e4a1eddef..3101365b4 100644
--- a/packages/emotion-theming/src/index.js
+++ b/packages/emotion-theming/src/index.js
@@ -1,4 +1,3 @@
-// @flow
-export { default as ThemeProvider } from './theme-provider'
-export { default as withTheme } from './with-theme'
-export { default as useTheme } from './use-theme'
+throw new Error(
+  "`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider } from '@emotion/core'`."
+)
diff --git a/packages/emotion-theming/src/use-theme.js b/packages/emotion-theming/src/use-theme.js
deleted file mode 100644
index 11634273b..000000000
--- a/packages/emotion-theming/src/use-theme.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// @flow
-import React from 'react'
-import { ThemeContext } from '@emotion/core'
-
-export default function useTheme() {
-  return React.useContext(ThemeContext)
-}
diff --git a/packages/emotion-theming/src/with-theme.js b/packages/emotion-theming/src/with-theme.js
deleted file mode 100644
index 5520b4934..000000000
--- a/packages/emotion-theming/src/with-theme.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-import * as React from 'react'
-import hoistNonReactStatics from 'hoist-non-react-statics'
-import { ThemeContext } from '@emotion/core'
-
-type Props = { theme: Object }
-
-// should we change this to be forwardRef/withCSSContext style so it doesn't merge with props?
-// should we remove this altogether and tell people to useContext
-
-export default function withTheme<Config: {}>(
-  Component: React.AbstractComponent<Config>
-): React.AbstractComponent<$Diff<Config, Props>> {
-  const componentName = Component.displayName || Component.name || 'Component'
-  let render = (props, ref) => {
-    let theme = React.useContext(ThemeContext)
-
-    return <Component theme={theme} ref={ref} {...props} />
-  }
-  // $FlowFixMe
-  let WithTheme = React.forwardRef(render)
-
-  WithTheme.displayName = `WithTheme(${componentName})`
-
-  return hoistNonReactStatics(WithTheme, Component)
-}
diff --git a/packages/emotion-theming/types/tsconfig.json b/packages/emotion-theming/types/tsconfig.json
deleted file mode 100644
index 838017f13..000000000
--- a/packages/emotion-theming/types/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "../",
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
-    "lib": [
-      "es6"
-    ],
-    "module": "commonjs",
-    "noEmit": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "target": "es5",
-    "typeRoots": [
-      "../"
-    ],
-    "types": []
-  },
-  "include": [
-    "./*.ts",
-    "./*.tsx"
-  ]
-}
diff --git a/packages/emotion-theming/types/tslint.json b/packages/emotion-theming/types/tslint.json
deleted file mode 100644
index a7a8dedbe..000000000
--- a/packages/emotion-theming/types/tslint.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "extends": "dtslint/dtslint.json",
-  "rules": {
-    "array-type": [true, "generic"],
-    "semicolon": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-module",
-      "check-rest-spread",
-      "check-type",
-      "check-typecast",
-      "check-type-operator",
-      "check-preblock"
-    ],
-    "no-null-undefined-union": false,
-    "no-unnecessary-generics": false,
-    "callable-types": false
-  }
-}
diff --git a/packages/native/README.md b/packages/native/README.md
index dfa879561..7fe72dfb7 100644
--- a/packages/native/README.md
+++ b/packages/native/README.md
@@ -69,13 +69,12 @@ AppRegistry.registerComponent('ExampleApp', () => App)
 
 ## Theming
 
-Use `emotion-theming` for theming support.
+Use `@emotion/core` for theming support.
 
 ```js
 import React from 'react'
 import styled, { css } from '@emotion/native'
-
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/core'
 
 const theme = {
   color: 'hotpink',
diff --git a/packages/native/package.json b/packages/native/package.json
index bdec5bad2..492c7ae8c 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -14,7 +14,6 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.7.2",
-    "emotion-theming": "^11.0.0-next.5",
     "react": "^16.11.0",
     "react-native": "^0.57.0"
   },
diff --git a/packages/native/test/__snapshots__/native-styled.test.js.snap b/packages/native/test/__snapshots__/native-styled.test.js.snap
index f3937b413..dfdcd44c3 100644
--- a/packages/native/test/__snapshots__/native-styled.test.js.snap
+++ b/packages/native/test/__snapshots__/native-styled.test.js.snap
@@ -125,7 +125,7 @@ exports[`Emotion native styled should work with StyleSheet.create API 1`] = `
 </Text>
 `;
 
-exports[`Emotion native styled should work with emotion-theming 1`] = `
+exports[`Emotion native styled should work with theming from @emotion/core 1`] = `
 <Text
   style={
     Object {
diff --git a/packages/native/test/native-styled.test.js b/packages/native/test/native-styled.test.js
index b1759e903..e675813a1 100644
--- a/packages/native/test/native-styled.test.js
+++ b/packages/native/test/native-styled.test.js
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import renderer from 'react-test-renderer'
-import { ThemeProvider } from 'emotion-theming'
-
+import { ThemeProvider } from '@emotion/core'
 import styled from '@emotion/native'
 import reactNative from 'react-native'
 
@@ -38,7 +37,7 @@ describe('Emotion native styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  it('should work with emotion-theming', () => {
+  it('should work with theming from @emotion/core', () => {
     const Text = styled.Text`
       color: ${props => props.theme.backgroundColor};
     `
diff --git a/packages/primitives-core/src/styled.js b/packages/primitives-core/src/styled.js
index f017d6fba..72b114380 100644
--- a/packages/primitives-core/src/styled.js
+++ b/packages/primitives-core/src/styled.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import { testAlwaysTrue, pickAssign, interleave } from './utils'
-import { ThemeContext } from '@emotion/core'
+import { useTheme } from '@emotion/core'
 import { createCss } from './css'
 
 let defaultPickTest = prop => prop !== 'theme'
@@ -32,7 +32,7 @@ export function createStyled(
       // $FlowFixMe
       let Styled = React.forwardRef((props, ref) => {
         let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
-          theme: props.theme || React.useContext(ThemeContext)
+          theme: props.theme || useTheme()
         })
         let stylesWithStyleProp = styles
         if (props.style) {
diff --git a/packages/primitives/README.md b/packages/primitives/README.md
index 54f9b0110..0c0f4e217 100644
--- a/packages/primitives/README.md
+++ b/packages/primitives/README.md
@@ -26,7 +26,7 @@ This package also depends on `react`, `react-primitives` and `prop-types` so mak
 import React from 'react'
 import styled, { css } from '@emotion/primitives'
 
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/core'
 
 const theme = {
   color: 'hotpink',
@@ -83,23 +83,23 @@ class App extends React.Component {
 
 ## Supported primitives
 
-* **Text**
+- **Text**
 
-* **View**
+- **View**
 
-* **Image**
+- **Image**
 
 ## Usage with `react-sketchapp`
 
 ### Installing dependencies
 
-* [`react-sketchapp`](https://github.com/airbnb/react-sketchapp)
+- [`react-sketchapp`](https://github.com/airbnb/react-sketchapp)
 
 ```
 yarn add react-sketchapp
 ```
 
-* `skpm` for building and publishing sketch plugins. This is required to render the components and build them to Sketch environment.
+- `skpm` for building and publishing sketch plugins. This is required to render the components and build them to Sketch environment.
 
 ```
 yarn add @skpm/builder --dev
@@ -109,7 +109,7 @@ yarn add @skpm/builder --dev
 
 Once you've installed `skpm`,
 
-* create a new field `skpm` in `package.json`
+- create a new field `skpm` in `package.json`
 
 ```json
  "skpm": {
@@ -118,7 +118,7 @@ Once you've installed `skpm`,
 },
 ```
 
-* Create `manifest.json` file with following content -
+- Create `manifest.json` file with following content -
 
 ```json
 {
@@ -138,7 +138,7 @@ Once you've installed `skpm`,
 }
 ```
 
-* add this to your `scripts` section of your `package.json`
+- add this to your `scripts` section of your `package.json`
 
 ```json
 scripts: {
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index c41bd7426..c35de8d8c 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -28,7 +28,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
-    "emotion-theming": "^11.0.0-next.5",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "react": "^16.11.0",
diff --git a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
index adab65e10..e2dcc4bb5 100644
--- a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
+++ b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
@@ -108,7 +108,7 @@ exports[`Emotion primitives should style any other component 1`] = `
 </Text>
 `;
 
-exports[`Emotion primitives should unmount with emotion-theming 1`] = `
+exports[`Emotion primitives should unmount with theming 1`] = `
 <div>
   <p
     id="something"
@@ -132,7 +132,7 @@ exports[`Emotion primitives should work with StyleSheet.create API 1`] = `
 </Text>
 `;
 
-exports[`Emotion primitives should work with emotion-theming 1`] = `
+exports[`Emotion primitives should work with theming from @emotion/core 1`] = `
 <Text
   style={
     Object {
diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.js
index c4098e133..9f84e1f7e 100644
--- a/packages/primitives/test/emotion-primitives.test.js
+++ b/packages/primitives/test/emotion-primitives.test.js
@@ -2,7 +2,7 @@
 import * as React from 'react'
 import renderer from 'react-test-renderer'
 import reactPrimitives from 'react-primitives'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/core'
 import { render, unmountComponentAtNode } from 'react-dom'
 
 import styled from '@emotion/primitives'
@@ -40,7 +40,7 @@ describe('Emotion primitives', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  it('should work with emotion-theming', () => {
+  it('should work with theming from @emotion/core', () => {
     const Text = styled.Text`
       color: ${props => props.theme.backgroundColor};
     `
@@ -57,7 +57,7 @@ describe('Emotion primitives', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  it('should unmount with emotion-theming', () => {
+  it('should unmount with theming', () => {
     const Text = styled('p')`
       display: ${props => props.theme.display};
     `
diff --git a/packages/styled-base/package.json b/packages/styled-base/package.json
index a57865316..81f14cd94 100644
--- a/packages/styled-base/package.json
+++ b/packages/styled-base/package.json
@@ -10,8 +10,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "preconstruct": {
-    "source": "index"
   }
 }
diff --git a/packages/styled-base/index.js b/packages/styled-base/src/index.js
similarity index 100%
rename from packages/styled-base/index.js
rename to packages/styled-base/src/index.js
diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
index 4e4bdfaf5..a78e12220 100644
--- a/packages/styled/__tests__/styled.js
+++ b/packages/styled/__tests__/styled.js
@@ -4,8 +4,7 @@ import 'test-utils/next-env'
 import renderer from 'react-test-renderer'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import styled from '@emotion/styled'
-import { ThemeProvider } from 'emotion-theming'
-import { jsx, keyframes, css } from '@emotion/core'
+import { jsx, keyframes, css, ThemeProvider } from '@emotion/core'
 
 describe('styled', () => {
   test('no dynamic', () => {
diff --git a/packages/styled/src/base.js b/packages/styled/src/base.js
index 9bd65eb37..808d4ca19 100644
--- a/packages/styled/src/base.js
+++ b/packages/styled/src/base.js
@@ -7,7 +7,7 @@ import {
   type CreateStyled,
   type PrivateStyledComponent
 } from './utils'
-import { withEmotionCache, ThemeContext } from '@emotion/core'
+import { withEmotionCache, useTheme } from '@emotion/core'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
 
@@ -90,7 +90,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
           for (let key in props) {
             mergedProps[key] = props[key]
           }
-          mergedProps.theme = React.useContext(ThemeContext)
+          mergedProps.theme = useTheme()
         }
 
         if (typeof props.className === 'string') {
diff --git a/packages/styled/test/theming.dom.test.js b/packages/styled/test/theming.dom.test.js
index 6a4cc3a89..bea94316d 100644
--- a/packages/styled/test/theming.dom.test.js
+++ b/packages/styled/test/theming.dom.test.js
@@ -2,7 +2,7 @@
 import 'test-utils/legacy-env'
 import React from 'react'
 import styled from '@emotion/styled'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/core'
 import { render, cleanup } from '@testing-library/react'
 import serializer from 'jest-emotion'
 
diff --git a/packages/styled/test/theming.test.js b/packages/styled/test/theming.test.js
index 0d5f905fb..83168b8d3 100644
--- a/packages/styled/test/theming.test.js
+++ b/packages/styled/test/theming.test.js
@@ -3,8 +3,7 @@ import 'test-utils/legacy-env'
 import React from 'react'
 import * as renderer from 'react-test-renderer'
 import styled from '@emotion/styled'
-import { css } from '@emotion/core'
-import { ThemeProvider } from 'emotion-theming'
+import { css, ThemeProvider } from '@emotion/core'
 
 test('theme with react-test-renderer', () => {
   const Div = styled.div`
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index 04415a3b4..09e88a7d9 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -14,7 +14,7 @@
 
 import * as React from 'react'
 import { ComponentSelector, Interpolation } from '@emotion/serialize'
-import { PropsOf, DistributiveOmit } from './helper'
+import { PropsOf, DistributiveOmit } from '@emotion/core'
 
 export {
   ArrayInterpolation,
@@ -23,7 +23,7 @@ export {
   ObjectInterpolation
 } from '@emotion/serialize'
 
-export { ComponentSelector, Interpolation, PropsOf, DistributiveOmit }
+export { ComponentSelector, Interpolation }
 
 /** Same as StyledOptions but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<
diff --git a/packages/styled/types/index.d.ts b/packages/styled/types/index.d.ts
index bbc7a6b12..6e3cf4842 100644
--- a/packages/styled/types/index.d.ts
+++ b/packages/styled/types/index.d.ts
@@ -15,8 +15,6 @@ export {
   CreateStyledComponent
 } from './base'
 
-export { PropsOf, DistributiveOmit } from './helper'
-
 export type StyledTags<Theme extends {} = any> = {
   [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
     { theme?: Theme },

From dd8cad90530f3a2a00558c990d1fc1835cfd3d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 18 Nov 2019 00:02:30 +0100
Subject: [PATCH 2/6] Add changeset

---
 .changeset/weak-islands-confess.md    | 6 ++++++
 packages/core/types/index.d.ts        | 2 +-
 packages/core/types/tests-theming.tsx | 3 +++
 packages/core/types/tslint.json       | 2 ++
 4 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/weak-islands-confess.md

diff --git a/.changeset/weak-islands-confess.md b/.changeset/weak-islands-confess.md
new file mode 100644
index 000000000..36d805cba
--- /dev/null
+++ b/.changeset/weak-islands-confess.md
@@ -0,0 +1,6 @@
+---
+'@emotion/core': major
+'emotion-theming': major
+---
+
+`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider } from '@emotion/core' from now on`.
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
index 2d13fa61d..bb821e8d2 100644
--- a/packages/core/types/index.d.ts
+++ b/packages/core/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 2.8
+// TypeScript Version: 3.1
 
 import { EmotionCache } from '@emotion/cache'
 import {
diff --git a/packages/core/types/tests-theming.tsx b/packages/core/types/tests-theming.tsx
index 817ac9c3a..d43588cef 100644
--- a/packages/core/types/tests-theming.tsx
+++ b/packages/core/types/tests-theming.tsx
@@ -1,3 +1,6 @@
+// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
+// TypeScript Version: 3.1
+
 import * as React from 'react'
 import {
   useTheme,
diff --git a/packages/core/types/tslint.json b/packages/core/types/tslint.json
index 6de1755f5..397bc8639 100644
--- a/packages/core/types/tslint.json
+++ b/packages/core/types/tslint.json
@@ -2,6 +2,7 @@
   "extends": "dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
+    "callable-types": false,
     "file-name-casing": false,
     "import-spacing": false,
     "semicolon": false,
@@ -18,6 +19,7 @@
       "check-preblock"
     ],
     "no-null-undefined-union": false,
+    "no-object-literal-type-assertion": false,
     "no-unnecessary-generics": false
   }
 }

From 1f9337e717bdc0a1b953ebce7836ac010df20e30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 18 Nov 2019 00:30:36 +0100
Subject: [PATCH 3/6] Remove emotion-theming link to the README from the docc

---
 docs/docs.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/docs.yaml b/docs/docs.yaml
index 615c10b4e..c01e31945 100644
--- a/docs/docs.yaml
+++ b/docs/docs.yaml
@@ -41,7 +41,6 @@
     - babel-plugin-emotion
     - eslint-plugin-emotion
     - emotion-server
-    - emotion-theming
     - jest-emotion
     - '@emotion/native'
     - '@emotion/primitives'

From b9042a7aab1a8308134efbceeca4d3d08c4cd2b5 Mon Sep 17 00:00:00 2001
From: Mitchell Hamilton <mitchell@hamil.town>
Date: Mon, 18 Nov 2019 21:59:51 +1000
Subject: [PATCH 4/6] Update weak-islands-confess.md

---
 .changeset/weak-islands-confess.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/weak-islands-confess.md b/.changeset/weak-islands-confess.md
index 36d805cba..ca133782f 100644
--- a/.changeset/weak-islands-confess.md
+++ b/.changeset/weak-islands-confess.md
@@ -3,4 +3,4 @@
 'emotion-theming': major
 ---
 
-`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider } from '@emotion/core' from now on`.
+`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider } from '@emotion/core'` from now on.

From f61df3c102913ded9a1c3a868beeef1747b9436a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 18 Nov 2019 13:17:57 +0100
Subject: [PATCH 5/6] Apply suggestions from code review

Co-Authored-By: Mitchell Hamilton <mitchell@hamil.town>
---
 .changeset/weak-islands-confess.md    | 2 +-
 packages/emotion-theming/src/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/weak-islands-confess.md b/.changeset/weak-islands-confess.md
index ca133782f..7442c94c9 100644
--- a/.changeset/weak-islands-confess.md
+++ b/.changeset/weak-islands-confess.md
@@ -3,4 +3,4 @@
 'emotion-theming': major
 ---
 
-`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider } from '@emotion/core'` from now on.
+`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/core'` from now on.
diff --git a/packages/emotion-theming/src/index.js b/packages/emotion-theming/src/index.js
index 3101365b4..987d8d15b 100644
--- a/packages/emotion-theming/src/index.js
+++ b/packages/emotion-theming/src/index.js
@@ -1,3 +1,3 @@
 throw new Error(
-  "`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider } from '@emotion/core'`."
+  "`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/core'`."
 )

From 6076eabba8d064509b7e39256104ab7c59d11a7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 18 Nov 2019 23:07:13 +0100
Subject: [PATCH 6/6] Re-expose ThemeContext from @emotion/core

---
 packages/core/src/index.js             | 3 +--
 packages/primitives-core/src/styled.js | 4 ++--
 packages/styled/src/base.js            | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index bf2a91ff9..820125be7 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -4,6 +4,5 @@ export { jsx } from './jsx'
 export { Global } from './global'
 export { keyframes } from './keyframes'
 export { ClassNames } from './class-names'
-// TODO: should we export ThemeContext?
-export { useTheme, ThemeProvider, withTheme } from './theming'
+export { ThemeContext, useTheme, ThemeProvider, withTheme } from './theming'
 export { default as css } from './css'
diff --git a/packages/primitives-core/src/styled.js b/packages/primitives-core/src/styled.js
index 9255b0592..8abade0e2 100644
--- a/packages/primitives-core/src/styled.js
+++ b/packages/primitives-core/src/styled.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import { interleave } from './utils'
-import { useTheme } from '@emotion/core'
+import { ThemeContext } from '@emotion/core'
 import { createCss } from './css'
 
 let testOmitPropsOnComponent = prop => prop !== 'theme'
@@ -49,7 +49,7 @@ export function createStyled(
           for (let key in props) {
             mergedProps[key] = props[key]
           }
-          mergedProps.theme = useTheme()
+          mergedProps.theme = React.useContext(ThemeContext)
         }
 
         let stylesWithStyleProp = styles
diff --git a/packages/styled/src/base.js b/packages/styled/src/base.js
index 808d4ca19..9bd65eb37 100644
--- a/packages/styled/src/base.js
+++ b/packages/styled/src/base.js
@@ -7,7 +7,7 @@ import {
   type CreateStyled,
   type PrivateStyledComponent
 } from './utils'
-import { withEmotionCache, useTheme } from '@emotion/core'
+import { withEmotionCache, ThemeContext } from '@emotion/core'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
 
@@ -90,7 +90,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
           for (let key in props) {
             mergedProps[key] = props[key]
           }
-          mergedProps.theme = useTheme()
+          mergedProps.theme = React.useContext(ThemeContext)
         }
 
         if (typeof props.className === 'string') {