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

I have been programming with Material UI, every day, for the past year and have nothing but very positive comments to make about it. The team is excellent, the code is extremely reliable, and the https://github.com/cssinjs/jss just works. Its simple, easy to use, and not having to deal with global stylesheets is a pleasure. And they are just getting started. I look forward to the future with this React toolkit. An incredible effort has been made by the team members.

Yep, styled-components is another good take on the same idea as CSS Modules. More alternatives include: - Aphrodite (https://github.com/khan/aphrodite) - Radium (https://github.com/FormidableLabs/radium) - JSS (https://github.com/cssinjs/jss)

I was referring to CSS-in-JS and what is coming out of it. https://speakerdeck.com/vjeux/react-css-in-js Not all of them use inline styles and a lot are library agnostic. Here are just some of the ones I have played with, plenty more exist. https://github.com/rofrischmann/fela https://github.com/FormidableLabs/radium https://github.com/Khan/aphrodite https://github.com/threepointone/glamor https://github.com/MicheleBertoli/css-in-js https://github.com/styled-components/styled-components https://github.com/css-modules/css-modules https://github.com/cssinjs/jss https://github.com/smyte/jsxstyle https://github.com/rtsao/styletron

Hi I think its great that you try new ideas in this area. Don't listen to those who didn't event try to create better tools, but rather just crying around that all the "css in js" solutions are bad, ignoring the fact that the current traditional CSS is bad for lots of cases too. I am biased because I am author if jss https://github.com/jsstyles/jss What I understood from descartes is that you are trying to make styles dynamic by allowing listeners. So that when user interaction happens, styles can change accordingly, while the logic for it is contained in the style itself. I had the same idea in jss too and ended up with this api for dynamic styles: https://github.com/jsstyles/jss/blob/master/docs/js-api.md#s... I am still looking for a way how to make this idea more usable.

I've been using JSS for everything. It makes the most sense to me. It's minimal in size and function to the point that any extra functionality can be quickly and easily added via `jss.use(plugin)`. And it's maximally modular. Every class is namespaced, and exporting everything to a single sheet for production builds is super simple, as it should be. https://github.com/jsstyles/jss