diff --git a/.prettierignore b/.prettierignore index 2e2602c0..ee107827 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,4 @@ *.json *.yml +dist +flow-typed diff --git a/.prettierrc b/.prettierrc index cbd1fe37..742d2f09 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,9 @@ { + "arrowParens": "avoid", + "printWidth": 100, + "jsxBracketSameLine": false, "semi": true, "singleQuote": true, - "trailingComma": "es5", - "printWidth": 100 + "tabWidth": 2, + "trailingComma": "es5" } diff --git a/appveyor.yml b/appveyor.yml deleted file mode 100644 index 6eda6300..00000000 --- a/appveyor.yml +++ /dev/null @@ -1,27 +0,0 @@ -version: "{build}" -branches: - only: - - master -skip_tags: true -build: off -clone_depth: 1 -shallow_clone: true -matrix: - fast_finish: true -environment: - matrix: - - nodejs_version: 8 -init: - - git config --global core.autocrlf input -install: - - ps: 'Install-Product node $env:nodejs_version x64' - - set CI=true - - yarn -cache: - - '%LOCALAPPDATA%/Yarn' -test_script: - - node --version - - yarn --version - - yarn build - - yarn flow - - yarn test diff --git a/benchmarks/run-headless.js b/benchmarks/run-headless.js index ffd65edd..350de644 100644 --- a/benchmarks/run-headless.js +++ b/benchmarks/run-headless.js @@ -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]; diff --git a/benchmarks/src/impl.js b/benchmarks/src/impl.js index fae2d0e5..06e25879 100644 --- a/benchmarks/src/impl.js +++ b/benchmarks/src/impl.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 => diff --git a/benchmarks/src/index.js b/benchmarks/src/index.js index 88525816..3d75f04f 100644 --- a/benchmarks/src/index.js +++ b/benchmarks/src/index.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(, document.querySelector('.root')); diff --git a/benchmarks/webpack.config.js b/benchmarks/webpack.config.js index cde8d2c6..42b5f95b 100644 --- a/benchmarks/webpack.config.js +++ b/benchmarks/webpack.config.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'), }, }, -} +}; diff --git a/example/devServer.js b/example/devServer.js index d1283aae..0f7e4b99 100644 --- a/example/devServer.js +++ b/example/devServer.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()) - const css = sheet.getStyleTags() - res.send( - HTML.replace(//, html).replace(//, css) - ) -}) + const sheet = new ServerStyleSheet(); + const html = renderToString(sheet.collectStyles()); + const css = sheet.getStyleTags(); + res.send(HTML.replace(//, html).replace(//, 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; diff --git a/example/example.js b/example/example.js index ab23e98f..55fdaaf0 100644 --- a/example/example.js +++ b/example/example.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 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! - ) + ); } - } -} + }; +}; diff --git a/example/startServer.js b/example/startServer.js index 4b544024..d555630b 100644 --- a/example/startServer.js +++ b/example/startServer.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 */ -}) +}); diff --git a/package.json b/package.json index 6294259c..d6212a57 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/postinstall.js b/scripts/postinstall.js index 2022d5f7..9fd144b1 100755 --- a/scripts/postinstall.js +++ b/scripts/postinstall.js @@ -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);