This topic is important. I put it as a separate issue because indeed we must agree at team level. Given the short timeline nd as suggested in the originl review i create this as a separate important issue that we can work on in parallel.
CSS in Fred
A small comment on how we do CSS in Fred.
Now that I see the full picture, I realize this PR moves the whole app to CSS modules, which is totally valid, just something I think we should align on as a team since it's a foundational choice. I don't know why, I just thought CSS modules would be only used in the core design system component you were adding.
Personally, I would have leaned toward Tailwind CSS as our styling solution for a new open source project like Fred. It's become the de facto standard for modern projects, has great tooling support (especially with coding agents), and is well known across the dev community. My real personal preference goes to styled-component, but the star history and npm download trends make it pretty clear that Tailwind won the CSS wars.
Image of github star history showing lots of css soltuions. A big red curve above all others show Tailwind. Second is styled-component
But as we want to define our own design system, maybe tailwind is not open enough (I read that) and our needs are more niche. I think we could explore more modern solution than sass to help us, with better type support and a better DX (in vscode it was kind of bad) ? Here are some tools/framework I heard about we could look into:
vanilla extract: really close to css modules, but in Typescript (so types, IDE support... One less language to know)
panda css: css in js, a bit more opinionated than vanilla extract
unocss: light framework to create your own small tailwind (if we want to go this way)
That said, the work here is solid and I don't want to block on a stack-level discussion. I'd suggest we open a separate ticket to align on the CSS direction for the project.
In the meantime, a few tools that would pair nicely with the current CSS modules approach if we stick with it:
typed-css-modules / typed-scss-modules -> adds type safety when referencing class names
clsx -> clean conditional class name handling
This topic is important. I put it as a separate issue because indeed we must agree at team level. Given the short timeline nd as suggested in the originl review i create this as a separate important issue that we can work on in parallel.
CSS in Fred
A small comment on how we do CSS in Fred.
Now that I see the full picture, I realize this PR moves the whole app to CSS modules, which is totally valid, just something I think we should align on as a team since it's a foundational choice. I don't know why, I just thought CSS modules would be only used in the core design system component you were adding.
Personally, I would have leaned toward Tailwind CSS as our styling solution for a new open source project like Fred. It's become the de facto standard for modern projects, has great tooling support (especially with coding agents), and is well known across the dev community. My real personal preference goes to styled-component, but the star history and npm download trends make it pretty clear that Tailwind won the CSS wars.
Image of github star history showing lots of css soltuions. A big red curve above all others show Tailwind. Second is styled-component
But as we want to define our own design system, maybe tailwind is not open enough (I read that) and our needs are more niche. I think we could explore more modern solution than sass to help us, with better type support and a better DX (in vscode it was kind of bad) ? Here are some tools/framework I heard about we could look into:
vanilla extract: really close to css modules, but in Typescript (so types, IDE support... One less language to know)
panda css: css in js, a bit more opinionated than vanilla extract
unocss: light framework to create your own small tailwind (if we want to go this way)
That said, the work here is solid and I don't want to block on a stack-level discussion. I'd suggest we open a separate ticket to align on the CSS direction for the project.
In the meantime, a few tools that would pair nicely with the current CSS modules approach if we stick with it:
typed-css-modules / typed-scss-modules -> adds type safety when referencing class names
clsx -> clean conditional class name handling