[legacy-framework] Recipe: Styled Components

[kevinlangleyjr]

What are the changes and their implications?

This PR adds a recipe to integrate styled-components.

Within the recipe, we're using the same method of adding a customized getInitialProps as the material-ui recipe, here.

I also think this would be greatly benefited by changing the logic to to check if the method already exists and modify it, instead of always adding it and assuming that it hasn't already been added.

But I also think it's a good idea to provide a recipe for this sooner rather than later. When we build out the logic to conditionally adjust the getInitialProps method, we can use the same logic here and in the material-ui recipe.

Checklist

• Changes covered by tests (tests added if needed)
• PR submitted to blitzjs.com for any user facing changes

[Skn0tt]

Hi @kevinlangleyjr! Nice work, I like it.

In Next.js's official styled-components example, styleSheet.seal() gets called:

https://github.com/vercel/next.js/blob/33255b7f4ed6dd2608d6a6590d137353b6f19f67/examples/with-styled-components/pages/_document.js#L27

Is there a reason this is not included in this recipe?

Also, babel-plugin-styled-components is installed but not added to babel.config.js. Take a look at how the emotion / reflexjs recipes do this, I think you can adapt their code.

[kevinlangleyjr]

Doh! You're right @Skn0tt - I forgot about the sheet.seal() call and adding the babel plugin, sorry about that.

My latest commits correctly add the try/finally, sheet.seal(), and the babel plugin.

Let me know if there is anything else needed to get this merged 🙂

[Skn0tt]

@allcontributors please add kevinlangleyjr for code

[allcontributors]

@Skn0tt

@kevinlangleyjr already contributed before to code