Update prettier and add .prettierrc.yaml

.prettierrc.yaml

@@ -0,0 +1,2 @@
+semi: false
+singleQuote: true

package.json

@@ -80,8 +80,7 @@
     "module-alias": "^2.0.1",
     "npm-run-all": "^4.0.2",
     "polished": "^1.2.1",
-    "prettier": "1.7.4",
-    "prettier-eslint-cli": "^4.0.3",
+    "prettier": "1.10.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
@@ -125,13 +124,7 @@
     ],
     "parser": "babel-eslint",
     "rules": {
-      "prettier/prettier": [
-        "error",
-        {
-          "singleQuote": true,
-          "semi": false
-        }
-      ],
+      "prettier/prettier": "error",
       "react/prop-types": 0,
       "react/no-unused-prop-types": 0,
       "standard/computed-property-even-spacing": 0,

packages/create-emotion-styled/src/index.js

@@ -125,9 +125,11 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
       Styled.displayName =
         identifierName !== undefined
           ? identifierName
-          : `Styled(${typeof baseTag === 'string'
-              ? baseTag
-              : baseTag.displayName || baseTag.name || 'Component'})`
+          : `Styled(${
+              typeof baseTag === 'string'
+                ? baseTag
+                : baseTag.displayName || baseTag.name || 'Component'
+            })`
 
       Styled.contextTypes = contextTypes
       Styled[STYLES_KEY] = styles

packages/create-emotion/src/utils.js

@@ -3,10 +3,8 @@ import { memoize, unitless } from 'emotion-utils'
 
 const hyphenateRegex = /[A-Z]|^ms/g
 
-export const processStyleName: (
-  styleName: string
-) => string = memoize((styleName: string) =>
-  styleName.replace(hyphenateRegex, '-$&').toLowerCase()
+export const processStyleName: (styleName: string) => string = memoize(
+  (styleName: string) => styleName.replace(hyphenateRegex, '-$&').toLowerCase()
 )
 
 export const processStyleValue = (key: string, value: string): string => {

packages/create-emotion/test/inline.test.js

@@ -1,7 +1,7 @@
 // @flow
 /**
  * @jest-environment node
-*/
+ */
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import {

packages/create-emotion/test/stream.test.js

@@ -1,7 +1,7 @@
 // @flow
 /**
  * @jest-environment node
-*/
+ */
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import {

packages/emotion-server/test/auto-label/auto-label.test.js

@@ -1,7 +1,7 @@
 // @flow
 /**
  * @jest-environment node
-*/
+ */
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import styled from 'react-emotion'

packages/emotion-server/test/index.test.js

@@ -1,7 +1,7 @@
 // @flow
 /**
  * @jest-environment node
-*/
+ */
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import { getComponents, prettyifyCritical, getInjectedRules } from './util'

packages/emotion-server/test/inline.test.js

@@ -1,7 +1,7 @@
 // @flow
 /**
  * @jest-environment node
-*/
+ */
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import {

packages/emotion-server/test/stream.test.js

@@ -1,7 +1,7 @@
 // @flow
 /**
  * @jest-environment node
-*/
+ */
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import {

packages/emotion/test/auto-label/auto-label.test.js

@@ -27,20 +27,40 @@ describe('meta', () => {
 
   test('css prop correctly adds the id', () => {
     const SFC = () => {
-      return <div css={`display: flex;`}>Hello</div>
+      return (
+        <div
+          css={`
+            display: flex;
+          `}
+        >
+          Hello
+        </div>
+      )
     }
 
     class ClsComp extends React.Component<*> {
       render() {
-        return <div css={`display: grid;`}>Hello</div>
+        return (
+          <div
+            css={`
+              display: grid;
+            `}
+          >
+            Hello
+          </div>
+        )
       }
     }
 
     const hoc = W =>
       class extends React.Component<*> {
         render() {
           return (
-            <div css={`display: block;`}>
+            <div
+              css={`
+                display: block;
+              `}
+            >
               <W {...this.props} />
             </div>
           )

packages/emotion/test/css-prop.test.js

@@ -7,7 +7,16 @@ describe('css prop react', () => {
   test('basic', () => {
     const fontSize = '1px'
     const tree = renderer
-      .create(<p css={`color: red;font-size:${fontSize}`}>hello world</p>)
+      .create(
+        <p
+          css={`
+            color: red;
+            font-size: ${fontSize};
+          `}
+        >
+          hello world
+        </p>
+      )
       .toJSON()
 
     expect(tree).toMatchSnapshot()
@@ -62,35 +71,43 @@ describe('css prop react', () => {
         <div
           className="css__legacy-stuff"
           css={`
-              ${bold}; ${flexCenter};
-             `}
+            ${bold};
+            ${flexCenter};
+          `}
         >
           <h1
             css={`
-                ${props.error ? big : small};
-                color: red
-              `}
+              ${props.error ? big : small};
+              color: red;
+            `}
           >
             BOOM
           </h1>
-          <p className="test_class1" css={`color: blue;`}>
+          <p
+            className="test_class1"
+            css={`
+              color: blue;
+            `}
+          >
             Hello
           </p>
           <p
             className="test_class1 test___class45"
-            css={`display: inline-flex`}
+            css={`
+              display: inline-flex;
+            `}
           >
             World
           </p>
           <p
             css={`
-                color: red;
-                border-radius: ${props.radius};
-                &:hover {
-                  font-weight: bold;
-                  color: ${props.online ? 'green' : 'gray'};
-                }
-              `}
+              color: red;
+              border-radius: ${props.radius};
+              &:hover {
+                font-weight: bold;
+                color: ${props.online ? 'green' : 'gray'};
+              }
+            `}
           >
             hello world
           </p>
@@ -105,15 +122,29 @@ describe('css prop react', () => {
       display: flex;
     `
     const tree = renderer
-      .create(<div className={flex} css={`display: block;`} />)
+      .create(
+        <div
+          className={flex}
+          css={`
+            display: block;
+          `}
+        />
+      )
       .toJSON()
     expect(tree).toMatchSnapshot()
   })
 
   test('merging regular classes', () => {
     const someClass = 'some-class'
     const tree = renderer
-      .create(<div className={someClass} css={`display: block;`} />)
+      .create(
+        <div
+          className={someClass}
+          css={`
+            display: block;
+          `}
+        />
+      )
       .toJSON()
     expect(tree).toMatchSnapshot()
   })

packages/site/src/components/DocWrapper.js

@@ -140,7 +140,8 @@ export default (props: Props) => {
             <ToggleSidebarButton onClick={() => setSidebarOpenState(true)}>
               <MenuIcon color="white" size={32} />
             </ToggleSidebarButton>
-          )}
+          )
+        }
         renderContent={({ docked, setSidebarOpenState }) => (
           <Box p={[3, 4]}>
             {props.children}
@@ -254,7 +255,8 @@ export default (props: Props) => {
                 />
               </Switch>
             )
-          })}
+          })
+        }
       />
     </Box>
   )

packages/site/src/pages/index.js

@@ -113,8 +113,10 @@ class IndexPage extends React.Component<Props, State> {
                       {error ? null : (
                         <Preview
                           onError={onError}
-                          Link={// $FlowFixMe
-                          element.withComponent(GatsbyLink)}
+                          Link={
+                            // $FlowFixMe
+                            element.withComponent(GatsbyLink)
+                          }
                         />
                       )}
                     </ErrorBoundary>

packages/site/src/templates/doc.js

@@ -211,10 +211,12 @@ export default class DocRoute extends React.Component<Props> {
             css={{ color: 'rgb(107, 107, 107)', fontSize: 14.5 }}
             href={
               doc.frontmatter.title
-                ? `/~https://github.com/emotion-js/emotion/edit/master/docs/${this
-                    .props.pathContext.slug}.md`
-                : `/~https://github.com/emotion-js/emotion/edit/master/packages/${this
-                    .props.pathContext.slug}/README.md`
+                ? `/~https://github.com/emotion-js/emotion/edit/master/docs/${
+                    this.props.pathContext.slug
+                  }.md`
+                : `/~https://github.com/emotion-js/emotion/edit/master/packages/${
+                    this.props.pathContext.slug
+                  }/README.md`
             }
           >
             Edit this page

packages/site/src/utils/demo-buttons.js

@@ -35,7 +35,9 @@ export const Preview = ({
     <ErrorBoundary onError={onError}>
       <Links>
         <Link
-          css={`font-weight: 800;`}
+          css={`
+            font-weight: 800;
+          `}
           className={textCenter}
           to="/docs/install"
           primary