chore: bump Prettier and Prettier accessories to 2.x

.github/workflows/main.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   test:
-    name: "Tests on ${{matrix.platform}}"
+    name: 'Tests on ${{matrix.platform}}'
     strategy:
       fail-fast: false
       matrix:
@@ -194,5 +194,3 @@ jobs:
         run: yarn lint:check
       - name: TypeScript
         run: cd packages/${{ matrix.package }} && yarn test:typescript
-
-

.prettierrc.yaml

@@ -1,9 +1,11 @@
+arrowParens: avoid
 semi: false
 singleQuote: true
+trailingComma: none
 overrides:
-- files: "docs/*.md"
-  options:
-    printWidth: 60
-- files: "*.js"
-  options:
-    parser: flow
+  - files: 'docs/*.md'
+    options:
+      printWidth: 60
+  - files: '*.js'
+    options:
+      parser: flow

CODE_OF_CONDUCT.md

@@ -14,21 +14,21 @@ orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities
@@ -71,4 +71,4 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi
 available at [http://contributor-covenant.org/version/1/4][version]
 
 [homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+[version]: http://contributor-covenant.org/version/1/4/

codecov.yml

@@ -1,7 +1,7 @@
 comment: # https://docs.codecov.io/docs/pull-request-comments
-  layout: "files"
+  layout: 'files'
   behavior: once
-  require_changes: true   # if true: only post the comment if coverage changes
-  require_base: no        # [yes :: must have a base report to post]
-  require_head: yes       # [yes :: must have a head report to post]
+  require_changes: true # if true: only post the comment if coverage changes
+  require_base: no # [yes :: must have a base report to post]
+  require_head: yes # [yes :: must have a head report to post]
   branches: null

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,6 +16,7 @@ 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,14 +18,20 @@ 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:
@@ -34,7 +40,10 @@ 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;
 `
 
@@ -56,7 +65,6 @@ 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].   
@@ -73,14 +81,16 @@ 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'
@@ -110,6 +120,3 @@ const Container = styled.div`
 
 export const App = (): Node => <Container />
 ```
-
-
-

docs/introduction.mdx

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

docs/nested.mdx

@@ -42,13 +42,9 @@ 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,11 +40,7 @@ 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
@@ -85,8 +81,7 @@ 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>
 )
 ```
@@ -129,8 +124,7 @@ 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>
 )
 ```
@@ -147,16 +141,12 @@ 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>
 )
 ```
@@ -209,13 +199,10 @@ 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.