2 ms·

> Modern popular frontend frameworks will be broken by CSP as they rely heavily on injecting CSS (a concept known as JSS or 'styled components')... Not sure wh

by baddox 7y ago

> Modern popular frontend frameworks will be broken by CSP as they rely heavily on injecting CSS (a concept known as JSS or 'styled components')... Not sure what you mean by this paragraph. JSS and styled components are both specific JS libraries that provide a way to write styles in JS and compile them to normal CSS. They both support normal server-side rendering of CSS that could be included in the HTML like any traditional web page. The general term for this concept is “CSS-in-JS.” The libraries do not rely on inline styles, even though the general term may suggest that. I’m not very familiar with JSS, but styled components absolutely supports building CSS in create-react-app.

LeonM 7y ago
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 https://github.com/cssinjs/jss/blob/master/docs/csp.md