Undid .md, .mdx changes

docs/cache-provider.mdx

@@ -17,7 +17,7 @@ const myCache = createCache({
     customPlugin,
     // has to be included manually when customizing `stylisPlugins` if you want to have vendor prefixes added automatically
     prefixer
-  ]
+  ],
 })
 
 render(

docs/composition.mdx

@@ -70,8 +70,8 @@ render(
   <div>
     <div css={base}>This will be turquoise</div>
     <div css={[danger, base]}>
-      This will be also be turquoise since the base styles overwrite the danger
-      styles.
+      This will be also be turquoise since the base styles
+      overwrite the danger styles.
     </div>
     <div css={[base, danger]}>This will be red</div>
   </div>

docs/emotion-11.mdx

@@ -16,7 +16,6 @@ Most of this renaming can be done automatically via a codemod, following these s
 1. Run `eslint` with the `--fix` flag. For example: `yarn eslint --config .eslintrc --ext .js,.jsx "." --fix`
 
 The full list of renamed packages:
-
 - `@emotion/core` → `@emotion/react`
 - `emotion` → `@emotion/css`
 - `emotion-theming` → moved into ` @emotion/react`

docs/flow.mdx

@@ -18,20 +18,14 @@ alternatives:
 import styled from '@emotion/styled'
 
 // Option A
-const A =
-  styled <
-  Props >
-  'div'`
+const A = styled<Props>('div')`
   color: red;
 `
 
 // Option B
-const B =
-  styled.div <
-  Props >
-  {
-    color: 'red'
-  }
+const B = styled.div<Props>({
+  color: 'red',
+})
 ```
 
 Styled components are annotated the same way normal React components are:
@@ -40,10 +34,7 @@ Styled components are annotated the same way normal React components are:
 import styled from '@emotion/styled'
 
 type Props = { a: string }
-const Link =
-  styled <
-  Props >
-  'a'`
+const Link = styled<Props>('a')`
   color: red;
 `
 
@@ -65,6 +56,7 @@ Be aware, Flow infers the return type of your components by referencing their re
 this means you will need to annotate the properties of the root component in the case below:
 
 ```jsx
+
 const Container = styled.div`
                   ^^^^^^^^^^^ Missing type annotation for P. P is a type parameter declared in function type [1] and was implicitly instantiated at
 encaps tag [2].   
@@ -81,16 +73,14 @@ any existing React component:
 import type { ElementConfig } from 'react'
 
 type Props = ElementConfig<'div'>
-const Container =
-  styled <
-  Props >
-  'div'`
+const Container = styled<Props>('div')`
   color: red;
 `
 
 export const App = () => <Container />
 ```
 
+
 ```jsx
 import type { ElementConfig } from 'react'
 import styled from '@emotion/styled'
@@ -120,3 +110,6 @@ const Container = styled.div`
 
 export const App = (): Node => <Container />
 ```
+
+
+

docs/introduction.mdx

@@ -60,7 +60,6 @@ The ["@emotion/react"](https://www.npmjs.com/package/@emotion/react) package req
 - Best when using React with a build environment that can be configured.
 
 - `css` prop support
-
   - Similar to the `style` prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.
 
   - Allows developers to skip the `styled` API abstraction and style components and elements directly.

docs/media-queries.mdx

@@ -34,7 +34,9 @@ import { jsx, css } from '@emotion/react'
 
 const breakpoints = [576, 768, 992, 1200]
 
-const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`)
+const mq = breakpoints.map(
+  bp => `@media (min-width: ${bp}px)`
+)
 
 render(
   <div>
@@ -90,7 +92,9 @@ import facepaint from 'facepaint'
 
 const breakpoints = [576, 768, 992, 1200]
 
-const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`))
+const mq = facepaint(
+  breakpoints.map(bp => `@media (min-width: ${bp}px)`)
+)
 
 render(
   <div

docs/migrating-to-emotion-10.mdx

@@ -31,7 +31,9 @@ let important = css`
 `
 
 const SomeComponent = props => (
-  <div className={cx(basic, props.important && important)} />
+  <div
+    className={cx(basic, props.important && important)}
+  />
 )
 ```
 
@@ -204,6 +206,7 @@ let element = (
 
 - Replace `injectGlobal` with `Global` styles
 
+
 ```jsx
 import { injectGlobal } from 'emotion'
 
@@ -216,7 +219,8 @@ injectGlobal`
 // ↓ ↓ ↓ ↓ ↓ ↓
 
 import { Global, css } from '@emotion/core'
-;<Global
+
+<Global
   styles={css`
     * {
       box-sizing: border-box;

docs/nested.mdx

@@ -42,9 +42,13 @@ const paragraph = css`
 render(
   <div>
     <header>
-      <p css={paragraph}>This is green since it's inside a header</p>
+      <p css={paragraph}>
+        This is green since it's inside a header
+      </p>
     </header>
-    <p css={paragraph}>This is turquoise since it's not inside a header.</p>
+    <p css={paragraph}>
+      This is turquoise since it's not inside a header.
+    </p>
   </div>
 )
 ```

docs/object-styles.mdx

@@ -40,7 +40,11 @@ const Button = styled.button(
   })
 )
 
-render(<Button fontSize={16}>This is a darkorchid button.</Button>)
+render(
+  <Button fontSize={16}>
+    This is a darkorchid button.
+  </Button>
+)
 ```
 
 ### Child Selectors
@@ -81,7 +85,8 @@ render(
       }
     }}
   >
-    This is orange on a big screen and darkorchid on a small screen.
+    This is orange on a big screen and darkorchid on a small
+    screen.
   </div>
 )
 ```
@@ -124,7 +129,8 @@ render(
       { padding: 8 }
     ]}
   >
