Skip to content

Major release upgrading to React-Router 2.0 + full support for Less/Sass/PostCSS

Compare
Choose a tag to compare
@KyleAMathews KyleAMathews released this 22 Feb 03:15
· 21413 commits to master since this release

Hi folks,
Finished off a major new release of Gatsby in time for ReactConf 馃帀

New features

  • Support Less/Sass/Postcss out of the box. CSS files are processed using the excellent cssnext.
  • Support extracting and minifying css on production builds to an external styles.css file.
  • React-Router 2.0 馃帀

Internals work

  • We're using Webpack Hot Middleware + react-transform-hmr now instead of react-hot-loader.
  • All remaining Coffeescript files have been converted to JS.

Breaking changes.

React Router has made two major releases since Gatsby was first built with a ton of nice improvements. But as Gatsby uses React Router heavily, its breaking changes often cause breaking changes within Gatsby.

The main change is what props are passed to _template and wrapper components. Previously each component was passed the current page data and a pages array of all pages. Now this information is put onto the route prop passed in by React Router.

Also where previously React Router provided a <RouteHandler/> component which rendered the children components in _template files, you should now replace those with {this.props.children}.

Upgrading

  • Install new packages: npm install --save react-router@latest lodash@latest && npm install --save-dev babel-plugin-react-transform@1.1.1 react-transform-catch-errors react-transform-hmr redbox-react
  • Adjust templates and wrappers (and other components as necessary) to account for the React Router changes.
  • onRouteChange is now passed the location object from History.