prettier

Author: quantizor

.prettierignore

@@ -1,2 +1,4 @@
 *.json
 *.yml
+dist
+flow-typed

.prettierrc

@@ -1,6 +1,9 @@
 {
+  "arrowParens": "avoid",
+  "printWidth": 100,
+  "jsxBracketSameLine": false,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 100
+  "tabWidth": 2,
+  "trailingComma": "es5"
 }

appveyor.yml

@@ -6,7 +6,7 @@ const tracing = process.argv.some(arg => arg.indexOf('tracing') > -1);
 
 if (tracing) {
   console.log(
-    '\nTracing enabled. (note that this might impact benchmark results, we recommend leaving this turned off unless you need a trace)'
+    '\nTracing enabled. (note that this might impact benchmark results, we recommend leaving this turned off unless you need a trace)',
   );
 }
 
@@ -18,7 +18,7 @@ if (tracing) {
   await page.goto(`file://${path.join(__dirname, './dist/index.html')}`);
 
   console.log(
-    'Running benchmarks... (this may take a minute or two; do not use your machine while these are running!)'
+    'Running benchmarks... (this may take a minute or two; do not use your machine while these are running!)',
   );
   for (var i = 0; i < tests.length; i++) {
     const test = tests[i];

benchmarks/run-headless.js

@@ -8,13 +8,13 @@ type ComponentsType = {
   Box: Component,
   Dot: Component,
   Provider: Component,
-  View: Component
+  View: Component,
 };
 
 type ImplementationType = {
   components: ComponentsType,
   name: string,
-  version: string
+  version: string,
 };
 
 const toImplementations = (context: Object): Array<ImplementationType> =>

benchmarks/src/impl.js

@@ -21,7 +21,7 @@ const createTestBlock = fn => {
       Provider,
       benchmarkType,
       version,
-      name
+      name,
     };
     return testSetups;
   }, {});
@@ -33,14 +33,14 @@ const tests = {
     Component: Tree,
     getComponentProps: () => ({ breadth: 2, components, depth: 7, id: 0, wrap: 1 }),
     Provider: components.Provider,
-    sampleCount: 500
+    sampleCount: 500,
   })),
   'Mount wide tree': createTestBlock(components => ({
     benchmarkType: 'mount',
     Component: Tree,
     getComponentProps: () => ({ breadth: 6, components, depth: 3, id: 0, wrap: 2 }),
     Provider: components.Provider,
-    sampleCount: 500
+    sampleCount: 500,
   })),
   'Update dynamic styles': createTestBlock(components => ({
     benchmarkType: 'update',
@@ -49,8 +49,8 @@ const tests = {
       return { components, s: 200, renderCount: cycle, x: 0, y: 0 };
     },
     Provider: components.Provider,
-    sampleCount: 1000
-  }))
+    sampleCount: 1000,
+  })),
 };
 
 ReactDOM.render(<App tests={tests} />, document.querySelector('.root'));

benchmarks/src/index.js

@@ -1,9 +1,9 @@
 // @flow
-const webpack = require('webpack')
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
-const path = require('path')
+const webpack = require('webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const path = require('path');
 
-const appDirectory = path.resolve(__dirname)
+const appDirectory = path.resolve(__dirname);
 
 module.exports = {
   mode: 'production',
@@ -51,4 +51,4 @@ module.exports = {
       'styled-components': path.resolve('../src'),
     },
   },
-}
+};

benchmarks/webpack.config.js

@@ -1,56 +1,54 @@
-const path = require('path')
-const exec = require('child_process').exec
-const Express = require('express')
-const watch = require('node-watch')
+const path = require('path');
+const exec = require('child_process').exec;
+const Express = require('express');
+const watch = require('node-watch');
 
-import fs from 'fs'
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import { ServerStyleSheet } from '..'
-import getExample from './example'
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from '..';
+import getExample from './example';
 
-const HTML = fs.readFileSync(__dirname + '/index.html').toString()
+const HTML = fs.readFileSync(__dirname + '/index.html').toString();
 
