jss

I confused styled components with JSS. JSS is a library used by popular UX libraries, most notably Material-UI. The problem is that JSS injects the CSS dynamically at runtime. There seems to be no real solution to extract the CSS into a .css file at compile time. The only solution that the JSS developers suggest [0] is using server-side rendering to inject a nonce into the HTML script tag to bypass CSP. But I think that requiring server-side rendering for a client-side rendered framework is totally backwards. The whole reason why I use single page client side rendered applications is so I can deploy on a CDN. [0] https://github.com/cssinjs/jss/blob/master/docs/csp.md

Be very aware that most popular CSS-in-JS libraries (such as JSS) will completely break CSP (Content Security Policy). The default reaction is usually "Just allow unsafe-inline in your CSP header", but this is dangerous advise as it will disable CSP! I've even seen 'experts' advising to use webpack to set a static value as a CSP nonce during build-time... If you want to use CSS-in-JS, you'll either have to use server-side rendering to inject CSP nonces in your index.htm [0], or set up a complex build system to extract the CSS from your JS so you can serve them as .css files. Using server-side rendering to inject nonces into your single-page client side rendered webpage is such an ugly hack. I'd prefer the second solution but I have not been able to find a solution like that, nor do I have the time to dive into the webpack rabbit-hole to d

> You used a framework that specifically uses CSS in JS and tried to use it as a server-side rendered website. No, I DONT want server side rendering. That's the whole point. I want an application that renders client side, but without the dynamic CSS injection that breaks CSP. The only current solution that is being offered [1] would be using server-side rendering to inject CSP nonces into your client-side rendered app... it's madness. It should be possible to compile the CSS-in-JSS into a .css file and serve that css file statically. [1] https://github.com/cssinjs/jss/blob/master/docs/csp.md