RFC: CSS Modules #410
RFC: CSS Modules #410
Conversation
auto-assign
bot
requested review from
dkarnutsch,
fraxachun,
nsams and
thomasdax98
| color: var(--palette-primary-main); | ||
| border: 1px solid var(--palette-primary-main); | ||
|
|
||
| &:hover { |
There was a problem hiding this comment.
who or what does make this working? Or is this valid css in 2024?
There was a problem hiding this comment.
Yes: https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector
However, it doesn't meet our support requirements on Can I use... to be honest, I haven't thought about this too much.
There was a problem hiding this comment.
we could add postcss....
is something like autoprefixer needed nowadays? how does styled-components handle this?
There was a problem hiding this comment.
we could add postcss....
Yes, if we decide to switch, we should invest some time into improving the developer experience.
is something like autoprefixer needed nowadays? how does styled-components handle this?
I don't know. styled-components does it out-of-the-box: https://styled-components.com/docs/basics#motivation
There was a problem hiding this comment.
Importing scss files instead of css files seems to work out of the box, this would allow nested selectors independent of browser support.
There was a problem hiding this comment.
Switched to Sass: 78a44b4
|
Interesting would also be an example where a component has multiple elements, not just a root |
Here you go: 98158fd |
| } | ||
| } | ||
|
|
||
| @media (min-width: 900px) { |
There was a problem hiding this comment.
I guess there is not way to avoid hardcoding the breakpoints
There was a problem hiding this comment.
I tried using CSS variables, but that didn't work
There was a problem hiding this comment.
Unfortunately css variables are not supported in media queries.
Using this PostCSS plugin would allow defining custom media queries though that can be used as variables: https://www.npmjs.com/package/postcss-custom-media
There was a problem hiding this comment.
I used Sass variables: e347a2b
However, the need to import the partial Sass file isn't great.
site/src/app/global.css
Outdated
| --palette-primary-main: #1e88e5; | ||
| --palette-primary-dark: #155fa0; | ||
| --palette-primary-contrast-text: #ffffff; | ||
|
|
||
| --palette-gray-50: #fafafa; | ||
| --palette-gray-200: #eeeeee; | ||
| --palette-gray-300: #e0e0e0; | ||
| --palette-gray-400: #bdbdbd; |
There was a problem hiding this comment.
I'd omit the palette- prefix, --primary-main or --gray-50 es precise enough and easier to write imo.
Added types with a small util here: 5378f9d 
|
|
We want to replace styled-components with another styling solution to support Server Components. This PR demonstrates how some components, which have dynamic styles, could be implemented using CSS Modules.
Advantages of CSS Modules over CSS-in-JS
Disadvantages