Avoid SCSS in TSX if You Want a Dynamic Theme
Related repo: https://github.com/Vandivier/ladderly...
SCSS is awesome and in Angular these days it's basically assumed.
In React these days some people use it, but tbh it seems to be a minor thing. Why? Are React devs bad?
No. Three reasons to avoid SCSS in React:
1. SCSS recompilation on the client is a low-support pattern which is non-performant and likely to conflict with other portions of your app stack.
2. Configuring it with TSX is a pain.
3. There is no loss of client-side performance or functionality on a server-side rendered or statically rendered site anyway, and these are ideal rendering techniques.
1 is the biggest deal to me. That is, if you want a dynamic theme at run time on the client then avoid SCSS with React.
CSS-in-JS, with or without CSS modules, works just fine. You can import and export JS variables and string fragments to essentially share style like a SCSS mixin. You maybe lose a bit of CSS dev tooling but really not much - below extension is a VS Code syntax highlighter for css-in-js / css-in-ts:
https://github.com/Microsoft/vscode/i...
If you don't want a dynamic theme feature for your users, then developer convenience in the long term might eventually outweigh 2 and 3, but I don't see them outweighing it in the short term bc the set up is nontrivial. Even then it's questionable bc most React frameworks and apps don't support this OOTB so reference code, guidance, support, etc, is sparse.
