Merge pull request #1600 from emotion-js/next

v11

.changeset/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@0.2.1/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@1.3.0/schema.json",
   "changelog": [
     "@changesets/changelog-github",
     { "repo": "emotion-js/emotion" }
@@ -8,21 +8,26 @@
   "linked": [
     [
       "@emotion/core",
+      "@emotion/react",
       "@emotion/styled",
       "@emotion/styled-base",
       "@emotion/cache",
       "@emotion/css",
       "create-emotion",
       "emotion",
       "emotion-server",
+      "@emotion/server",
       "create-emotion-server",
       "babel-plugin-emotion",
+      "@emotion/babel-plugin",
       "@emotion/babel-preset-css-prop",
       "jest-emotion",
+      "@emotion/jest",
       "@emotion/native",
       "@emotion/primitives",
       "@emotion/primitives-core",
       "eslint-plugin-emotion",
+      "@emotion/eslint-plugin",
       "emotion-theming"
     ]
   ],

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   flow:
     docker:
-      - image: circleci/node:10.13.0-browsers
+      - image: circleci/node:10.16.3-browsers
     working_directory: ~/repo
     steps:
       - checkout
@@ -25,7 +25,7 @@ jobs:
 
   test:
     docker:
-      - image: circleci/node:10.13.0
+      - image: circleci/node:10.16.3
     working_directory: ~/repo
     steps:
       - checkout
@@ -48,7 +48,7 @@ jobs:
 
   test_dist:
     docker:
-      - image: circleci/node:10.13.0
+      - image: circleci/node:10.16.3
     working_directory: ~/repo
     steps:
       - checkout
@@ -66,7 +66,7 @@ jobs:
 
   lint_and_typescript:
     docker:
-      - image: circleci/node:10.13.0
+      - image: circleci/node:10.16.3
     working_directory: ~/repo
     steps:
       - checkout
@@ -77,6 +77,7 @@ jobs:
             - v4-dependencies-
       - run: yarn install --pure-lockfile
       - run: yarn lint:check
+      - run: yarn test:typescript
 
 workflows:
   version: 2

.codesandbox/ci.json

@@ -0,0 +1,4 @@
+{
+  "packages": ["packages/*"],
+  "sandboxes": ["pk1qjqpw67"]
+}

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.110.0
+0.128.0
 
 [ignore]
 .*/node_modules/config-chain/.*
@@ -20,8 +20,5 @@
 [declarations]
 .*/node_modules/react-native/.*
 
-
 [options]
-suppress_comment=.*\\$FlowFixMe
-suppress_comment=.*\\$FlowExpectError
 sharedmemory.hash_table_pow=21

.flowconfig-ci

@@ -1,5 +1,5 @@
 [version]
-0.110.0
+0.128.0
 
 [ignore]
 .*/node_modules/config-chain/.*
@@ -23,7 +23,5 @@
 
 
 [options]
-suppress_comment=.*\\$FlowFixMe
-suppress_comment=.*\\$FlowExpectError
 server.max_workers=1
 sharedmemory.hash_table_pow=21

.github/ISSUE_TEMPLATE/--bug-report.md

@@ -41,7 +41,7 @@ assignees: ''
 
 **Environment information:**
 
-<!-- Provide the `react` and `emotion` or `@emotion/*` packages versions -->
+<!-- Provide the `react` and `@emotion/*` packages versions -->
 
 - `react` version:
-- `emotion` version:
+- `@emotion/react` version:

.github/ISSUE_TEMPLATE/--documentation-issue.md

@@ -24,6 +24,6 @@ assignees: ''
 
 <!--
   If existing documentation is available, but needs to be improved,
-  is wrong, or unclear, please post here the relevant 
+  is wrong, or unclear, please post here the relevant
   https://emotion.sh/docs URLs
 -->

.github/ISSUE_TEMPLATE/--feature-request.md

@@ -6,7 +6,6 @@ labels: feature request, needs triage
 assignees: ''
 ---
 
-
 **The problem**
 
 <!-- A clear and concise description of what the problem is. e.g. I'm always frustrated when [...] -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,22 +15,27 @@ merge of your pull request!
 -->
 
 <!-- What changes are being made? (What feature/bug is being fixed here?) -->
+
 **What**:
 
 <!-- Why are these changes necessary? -->
+
 **Why**:
 
 <!-- How were these changes implemented? -->
+
 **How**:
 
 <!-- Have you done all of these things?  -->
+
 **Checklist**:
+
 <!-- add "N/A" to the end of each line that's irrelevant to your changes -->
 <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
+
 - [ ] Documentation
 - [ ] Tests
 - [ ] Code complete
 - [ ] Changeset <!-- This is necessary if your changes should release any packages. Run `yarn changeset` to create a changeset -->
 
-
 <!-- feel free to add additional comments -->

.prettierrc.yaml

@@ -4,3 +4,6 @@ overrides:
 - files: "docs/*.md"
   options:
     printWidth: 60
+- files: "*.js"
+  options:
+    parser: flow

README.md

@@ -37,12 +37,12 @@ Frequently viewed docs:
 Get up and running with a single import.
 
 ```bash
-npm install --save @emotion/core
+npm install --save @emotion/react
 ```
 
 ```jsx
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 
 let SomeComponent = props => {
   return (
@@ -60,7 +60,7 @@ let SomeComponent = props => {
 
 The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.
 
-Look here 👉 _[emotion babel plugin feature table and documentation](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion)_
+Look here 👉 _[emotion babel plugin feature table and documentation](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin)_
 
 ### Demo Sandbox
 

__mocks__/react-primitives.js

@@ -1,8 +1,2 @@
 // @flow
-/* eslint-env jest */
-module.exports = {
-  ...jest.requireActual('react-primitives'),
-  View: 'View',
-  Image: 'Image',
-  Text: 'Text'
-}
+export * from 'react-primitives/lib/index.web'

babel.config.js

@@ -34,15 +34,20 @@ module.exports = api => {
           filename &&
           isTestFile(filename) &&
           filename.includes('automatic-runtime'),
-        presets: [[emotionDevPreset, { runtime: 'automatic' }]]
+        presets: [
+          [emotionDevPreset, { runtime: 'automatic', useEmotionPlugin: true }]
+        ]
       },
       {
         test: filename =>
           filename &&
           isTestFile(filename) &&
           filename.includes('automatic-dev-runtime'),
         presets: [
-          [emotionDevPreset, { runtime: 'automatic', development: true }]
+          [
+            emotionDevPreset,
+            { runtime: 'automatic', development: true, useEmotionPlugin: true }
+          ]
         ]
       }
     ]

docs/babel-macros.mdx

@@ -4,14 +4,14 @@ title: 'Babel Macros'
 
 [Create React App recently added support for Babel Macros](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) which makes it possible to run Babel transforms without changing a Babel config.
 
-Most of Emotion's Babel Macros are available by adding `/macro` to the end of the import you'd normally use. (assuming you're using Create React App v2 or you've added babel-plugin-macros to your .babelrc) For example, to use the macro for styled, use `@emotion/styled/macro`. The one exception to this is `@emotion/core`, `@emotion/core` doesn't have a Babel Macro because Babel Macros doesn't support macros for custom JSX pragmas. There is a Babel macro available for `css` from `@emotion/core` if you import it from `@emotion/css/macro` though.
+All of Emotion's Babel Macros are available by adding `/macro` to the end of the import you'd normally use. (assuming you're using Create React App v2 or you've added babel-plugin-macros to your .babelrc) For example, to use the macro for styled, use `@emotion/styled/macro`.
 
 ```jsx
 import styled from '@emotion/styled/macro'
-import css from '@emotion/css/macro'
-import { css, keyframes, injectGlobal } from 'emotion/macro'
+import { jsx, css, Global, keyframes } from '@emotion/react/macro'
+import { css, keyframes, injectGlobal } from '@emotion/css/macro'
 ```
 
 > Note
 >
-> There are some optimisations which aren't possible with Babel Macros, so if it's possible, we still recommend using babel-plugin-emotion
+> There are some optimisations which aren't possible with Babel Macros, so if it's possible, we still recommend using @emotion/babel-plugin

docs/babel.mdx

@@ -2,7 +2,7 @@
 title: 'Babel Plugin'
 ---
 
-`babel-plugin-emotion` is highly recommended. All of the options that can be provided to `babel-plugin-emotion` are documented in [`babel-plugin-emotion`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion).
+`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin).
 
 ### Install
 

