[Zalastax]

A big issue I see with CSS-in-JS at this moment is server-side-rendering and caching. You started working on a babel-transform for extracting static styles but seem to have changed your mind about actually extracting that to a css-file[1]. Requiring a JS-parser to apply the styles is the wrong approach but might be a stepping stone as it's probably an easier problem to solve. Separating JS and CSS should improve performance somewhat as the browsers can run the scripting and styling engine separately. In the end I'd like a transformation that creates one CSS-file per JS-file so that common chunks can be combined by webpack, gaining high cache hit percentage on sites that uses reloads. Transformations should also be applied to the JS so that SSR doesn't have to calculate styles each time.

[1]: https://github.com/styled-components/styled-components/issue...

[mxstbr]

Would you mind chiming into that issue with what you imagine? I hadn't thought about caching yet, that's a good use-case for a separate CSS file!

We also almost have a proper server-side rendering API[0], in case you haven't seen that PR before. Should be released very soon!

[0]: https://github.com/styled-components/styled-components/pull/...

[Zalastax]

I think the work you are doing right can be a stepping stone for something great! The advantages of more traditional methods of creating CSS are ahead-of-time-compilation, splitting/bundling (combine common chunks to achieve low cache invalidation, low transfer size, and high cache hits with few files), and no waiting for the JS-engine to parse and convert your internal data structure. SPA-SSR is in general a lot more CPU-heavy than the more traditional approach of instantiating templates. We need to find ways of minimising the redundant calculations performed by the server to regain the performance we lost in the transition from templates to SPA-SSR. A source code transformation that extracts CSS and removes static JS is one such step. The SSR API is a good start but completely trashes cache + creates a large .html each time you reload. The .html returned can most often not be cached so we should strive to minimise its size. The problem of caching/minimising server load is not the easiest to solve but we should be long on our way if we can analyse/signal what parts are static and which are dynamic.