-const srcPath = __dirname.split('/example')[0] + '/src'
+const srcPath = __dirname.split('/example')[0] + '/src';
 
 const hotBuild = () =>
   exec('npm run build:dist', (err, stdout, stderr) => {
-    if (err) throw err
+    if (err) throw err;
     if (stdout) {
-      console.log(`npm run build:dist --- ${stdout}`)
+      console.log(`npm run build:dist --- ${stdout}`);
     }
     if (stderr) {
-      console.log(`npm run build:dist --- ${stderr}`)
+      console.log(`npm run build:dist --- ${stderr}`);
     }
-  })
+  });
 
 watch(srcPath, filename => {
-  console.log(`${filename} file has changed`)
-  hotBuild()
-})
+  console.log(`${filename} file has changed`);
+  hotBuild();
+});
 
-const app = new Express()
+const app = new Express();
 
-app.use(Express.static(__dirname))
-app.use(Express.static('dist'))
+app.use(Express.static(__dirname));
+app.use(Express.static('dist'));
 
 app.get('/with-perf.html', (req, res) => {
-  res.sendFile(path.join(__dirname, 'with-perf.html'))
-})
+  res.sendFile(path.join(__dirname, 'with-perf.html'));
+});
 
 app.get('/ssr.html', (req, res) => {
-  const Example = getExample()
+  const Example = getExample();
 
-  const sheet = new ServerStyleSheet()
-  const html = renderToString(sheet.collectStyles(<Example />))
-  const css = sheet.getStyleTags()
-  res.send(
-    HTML.replace(/<!-- SSR:HTML -->/, html).replace(/<!-- SSR:CSS -->/, css)
-  )
-})
+  const sheet = new ServerStyleSheet();
+  const html = renderToString(sheet.collectStyles(<Example />));
+  const css = sheet.getStyleTags();
+  res.send(HTML.replace(/<!-- SSR:HTML -->/, html).replace(/<!-- SSR:CSS -->/, css));
+});
 
 app.get('/', (req, res) => {
-  res.sendFile(path.join(__dirname, 'index.html'))
-})
+  res.sendFile(path.join(__dirname, 'index.html'));
+});
 
-export default app
+export default app;

example/devServer.js

@@ -1,12 +1,12 @@
-import React from 'react'
-import styled, { createGlobalStyle, keyframes } from '..'
+import React from 'react';
+import styled, { createGlobalStyle, keyframes } from '..';
 
 export default () => {
   const GlobalStyle = createGlobalStyle`
     body {
       font-family: sans-serif;
     }
-  `
+  `;
 
   // Create a <Title> react component that renders an <h1> which is
   // centered, palevioletred and sized at 1.5em
@@ -15,14 +15,14 @@ export default () => {
     text-align: center;
     color: palevioletred;
     animation: ${keyframes`from { opacity: 0; }`} 1s both;
-  `
+  `;
 
   // Create a <Wrapper> react component that renders a <section> with
   // some padding and a papayawhip background
   const Wrapper = styled.section`
     padding: 4em;
     background: papayawhip;
-  `
+  `;
 
   return class Example extends React.Component {
     render() {
@@ -31,7 +31,7 @@ export default () => {
           <GlobalStyle />
           <Title>Hello World, this is my first styled component!</Title>
         </Wrapper>
-      )
+      );
     }
-  }
-}
+  };
+};

example/example.js

@@ -1,17 +1,13 @@
-import app from './devServer'
+import app from './devServer';
 
-const port = 3000
+const port = 3000;
 
 app.listen(port, error => {
   /* eslint-disable no-console */
   if (error) {
-    console.error(error)
+    console.error(error);
   } else {
-    console.info(
-      '🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.',
-      port,
-      port
-    )
+    console.info('🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port);
   }
   /* eslint-enable no-console */
-})
+});

example/startServer.js

@@ -27,6 +27,7 @@
     "flow:watch": "flow-watch",
     "format": "eslint ./**/*.js --fix",
     "lint": "eslint src",
+    "prettier": "prettier */**/*.js --write",
     "prepublishOnly": "run-s build",
     "lint-staged": "lint-staged",
     "dev": "cross-env BABEL_ENV=cjs babel-node example/startServer.js",

package.json

@@ -2,6 +2,7 @@
 /* eslint-disable */
 /* Adapted from nodemon's postinstall: https://github.com/remy/nodemon/blob/master/package.json */
 
-var msg = 'Use styled-components at work? Consider supporting our development efforts at opencollective.com/styled-components';
+var msg =
+  'Use styled-components at work? Consider supporting our development efforts at opencollective.com/styled-components';
 
 console.log(msg);