Breaking change in gatsby-plugin-styled-components@3.0.2

[maxmx]

Description

Updating to 3.0.2 has removed the styled component inlined styles in the head when building the production site.

Steps to reproduce

I created a branch where I pushed the build.

https://github.com/maxmx/mobilo/compare/Build-Bug?expand=1

first commit is built with 3.0.1 second commit is built with 3.0.2

Open the diff of any html file in the second commit to notice what was removed by upgrading to 3.0.2

maxmx/mobilo@88483e6

i.e. All the styled-components generated styles have been removed.

This means that the page is not AMP compatible anymore since there are not more inlined styles in the head.

I think the assumption behind #9922 may be wrong.

You do need every global styles injected in every html files since any of those files can serve as an entry point to the application.

To get the instant load feeling you need all the styles to be inlined in the head. The rest of the styles as you navigate can then be injected by javascript.

You could http-serve the public folder in 3.0.2 and disable javascript in chrome settings, you'll see that now all the styles are not rendered because they rely on the javascript injection.

Expected result

Styles are inlined in the head of the document
i.e. this file built with 3.0.1
https://github.com/maxmx/mobilo/blob/157b51958f000326b5fac6d977acb73660f2def3/public/404/index.html

Actual result

Styles are not inlined in the head anymore
i.e. same file built with 3.0.2
https://github.com/maxmx/mobilo/blob/88483e69fd298cc8b244c54cb8cb904e0ce028dd/public/404/index.html

[maxmx]

@pieh created an issue.

Still think best course of action is to revert #9943 since I think the "bug" it fixes is a feature of gatsby.

[maxmx]

Fixed by #10045