Format markdown files with Prettier (#281)

* Format markdown files with Prettier

* Fix various style issues

* Fix one more case

Author: vlad-zhukov

CONTRIBUTING.md

@@ -16,35 +16,30 @@ yarn test
 
 ## Code
 
-This repository is a monorepo which means it contains multiple NPM
-packages. We use [Yarn workspaces](https://yarnpkg.com/en/docs/workspaces)
-architecture to install dependencies and link local packages between
-each other, and [`lerna`](https://github.com/lerna/lerna) to run
+This repository is a monorepo which means it contains multiple NPM packages. We use
+[Yarn workspaces](https://yarnpkg.com/en/docs/workspaces) architecture to install dependencies and
+link local packages between each other, and [`lerna`](https://github.com/lerna/lerna) to run
 commands for one or more packages from the root directory.
 
-Running `yarn install` in the repository's root directory will install
-the dependencies of all packages and link the packages that depend on
-each other.
+Running `yarn install` in the repository's root directory will install the dependencies of all
+packages and link the packages that depend on each other.
 
-Running `yarn test` will run all packages' tests. Run `yarn test`
-inside a package directory to test this package only.
+Running `yarn test` will run all packages' tests. Run `yarn test` inside a package directory to test
+this package only.
 
-Just edit the code like you always do. Be aware that we automatically
-lint and format code with [eslint](https://eslint.org/) and
-[prettier](https://prettier.io/).
+Just edit the code like you always do. Be aware that we automatically lint and format code with
+[eslint](https://eslint.org/) and [prettier](https://prettier.io/).
 
 ## Share
 
-1. Fork the repository.
-2. Create a new branch from `master`.
-3. Do something awesome.
-4. Add / update tests.
-5. Update changelogs of all packages that you change. Use *Next release*
-   as a version number.
-6. Push them and open a pull request. 
-
+1.  Fork the repository.
+2.  Create a new branch from `master`.
+3.  Do something awesome.
+4.  Add / update tests.
+5.  Update changelogs of all packages that you change. Use _Next release_ as a version number.
+6.  Push them and open a pull request.
 
 ## More Information
 
-* [How to Test Blocks](docs/TESTING.md)
-* [How to Write a Webpack Block](docs/BLOCK-CREATION.md)
+- [How to Test Blocks](docs/TESTING.md)
+- [How to Write a Webpack Block](docs/BLOCK-CREATION.md)

README.md

@@ -3,14 +3,18 @@
 [![Build Status](https://travis-ci.org/andywer/webpack-blocks.svg?branch=master)](https://travis-ci.org/andywer/webpack-blocks)
 [![Gitter chat](https://badges.gitter.im/webpack-blocks.svg)](https://gitter.im/webpack-blocks)
 
-Functional building blocks for your webpack config: easier way to configure webpack and to share configuration between projects.
+Functional building blocks for your webpack config: easier way to configure webpack and to share
+configuration between projects.
 
-Ready to use blocks to configure popular tools like *Babel*, *PostCSS*, *Sass*, *TypeScript*, etc., as well as best practices like extracting CSS — all with just one line of configuration.
+Ready to use blocks to configure popular tools like _Babel_, _PostCSS_, _Sass_, _TypeScript_, etc.,
+as well as best practices like extracting CSS — all with just one line of configuration.
 
->"Finally, webpack config done right. (...) Webpack clearly wants to stay low-level. So it makes total sense to outsource configuring it to well designed blocks instead of copy-paste."
+> "Finally, webpack config done right. (...) Webpack clearly wants to stay low-level. So it makes
+> total sense to outsource configuring it to well designed blocks instead of copy-paste."
 >
->[Dan Abramov](https://github.com/gaearon) via [twitter](https://twitter.com/dan_abramov/status/806249934399881216) (Co-author of Redux, Create React App and React Hot Loader)
-
+> [Dan Abramov](https://github.com/gaearon) via
+> [twitter](https://twitter.com/dan_abramov/status/806249934399881216) (Co-author of Redux, Create
+> React App and React Hot Loader)
 
 ## Table of contents
 
@@ -42,16 +46,16 @@ npm install --save-dev webpack webpack-blocks
 yarn add --dev webpack webpack-blocks
 ```
 
-
 ## Upgrade from v0.4
 
 Check out our [migration guide](./docs/MIGRATION-GUIDE.md) to get started with v1.0 today.
 
-
 ## Example
 
-The following sample shows how to create a webpack config with Babel support, dev server and Autoprefixer.
+The following sample shows how to create a webpack config with Babel support, dev server and
+Autoprefixer.
 
+<!-- prettier-ignore-start -->
 ```js
 const webpack = require('webpack')
 const {
@@ -102,16 +106,17 @@ module.exports = createConfig([
   ]),
   env('production', [
     uglify(),
-    addPlugins([
-      new webpack.LoaderOptionsPlugin({ minimize: true })
-    ])
+    addPlugins([new webpack.LoaderOptionsPlugin({ minimize: true })])
   ])
 ])
 ```
+<!-- prettier-ignore-end -->
 
 See shorthand setters and helpers [documentation](packages/webpack#exports).
 
-All blocks, like `babel` or `postcss` are also available as their own [small packages](./packages), `webpack-blocks` package wraps these blocks, shorthand setters and helpers as a single dependency for convenience.
+All blocks, like `babel` or `postcss` are also available as their own [small packages](./packages),
+`webpack-blocks` package wraps these blocks, shorthand setters and helpers as a single dependency
+for convenience.
 
 ## More examples
 
@@ -151,30 +156,33 @@ Need a custom block? A simple block looks like this:
 ```js
 module.exports = createConfig([
   // ...
-  myCssLoader([ './styles' ])
+  myCssLoader(['./styles'])
 ])
 
-function myCssLoader () {
-  return (context, { merge }) => merge({
-    module: {
-      rules: [
-        Object.assign(
-          {
-            test: /\.css$/,
-            use: [ 'style-loader', 'my-css-loader' ]
-          },
-          context.match     // carries `test`, `exclude` & `include` as set by `match()`
-        )
-      ]
-    }
-  })
+function myCssLoader() {
+  return (context, { merge }) =>
+    merge({
+      module: {
+        rules: [
+          Object.assign(
+            {
+              test: /\.css$/,
+              use: ['style-loader', 'my-css-loader']
+            },
+            context.match // carries `test`, `exclude` & `include` as set by `match()`
+          )
+        ]
+      }
+    })
 }
 ```
 
-If we use `myCssLoader` in `match()` then `context.match` will be populated with whatever we set in `match()`. Otherwise there is still the `test: /\.css$/` fallback, so our block will work without `match()` as well.
-
-Check out the [sample app](./packages/sample-app) to see a webpack config in action or read [how to create your own blocks](./docs/BLOCK-CREATION.md).
+If we use `myCssLoader` in `match()` then `context.match` will be populated with whatever we set in
+`match()`. Otherwise there is still the `test: /\.css$/` fallback, so our block will work without
+`match()` as well.
 
+Check out the [sample app](./packages/sample-app) to see a webpack config in action or read
+[how to create your own blocks](./docs/BLOCK-CREATION.md).
 
 ## Available webpack blocks
 
@@ -192,7 +200,8 @@ Check out the [sample app](./packages/sample-app) to see a webpack config in act
 
 ## [Helpers](./packages/webpack#helpers)
 
-Helpers allow you to structure your config and define settings for particular environments (like `production` or `development`) or file types.
+Helpers allow you to structure your config and define settings for particular environments (like
+`production` or `development`) or file types.
 
 - group
 - env
@@ -201,7 +210,8 @@ Helpers allow you to structure your config and define settings for particular en
 
 ## [Shorthand setters](./packages/webpack#shorthand-setters)
 
-Shorthand setters gives you easier access to common webpack settings, like plugins, entry points and source maps.
+Shorthand setters gives you easier access to common webpack settings, like plugins, entry points and
+source maps.
 
 - addPlugins
 - customConfig
@@ -220,14 +230,16 @@ Shorthand setters gives you easier access to common webpack settings, like plugi
 - [webpack-blocks-happypack](https://github.com/diegohaz/webpack-blocks-happypack) — HappyPack
 - [webpack-blocks-less](https://github.com/kirill-konshin/webpack-blocks-less) — Less
 - [webpack-blocks-purescript](https://github.com/ecliptic/webpack-blocks-purescript) — PureScript
-- [webpack-blocks-server-source-map](https://github.com/diegohaz/webpack-blocks-server-source-map) — source map for server bundle
-- [webpack-blocks-split-vendor](https://github.com/diegohaz/webpack-blocks-split-vendor) — vendor bundle
-- [webpack-blocks-ts](https://github.com/foxbunny/webpack-blocks-ts) — TypeScript using ts-loader instead of awesome-typescript-loader
+- [webpack-blocks-server-source-map](https://github.com/diegohaz/webpack-blocks-server-source-map) —
+  source map for server bundle
+- [webpack-blocks-split-vendor](https://github.com/diegohaz/webpack-blocks-split-vendor) — vendor
+  bundle
+- [webpack-blocks-ts](https://github.com/foxbunny/webpack-blocks-ts) — TypeScript using ts-loader
+  instead of awesome-typescript-loader
 - [webpack-blocks-vue](https://github.com/foxbunny/webpack-blocks-vue) — Vue
 
 Missing something? Write and publish your own webpack blocks!
 
-
 ## Design principles
 
 - Extensibility first
@@ -240,7 +252,8 @@ Missing something? Write and publish your own webpack blocks!
 <details>
 <summary>How to debug?</summary>
 
-In case the webpack configuration does not work as expected you can debug it using [q-i](https://www.npmjs.com/package/q-i):
+In case the webpack configuration does not work as expected you can debug it using
+[q-i](https://www.npmjs.com/package/q-i):
 
 ```js
 const { print } = require('q-i')
@@ -251,12 +264,14 @@ module.exports = createConfig([
 
 print(module.exports)
 ```
+
 </details>
 
 <details>
 <summary>How does env() work?</summary>
 
-`env('development', [ ... ])` checks the `NODE_ENV` environment variable and only applies its contained webpack blocks if it matches the given string.
+`env('development', [ ... ])` checks the `NODE_ENV` environment variable and only applies its
+contained webpack blocks if it matches the given string.
 
 So make sure you set the NODE_ENV accordingly:
 
@@ -268,23 +283,37 @@ So make sure you set the NODE_ENV accordingly:
 }
 ```
 
-If there is no NODE_ENV set then it will treat NODE_ENV as if it was `development`. Use [cross-env](https://github.com/kentcdodds/cross-env) to make it work on all platforms.
+If there is no NODE_ENV set then it will treat NODE_ENV as if it was `development`. Use
+[cross-env](https://github.com/kentcdodds/cross-env) to make it work on all platforms.
+
 </details>
 
 <details>
 <summary>What does defineConstants() do?</summary>
 
-`defineConstants()` is a small convenience wrapper around webpack's [DefinePlugin](https://webpack.github.io/docs/list-of-plugins.html#defineplugin). It is composable and automatically encodes the values. Use it to replace constants in your code by their values at build time.
+`defineConstants()` is a small convenience wrapper around webpack's
+[DefinePlugin](https://webpack.github.io/docs/list-of-plugins.html#defineplugin). It is composable
+and automatically encodes the values. Use it to replace constants in your code by their values at
+build time.
 
-So having a `defineConstants({ 'process.env.FOO': 'foo' })` and a `defineConstants({ 'process.env.BAR': 'bar' })` in your config means the resulting webpack config will contain a single `new webpack.DefinePlugin({ 'process.env.FOO': '"FOO"', 'process.env.BAR': '"BAR"' })`, thus replacing any occurrence of `process.env.FOO` and `process.env.BAR` with the given values.
+So having a `defineConstants({ 'process.env.FOO': 'foo' })` and a
+`defineConstants({ 'process.env.BAR': 'bar' })` in your config means the resulting webpack config
+will contain a single
+`new webpack.DefinePlugin({ 'process.env.FOO': '"FOO"', 'process.env.BAR': '"BAR"' })`, thus
+replacing any occurrence of `process.env.FOO` and `process.env.BAR` with the given values.
+
+You can also use [setEnv](./packages/webpack#setenvconstants-stringobject-function) method to define
+`process.env.*` variables, it’s based on
+[webpack.EnvironmentPlugin](https://webpack.js.org/plugins/environment-plugin/):
+`setEnv({ FOO: 'foo' })`.
 
-You can also use [setEnv](./packages/webpack#setenvconstants-stringobject-function) method to define `process.env.*` variables, it’s based on [webpack.EnvironmentPlugin](https://webpack.js.org/plugins/environment-plugin/): `setEnv({ FOO: 'foo' })`.
 </details>
 
 <details>
 <summary>What does a block look like from the inside?</summary>
 
-A webpack block is *a function and requires no dependencies at all* (🎉🎉), thus making it easy to write your own blocks and share them with your team or the community.
+A webpack block is _a function and requires no dependencies at all_ (🎉🎉), thus making it easy to
+write your own blocks and share them with your team or the community.
 
 Take the `babel` webpack block for instance:
 
@@ -294,23 +323,26 @@ Take the `babel` webpack block for instance:
  * @param {RegExp|Function|string}  [options.exclude]   Directories to exclude.
  * @return {Function}
  */
-function babel (options = { cacheDirectory: true }) {
-  return (context, util) => util.addLoader(
-    Object.assign({
-      // we use a `MIME type => RegExp` abstraction here in order to have consistent regexs
-      test: /\.(js|jsx)$/,
-      exclude: /node_modules/,
-      use: [
-        { loader: 'babel-loader', options }
-      ]
-    }, context.match)
-  )
+function babel(options = { cacheDirectory: true }) {
+  return (context, util) =>
+    util.addLoader(
+      Object.assign(
+        {
+          // we use a `MIME type => RegExp` abstraction here in order to have consistent regexs
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: [{ loader: 'babel-loader', options }]
+        },
+        context.match
+      )
+    )
 }
 ```
 
 Add a README and a package.json and you are ready to ship.
 
 For more details see [How to write a block](./docs/BLOCK-CREATION.md).
+
 </details>
 
 <details>
@@ -337,51 +369,48 @@ module.exports = createConfig([
   customConfig({
     // Add some custom webpack config snippet
     resolve: {
-      extensions: [ '.js', '.es6' ]
+      extensions: ['.js', '.es6']
     }
   })
 ])
 ```
 
 The object you pass to `customConfig()` will be merged into the webpack config using
-[webpack-merge](https://github.com/survivejs/webpack-merge) like any other webpack
-block's partial config.
+[webpack-merge](https://github.com/survivejs/webpack-merge) like any other webpack block's partial
+config.
+
 </details>
 
 <details>
 <summary>How to compose blocks?</summary>
 
-Got some projects with similar, yet not identical webpack configurations? Create a “preset”, a function that returns a `group` of blocks so you can reuse it in multiple projects:
+Got some projects with similar, yet not identical webpack configurations? Create a “preset”, a
+function that returns a `group` of blocks so you can reuse it in multiple projects:
 
 ```js
 const { createConfig, env, group, babel, devServer } = require('webpack-blocks')
 
-function myPreset (proxyConfig) {
-  return group([
-    babel(),
-    env('development', [
-      devServer(),
-      devServer.proxy(proxyConfig)
-    ])
-  ])
+function myPreset(proxyConfig) {
+  return group([babel(), env('development', [devServer(), devServer.proxy(proxyConfig)])])
 }
 
 module.exports = createConfig([
   myPreset({
     '/api': { target: 'http://localhost:3000' }
-  }),
+  })
   // add more blocks here
 ])
 ```
 
-The key feature is the `group()` method which takes a set of blocks and returns a new block that combines all their functionality.
-</details>
+The key feature is the `group()` method which takes a set of blocks and returns a new block that
+combines all their functionality.
 
+</details>
 
 ## Like what you see?
 
-Support webpack-blocks by giving [feedback](https://github.com/andywer/webpack-blocks/issues), publishing new webpack blocks or just by 🌟 starring the project!
-
+Support webpack-blocks by giving [feedback](https://github.com/andywer/webpack-blocks/issues),
+publishing new webpack blocks or just by 🌟 starring the project!
 
 ## License