-    This is darkorchid with a hotpink background and 8px of padding.
+    This is darkorchid with a hotpink background and 8px of
+    padding.
   </div>
 )
 ```
@@ -141,12 +147,16 @@ import { jsx } from '@emotion/react'
 render(
   <div
     css={{
-      background: ['red', 'linear-gradient(#e66465, #9198e5)'],
+      background: [
+        'red',
+        'linear-gradient(#e66465, #9198e5)'
+      ],
       height: 100
     }}
   >
-    This has a gradient background in browsers that support gradients and is red
-    in browsers that don't support gradients
+    This has a gradient background in browsers that support
+    gradients and is red in browsers that don't support
+    gradients
   </div>
 )
 ```
@@ -199,10 +209,13 @@ const hotpinkWithBlackBackground = css(
 render(
   <div>
     <p css={hotpink}>This is hotpink</p>
-    <button css={hotpinkHoverOrFocus}>This is hotpink on hover or focus</button>
+    <button css={hotpinkHoverOrFocus}>
+      This is hotpink on hover or focus
+    </button>
     <p css={hotpinkWithBlackBackground}>
-      This has a black background and is hotpink. Try moving where hotpink is in
-      the css call and see if the color changes.
+      This has a black background and is hotpink. Try moving
+      where hotpink is in the css call and see if the color
+      changes.
     </p>
   </div>
 )

docs/package-summary.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Package Summaries'
+title: "Package Summaries"
 ---
 
 Below is a list of most of Emotion's packages and a summary of what it's for and how it relates to other Emotion packages.

docs/ssr.mdx

@@ -45,8 +45,7 @@ import createCache from '@emotion/cache'
 
 const key = 'custom'
 const cache = createCache({ key })
-const { extractCriticalToChunks, constructStyleTagsFromChunks } =
-  createEmotionServer(cache)
+const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache)
 
 let element = (
   <CacheProvider value={cache}>
@@ -56,7 +55,10 @@ let element = (
 
 let { html, styles } = extractCriticalToChunks(renderToString(element))
 
-res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html>
+res
+  .status(200)
+  .header('Content-Type', 'text/html')
+  .send(`<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -70,7 +72,7 @@ res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html>
 
     <script src="./bundle.js"></script>
 </body>
-</html>`)
+</html>`);
 ```
 
 #### When using `@emotion/css`
@@ -93,7 +95,10 @@ let element = (
 
 let { html, css, ids } = extractCritical(renderToString(element))
 
-res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html>
+res
+  .status(200)
+  .header('Content-Type', 'text/html')
+  .send(`<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -107,7 +112,7 @@ res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html>
 
     <script src="./bundle.js"></script>
 </body>
-</html>`)
+</html>`);
 ```
 
 ### On client
@@ -123,6 +128,8 @@ ReactDOM.hydrate(
 )
 ```
 
+
+
 In this approach you have to create your own cache and emotion server then use extractCritical
 
 ## API Reference
@@ -159,6 +166,7 @@ This returns an object with the properties `html`, `ids` and `css`. It pulls out
 >
 > If you have dynamic global styles it's advised to create cache **per** single render to avoid global styles from different renders leaking into the extracted `css`.
 
+
 ```jsx
 import { renderToString } from 'react-dom/server'
 import { extractCritical } from '@emotion/server'
@@ -213,7 +221,7 @@ export const createMyCache = () =>
     key: 'my-prefix-key',
     stylisPlugins: [
       /* your plugins here */
-    ]
+    ],
   })
 
 export const myCache = createMyCache()

docs/styled.mdx

@@ -28,7 +28,8 @@ Any interpolations or arguments that are functions in `styled` are called with `
 import styled from '@emotion/styled'
 
 const Button = styled.button`
-  color: ${props => (props.primary ? 'hotpink' : 'turquoise')};
+  color: ${props =>
+    props.primary ? 'hotpink' : 'turquoise'};
 `
 
 const Container = styled.div(props => ({
@@ -51,7 +52,9 @@ render(
 ```jsx
 // @live
 import styled from '@emotion/styled'
-const Basic = ({ className }) => <div className={className}>Some text</div>
+const Basic = ({ className }) => (
+  <div className={className}>Some text</div>
+)
 
 const Fancy = styled(Basic)`
   color: hotpink;
@@ -164,7 +167,8 @@ import isPropValid from '@emotion/is-prop-valid'
 import styled from '@emotion/styled'
 
 const H1 = styled('h1', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'color'
+  shouldForwardProp: prop =>
+    isPropValid(prop) && prop !== 'color'
 })(props => ({
   color: 'hotpink'
 }))
@@ -189,7 +193,11 @@ const dynamicStyle = props =>
 const Container = styled.div`
   ${dynamicStyle};
 `
-render(<Container color="lightgreen">This is lightgreen.</Container>)
+render(
+  <Container color="lightgreen">
+    This is lightgreen.
+  </Container>
+)
 ```
 
 ### `as` prop
@@ -205,7 +213,10 @@ const Button = styled.button`
 `
 
 render(
-  <Button as="a" href="https://github.com/emotion-js/emotion">
+  <Button
+    as="a"
+    href="https://github.com/emotion-js/emotion"
+  >
     Emotion on GitHub
   </Button>
 )