Test separating CSS files from bundle

The case from Slack:

1. with http/2, requests can take place async so it's best to have a bunch of medium sized things instead of one huge thing
2. any change to the app changes the bundle hash which breaks caching. Theoretically, if CSS was separate, changing app functionality wouldn't affect the CSS hash and would allow caching
3. allows us to analyze CSS bundle size separately
4. separate css files are generally faster from the benchmarks I can find.

It'll be supported once https://github.com/webpack-contrib/style-loader/pull/406 is published to the registry (and not, just on the master branch which also serves as their public documentation because that's just a great setup)

I think the real blocker on this is that css is all via styled-components right now which means it's not actually css and it's generated in JS

There's definitely ways to extract them - but yeah, that doesn't make it easier.

I not sure that's quite the case, but I could be wrong.

Here's a couple articles on how styled does it's magic (I'll post them in the VH slack for additional educational reading); all three cover how styled works rather than how to use it, and the second one starts roughly where the first ends and the third provides a general overview followed by more under-the-hood stuff that isn't covered by the first two: https://mxstbr.blog/2016/11/styled-components-magic-explained/ https://medium.com/@_jmoller/how-does-styled-components-work-under-the-hood-28cb035d48c6 https://medium.com/styled-components/how-styled-components-works-618a69970421

Most of the styling we use in vaken uses value interpolation pretty heavily so I don't think we'd be able to extract it without ripping out styled into dynamic imports everywhere.

found https://github.com/styled-components/styled-components/issues/1018#issuecomment-316827497