[RFC] Zero-runtime CSS-in-JS implementation
### What's the problem? 🤔 This RFC is a proposal for implementing a zero-runtime CSS-in-JS solution to be used in a future major version of Material UI and Joy UI. TLDR: We are planning to develop a custom implementation of a zero-runtime CSS-in-JS library with ideas from [Linaria](https://github.com/callstack/linaria) and [Compiled](https://compiledcssinjs.com/). With the rising popularity of React Server Components (RSCs), it’s important that we support this new pattern for all components that are compatible. This mainly applies to layout components such as Box, Typography, etc., as they are mostly structural and the only blocker for RSC compatibility is the use of Emotion. Another aspect is the use of themes. Currently, they need to be passed through a Provider component (especially if an application is using multiple themes) which uses React Context. RSCs do not support states/contexts. In the last major version, we moved the styling solution to Emotion for more performant dynamic styles. Since then, Internet Explorer has been deprecated, enabling us to go all in on CSS Variables. We already use this with an optional provider ([CSS theme variables - MUI System](https://mui.com/system/experimental-api/css-theme-variables/)). ### What are the requirements? ❓ - Minimal runtime for peak performance and negligible JS bundle size as far as the runtime is concerned. - Supporting RSC as part of the styling solution means no reliance on APIs unavailable to server component
Posted by brijeshb42 on Jul 24, 2023, 1:29 PM
Tags
Related issues
- I've been thinking about this question a lot recently and have asked my friends for their opinions.
- > There's really no reason console games of that era needed, or even could benefit from 6 cores First: One problem of the PS3 was that i...
- Remote session/task persistence: Detach, preserve, and reattach all active tasks, terminals, and extension processes in VS Code Remote
- Not only Eddie, their account control panels and site in general look like something from the 90s, and it seriously hampers their business.
- Signal don't want you to build 3rd party clients and integrations, they are another fully centralised product meant to capture and lock u...
- The page keeps crashing for me.
Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments
ux (Network)
I've been thinking about this question a lot recently and have asked my friends for their opinions.
> There's really no reason console games of that era needed, or even could benefit from 6 cores First: One problem of the PS3 was that i...
Remote session/task persistence: Detach, preserve, and reattach all active tasks, terminals, and extension processes in VS Code Remote
Not only Eddie, their account control panels and site in general look like something from the 90s, and it seriously hampers their business.
Signal don't want you to build 3rd party clients and integrations, they are another fully centralised product meant to capture and lock u...
The page keeps crashing for me.
Server-side pagination to make ArgoCD UI a rocket
[RFC] Zero-runtime CSS-in-JS implementation
[RFC] Zero-runtime CSS-in-JS implementation
### What's the problem? 🤔 This RFC is a proposal for implementing a zero-runtime CSS-in-JS solution to be used in a future major version of Material UI and Joy UI. TLDR: We are planning to develop a custom implementation of a zero-runtime CSS-in-JS library with ideas from [Linaria](https://github.com/callstack/linaria) and [Compiled](https://compiledcssinjs.com/). With the rising popularity of React Server Components (RSCs), it’s important that we support this new pattern for all components that are compatible. This mainly applies to layout components such as Box, Typography, etc., as they are mostly structural and the only blocker for RSC compatibility is the use of Emotion. Another aspect is the use of themes. Currently, they need to be passed through a Provider component (especially if an application is using multiple themes) which uses React Context. RSCs do not support states/contexts. In the last major version, we moved the styling solution to Emotion for more performant dynamic styles. Since then, Internet Explorer has been deprecated, enabling us to go all in on CSS Variables. We already use this with an optional provider ([CSS theme variables - MUI System](https://mui.com/system/experimental-api/css-theme-variables/)). ### What are the requirements? ❓ - Minimal runtime for peak performance and negligible JS bundle size as far as the runtime is concerned. - Supporting RSC as part of the styling solution means no reliance on APIs unavailable to server component
Comments (0)
No comments yet. Start the discussion.