CSS or SCSS styles in components are not loading on the initial page load.

[rzzo]

Describe the bug
CSS or SCSS styles in components are not loading on the initial page load. They will load after you refresh the page.

My work around so far:

• Removed the service worker
• Moved all component/page styles into global scss files that load from _index.svelte
  <style lang="scss" global> @import '../styles/global.scss'; @import "../styles/_t.scss"; </style>

I am not sure what combination of what is even being tied to this issue. I have tried upgrading and downgrading every dependency.

Logs
No errors showing in the logs

To Reproduce
https://github.com/rzzo/sapper-broken-styles

To reproduce I have a component "RecentNews.svelte"
The component should be setting the background of that div to darkred
This can be seen on the home page and the 2 posts should have a darkred background (not blue)
on refresh of the page its darkred

Another test is on the /news page those should also be darkred (not white)
this is another component with the darkred styles named "NewsBanner"

Expected behavior
All styles should apply any time the page/component loads.

Stacktraces
No stacktraces

Information about your Sapper Installation:

System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 2.13 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.7.0 - ~/.nvm/versions/node/v14.7.0/bin/node
npm: 6.14.7 - ~/.nvm/versions/node/v14.7.0/bin/npm
Browsers:
Chrome: 86.0.4240.55
Chrome Canary: 87.0.4277.0
Firefox: 82.0
Firefox Developer Edition: 65.0
Safari: 14.0
Safari Technology Preview: 14.0.1
npmPackages:
rollup: ^1.20.0 => 1.32.1
sapper: ^0.28.9 => 0.28.9
svelte: ^3.28.0 => 3.28.0

• Chrome, safari, edge

• Your hosting environment (i.e. Local, GCP/AWS/Azure, Vercel/Begin, etc...)

• Exported (npm run export) app

Severity
Almost blocking my usage of Sapper entirely, I need the ability to scope my styles.

That said I have a workaround that seems to be working for now, and I love Sapper/Svelte to much to bounce :)

Additional context

[benmccann]

For some reason you're not getting inject_styles and so it only works on initial page load and client-side navigation is not injecting the link to the stylesheet.

[benmccann]

Confirmed over Discord that upgrading to Rollup 2 fixed it. It seems like perhaps the inject_styles CSS plugin only works with Rollup 2