Run yarn lint and commit

example/src/main.js

@@ -67,27 +67,27 @@ const margin = (t, r, b, l) => {
 
 const PlaygroundWrapper = styled('div')`
   font-family: 'Oxygen', sans-serif;
-  flex:1;
+  flex: 1;
   color: #343a40;
   background: #f8f9fa;
-  
+
   & .inner {
     ${margin(0, 'auto', 0, 'auto')};
     width: calc(100% - 32px);
     max-width: 960px;
-    
+
     @media (min-width: 960px) {
       width: 100%;
     }
   }
-  
+
   & .header {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
-    
+
     & img {
       display: block;
       width: 128px;

example/src/markdown/index.js

@@ -7,8 +7,12 @@ import styles from './index.css'
 
 const MarkdownContainer = styled('div')`
   composes: ${styles.markdownContainer};
-
-  h1, h2, h3, h4, h5 {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
     margin: 16px 0 8px 0;
     letter-spacing: 1px;
   }
@@ -20,11 +24,11 @@ const Link = withTheme(styled('a')`
   margin-right: 8px;
   text-decoration: none;
   color: ${p => p.theme.purple};
-  
+
   & p & {
     margin: 0;
   }
-  
+
   &:hover {
     color: ${p => p.theme.gold};
   }
@@ -35,11 +39,10 @@ const Paragraph = styled('p')`
   padding: 2px;
   font-size: 0.85rem;
   color: ${colors.gray[8]};
-  
+
   & a {
     font-size: 0.85rem;
   }
-
 `
 
 const Code = styled('code')`
@@ -48,7 +51,7 @@ const Code = styled('code')`
   color: ${colors.gray[8]};
   background-color: ${colors.gray[1]};
   padding: 1px;
-  
+
   & p & {
     font-size: 0.99rem;
   }
@@ -88,9 +91,7 @@ export default ({ markdown }) => {
           CodeBlock: props => {
             return (
               <CodeBlock key={props.nodeKey} className={props.className}>
-                <Code>
-                  {props.literal}
-                </Code>
+                <Code>{props.literal}</Code>
               </CodeBlock>
             )
           }

example/src/playground/index.js

@@ -11,7 +11,8 @@ import styled from 'emotion/react'
 import colors from 'open-color'
 
 const dracula = css`
-  & .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
+  & .cm-s-dracula.CodeMirror,
+  .cm-s-dracula .CodeMirror-gutters {
     background-color: #282a36 !important;
     color: #f8f8f2 !important;
     border: none;
@@ -26,26 +27,31 @@ const dracula = css`
   }
 
   & .cm-s-dracula .CodeMirror-linenumber {
-    color: #6D8A88;
+    color: #6d8a88;
   }
 
   & .cm-s-dracula .CodeMirror-selected {
-    background: rgba(255, 255, 255, 0.10);
+    background: rgba(255, 255, 255, 0.1);
   }
 
-  & .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection {
-    background: rgba(255, 255, 255, 0.10);
+  & .cm-s-dracula .CodeMirror-line::selection,
+  .cm-s-dracula .CodeMirror-line > span::selection,
+  .cm-s-dracula .CodeMirror-line > span > span::selection {
+    background: rgba(255, 255, 255, 0.1);
   }
 
-  & .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
-    background: rgba(255, 255, 255, 0.10);
+  & .cm-s-dracula .CodeMirror-line::-moz-selection,
+  .cm-s-dracula .CodeMirror-line > span::-moz-selection,
+  .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
+    background: rgba(255, 255, 255, 0.1);
   }
 
   & .cm-s-dracula span.cm-comment {
     color: #6272a4;
   }
 
-  & .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 {
+  & .cm-s-dracula span.cm-string,
+  .cm-s-dracula span.cm-string-2 {
     color: #f1fa8c;
   }
 
@@ -101,7 +107,8 @@ const dracula = css`
     color: #50fa7b;
   }
 
-  & .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type {
+  & .cm-s-dracula span.cm-variable-3,
+  .cm-s-dracula span.cm-type {
     color: #ffb86c;
   }
 
@@ -121,13 +128,13 @@ const PlaygroundContent = styled('div')`
   margin: 0 auto 16px auto;
   padding: 16px 0;
   max-width: 560px;
-  
+
   & .ReactCodeMirror {
     flex: 1 1 70%;
     & textarea {
       border-radius: 4px;
     }
-    
+
     & .CodeMirror {
       height: auto;
       border-radius: 4px;

example/src/preview/index.js

@@ -17,7 +17,7 @@ const PreviewContent = styled('div')`
 const PreviewWrapper = styled(PreviewContent)`
   position: relative;
   flex: 1 1 30%;
-  
+
   & .preview-display {
     width: 100%;
     height: 100%;
@@ -155,11 +155,7 @@ class Preview extends Component {
     return (
       <PreviewWrapper>
         <div ref="mount" className="preview-display" />
-        {error !== null
-          ? <ErrorWrapper>
-              {error}
-            </ErrorWrapper>
-          : null}
+        {error !== null ? <ErrorWrapper>{error}</ErrorWrapper> : null}
       </PreviewWrapper>
     )
   }

package.json

@@ -33,16 +33,16 @@
     "css": "^2.2.1",
     "enzyme": "^2.9.1",
     "enzyme-to-json": "^1.5.1",
-    "eslint": "^4.3.0",
+    "eslint": "^4.5.0",
     "eslint-config-prettier": "^2.3.0",
     "eslint-config-react": "^1.1.7",
     "eslint-config-standard": "^10.2.1",
     "eslint-config-standard-react": "^5.0.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-node": "^5.1.1",
-    "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^7.1.0",
+    "eslint-plugin-react": "^7.3.0",
     "eslint-plugin-standard": "^3.0.1",
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",

packages/babel-plugin-emotion/test/macro/css.test.js

@@ -35,9 +35,7 @@ describe('css macro', () => {
   })
 
   test('composes', () => {
-    const cls1 = css`
-      display: flex;
-    `
+    const cls1 = css`display: flex;`
     const cls2 = css`
       composes: ${cls1};
       justifyContent: center;

packages/babel-plugin-emotion/test/macro/react.test.js

@@ -38,9 +38,7 @@ describe('styled', () => {
 
   test('call expression', () => {
     const fontSize = 20
-    const H1 = styled('h1')`
-      font-size: ${fontSize}px;
-    `
+    const H1 = styled('h1')`font-size: ${fontSize}px;`
 
     const tree = renderer.create(<H1>hello world</H1>).toJSON()
 
@@ -49,11 +47,9 @@ describe('styled', () => {
 
   test('composition', () => {
     const fontSize = 20
-    const H1 = styled('h1')`
-      font-size: ${fontSize + 'px'};
-    `
+    const H1 = styled('h1')`font-size: ${fontSize + 'px'};`
 
-    const H2 = styled(H1)`font-size: ${fontSize * 2 / 3}`
+    const H2 = styled(H1)`font-size: ${fontSize * 2 / 3};`
 
     const tree = renderer.create(<H2>hello world</H2>).toJSON()
 
@@ -84,9 +80,7 @@ describe('styled', () => {
 
   test('function in expression', () => {
     const fontSize = 20
-    const H1 = styled('h1')`
-      font-size: ${fontSize};
-    `
+    const H1 = styled('h1')`font-size: ${fontSize};`
 
     const H2 = styled(H1)`font-size: ${({ scale }) => fontSize * scale};`
 
@@ -98,9 +92,7 @@ describe('styled', () => {
   test('composes', () => {
     const fontSize = '20px'
 
-    const cssA = css`
-      color: blue;
-    `
+    const cssA = css`color: blue;`
 
     const cssB = css`
       composes: ${cssA};
@@ -112,7 +104,7 @@ describe('styled', () => {
       font-size: ${fontSize};
     `
 
-    const H2 = styled(H1)`font-size:32px;`
+    const H2 = styled(H1)`font-size: 32px;`
 
     const tree = renderer.create(<H2 scale={2}>hello world</H2>).toJSON()
 
@@ -123,7 +115,9 @@ describe('styled', () => {
     const cssA = {
       color: lighten(0.2, '#000'),
       'font-size': modularScale(1),
-      [hiDPI(1.5).replace('\n', ' ').trim()]: {
+      [hiDPI(1.5)
+        .replace('\n', ' ')
+        .trim()]: {
         'font-size': modularScale(1.25)
       }
     }
@@ -138,7 +132,7 @@ describe('styled', () => {
       font-size: ${modularScale(4)};
     `
 
-    const H2 = styled(H1)`font-size:32px;`
+    const H2 = styled(H1)`font-size: 32px;`
 
     const tree = renderer.create(<H2 scale={2}>hello world</H2>).toJSON()
 
@@ -167,9 +161,7 @@ describe('styled', () => {
 
     const fontSize = '20px'
 
-    const cssA = css`
-      color: blue;
-    `
+    const cssA = css`color: blue;`
 
     const cssB = css`
       composes: ${cssA};
@@ -186,7 +178,7 @@ describe('styled', () => {
       color: ${p => p.theme.purple};
     `)
 
-    const H2 = styled(H1)`font-size:32px;`
+    const H2 = styled(H1)`font-size: 32px;`
     const refFunction = jest.fn()
     const tree = renderer
       .create(
@@ -203,13 +195,9 @@ describe('styled', () => {
 
   test('higher order component', () => {
     const fontSize = 20
-    const Content = styled('div')`
-      font-size: ${fontSize}px;
-    `
+    const Content = styled('div')`font-size: ${fontSize}px;`
 
-    const squirtleBlueBackground = css`
-      background-color: #7FC8D6;
-    `
+    const squirtleBlueBackground = css`background-color: #7fc8d6;`
 
     const flexColumn = Component => {
       const NewComponent = styled(Component)`
@@ -231,13 +219,9 @@ describe('styled', () => {
   })
 
   test('composes based on props', () => {
-    const cssA = css`
-      color: blue;
-    `
+    const cssA = css`color: blue;`
 
-    const cssB = css`
-      color: green;
-    `
+    const cssB = css`color: green;`
 
     const H1 = styled('h1')`
       composes: ${props => {

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

@@ -3,7 +3,7 @@
 exports[`extractCritical returns static css 1`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}",
-  "html": "<main class=\\"css-Main-161vxfx0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1372824112\\"><img size=\\"30\\" class=\\"css-Image-161vxfx1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-161vxfx1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-Image-161vxfx1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-Main-4wr7f0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1182442712\\"><img size=\\"30\\" class=\\"css-Image-4wr7f1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-4wr7f1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-Image-4wr7f1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",
@@ -40,7 +40,7 @@ Object {
 exports[`extractCritical returns static css 2`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}",
-  "html": "<main class=\\"css-Main-161vxfx0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"1857693660\\"><div data-reactid=\\"2\\">Hello</div></main>",
+  "html": "<main class=\\"css-Main-4wr7f0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"548284210\\"><div data-reactid=\\"2\\">Hello</div></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",
@@ -73,7 +73,7 @@ Object {
 exports[`hydration only rules that are not in the critical css are inserted 1`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}",
-  "html": "<main class=\\"css-Main-161vxfx0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1372824112\\"><img size=\\"30\\" class=\\"css-Image-161vxfx1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-161vxfx1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-Image-161vxfx1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-Main-4wr7f0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1182442712\\"><img size=\\"30\\" class=\\"css-Image-4wr7f1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-4wr7f1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-Image-4wr7f1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",

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

@@ -84,17 +84,19 @@ const getComponents = () => {
     }
   `
 
-  const Page1 = () =>
+  const Page1 = () => (
     <Main>
       <Image size={30} />
       <Image size={100} />
       <Image />
     </Main>
+  )
 
-  const Page2 = () =>
+  const Page2 = () => (
     <Main>
       <div>Hello</div>
     </Main>
+  )
   return { Page1, Page2 }
 }