IssueRaiser

[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

Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments

ux (Network)

[RFC] Zero-runtime CSS-in-JS implementation

brijeshb42Jul 24, 2023, 1:29 PM

### 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.

Comment on this issue