Using vanilla-extract as the styling engine for Material-UI

Question

Some background

Our team has been using Material UI for quite some time, and we love it. With the release of Material UI v5, we took the time to check which styling solution we would use next since JSS is being abandoned by the MUI team.

We ended up following a discussion from the folks at Shopify. They made a very detailed comparison of styling solutions, and ended up with vanilla-extract as their tool of choice. Strong TypeScript support and, foremost, the zero-runtime-approach, got us convinced.

Sadly, vanilla-extract had not been considered by the MUI core team in their decision-making.

Question at hand

Material UI, according to their docs, enables the user to use various styling solutions. The styling engine used under the hood can be configured, as roughly described here.

Questions:

• is it (conceptually) possible and (pragmatically) reasonable to use vanilla-extract for:
  • styling MUI components?
  • using it as the style engine underlying MUI?
• where would sprinkles come into play?
• what would be the concrete steps for implementing this approach?
• has somebody done this already, and would be willing to share their code? 😇

Contrary to common practice, I haven't really tried anything yet, implementation-wise. From my understanding, this would mean creating something along the lines of mui-styled-engine (wraps emotion) and mui-styled-engine-sc (wraps styled-components). Since that seemed pretty involved to me, I thought I'd ask first.

Answer 1

If your main concern is build time css, you can try to use PigmentCSS instead of vanilla extract.

Blog: https://mui.com/blog/introducing-pigment-css/

Migration: https://next.mui.com/material-ui/migration/migrating-to-pigment-css/

(This could have been comment but I do not have enough reputation)