Overview
The proposal presents a new CSS-in-JS solution focused on minimal runtime overhead and compatibility with emerging React Server Components. It seeks to replace Emotion with a system that is robust and performs well on the server side.
Key Aspects of the RFC
Problem Statement
The proposal identifies the compatibility issue with React Server Components when using Emotion, a popular CSS-in-JS library, especially for structural components like Box and Typography. Since RSCs don't support states or contexts, current theming practices that rely on React Context are incompatible.
Requirements
The new CSS-in-JS solution must have minimal runtime to enhance performance and a small JS bundle size. It must also work with RSCs without dependency on unsupported APIs, support theme variables, and facilitate easy migration with minimal breaking changes. Additionally, the new solution should allow developers to easily navigate from the browser DevTools to the corresponding style definitions in the source code.
Options Considered
The proposal reviews several zero-runtime solutions including vanilla-extract, Linaria, PandaCSS, UnoCSS, and Stitches, identifying the strengths and limitations of each in the context of the requirements. For instance, vanilla-extract does not support theming out of the box, and Linaria requires separate tooling for theming and global styles.
Proposed Solution
The proposed solution involves adopting a compiled CSS-in-JS solution like linaria or compiled that supports the styled syntax and the sx prop. The proposed API includes support for theming, a styled utility from @mui/material, and the use of createTheme for defining component default properties and styling overrides. The API is designed to be intuitive, aligning with existing usage patterns within the Material UI ecosystem.
Example API Usage
The API allows for defining styled components with support for theming, variants, and default variants. It also enables conditional styling based on props and is designed to declaratively handle CSS generation and class name assignment.
Alternative Implementations
The proposal outlines alternative implementations that provide tailored solutions for different build tools, such as Vite and Next.js, through specific plugins, ensuring compatibility and optimized configurations for each environment.
Known Downsides
Some downsides of the first proposal are mentioned, including the need for additional configuration in next.config.js or vite.config.ts, as opposed to a simple install-and-use approach.
Resources and Benchmarks
The proposal provides references to playground apps created with Next.js and Vite to demonstrate the solution's feasibility and performance. It also refers to related GitHub issues that further discuss the implementation details and community feedback.
Conclusion
This RFC showcases a thoughtful approach to selecting a CSS-in-JS solution that will meet the future needs of Material UI and Joy UI, emphasizing performance, compatibility, and minimal disruption. The extensive review of available solutions and the detailed proposed API highlight a commitment to improving the development experience while adapting to the evolving React landscape.
Tags:
- #CSSinJS
- #ReactServerComponents
- #MaterialUI
- #Performance