fix(gatsby-plugin-styled-components): fix global styles pollution

[LoicMahieu]

Fix #9922

ServerStyleSheet should be specific to each pages in order to not pollutes the other. Theses changes removes the "global" stylesheet and use the pathname for identify each pages.

---

Just a quick note for my first PR here: thanks to every contributors for this fantastic project! 👍

[pieh]

Thanks @LoicMahieu!

Validated locally, and did small change to use Map instead of object and delete sheet once it's no longer needed (to not block memory). Will merge as soon as tests passes again

[gatsbot]

Holy buckets, @LoicMahieu — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[pieh]

Published gatsby-plugin-styled-components@3.0.2

[maxmx]

@LoicMahieu @pieh release 3.0.2 breaks release 3.0.1

In 3.0.1 I build my site, each html page has some amount of style tags being injected directly in the head which allows for a nice flash-less

Update to 3.0.2 I started noticing some styles flashes in the pages in the built site meaning that the styles are being loaded after the page has rendered.

I opened the html files, there are no styles inlined in the head anymore thus causing the style flash.

Downgrading to 3.0.1 fixed the problem.

Suggesting a revert of this PR and re-release as it introduced major breaking changes.

[pieh]

@maxmx can you share your repo or create minimal reproduction repo for this?

[maxmx]

Not in front of a computer atm so I can’t make a minimal repro but here is the repo https://github.com/maxmx/mobilo

Build to see styles in each html files, then update to 3.0.2 to trigger the bug

[pieh]

@maxmx Hey, so I cloned your repo and updated gatsby-plugin-styled-components to 3.0.2 and I'm not sure what style flashes you have in mind - it looked really similiar with 3.0.1 and 3.0.2 to me - please provide more context

[maxmx]

@pieh 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.

[pieh]

@maxmx I finally find out why I couldn't reproduce - you need to update gatsby version (and I need to add proper peerDependency to gatsby-plugin-styled-components). Your yarn.lock "locks" on gatsby@2.0.31 and we need at least gatsby@2.0.32 - please update and let me know if this fixes for you. In meantime I will update peerDeps for gatsby-plugin-styled-components

[maxmx]

Great thanks @pieh !