[feat]: create gatsby-plugin-aphrodite

[DSchau]

Summary

Aphrodite is a great plugin for CSS in JS w/ React. Let's create a plugin so that others can get some SSR benefits and CSS hydration with Gatsby.

Motivation

• We have a number of other plugins which implement similar functionality, e.g. gatsby-plugin-emotion, gatsby-plugin-styled-components, etc.
• We don't want to prohibit anyone from using Gatsby because their preferred styling solution isn't supported, and Gatsby is extremely pluggable to enable this :)

General Approach

• Create packages/gatsby-plugin-aphrodite (see previously mentioned CSS in JS libraries for more info/boilerplate)
• Implement the SSR API from Aphrodite
• PR and experience the ❤️ from all of those who use and like Aphrodite

[thisizkp]

I would love to work on this.

[DSchau]

@thisizkp we would love if you did!

Let any of us know @gatsbyjs/core if we can help with anything!

[ivandevp]

Hey @thisizkp , how are you going with this feat? I would like to help you if possible 😃

[thisizkp]

@ivandevp thanks for asking, I've kind of stuck at some error.

I think I need to use wrapRootElement instead of replaceRenderer. Will spend some more time debugging and learning more about it, if couldn't will let you know :)

Found the issue, fixed it and raised a PR.

[DSchau]

Done in #8883, which has (unfortunately) since been reverted.

This plugin already exists, see gatsby-plugin-aphrodite.

Thanks for the interest here, and go use that plugin if you're interested. Thanks to everyone who contributed/replied!