Drop support for preact (#896)

* Drop support for preact

* Fix build

* Fix most of the docs

.flowconfig

@@ -21,7 +21,6 @@
 suppress_comment=.*\\$FlowFixMe
 module.name_mapper='^\(create-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(react-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
-module.name_mapper='^\(preact-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(babel-plugin-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(emotion-theming\)$' -> '<PROJECT_ROOT>/packages/\1/src'

BREAKING_CHANGES_IN_V10.md

@@ -1,6 +1,6 @@
 # Breaking Changes
 
-- Only supports react@16.3 and above(+ preact)
+- Only supports react@16.3 and above
 - functions in interpolations are stringified in css and cx calls(probably won't affect you very much, there's a warning about it in v9)
 - `create-emotion-styled` is gone, use the new styled api and a provider
 - The css prop doesn't work via the babel plugin. `jsx` can be manually imported from `@emotion/core` or [babel-plugin-jsx-pragmatic](https://github.com/jmm/babel-plugin-jsx-pragmatic) can be used. (should we make a babel preset for that?)

README.md

@@ -56,8 +56,6 @@ app.classList.add(myStyle)
 npm install --save emotion react-emotion babel-plugin-emotion
 ```
 
-_Note: use `preact-emotion` in place of `react-emotion` if using [Preact](https://github.com/developit/preact)_
-
 ```javascript
 import styled, { css } from 'react-emotion'
 

docs/composition.md

@@ -1,5 +1,5 @@
 ---
-title: "Composition"
+title: 'Composition'
 ---
 
 Composition is one of the most powerful and useful patterns in Emotion. You can compose styles together by interpolating value returned from `css` in another style block.

docs/docs.yaml

@@ -42,4 +42,3 @@
     - '@emotion/primitives'
     - create-emotion
     - create-emotion-server
-    - preact-emotion

docs/globals.md

@@ -1,5 +1,5 @@
 ---
-title: "Global Styles"
+title: 'Global Styles'
 ---
 
 Sometimes it's useful to insert global css like resets or font faces. The `Global` component can be used for this. It accepts a `styles` prop which accepts the same values as the `css` prop except it inserts styles globally. Global styles are also removed when the styles change or when the Global component unmounts.
@@ -16,7 +16,8 @@ render(
           color: hotpink !important;
         }
       `}
-    />Everything is hotpink now!
+    />
+    Everything is hotpink now!
   </div>
 )
 ```

docs/install.md

@@ -1,23 +1,19 @@
 ---
-title: "Install"
+title: 'Install'
 ---
 
 Emotion can be used in many different ways. The easiest way to get started is to use the [`@emotion/core` package](/packages/@emotion/core).
 
 ```bash
 # React
 yarn add @emotion/core
-# Preact
-yarn add @emotion/preact-core
 ```
 
 or if you prefer npm
 
 ```bash
 # React
 npm install --save @emotion/core
-# Preact
-npm install --save @emotion/preact-core
 ```
 
 To use it, import what you need, for example use [jsx](/docs/jsx.md) to create class names with styles.
@@ -33,7 +29,10 @@ const style = css`
 `
 
 const SomeComponent = ({ children }) => (
-  <div css={style}>Some hotpink text.{children}</div>
+  <div css={style}>
+    Some hotpink text.
+    {children}
+  </div>
 )
 
 const anotherStyle = css({
@@ -52,29 +51,21 @@ render(
 
 ## With [`styled`](/docs/styled.md)
 
-`styled` is a way to create React/Preact components that have styles attached to them.
+`styled` is a way to create React components that have styles attached to them.
 
 ```bash
 # assuming you already have @emotion/core installed
-# React
 yarn add @emotion/styled
-# Preact
-yarn add @emotion/preact-styled
 ```
 
 or if you prefer npm
 
 ```bash
-# React
 npm install --save @emotion/styled
-# Preact
-npm install --save @emotion/preact-styled
 ```
 
 ```jsx
 // @live
-// change this import to @emotion/preact-styled
-// if you're using Preact
 import styled from '@emotion/styled'
 
 const Button = styled.button`

docs/media-queries.md

@@ -1,5 +1,5 @@
 ---
-title: "Media Queries"
+title: 'Media Queries'
 ---
 
 Using media queries in emotion works just like using media queries in regular css except you don't have to specify a selector inside the block, you can put your css directly in the css block.

docs/nested.md

@@ -1,5 +1,5 @@
 ---
-title: "Nested Selectors"
+title: 'Nested Selectors'
 ---
 
 Sometimes it's useful to nest selectors to target elements inside the current class or React component. Here is an example of a simple element selector nested in the class generated with `css`:

docs/ssr.md

@@ -1,5 +1,5 @@
 ---
-title: "Server Side Rendering"
+title: 'Server Side Rendering'
 ---
 
 Server side rendering works out of the box in emotion 10 and above

docs/styled.md

@@ -2,11 +2,11 @@
 title: 'Styled Components'
 ---
 
-`styled` is a way to create React or Preact components that have styles attached to them. It's available from [@emotion/styled](/packages/@emotion/styled) and [@emotion/preact-styled](/packages/@emotion/preact-styled). `styled` was heavily inspired by [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks/)
+`styled` is a way to create React components that have styles attached to them. It's available from [@emotion/styled](/packages/@emotion/styled). `styled` was heavily inspired by [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks/)
 
 ### Styling elements and components
 
-`styled` is very similar to `css` except you call it with an html tag or React/Preact component and then call that with a template literal for string styles or a regular function call for object styles.
+`styled` is very similar to `css` except you call it with an html tag or React component and then call that with a template literal for string styles or a regular function call for object styles.
 
 ```jsx
 // @live

docs/typescript.md

@@ -1,5 +1,5 @@
 ---
-title: "Typescript"
+title: 'Typescript'
 ---
 
 Emotion includes TypeScript definitions for `emotion`, `react-emotion`, `preact-emotion`, `create-emotion`, and `create-emotion-styled`. These definitions also infer types for css properties with the object syntax, HTML/SVG tag names, and prop types.
@@ -247,10 +247,6 @@ const Button = styled('button')`
 export default Button
 ```
 
-## preact-emotion
-
-The `preact-emotion` types are the same as the `react-emotion` types except that the types use Preact component types like `ComponentConstructor` and `FunctionalComponent` instead of React component types.
-
 ## create-emotion
 
 The `create-emotion` types are very similar to the `emotion` types except that you can pass your own context and options.

packages/babel-plugin-emotion/__tests__/other-macros/__snapshots__/index.js.snap

@@ -1,26 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`macros preact-emotion 1`] = `
-"import styled from 'preact-emotion/macro'
-
-let Thing = styled.div\`
-  color: hotpink;
-\`
-
-
-      ↓ ↓ ↓ ↓ ↓ ↓
-
-import _styled from \\"@emotion/preact-styled-base\\";
-
-let Thing = _styled(\\"div\\", {
-  target: \\"ep298t30\\",
-  label: \\"Thing\\"
-})({
-  name: \\"1lrxbo5\\",
-  styles: \\"color:hotpink;\\"
-});"
-`;
-
 exports[`macros react-emotion 1`] = `
 "import styled from 'react-emotion/macro'
 
@@ -40,4 +19,4 @@ let Thing = _styled(\\"div\\", {
   name: \\"1lrxbo5\\",
   styles: \\"color:hotpink;\\"
 });"
-`;
+`

packages/core/src/context.js

@@ -25,10 +25,8 @@ let withEmotionCache = function withEmotionCache<Props, Ref: React.Ref<*>>(
       </EmotionCacheContext.Consumer>
     )
   }
-  return process.env.PREACT
-    ? render
-    : // $FlowFixMe
-      React.forwardRef(render)
+  // $FlowFixMe
+  return React.forwardRef(render)
 }
 
 let consume = (func: EmotionCache => React.Node) => {
@@ -51,10 +49,7 @@ if (!isBrowser) {
     render() {
       return (
         <EmotionCacheContext.Provider {...this.state}>
-          {process.env.PREACT
-            ? // $FlowFixMe
-              this.props.children[0](this.state.value)
-            : this.props.children(this.state.value)}
+          {this.props.children(this.state.value)}
         </EmotionCacheContext.Provider>
       )
     }

packages/emotion/README.md

@@ -21,13 +21,13 @@ Emotion is a performant and flexible CSS-in-JS library. Building on many other C
 
 Frequently viewed docs:
 
-* [Introduction](https://emotion.sh/docs/introduction)
-* [Install](https://emotion.sh/docs/install)
-* [CSS](https://emotion.sh/docs/css)
-* [Styled Components](https://emotion.sh/docs/styled)
-* [Composition](https://emotion.sh/docs/composition)
-* [Nested Selectors](https://emotion.sh/docs/nested)
-* [Media Queries](https://emotion.sh/docs/media-queries)
+- [Introduction](https://emotion.sh/docs/introduction)
+- [Install](https://emotion.sh/docs/install)
+- [CSS](https://emotion.sh/docs/css)
+- [Styled Components](https://emotion.sh/docs/styled)
+- [Composition](https://emotion.sh/docs/composition)
+- [Nested Selectors](https://emotion.sh/docs/nested)
+- [Media Queries](https://emotion.sh/docs/media-queries)
 
 ### Quick Start
 
@@ -53,8 +53,6 @@ app.classList.add(myStyle)
 npm install --save emotion react-emotion babel-plugin-emotion
 ```
 
-_Note: use `preact-emotion` in place of `react-emotion` if using [Preact](https://github.com/developit/preact)_
-
 ```javascript
 import styled, { css } from 'react-emotion'
 
@@ -83,34 +81,34 @@ Look here 👉 _[emotion babel plugin feature table and documentation](https://g
 
 ### Examples
 
-* [emotion website](site) [[Demo Here](https://emotion.sh)]
-* [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)]
-* [reactivesearch](https://github.com/appbaseio/reactivesearch), a react UI library for Elasticsearch [[Website](https://opensource.appbase.io/reactivesearch/)]
-* [circuit-ui](https://github.com/sumup/circuit-ui), a react component library built at SumUp [[Storybook](https://sumup.github.io/circuit-ui/)]
-* [govuk-react](https://github.com/penx/govuk-react/), a React component library built for UK Government departments
-* **open a PR and add yours!**
+- [emotion website](site) [[Demo Here](https://emotion.sh)]
+- [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)]
+- [reactivesearch](https://github.com/appbaseio/reactivesearch), a react UI library for Elasticsearch [[Website](https://opensource.appbase.io/reactivesearch/)]
+- [circuit-ui](https://github.com/sumup/circuit-ui), a react component library built at SumUp [[Storybook](https://sumup.github.io/circuit-ui/)]
+- [govuk-react](https://github.com/penx/govuk-react/), a React component library built for UK Government departments
+- **open a PR and add yours!**
 
 ### Ecosystem
 
-* [facepaint](https://github.com/emotion-js/facepaint)
-* [emotion-vue](https://github.com/egoist/emotion-vue)
-* [ember-emotion](https://github.com/alexlafroscia/ember-emotion)
-* [CSS to emotion transform](https://transform.now.sh/css-to-emotion/)
-* [ShevyJS](https://github.com/kyleshevlin/shevyjs)
-* [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system.
+- [facepaint](https://github.com/emotion-js/facepaint)
+- [emotion-vue](https://github.com/egoist/emotion-vue)
+- [ember-emotion](https://github.com/alexlafroscia/ember-emotion)
+- [CSS to emotion transform](https://transform.now.sh/css-to-emotion/)
+- [ShevyJS](https://github.com/kyleshevlin/shevyjs)
+- [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system.
 
 ### In the Wild
 
-* [healthline.com](https://www.healthline.com)
-* [nytimes.com](https://www.nytimes.com)
-* [vault.crucible.gg](http://vault.crucible.gg/)
-* [saldotuc.com](https://saldotuc.com)
-* [gatsbythemes.com](https://gatsbythemes.com/)
-* [blazity.com](https://blazity.com/)
-* [postmates.com](https://postmates.com/)
-* [thedisconnect.co](https://thedisconnect.co/one)
-* [zefenify.com](https://zefenify.com/about.html)
-* [sentry.io](https://sentry.io)
+- [healthline.com](https://www.healthline.com)
+- [nytimes.com](https://www.nytimes.com)
+- [vault.crucible.gg](http://vault.crucible.gg/)
+- [saldotuc.com](https://saldotuc.com)
+- [gatsbythemes.com](https://gatsbythemes.com/)
+- [blazity.com](https://blazity.com/)
+- [postmates.com](https://postmates.com/)
+- [thedisconnect.co](https://thedisconnect.co/one)
+- [zefenify.com](https://zefenify.com/about.html)
+- [sentry.io](https://sentry.io)
 
 ## Contributors