[v2] Migration guide updates

docs/docs/migrating-from-v1-to-v2.md

@@ -9,24 +9,12 @@ In v1, React and ReactDOM were magically resolved. This “feature” has been r
 npm i react react-dom
 ```
 
-or
-
-```bash
-yarn add react react-dom
-```
-
 Depending on the plugins you use, there may be more dependencies you need to install. For example: if you use typography.js, you now also need to install its dependencies.
 
 ```bash
 npm i typography react-typography
 ```
 
-or
-
-```bash
-yarn add typography react-typography
-```
-
 Search for the plugins that you use in [Gatsby’s plugins page](/plugins) and check their installation instructions.
 
 ## Layout component
@@ -180,17 +168,80 @@ export default props => (
 ## Rename `pathContext` to `pageContext`
 Similar to `boundActionCreators` above, `pathContext` is deprecated in favor of `pageContext`.
 
-<!--
-Taken from: https://github.com/gatsbyjs/gatsby/blob/v2/Breaking%20Changes.md
-* [] Remove postcss plugins (cssnext, cssimport) from default css loader config
-* [x] boundActionCreators => actions
-* [x] pathContext => pageContext
-* [] Source & transformer plugins now use UUIDs for ids. If you used glob or regex to query nodes by id then you'll need to query something else.
-* [] Mixed commonjs/es6 modules fail
-* [] Remove explicit polyfill and use the new builtins: usage support in babel 7.
-* [] Changed modifyBabelrc to onCreateBabelConfig
-* [] Changed modifyWebpackConfig to onCreateWebpackConfig
-* [] Inlining CSS changed — remove it from any custom html.js as done automatically by core now.
-* [x] Manually install react and react-dom, along with any dependencies required by your plugins.
-* [x] Layouts have been removed. To achieve the same behavior as v1, you have to wrap your pages and page templates with your own Layout component. Since Layout is a non-page component, making query has to be done with StaticQuery.
--->
+## Rename responsive image queries
+
+The `sizes` and `resolutions` queries are deprecated in v2. These queries have been renamed to `fluid` and `fixed` to make them easier to understand.
+
+Before:
+
+```jsx
+const Example = ({ data }) => {
+  <div>
+    <Img sizes={data.foo.childImageSharp.sizes} />
+    <Img resolutions={data.bar.childImageSharp.resolutions} />
+  </div>
+}
+
+export default Example
+
+export const pageQuery = graphql`
+  query IndexQuery {
+    foo: file(relativePath: { regex: "/foo.jpg/" }) {
+      childImageSharp {
+        sizes(maxWidth: 700) {
+          ...GatsbyImageSharpSizes_tracedSVG
+        }
+      }
+    }
+    bar: file(relativePath: { regex: "/bar.jpg/" }) {
+      childImageSharp {
+        resolutions(width: 500) {
+          ...GatsbyImageSharpResolutions_withWebp
+        }
+      }
+    }
+  }
+`
+```
+
+After:
+
+```jsx{2-3,13-14,20-21}
+const Example = ({ data }) => {
+  <div>
+    <Img fluid={data.foo.childImageSharp.fluid} />
+    <Img fixed={data.bar.childImageSharp.fixed} />
+  </div>
+}
+
+export default Example
+
+export const pageQuery = graphql`
+  query IndexQuery {
+    foo: file(relativePath: { regex: "/foo.jpg/" }) {
+      childImageSharp {
+        fluid(maxWidth: 700) {
+          ...GatsbyImageSharpFluid_tracedSVG
+        }
+      }
+    }
+    bar: file(relativePath: { regex: "/bar.jpg/" }) {
+      childImageSharp {
+        fixed(width: 500) {
+          ...GatsbyImageSharpFixed_withWebp
+        }
+      }
+    }
+  }
+`
+```
+
+Further examples can be found in the [Gatsby Image docs](https://github.com/gatsbyjs/gatsby/tree/d0e29272ed7b009dae18d35d41a45e700cdcab0d/packages/gatsby-image).
+
+## Manually specify postcss plugins
+
+Gatsby v2 removed `postcss-cssnext` and `postcss-import` from the default postcss setup.
+
+Use `modifyWebpackConfig` to specify your postcss plugins.
+
+Note: there will be a `postcss` plugin that allows you to configure postcss from a standard postcss config file. [Follow this discussion on issue 3284](https://github.com/gatsbyjs/gatsby/issues/3284).