Vanilla Extract performance w/ @mantine/vanilla-extract

[wenchonglee]

What package has an issue

@mantine/vanilla-extract

Describe the bug

Hi,

I've been planning the migration to v7 for a while and have been torn between CSS Modules and Vanilla Extract.
The biggest concern I had was performance during development (a built app is fine), so I did a bit of experimenting.

This is a repo I quickly wrote to test things out:

• https://github.com/wenchonglee/ve-mantine-benchmark
• Stackblitz link https://stackblitz.com/~/github.com/wenchonglee/ve-mantine-benchmark
  (will time out on Stackblitz because of how long it takes)

TL;DR
There are 3 "Kitchen sink" components, each with a list of 100 components.
This isn't very scientific, all I did was start the dev server and wait for network calls to end in the browser, then record the final timing.

• CSS Modules (500ms)
• Vanilla Extract using the theme from createGlobalTheme (1.5s)
• Vanilla Extract using the theme from @mantine/vanilla-extract (30s)

---

I tried to dig a little bit but I'm not familiar enough with how Vite plugins work to really understand the issue. I'm raising the issue here since it seems importing static values is completely fine.

I'm willing to help investigate but I'll need help understanding the issue.

Thanks in advance!

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.1.5

If possible, please include a link to a codesandbox with the reproduced problem

https://stackblitz.com/~/github.com/wenchonglee/ve-mantine-benchmark

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[rtivital]

Hi @wenchonglee, thanks for researching the issue and providing a reproduction. You are welcome to research the issue further and propose a fix. I do not have much experience with Vanilla Extract plugins, so I won't probably be able to help wih this.

[wenchonglee]

The underlying issue has been identified in this comment vanilla-extract-css/vanilla-extract#1211 (comment).

I'm not sure if you want to consider his suggestions to mantine, but I will probably try modifying esbuildOptions.externals of @vanilla-extract/vite-plugin for a start. Please feel free to close the issue if you also want to leave it at that!

[robmonie]

I'm not sure this is the same issue but we have a Remix app using Mantine and Vanilla Extract. The initial build has always been much slower than another much larger remix app we have that uses chakra (45s vs 3s).

When we tried to upgrade to Mantine 7.3.0, we found that the build would just hang and never complete so we're pretty keen to get to the bottom of this.

[askoufis]

This seems to be less of an issue since we released the new VE vite plugin. Just quickly ran your reproduction with the latest vite and @vanilla-extract/vite-plugin versions (also removed the pinned @vanilla-extract/integration dependency) and the load page load time on my M1 pro was significantly faster, relative to the reproduction (without the plugin patch).