docs/cache-provider.mdx

@@ -7,24 +7,17 @@ It can be useful to customize emotion's options - i.e. to add custom Stylis plug
 ```jsx
 // @live
 /** @jsx jsx */
-import { CacheProvider, jsx, css } from '@emotion/core'
+import { CacheProvider, jsx, css } from '@emotion/react'
 import createCache from '@emotion/cache'
+import { prefixer } from 'stylis'
 
 const myCache = createCache({
   key: 'my-prefix-key',
   stylisPlugins: [
-    /* your plugins here */
+    customPlugin,
+    // has to be included manually when customizing `stylisPlugins` if you want to have vendor prefixes added automatically
+    prefixer
   ],
-  // prefix based on the css property
-  prefix: key => {
-    switch (key) {
-      case 'flex':
-        return false
-      case 'transform':
-      default:
-        return true
-    }
-  }
 })
 
 render(

docs/class-names.mdx

@@ -6,7 +6,7 @@ It can be useful to create a className that is not passed to a component, for ex
 
 ```jsx
 // @live
-import { ClassNames } from '@emotion/core'
+import { ClassNames } from '@emotion/react'
 
 // this might be a component from npm that accepts a wrapperClassName prop
 let SomeComponent = props => (

docs/composition.mdx

@@ -7,7 +7,7 @@ Composition is one of the most powerful and useful patterns in Emotion. You can
 ```jsx
 // @live
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import { jsx, css } from '@emotion/react'
 
 const base = css`
   color: hotpink;
@@ -55,7 +55,7 @@ With Emotion though, you can create styles and combine them.
 ```jsx
 // @live
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 
 const danger = css`
   color: red;