chore: format files with prettier (#740)

package.json

@@ -24,6 +24,7 @@
     "build": "babel src --out-dir dist",
     "test": "ava",
     "lint": "eslint ./src",
+    "format": "prettier --write \"./{src,test}/**/*.{js,css}\"",
     "prepublishOnly": "yarn build && yarn test && yarn lint --quiet"
   },
   "husky": {

src/lib/stylesheet.js

@@ -3,7 +3,10 @@ Based on Glamor's sheet
 https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js
 */
 
-const isProd = typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production'
+const isProd =
+  typeof process !== 'undefined' &&
+  process.env &&
+  process.env.NODE_ENV === 'production'
 const isString = o => Object.prototype.toString.call(o) === '[object String]'
 
 export default class StyleSheet {

test/fixtures/different-jsx-ids.js

@@ -4,14 +4,22 @@ const otherColor = 'green'
 const A = () => (
   <div>
     <p>test</p>
-    <style jsx>{`p { color: ${color} }`}</style>
+    <style jsx>{`
+      p {
+        color: ${color};
+      }
+    `}</style>
   </div>
 )
 
 const B = () => (
   <div>
     <p>test</p>
-    <style jsx>{`p { color: ${otherColor} }`}</style>
+    <style jsx>{`
+      p {
+        color: ${otherColor};
+      }
+    `}</style>
   </div>
 )
 

test/fixtures/external-stylesheet-global.js

@@ -2,7 +2,7 @@ import styles, { foo as styles3 } from './styles'
 
 const styles2 = require('./styles2')
 
-export default () =>
+export default () => (
   <div>
     <p>test</p>
     <div>woot</div>
@@ -17,3 +17,4 @@ export default () =>
       {styles}
     </style>
   </div>
+)

test/fixtures/external-stylesheet-multi-line.js

@@ -1,9 +1,8 @@
 import styles from './styles'
 
-export default () =>
+export default () => (
   <div>
     <p>test</p>
-    <style jsx>
-      {styles}
-    </style>
+    <style jsx>{styles}</style>
   </div>
+)

test/fixtures/global.js

@@ -2,11 +2,14 @@ const Test = () => (
   <div>
     <style jsx global>{`
       body {
-        color: red
+        color: red;
       }
 
-      :hover { color: red; display: flex;
-        animation: foo 1s ease-out }
+      :hover {
+        color: red;
+        display: flex;
+        animation: foo 1s ease-out;
+      }
 
       div a {
         display: none;
@@ -19,4 +22,8 @@ const Test = () => (
   </div>
 )
 
-const Test2 = () => <style global jsx>{'p { color: red }'}</style>
+const Test2 = () => (
+  <style global jsx>
+    {'p { color: red }'}
+  </style>
+)

test/fixtures/ignore.js

@@ -8,4 +8,3 @@ export default () => (
     `}</style>
   </div>
 )
-

test/fixtures/mixed-global-scoped.js

@@ -1,10 +1,17 @@
-const Test = () => <style global jsx>{'p { color: red }'}</style>
+const Test = () => (
+  <style global jsx>
+    {'p { color: red }'}
+  </style>
+)
 
 export default () => (
   <div>
     <p>test</p>
-    <style jsx global>{`body { background: red }`}</style>
+    <style jsx global>{`
+      body {
+        background: red;
+      }
+    `}</style>
     <style jsx>{'p { color: red }'}</style>
   </div>
 )
-

test/fixtures/multiple-jsx.js

@@ -4,7 +4,9 @@ const attrs = {
 
 const Test1 = () => (
   <div>
-    <span {...attrs} data-test="test">test</span>
+    <span {...attrs} data-test="test">
+      test
+    </span>
     <Component />
     <style jsx>{`
       span {
@@ -28,7 +30,7 @@ const Test3 = () => (
 )
 
 export default class {
-  render () {
+  render() {
     return (
       <div>
         <p>test</p>

test/fixtures/nested-style-tags.js

@@ -1,6 +1,6 @@
 import styles from './styles'
 
-export default () =>
+export default () => (
   <div>
     <span>
       test
@@ -18,8 +18,9 @@ export default () =>
       }
     `}</style>
   </div>
+)
 
-export const Test = () =>
+export const Test = () => (
   <div>
     <span>
       test
@@ -46,7 +47,6 @@ export const Test = () =>
         color: red;
       }
     `}</style>
-    <style jsx>
-      {styles}
-    </style>
+    <style jsx>{styles}</style>
   </div>
+)

test/fixtures/non-styled-jsx-style.js

@@ -1,7 +1,7 @@
 export default () => (
   <div>
     <p>woot</p>
-    <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}></style>
+    <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }} />
     <style jsx>{'p { color: red }'}</style>
   </div>
 )

test/fixtures/not-styled-jsx-tagged-templates.js

@@ -9,7 +9,11 @@ const bar = css`
 `
 export const uh = bar
 
-export const foo = css`div { color: ${color}}`
+export const foo = css`
+  div {
+    color: ${color};
+  }
+`
 
 export default css`
   div {
@@ -25,6 +29,8 @@ const Title = styled.h1`
   font-size: 50px;
 `
 
-const AnotherTitle = Title.extend`color: blue;`
+const AnotherTitle = Title.extend`
+  color: blue;
+`
 
 export const Component = () => <AnotherTitle>My page</AnotherTitle>

test/fixtures/styles-external-invalid.js

@@ -2,11 +2,20 @@ import css from 'styled-jsx/css'
 
 const color = 'red'
 
-export const foo = css`div { color: ${color}}`
+export const foo = css`
+  div {
+    color: ${color};
+  }
+`
 
 const props = { color: 'red ' }
 
 export default css`
-  div { font-size: 3em; color: ${props.color} }
-  p { color: ${this.props.color};}
+  div {
+    font-size: 3em;
+    color: ${props.color};
+  }
+  p {
+    color: ${this.props.color};
+  }
 `

test/fixtures/styles-external-invalid2.js

@@ -2,9 +2,17 @@ import css from 'styled-jsx/css'
 
 const color = 'red'
 
-export const foo = css`div { color: ${color}}`
+export const foo = css`
+  div {
+    color: ${color};
+  }
+`
 
 export default css`
-  div { font-size: 3em }
-  p { color: ${props.color};}
+  div {
+    font-size: 3em;
+  }
+  p {
+    color: ${props.color};
+  }
 `

test/fixtures/styles.js

@@ -22,7 +22,11 @@ const a = global`
 
 export const uh = bar
 
-export const foo = css`div { color: ${color}}`
+export const foo = css`
+  div {
+    color: ${color};
+  }
+`
 
 css.resolve`
   div {

test/fixtures/styles2.js

@@ -1,5 +1,7 @@
 import css from 'styled-jsx/css'
 
 module.exports = css`
-  div { font-size: 3em }
+  div {
+    font-size: 3em;
+  }
 `