Gatsby bug

New classNames are not being applied on the client after a server render.

Live version http://mikelambert.me/gatsby-bug/

gatsbyjs/gatsby#14601

Correct behavior when developing

1. Run gatsby develop
2. Open http://localhost:8000 in a browser wider than 600px.
3. Notice that the background is blue and the text reads CONTAINER--LARGE (should be blue).
4. Resize the browser to less than 600px and notice that the background is now green and the text reads container--small (should be green).
5. 👍🏻

Wrong behavior for production

1. Run gatsby build && gatsby serve
2. Open http://localhost:9000 in a browser wider than 600px.
3. Notice that the background is green (wrong) and the text reads CONTAINER--LARGE (should be blue).
   • The text was server rendered as container--small (should be green) (view source to see), and is correctly being updated to CONTAINER--LARGE (should be blue)
   • The color/class is incorrect! The incorrect className of container--small is in the DOM. However, notice the correct className of container--large is logged to the console.
4. 👎🏻
5. Resize the browser back up to more than 600px and notice that the background is now blue and the text reads CONTAINER--LARGE (should be blue) (correct, back in sync).