New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RFC: Static CSS Extraction #859
Comments
After some research, Compiled CSS-in-JS by the Atlassian team seems to be an amazing solution. |
Would love this @segunadebayo, think this could be really really beneficial. I haven't played with it in depth, but there could be something interesting looking into https://github.com/seek-oss/treat, they seem have a good solution in how they use it for their Braid design system. |
I've been thinking about what the ideal design system stack would look like. The dark mode requirements are an obvious one but they seem to elude that this is going to be the preferred way going forward and considering their investment in React it may be a good idea to look into the reasons for their choices in relation to your vision for Chakra UI. @segunadebayo Maybe a dumb question but what was the motivation in not using CSS variables from the start as it seems the project this is based on does so by default? (And why it is completely SSR compatible) |
Thanks for all the comments so far. We'll look into this sometime in the future. |
Hi @segunadebayo, any updates on this topic? I'm considering chakra-ui for a new project but I'm wondering whether or not it's compatible with Linaria. I don't want to use Emotion due to performance implications. |
Background:
Given the current API of Chakra UI, we're looking to transition Chakra to my ideal vision after the stable TypeScript release.
One of the downsides of CSS-in-JS, particularly the styled-system approach is the runtime performance issues. Here's what I mean:
This process happens very often during the lifetime of any Chakra component, and performance issues might become noticeable with very fast, frequent updates.
Ideas on how to solve this
Static CSS Extraction: Figure out how to generate static CSS files based on the style props at build time, so there's almost zero runtime cost.
Prefer CSS variables to Context: Because CSS variables work like React context, we can simply switch the current implementation to write theme specs to
:root
via css variables. Then update styled-system functions.Ideally, we'd love to leverage existing innovations like Linaria and Otion so we're going to explore those first.
Ending remarks
Figuring out Static CSS extraction will be the next innovation in CSS-in-JS and will help improve adoption at scale.
I'd love to hear what you think, and if you're inclined to solve this problem, please comment below let's collaborate.
Cheers.
The text was updated successfully, but these errors were encountered: